/* ============================================================
   AEN MEDIA — Motion System v2
   Phase-3 deliverable. Layered ON TOP of aen-fx.css (v1 stays).
   - Easing + duration tokens (single source of truth)
   - View-Transitions (cross-document, browser-native)
   - Reveal helpers (mask, stagger, mosaic, curtain, slide-cover)
   - data-cursor state extensions for v1 cursor
   ============================================================ */

:root{
  /* Easings — every motion in any case picks ONE of these */
  --ease-standard:    cubic-bezier(.4, 0, .2, 1);
  --ease-out-quart:   cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);
  --ease-in-out-quart:cubic-bezier(.76, 0, .24, 1);
  --ease-back:        cubic-bezier(.34, 1.56, .64, 1);
  --ease-cinema:      cubic-bezier(.65, .05, .36, 1);
  --ease-lenis:       cubic-bezier(.16, 1, .3, 1);
  --ease-tactile:     cubic-bezier(.2, .8, .2, 1);

  /* Durations */
  --d-micro:   .18s;
  --d-fast:    .32s;
  --d-base:    .55s;
  --d-slow:    .9s;
  --d-cinema:  1.4s;
}

/* ============================================================
   Lenis hooks — must not break native scroll handlers
   ============================================================ */
html.lenis{ height:auto; }
html.lenis,
html.lenis body{ overscroll-behavior:none; }
html.lenis-smooth{ scroll-behavior:auto; }
html.lenis-smooth body{ min-height:101vh; }       /* keeps lenis active on short pages */
.lenis-stopped{ overflow:hidden; }
@media (hover:none){ html.lenis,html.lenis body{ overscroll-behavior:auto; } }

/* ============================================================
   View Transitions — cross-document, browser-native (Chrome 126+, Safari 18+)
   Falls back to instant nav on Firefox / older browsers (degraded, not broken).
   ============================================================ */

/* Opt-in to cross-document view transitions (current spec) */
@view-transition{ navigation: auto; }

/* Page-level fade so cuts feel choreographed, not stuttered */
::view-transition-old(root){
  animation: aen-vt-out .42s var(--ease-out-quart) both;
}
::view-transition-new(root){
  animation: aen-vt-in  .58s var(--ease-out-expo) both;
}
@keyframes aen-vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes aen-vt-in { from{ opacity:0; transform:translateY(8px); } }

/* Shared hero-title morph between cases */
::view-transition-old(hero-title),
::view-transition-new(hero-title){
  animation-duration: var(--d-cinema);
  animation-timing-function: var(--ease-in-out-expo);
}

/* Per-case cover morph hooks (defined; no-op if names not present) */
::view-transition-old(case-cover-kore),
::view-transition-new(case-cover-kore),
::view-transition-old(case-cover-helios),
::view-transition-new(case-cover-helios),
::view-transition-old(case-cover-argo),
::view-transition-new(case-cover-argo),
::view-transition-old(case-cover-nyx),
::view-transition-new(case-cover-nyx){
  animation-duration: var(--d-cinema);
  animation-timing-function: var(--ease-in-out-expo);
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(hero-title),
  ::view-transition-new(hero-title){ animation-duration:.2s; animation-timing-function:linear; }
}

/* ============================================================
   Reveal helpers — split letters/words/lines
   ============================================================ */
.aen-split{ display:inline; }
.aen-split-word{
  display:inline-block;
  white-space:pre;
  will-change:transform, opacity;
}
.aen-split-letter{
  display:inline-block;
  will-change:transform, opacity, clip-path;
}
.aen-split-line{
  display:block;
  overflow:hidden;
}

/* ─── Pattern 1 · reveal-mask-letters (Hero H1) ─── */
[data-reveal="reveal-mask-letters"] :is(.aen-split-letter){
  clip-path: inset(0 0 100% 0);
  transform: translateY(110%);
  opacity:0;
  transition:
    clip-path  1.05s var(--ease-cinema),
    transform  1.05s var(--ease-cinema),
    opacity   .55s var(--ease-out-quart);
}
[data-reveal="reveal-mask-letters"].is-revealed :is(.aen-split-letter){
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
  opacity:1;
}

