:root{

    --ease:cubic-bezier(.22,.61,.36,1);

    --duration-fast:.35s;

    --duration:.6s;

    --duration-slow:1s;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-40px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(40px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

@keyframes scaleIn{

    from{

        opacity:0;
        transform:scale(.92);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes zoomImage{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s var(--ease),

        transform .8s var(--ease);

    will-change:transform,opacity;

}

.reveal.is-visible{

    opacity:1;

    transform:none;

}

.reveal-left{

    opacity:0;

    transform:translateX(-60px);

    transition:.8s var(--ease);

}

.reveal-left.is-visible{

    opacity:1;

    transform:none;

}

.reveal-right{

    opacity:0;

    transform:translateX(60px);

    transition:.8s var(--ease);

}

.reveal-right.is-visible{

    opacity:1;

    transform:none;

}

.reveal-scale{

    opacity:0;

    transform:scale(.94);

    transition:.8s var(--ease);

}

.reveal-scale.is-visible{

    opacity:1;

    transform:scale(1);

}

.fade{

    animation:fade .8s ease both;

}

@keyframes portfolioImageIn{

    from{
        opacity:.8;
        transform:scale(1.04);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.portfolio-card.reveal{

    transition:
        opacity .8s var(--ease),
        transform .8s var(--ease);
    will-change:opacity,transform;

}

.portfolio-card.reveal:nth-child(1){ transition-delay:0s; }
.portfolio-card.reveal:nth-child(2){ transition-delay:.08s; }
.portfolio-card.reveal:nth-child(3){ transition-delay:.16s; }
.portfolio-card.reveal:nth-child(4){ transition-delay:.24s; }
.portfolio-card.reveal:nth-child(5){ transition-delay:.32s; }
.portfolio-card.reveal:nth-child(6){ transition-delay:.40s; }

.portfolio-card.reveal.is-visible img{

    animation:portfolioImageIn .9s var(--ease) both;
    animation-delay:.12s;

}

.fade-up{

    animation:fadeUp .8s var(--ease) both;

}

.fade-down{

    animation:fadeDown .8s var(--ease) both;

}

.fade-left{

    animation:fadeLeft .8s var(--ease) both;

}

.fade-right{

    animation:fadeRight .8s var(--ease) both;

}

.scale-in{

    animation:scaleIn .8s var(--ease) both;

}

.delay-1{

    animation-delay:.1s;
    transition-delay:.1s;

}

.delay-2{

    animation-delay:.2s;
    transition-delay:.2s;

}

.delay-3{

    animation-delay:.3s;
    transition-delay:.3s;

}

.delay-4{

    animation-delay:.4s;
    transition-delay:.4s;

}

.delay-5{

    animation-delay:.5s;
    transition-delay:.5s;

}

.delay-6{

    animation-delay:.6s;
    transition-delay:.6s;

}

.image-reveal{

    overflow:hidden;

}

.image-reveal img{

    transform:scale(1.08);

    transition:transform 1.4s var(--ease);

}

.image-reveal.is-visible img{

    transform:scale(1);

}

.text-reveal{

    overflow:hidden;

}

.text-reveal span{

    display:block;

    transform:translateY(120%);

    transition:1s var(--ease);

}

.text-reveal.is-visible span{

    transform:translateY(0);

}

.hover-lift{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.hover-scale{

    overflow:hidden;

}

.hover-scale img{

    transition:transform .8s ease;

}

.hover-scale:hover img{

    transform:scale(1.05);

}

.link-underline{

    position:relative;

}

.link-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:100%;

    height:1px;

    background:currentColor;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.link-underline:hover::after{

    transform:scaleX(1);

}

.btn{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.btn:active{

    transform:scale(.97);

}

html{

    scroll-behavior:smooth;

}

.header{

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

.header.scrolled{

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 8px 40px rgba(0,0,0,.06);

}

.nav__link{

    position:relative;

    transition:color .3s ease;

}

.nav__link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--color-gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.nav__link:hover::after,
.nav__link.active::after{

    transform:scaleX(1);

}

.mobile-menu{

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:.35s ease;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    transform:none;

}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{

    transition:.35s ease;

}

.nav-toggle.active span{

    background:transparent;

}

.nav-toggle.active span::before{

    transform:translateY(8px) rotate(45deg);

}

.nav-toggle.active span::after{

    transform:translateY(-8px) rotate(-45deg);

}

.hero__title span{

    display:block;

    overflow:hidden;

}

.hero__title span i{

    display:block;

    font-style:normal;

    transform:translateY(110%);

    animation:heroLine .9s var(--ease) forwards;

}

.hero__title span:nth-child(2) i{

    animation-delay:.15s;

}

.hero__title span:nth-child(3) i{

    animation-delay:.30s;

}

.hero__title span:nth-child(4) i{

    animation-delay:.45s;

}

@keyframes heroLine{

    to{

        transform:translateY(0);

    }

}

.hero__text{

    animation:fadeUp 1s .65s both;

}

.hero__actions{

    animation:fadeUp 1s .8s both;

}

.hero__image{

    transform:scale(1.08);

    opacity:0;

    animation:

        heroImage 1.4s .6s forwards;

}

@keyframes heroImage{

    to{

        transform:scale(1);

        opacity:1;

    }

}

.btn{

    overflow:hidden;

    position:relative;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.18);

    transform:translateX(-110%);

    transition:.6s ease;

}

.btn:hover::before{

    transform:translateX(110%);

}

.card,
.service-card,
.project-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.card:hover,
.service-card:hover{

    transform:translateY(-10px);

}

.project-card{

    overflow:hidden;

}

.project-card img{

    transition:transform .9s ease;

}

.project-card:hover img{

    transform:scale(1.05);

}

.service-card__icon{

    transition:

        transform .35s ease,

        background .35s ease;

}

.service-card:hover .service-card__icon{

    transform:rotate(-8deg) scale(1.08);

}

.cta-box{

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    inset:-50%;

    background:

        radial-gradient(circle,
        rgba(255,255,255,.08),
        transparent 60%);

    animation:rotateGlow 12s linear infinite;

}

@keyframes rotateGlow{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.scroll-indicator{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.75rem;

}

.scroll-indicator__line{

    width:1px;

    height:70px;

    background:#ddd;

    overflow:hidden;

    position:relative;

}

.scroll-indicator__line::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:22px;

    background:var(--color-gold);

    animation:scrollIndicator 2s infinite;

}

@keyframes scrollIndicator{

    0%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(70px);

    }

}

.social__link{

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease;

}

.social__link:hover{

    transform:translateY(-5px);

}

.footer a{

    transition:.3s ease;

}

.footer a:hover{

    color:white;

}

.accordion__content{

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.input,
.textarea{

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}

.input:focus,
.textarea:focus{

    transform:translateY(-2px);

}

.gallery img{

    transition:

        transform .7s ease,

        filter .7s ease;

}

.gallery img:hover{

    transform:scale(1.04);

    filter:brightness(1.05);

}

.wave{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    height:42px;

}

.wave span{

    display:block;

    width:3px;

    border-radius:10px;

    background:var(--color-gold);

    animation:wave 1.4s ease-in-out infinite;

}

.wave span:nth-child(1){height:12px;animation-delay:0s;}
.wave span:nth-child(2){height:22px;animation-delay:.08s;}
.wave span:nth-child(3){height:30px;animation-delay:.16s;}
.wave span:nth-child(4){height:18px;animation-delay:.24s;}
.wave span:nth-child(5){height:34px;animation-delay:.32s;}
.wave span:nth-child(6){height:20px;animation-delay:.40s;}
.wave span:nth-child(7){height:28px;animation-delay:.48s;}
.wave span:nth-child(8){height:16px;animation-delay:.56s;}

@keyframes wave{

    0%,100%{

        transform:scaleY(.45);

        opacity:.5;

    }

    50%{

        transform:scaleY(1);

        opacity:1;

    }

}

.parallax{

    overflow:hidden;

}

.parallax img{

    transition:transform .25s linear;

    will-change:transform;

}

.counter{

    transition:transform .35s ease;

}

.counter:hover{

    transform:translateY(-4px);

}

.modal{

    transition:

        opacity .35s ease,

        visibility .35s ease;

}

.modal__window{

    transform:translateY(30px) scale(.96);

    transition:.35s ease;

}

.modal.active .modal__window{

    transform:none;

}

.back-top{

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}

.back-top:hover{

    transform:translateY(-6px);

}

.cookie{

    transform:translateY(120px);

    opacity:0;

    transition:.45s ease;

}

.cookie.active{

    transform:none;

    opacity:1;

}

.page-loader{

    position:fixed;

    inset:0;

    background:#FAFAF8;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:opacity .5s ease;

}

.page-loader.hidden{

    opacity:0;

    pointer-events:none;

}

.marquee{

    overflow:hidden;

    white-space:nowrap;

}

.marquee__track{

    display:inline-flex;

    gap:5rem;

    animation:marquee 30s linear infinite;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.divider-wave{

    position:relative;

    overflow:hidden;

}

.divider-wave::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--color-gold),
        transparent
    );

    animation:dividerMove 6s linear infinite;

}

@keyframes dividerMove{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}

.mask-reveal{

    position:relative;

    overflow:hidden;

}

.mask-reveal::before{

    content:"";

    position:absolute;

    inset:0;

    background:#FAFAF8;

    transform:translateX(0);

    transition:1.2s var(--ease);

    z-index:2;

}

.mask-reveal.is-visible::before{

    transform:translateX(101%);

}

.section{

    transition:background .5s ease;

}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.image-reveal,
.mask-reveal,
.hero__image{

    will-change:transform,opacity;

}

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

@media print{

    *{

        animation:none !important;

        transition:none !important;

    }

}