/* ==========================================================
   GARSOLVE ANIMATION SYSTEM
   File: animations.css
   ========================================================== */

   @keyframes page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-visual-enter {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.97);
    }

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

body {
    animation:
        page-fade-in
        600ms
        var(--animation-ease-out)
        both;
}


/* ==========================================================
   HERO ENTRANCE
   ========================================================== */

.hero__eyebrow {
    animation:
        hero-enter
        700ms
        100ms
        var(--animation-ease-out)
        both;
}

.hero__title {
    animation:
        hero-enter
        750ms
        180ms
        var(--animation-ease-out)
        both;
}

.hero__description {
    animation:
        hero-enter
        750ms
        280ms
        var(--animation-ease-out)
        both;
}

.hero__actions {
    animation:
        hero-enter
        750ms
        380ms
        var(--animation-ease-out)
        both;
}

.hero__trust {
    animation:
        hero-enter
        750ms
        480ms
        var(--animation-ease-out)
        both;
}

.hero__visual {
    animation:
        hero-visual-enter
        1000ms
        250ms
        var(--animation-ease-out)
        both;
}


/* ==========================================================
   DASHBOARD
   ========================================================== */

@keyframes dashboard-float {
    0%,
    100% {
        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(-9px);
    }
}

.dashboard-card {
    animation:
        dashboard-float
        7s
        ease-in-out
        1.1s
        infinite;
}

@keyframes glow-pulse {
    0%,
    100% {
        opacity: 0.07;
        transform: scale(1);
    }

    50% {
        opacity: 0.15;
        transform: scale(1.1);
    }
}

.dashboard-card__glow {
    animation:
        glow-pulse
        5s
        ease-in-out
        infinite;
}


/* ==========================================================
   STATUS
   ========================================================== */

@keyframes status-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(54,211,153,0);
    }

    50% {
        box-shadow:
            0 0 12px
            rgba(54,211,153,0.55);
    }
}

.dashboard-status .status__dot {
    animation:
        status-pulse
        2.4s
        ease-in-out
        infinite;
}


/* ==========================================================
   AMBIENT ORBS
   ========================================================== */

@keyframes orb-one {
    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-35px,28px,0)
            scale(1.08);
    }
}

@keyframes orb-two {
    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(40px,-20px,0)
            scale(1.08);
    }
}

.background-orb--one {
    animation:
        orb-one
        14s
        ease-in-out
        infinite;
}

.background-orb--two {
    animation:
        orb-two
        18s
        ease-in-out
        infinite;
}


/* ==========================================================
   SCROLL REVEALS
   ========================================================== */

[data-reveal] {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity 800ms var(--animation-ease-out),
        transform 800ms var(--animation-ease-out);
}

[data-reveal="left"] {
    transform:
        translateX(-36px);
}

[data-reveal="right"] {
    transform:
        translateX(36px);
}

[data-reveal="scale"] {
    transform:
        scale(0.95);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible {
    transform: translateX(0);
}

[data-reveal="scale"].is-visible {
    transform: scale(1);
}


/* ==========================================================
   STAGGER
   ========================================================== */

.reveal-stagger > * {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 650ms var(--animation-ease-out),
        transform 650ms var(--animation-ease-out);
}

.reveal-stagger.is-visible > * {
    opacity: 1;

    transform:
        translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-stagger.is-visible > *:nth-child(2) {
    transition-delay: 80ms;
}

.reveal-stagger.is-visible > *:nth-child(3) {
    transition-delay: 160ms;
}

.reveal-stagger.is-visible > *:nth-child(4) {
    transition-delay: 240ms;
}

.reveal-stagger.is-visible > *:nth-child(5) {
    transition-delay: 320ms;
}

.reveal-stagger.is-visible > *:nth-child(6) {
    transition-delay: 400ms;
}


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

@keyframes process-line {
    from {
        transform: scaleX(0);
        transform-origin: left center;
    }

    to {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

.process-timeline::before {
    animation:
        process-line
        1.2s
        500ms
        var(--animation-ease-out)
        both;
}

@keyframes process-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 8px var(--color-background),
            0 0 0 rgba(0,214,214,0);
    }

    50% {
        box-shadow:
            0 0 0 8px var(--color-background),
            0 0 20px rgba(0,214,214,0.13);
    }
}

.process-step__number {
    animation:
        process-pulse
        4s
        ease-in-out
        infinite;
}

.process-step:nth-child(2) .process-step__number {
    animation-delay: 500ms;
}

.process-step:nth-child(3) .process-step__number {
    animation-delay: 1000ms;
}

.process-step:nth-child(4) .process-step__number {
    animation-delay: 1500ms;
}


/* ==========================================================
   CASE STUDY
   ========================================================== */

@keyframes window-glow {
    0%,
    100% {
        box-shadow:
            var(--shadow-lg),
            0 0 22px rgba(0,214,214,0.06);
    }

    50% {
        box-shadow:
            var(--shadow-lg),
            0 0 42px rgba(0,214,214,0.11);
    }
}

.case-study-window {
    animation:
        window-glow
        6s
        ease-in-out
        infinite;
}


/* ==========================================================
   FOUNDER
   ========================================================== */

@keyframes founder-glow {
    0%,
    100% {
        opacity: 0.07;
        transform: scale(1);
    }

    50% {
        opacity: 0.15;
        transform: scale(1.12);
    }
}

.founder-card__glow {
    animation:
        founder-glow
        5s
        ease-in-out
        infinite;
}


/* ==========================================================
   CONTACT
   ========================================================== */

@keyframes contact-glow {
    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.11;
    }
}

.contact-card__glow {
    animation:
        contact-glow
        6s
        ease-in-out
        infinite;
}


/* ==========================================================
   BUTTON SHINE
   ========================================================== */

@keyframes button-shine {
    from {
        transform:
            translateX(-140%);
    }

    to {
        transform:
            translateX(520%);
    }
}

.button--primary::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -25%;

    width: 20%;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.3),
            transparent
        );

    transform:
        skewX(-18deg)
        translateX(-140%);
}

.button--primary:hover::after {
    animation:
        button-shine
        650ms
        ease-out
        both;
}


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

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

    body,
    .hero__eyebrow,
    .hero__title,
    .hero__description,
    .hero__actions,
    .hero__trust,
    .hero__visual,
    .dashboard-card,
    .dashboard-card__glow,
    .dashboard-status .status__dot,
    .background-orb--one,
    .background-orb--two,
    .process-timeline::before,
    .process-step__number,
    .case-study-window,
    .founder-card__glow,
    .contact-card__glow,
    .button--primary::after {
        animation: none !important;
    }

    [data-reveal],
    [data-reveal="left"],
    [data-reveal="right"],
    [data-reveal="scale"],
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .dashboard-card {
        transform: none !important;
    }
}