/* ─── Pattern 2 · reveal-stagger-words (Statement) ─── */
[data-reveal="reveal-stagger-words"] :is(.aen-split-word){
  transform: translateY(110%);
  opacity:0;
  transition:
    transform .9s var(--ease-out-expo),
    opacity   .55s var(--ease-out-quart);
}
[data-reveal="reveal-stagger-words"].is-revealed :is(.aen-split-word){
  transform: translateY(0);
  opacity:1;
}

/* ─── Pattern 3 · reveal-slide-cover (Cover) ─── */
[data-reveal="reveal-slide-cover"]{
  clip-path: inset(15% 50% 15% 50%);
  transition: clip-path 1.2s var(--ease-in-out-expo);
}
[data-reveal="reveal-slide-cover"].is-revealed{
  clip-path: inset(0 0 0 0);
}

/* ─── Pattern 4 · reveal-stagger-pillars (Pillars) ─── */
[data-reveal="reveal-stagger-pillars"] > *{
  transform: translateY(40px);
  opacity:0;
  transition:
    transform .7s var(--ease-out-quart),
    opacity   .55s var(--ease-out-quart);
}
[data-reveal="reveal-stagger-pillars"].is-revealed > *{
  transform: translateY(0);
  opacity:1;
}

/* ─── Pattern 5 · reveal-mosaic-tiles (Live / screenshot grid) ─── */
[data-reveal="reveal-mosaic-tiles"] > *{
  transform: scale(.86);
  opacity:0;
  transform-origin:center;
  transition:
    transform .9s var(--ease-back),
    opacity   .55s var(--ease-out-quart);
}
[data-reveal="reveal-mosaic-tiles"].is-revealed > *{
  transform: scale(1);
  opacity:1;
}

/* ─── Pattern 6 · reveal-curtain-up (Manifesto frame) ─── */
[data-reveal="reveal-curtain-up"]{
  position: relative;
  isolation: isolate;
}
[data-reveal="reveal-curtain-up"]::after{
  content:"";
  position:absolute; inset:0;
  background:var(--aen-curtain, var(--bg, #f0e9dc));
  transform-origin:center bottom;
  transform:translateY(0);
  transition: transform 1.1s var(--ease-in-out-expo);
  z-index:5;
  pointer-events:none;
}
[data-reveal="reveal-curtain-up"].is-revealed::after{
  transform:translateY(-100%);
}

/* Reduced motion: drop reveals to a single fade */
@media (prefers-reduced-motion: reduce){
  [data-reveal] :is(.aen-split-letter, .aen-split-word, > *){
    transform:none !important;
    opacity:1 !important;
    clip-path:none !important;
    transition:opacity .25s linear !important;
  }
  [data-reveal="reveal-curtain-up"]::after{ display:none; }
}

/* ============================================================
   Cursor — extends v1 .aen-cursor with data-cursor states
   v1 already handles .cover/.mb-screen/video → "watch", drag-cards → "drag"
   v2 adds: read-state ("read"), audio-state ("audio") for new sections
   ============================================================ */
.aen-cursor.is-read .ring{ width:78px; height:78px; border-style:dashed; }
.aen-cursor.is-read .ring-label{ opacity:1; }
.aen-cursor.is-audio .ring{ width:64px; height:64px; border-style:dotted; }
.aen-cursor.is-audio .ring-label{ opacity:1; }

/* When Lenis is animating wheel, soften the ring trail */
.lenis-scrolling .aen-cursor .ring{ opacity:.55; }

/* ============================================================
   Soft-disable v1 page-bottom cover-parallax during view-transition
   so the morph is not fighting the scroll-translate.
   ============================================================ */
:root.is-vt-active .cover.case-cover-parallax{ transform:none !important; }