/* Klyne & Co. — motion layer.
   Everything here is additive to style.css. Hidden "pre-reveal" states only
   exist while <html> has the .js class AND the element has .anim (both added
   by motion.js), so content is never hidden if JS fails. Entrances animate
   only opacity / the individual `translate` and `scale` properties; hover
   lifts use `transform`. All of it is off for prefers-reduced-motion. */

:root {
    --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1000;
    pointer-events: none;
    background: linear-gradient(90deg, var(--blue, #3B9EFF), var(--blue-light, #80C0FF));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
    box-shadow: 0 0 10px rgba(59, 158, 255, 0.55);
}

/* Nav: a shadow layer fades in (opacity only) once the page scrolls. */
nav::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 10px 34px rgba(28, 33, 32, 0.14), 0 1px 0 rgba(59, 158, 255, 0.25);
    opacity: 0;
    transition: opacity 0.35s ease;
}

nav.is-scrolled::after {
    opacity: 1;
}

.count-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

@media (prefers-reduced-motion: no-preference) {

    /* ── Entrances ── */
    html.js .anim {
        opacity: 0;
        translate: 0 44px;
        transition:
            opacity 0.95s var(--m-ease) var(--d, 0s),
            translate 0.95s var(--m-ease) var(--d, 0s),
            scale 0.95s var(--m-ease) var(--d, 0s),
            transform 0.35s var(--m-ease),
            box-shadow 0.35s var(--m-ease),
            border-color 0.35s ease;
    }

    html.js .anim[data-anim="zoom"] {
        translate: 0 28px;
        scale: 0.92;
    }

    html.js .anim.in {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }

    /* The older .reveal rule also hides/moves; defer to .anim when both apply
       (keeps hover transforms free). */
    :where(html.js) .reveal.anim {
        transform: none;
    }

    html.js .reveal.anim:not(.in) {
        opacity: 0;
    }

    html.js .reveal.anim.in {
        opacity: 1;
    }

    /* A grid that staggers its children must not hide itself. */
    html.js .anim-group,
    html.js .anim-group.reveal {
        opacity: 1;
        translate: none;
        scale: none;
        transform: none;
    }

    /* ── Hero load-in sequence ── */
    @keyframes motionHeroIn {
        from {
            opacity: 0;
            transform: translateY(42px);
        }

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

    @keyframes motionHeroBadge {
        from {
            opacity: 0;
            transform: translateY(18px) scale(0.9);
        }

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

    .hero-badge {
        animation: motionHeroBadge 0.8s var(--m-ease) 0.1s both;
    }

    .hero h1 {
        animation: motionHeroIn 1.1s var(--m-ease) 0.3s both;
    }

    .hero-sub {
        animation: motionHeroIn 1s var(--m-ease) 0.62s both;
    }

    .hero-actions {
        animation: motionHeroIn 1s var(--m-ease) 0.85s both;
    }

    /* ── Buttons: visible hover + press ── */
    .btn,
    .nav-cta,
    .btn-send {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease),
            background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .btn::after,
    .nav-cta::after,
    .btn-send::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        transform: translateX(-130%) skewX(-18deg);
        transition: transform 0.7s var(--m-ease);
    }

    html .btn:active,
    html .nav-cta:active,
    html .btn-send:active {
        transform: translateY(0) scale(0.96);
        transition-duration: 0.08s;
    }

    /* ── Cards: lift on hover (transition list restored after entrance) ── */
    .s-card,
    .testimonial-card,
    .member-card,
    .sprint-card,
    .about-stat,
    .flip-card {
        transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease),
            border-color 0.35s ease;
    }

    html.js .anim.s-card,
    html.js .anim.testimonial-card,
    html.js .anim.member-card,
    html.js .anim.sprint-card,
    html.js .anim.about-stat,
    html.js .anim.flip-card {
        transition:
            opacity 0.95s var(--m-ease) var(--d, 0s),
            translate 0.95s var(--m-ease) var(--d, 0s),
            scale 0.95s var(--m-ease) var(--d, 0s),
            transform 0.35s var(--m-ease),
            box-shadow 0.35s var(--m-ease),
            border-color 0.35s ease;
    }

    @media (hover: hover) {

        html .btn:hover,
        html .nav-cta:hover,
        html .btn-send:hover {
            transform: translateY(-3px) scale(1.04);
        }

        html .btn:active,
        html .nav-cta:active,
        html .btn-send:active {
            transform: translateY(0) scale(0.96);
        }

        .btn:hover::after,
        .nav-cta:hover::after,
        .btn-send:hover::after {
            transform: translateX(260%) skewX(-18deg);
        }

        html .btn-primary:hover {
            box-shadow: 0 12px 34px rgba(59, 158, 255, 0.5);
        }

        html .btn-outline:hover {
            border-color: var(--blue, #3B9EFF);
            background: rgba(59, 158, 255, 0.12);
            color: var(--white, #fff);
        }

        html .s-card:hover,
        html .testimonial-card:hover,
        html .member-card:hover,
        html .sprint-card:hover,
        html .about-stat:hover,
        html .process-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 48px rgba(28, 33, 32, 0.16), 0 0 0 1px rgba(59, 158, 255, 0.28);
            border-color: rgba(59, 158, 255, 0.45);
        }

        html .flip-card:hover {
            transform: translateY(-6px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        display: none;
    }

    .hero-badge,
    .hero h1,
    .hero-sub,
    .hero-actions {
        animation: none;
        opacity: 1;
    }
}

@media print {
    html.js .anim {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
    }
}