/* =========================================================
   FRAMEssOR
   CINEMATIC ANIMATIONS
========================================================= */


/* =========================================================
   PAGE LOADER
========================================================= */

.page-loader {
    animation: loaderFadeOut 0.8s ease forwards;
    animation-delay: 2.8s;
}

.loader-line span {
    animation: loaderProgress 2.5s var(--ease) forwards;
}

.loader-counter {
    animation: loaderCounter 2.5s ease forwards;
}


/* =========================================================
   GENERAL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   HERO ANIMATIONS
========================================================= */

.hero-eyebrow {
    opacity: 0;
    transform: translateY(25px);
    animation: heroReveal 1s var(--ease) forwards;
    animation-delay: 3.05s;
}

.hero-title {
    opacity: 0;
    transform: translateY(70px);
    animation: heroTitleReveal 1.2s var(--ease) forwards;
    animation-delay: 3.15s;
}

.hero-description {
    opacity: 0;
    transform: translateY(30px);
    animation: heroReveal 1s var(--ease) forwards;
    animation-delay: 3.35s;
}

.hero-buttons {
    opacity: 0;
    transform: translateY(25px);
    animation: heroReveal 1s var(--ease) forwards;
    animation-delay: 3.5s;
}

.hero-visual {
    opacity: 0;
    transform: translateX(80px) rotate(3deg);
    animation: heroVisualReveal 1.4s var(--ease) forwards;
    animation-delay: 3.25s;
}

.hero-frame {
    animation: heroFloat 7s ease-in-out infinite;
    animation-delay: 4.8s;
}

.hero-frame-content::after {
    content: "";
    position: absolute;
    width: 180%;
    height: 1px;
    left: -40%;
    top: 50%;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(-25deg);
    animation: scanLine 5s ease-in-out infinite;
}

.hero-stats {
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 1s var(--ease) forwards;
    animation-delay: 3.7s;
}

.scroll-indicator {
    opacity: 0;
    animation: heroReveal 1s var(--ease) forwards;
    animation-delay: 3.9s;
}


/* =========================================================
   BUTTON MOTION
========================================================= */

.btn,
.nav-cta,
.cta-button {
    position: relative;
    overflow: hidden;
}

.btn::before,
.nav-cta::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
        width 0.6s var(--ease),
        height 0.6s var(--ease);
}

.btn:hover::before,
.nav-cta:hover::before {
    width: 350px;
    height: 350px;
}

.btn > *,
.nav-cta > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-link {
    transition:
        color 0.3s ease,
        transform 0.3s var(--ease);
}

.nav-link:hover {
    transform: translateY(-2px);
}


/* =========================================================
   SECTION REVEALS
========================================================= */

.intro-section,
.services-section,
.work-section,
.process-section,
.cta-section {
    overflow: hidden;
}


/* =========================================================
   SERVICE CARD ANIMATION
========================================================= */

.service-card {
    transform: translateY(0);
    transition:
        transform 0.5s var(--ease),
        background 0.5s var(--ease),
        color 0.5s var(--ease);
}

.service-card:hover {
    transform: translateY(-8px);
}

.service-icon {
    transition:
        transform 0.5s var(--ease),
        background 0.4s ease;
}

.service-card:hover .service-icon {
    transform: rotate(8deg) scale(1.08);
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-number {
    transition:
        transform 0.4s var(--ease),
        color 0.4s ease;
}

.service-card:hover .service-number {
    transform: translateX(8px);
}


/* =========================================================
   PORTFOLIO IMAGE
========================================================= */

.project-image {
    transform: translateZ(0);
}

.project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 80%
        );
    transform: translateX(-120%);
    transition: transform 1s var(--ease);
}

.project:hover .project-image::after {
    transform: translateX(120%);
}

.project-placeholder {
    transition:
        transform 0.8s var(--ease),
        opacity 0.8s ease;
}

.project:hover .project-placeholder {
    transform: scale(1.08);
    opacity: 0.45;
}


/* =========================================================
   PROCESS ITEMS
========================================================= */

.process-item {
    position: relative;
    transition:
        padding-left 0.5s var(--ease),
        background 0.5s ease;
}

.process-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--black);
    transition: width 0.7s var(--ease);
}

.process-item:hover {
    padding-left: 15px;
}

.process-item:hover::before {
    width: 100%;
}


/* =========================================================
   CTA
========================================================= */

.cta-button {
    animation: ctaPulse 4s ease-in-out infinite;
}

.cta-button:hover {
    animation-play-state: paused;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-column a {
    position: relative;
    transition:
        transform 0.3s var(--ease),
        color 0.3s ease;
}

.footer-column a:hover {
    transform: translateX(6px);
}


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

@keyframes loaderProgress {

    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }

}


@keyframes loaderCounter {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


@keyframes loaderFadeOut {

    0% {
        opacity: 1;
        visibility: visible;
    }

    85% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}


@keyframes heroReveal {

    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroTitleReveal {

    0% {
        opacity: 0;
        transform: translateY(70px);
        clip-path: inset(100% 0 0 0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }

}


@keyframes heroVisualReveal {

    0% {
        opacity: 0;
        transform: translateX(80px) rotate(7deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(3deg);
    }

}


@keyframes heroFloat {

    0% {
        transform: rotate(3deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-12px);
    }

    100% {
        transform: rotate(3deg) translateY(0);
    }

}


@keyframes scanLine {

    0% {
        transform: translateY(-120px) rotate(-25deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(120px) rotate(-25deg);
        opacity: 0;
    }

}


@keyframes ctaPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}