/* ======================================================
   CYGIXN
   Luxury Animations
====================================================== */

/* ---------- Loader ---------- */

.loader{

    position:fixed;
    inset:0;

    background:#050505;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:99999;

    animation:loaderFade .8s ease forwards;
    animation-delay:1.4s;

}

.loader-logo{

    font-size:clamp(2.5rem,5vw,4rem);

    letter-spacing:.45em;

    font-weight:700;

    animation:logoReveal 1s ease;

}

/* ---------- Hero ---------- */

.hero-small{

    opacity:0;

    animation:fadeUp .9s ease forwards;

    animation-delay:1.0s;

}

.hero h1{

    opacity:0;

    transform:translateY(50px);

    animation:fadeUp 1s ease forwards;

    animation-delay:1.2s;

}

.hero p{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp 1s ease forwards;

    animation-delay:1.4s;

}

.hero-buttons{

    opacity:0;

    animation:fadeUp 1s ease forwards;

    animation-delay:1.6s;

}

/* ---------- Navbar ---------- */

.navbar{

    animation:navbarDrop .9s ease;

}

/* ---------- Buttons ---------- */

.primary-btn{

    overflow:hidden;

    position:relative;

}

.primary-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.primary-btn:hover::before{

    left:130%;

}

.secondary-btn:hover{

    transform:translateY(-3px);

}

/* ---------- Scroll ---------- */

.scroll-indicator{

    animation:float 2.6s ease-in-out infinite;

}

/* ---------- Projects ---------- */

.project{

    transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .6s;

}

.project:hover{

    transform:translateY(-10px);

    box-shadow:

    0 40px 80px rgba(0,0,0,.35);

}

/* ---------- Section Reveal ---------- */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

    opacity 1s ease,

    transform 1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Fade Image ---------- */

.image-mask{

    overflow:hidden;

}

.image-mask img{

    transform:scale(1.15);

    transition:1.4s;

}

.image-mask.active img{

    transform:scale(1);

}

/* ---------- Underline ---------- */

.nav-links a::after{

    transition:.35s cubic-bezier(.22,.61,.36,1);

}

/* ---------- Contact ---------- */

.contact h2{

    animation:textFloat 7s ease-in-out infinite;

}

/* ======================================================
   KEYFRAMES
====================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes navbarDrop{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes loaderFade{

    to{

        opacity:0;

        visibility:hidden;

    }

}

@keyframes logoReveal{

    from{

        opacity:0;

        letter-spacing:1em;

        transform:scale(.9);

    }

    to{

        opacity:1;

        letter-spacing:.45em;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

@keyframes textFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ---------- Smooth Hover ---------- */

.project img,
.primary-btn,
.secondary-btn,
.contact a,
.service{

    will-change:transform;

}

/* ---------- Fade Utility ---------- */

.fade{

    opacity:0;

}

.fade.active{

    opacity:1;

    transition:1s;

}