/* Case-study motion — editorial, not decorative.
   Loaded by every case-study page. Respects prefers-reduced-motion. */

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

@keyframes cs-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}
@keyframes cs-rise-visual {
    from { opacity: 0; transform: translateY(40px) scale(1.045); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cs-kenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1.04); }
}

/* ── Hero entrance ───────────────────────────────────────── */
.hero-copy > * {
    animation: cs-rise 0.95s var(--cs-ease) backwards;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.06s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.22s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.30s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.38s; }

.hero-visual img {
    animation: cs-rise-visual 1.15s var(--cs-ease) 0.18s backwards;
    transition: transform 1.1s var(--cs-ease), filter 1.1s var(--cs-ease);
    will-change: transform;
}
.hero-visual figcaption {
    animation: cs-rise 0.9s var(--cs-ease) 0.42s backwards;
}

@media (hover: hover) and (pointer: fine) {
    .hero-visual { cursor: default; }
    .hero-visual:hover img {
        transform: translateY(-10px) scale(1.03);
    }
}

/* Full-bleed heroes (Amaryllo, Japan Matcha) */
.cs-hero-bleed > .max-w-screen-xl > * {
    animation: cs-rise 0.95s var(--cs-ease) backwards;
}
.cs-hero-bleed > .max-w-screen-xl > *:nth-child(1) { animation-delay: 0.08s; }
.cs-hero-bleed > .max-w-screen-xl > *:nth-child(2) { animation-delay: 0.18s; }
.cs-hero-bleed > .max-w-screen-xl > *:nth-child(3) { animation-delay: 0.28s; }
.cs-hero-bleed > .max-w-screen-xl > *:nth-child(4) { animation-delay: 0.38s; }

.cs-hero-bleed > .absolute img,
.cs-hero-bleed > .absolute video {
    animation: cs-kenburns 7s var(--cs-ease) both;
    will-change: transform;
    transform-origin: center center;
}

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--cs-ease), transform 0.9s var(--cs-ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal .plate-frame img,
.reveal .matte img {
    transform: scale(1.07);
    transition: transform 1.35s var(--cs-ease);
}
.reveal.is-visible .plate-frame img,
.reveal.is-visible .matte img {
    transform: scale(1);
}
.plate:hover .plate-frame img { transform: scale(1.035); }
.plate:hover .matte img { transform: translateY(-6px); }

/* ── Interactive lift ────────────────────────────────────── */
.lift {
    transition: transform 0.4s var(--cs-ease), color 0.4s ease;
}
.lift:hover { transform: translateX(6px); }

/* ── Buttons ─────────────────────────────────────────────── */
.cs-cta {
    display: inline-block;
    transition: transform 0.45s var(--cs-ease), background-color 0.3s ease, letter-spacing 0.45s var(--cs-ease);
}
.cs-cta:hover {
    transform: translateY(-3px);
}

/* ── Next / previous project ─────────────────────────────── */
.cs-project-nav a.group {
    transition: background-color 0.5s var(--cs-ease);
}
.cs-project-nav a.group::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: #f53a4f;
    transition: width 0.55s var(--cs-ease);
}
.cs-project-nav a.group:hover::after { width: 100%; }
.cs-project-nav a.group .font-display-xl {
    transition: opacity 0.6s var(--cs-ease), transform 0.8s var(--cs-ease);
}
.cs-project-nav a.group:hover .font-display-xl {
    opacity: 0.12;
    transform: translateX(16px);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-copy > *,
    .hero-visual img,
    .hero-visual figcaption,
    .cs-hero-bleed > .max-w-screen-xl > *,
    .cs-hero-bleed > .absolute img,
    .cs-hero-bleed > .absolute video {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .plate-frame img, .matte img, .hero-visual img {
        transition: none !important;
    }
}