@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	--color-text:#4c2d4e;
	--color-bg:#eae5e0;
	--color-link:#9cac6d;
	--color-link-hover:#fff;
	--color-label:#9cac6d;
	--color-text-alt:#575757;
	--color-caption:#fff;
	--font-primary:"Space Grotesk", sans-serif;
	--font-accent: "Caveat", cursive;
}


body {margin:0;color:var(--color-text);background-color:var(--color-bg);font-family:var(--font-primary);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.uk-section-default { background-color: transparent !important; padding: 0;}
.uk-container {max-width: 100%; padding: 0; position: relative;}
.uk-navbar {padding-left: 20px; padding-right: 20px;}
.tm-page {position:relative;z-index:1;}
.tm-header-overlay {height: 0;}
h1 {font-family:var(--font-primary);font-weight:300;color:var(--color-text);font-size:clamp(2rem,4vw,3rem);}
h1 strong {font-family:var(--font-accent);font-size:clamp(2rem,4vw,3.5rem);}
.copyright {opacity: 0;position:absolute;z-index:999999;bottom:50px;right:30px;margin:0 auto;max-width:1200px;line-height:1.1;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;}
.uk-navbar-item li a {opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;}
.uk-navbar-item li a.visible {opacity:1;transform:translateY(0);}
.copyright.visible {opacity:1;transform:translateY(0);}

.contact-circle {position:relative;width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin: 50px;}
.contact-svg {position:absolute;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%,-50%);animation:rotateCircle 10s linear infinite;}
.contact-svg text {fill:currentColor;text-transform:uppercase;}
.contact-icon {position:relative;width:54px;height:54px;background:rgba(255,255,255,0.12);backdrop-filter:blur(6px);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:5;transition:transform .3s ease;}
.contact-circle:hover .contact-icon {transform:scale(1.1);}
@keyframes rotateCircle {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}}

/*HOMEPAGE*/
.home .intro-animation {height:100vh;display:flex;align-items:center;justify-content:center;position:relative;}
.home .intro-logo {max-height:300px;width:auto;position:relative;z-index:20;pointer-events:auto;}
.home .intro-logo svg {width:300px;height:auto;}
.home .intro-logo svg .path {fill:none;stroke:#4c2d4e;stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2s linear forwards;}
.random-line {position:absolute;background:#fff;z-index:10;opacity:0;}
@keyframes draw {0%{stroke-dashoffset:1000;}100%{stroke-dashoffset:0;}}
#intro-lines {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;}
.svg-line {fill:none;stroke:#fff;stroke-width:2;opacity:1;}

.home h1 {position:absolute;z-index:999999;bottom:100px;left:0;right:0;margin:0 auto;max-width:1200px;text-transform:uppercase;line-height:1.1;text-align:center;}
.home h1.uk-text-center {opacity:0;visibility:hidden;}

.h1-animated .char {display:inline-block;transform:translateY(14px);transition:transform .26s cubic-bezier(.25,.6,.3,1.05);}
.h1-animated .char.in {transform:translateY(0);}
.h1-animated strong {position:relative;font-family:"Caveat",cursive;font-weight:600;}
.h1-animated strong .char {transform:translateY(10px);transition:transform .26s cubic-bezier(.25,.6,.3,1.05);}
.h1-animated strong .char.in {transform:translateY(0);}
.h1-animated strong::after {content:"";position:absolute;left:0;bottom:-0.08em;width:0;height:2px;background:currentColor;transform-origin:left center;transition:width .5s cubic-bezier(.16,1,.3,1);}
.h1-animated strong.word-in::after {width:100%;}
.h1-animated {opacity:0;display:inline-block;}
.h1-animated.visible {opacity:1;}
.h1-animated a {position:relative;color:inherit;text-decoration:none;display:inline-block;transition:color .25s ease;}
.h1-animated a::after {content:"";position:absolute;left:0;bottom:-0.06em;width:0;height:2px;background:currentColor;transform-origin:left center;transition:width .5s cubic-bezier(.16,1,.3,1);}
.h1-animated a.link-in::after {width:100%;}

.h1-animated a::before {content:"";position:absolute;left:0;bottom:-0.06em;width:0;height:2px;background:#ff4f9a;transform-origin:left center;transition:width .35s cubic-bezier(.16,1,.3,1),transform .35s ease,opacity .35s ease;z-index:5;}
.h1-animated a:hover::before {width:100%;opacity:1;transform:translateY(-2px);}

/*PAGES*/
.portfolio {max-width: 1600px; margin: 0 auto;}
.intro-logo svg .path {animation:draw 2s linear forwards;}