/* ════════════════════════════════════════════════
   AsadSnapper Motion System — tokens + prototype interactions.
   Loaded after editorial.css (and dark.css). Only transform / opacity /
   clip-path are animated. Everything below the tokens is wrapped so that
   prefers-reduced-motion: reduce gets the end state with no movement
   (editorial.css also zeroes all durations for those visitors).
   ════════════════════════════════════════════════ */

:root {
  /* Level 1 — microinteractions (feedback) */
  --m-fast: 160ms;
  --m-base: 220ms;
  /* Level 2 — editorial transitions (reveals, content changes) */
  --m-edit: 520ms;
  /* Level 3 — cinematic (hero, lightbox, film) */
  --m-cine: 850ms;

  --ease-out:    cubic-bezier(.2, .7, .2, 1);   /* entering content (same curve as --ed-ease) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* spatial moves */
  --ease-snap:   cubic-bezier(.3, .8, .4, 1);   /* quick responsive feedback */
  --ease-in:     cubic-bezier(.4, 0, 1, 1);     /* leaving */
}

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

  /* ── 1. Homepage hero entrance ───────────────────
     Text rises 10px and fades in, staggered; the photograph is never hidden
     (no opacity on the LCP image) — it settles from a slight scale while a
     clip opens from the bottom edge. */
  .home .ed-hero__labels,
  .home .ed-hero__title,
  .home .ed-hero__intro {
    animation: m-rise var(--m-edit) var(--ease-out) both;
  }
  .home .ed-hero__labels { animation-delay: 40ms; }
  .home .ed-hero__title  { animation-delay: 110ms; animation-duration: 640ms; }
  .home .ed-hero__intro  { animation-delay: 260ms; }
  .home .ed-hero__frame  { animation: m-unveil var(--m-cine) var(--ease-in-out) 180ms both; }
  .home .ed-hero__img    { animation: m-settle 1400ms var(--ease-out) 180ms both; }
  .home .ed-hero__figure .ed-caption { animation: m-fade var(--m-edit) var(--ease-out) 700ms both; }

  @keyframes m-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes m-fade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes m-unveil { from { clip-path: inset(6% 0 0 0 round var(--ed-radius)); } to { clip-path: inset(0 0 0 0 round var(--ed-radius)); } }
  @keyframes m-settle { from { transform: scale(1.045); } to { transform: none; } }

  /* ── 2. Photography card ─────────────────────────
     Slow, small push-in; caption title gains an underline that draws in.
     Same response for keyboard focus as for hover. */
  .ph-item__img { transition: transform 1100ms var(--ease-out), filter var(--m-edit) var(--ease-out); }
  .ph-item .ed-caption__title {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size var(--m-edit) var(--ease-out);
  }
  @media (hover: hover) {
    .ph-item__open:hover .ph-item__img { transform: scale(1.035); filter: brightness(1.03); }
    .ph-item:has(.ph-item__open:hover) .ed-caption__title { background-size: 100% 1px; }
  }
  .ph-item__open:focus-visible .ph-item__img { transform: scale(1.035); }
  .ph-item:has(.ph-item__open:focus-visible) .ed-caption__title { background-size: 100% 1px; }

  /* ── 3. Lightbox ─────────────────────────────────
     Opens with a quick backdrop fade and the photo settling from 98.5%;
     closes with a shorter fade (JS keeps it mounted for --m-base).
     Switching photos cross-fades — opacity only, so the image is never
     scaled or blurred while it is being looked at. */
  #as-lightbox:not([hidden]) .as-modal-backdrop { animation: m-fade var(--m-base) var(--ease-out) both; }
  #as-lightbox:not([hidden]) .as-modal-content { animation: m-open var(--m-edit) var(--ease-out) both; }
  #as-lightbox.is-leaving .as-modal-backdrop,
  #as-lightbox.is-leaving .as-modal-content { animation: m-fade-out var(--m-base) var(--ease-in) both; }
  #as-lightbox .as-lb-img { transition: opacity 280ms var(--ease-out); }
  #as-lightbox .as-lb-img.is-swapping { opacity: 0; transition-duration: 120ms; }
  @keyframes m-open     { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes m-fade-out { from { opacity: 1; } to { opacity: 0; } }

  /* ── 4. Film poster ──────────────────────────────
     Colour returns (existing), poster pushes in, and the play button opens
     into a labelled pill ("Play · 4 min") so the action is explicit. */
  .film-card .film-card__play {
    width: auto; min-width: 44px; padding: 0 13px 0 14px; border-radius: 999px;
    grid-auto-flow: column; gap: 0;
    transition: gap var(--m-base) var(--ease-snap), padding var(--m-base) var(--ease-snap), background-color var(--m-base);
  }
  .film-card__play-label {
    display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap;
    font-size: 13px; font-weight: 500; letter-spacing: -.005em; opacity: 0;
    transition: max-width var(--m-edit) var(--ease-out), opacity var(--m-base) var(--ease-out);
  }
  .film-card__media:is(:hover, :focus-visible) .film-card__play,
  .film-card:has(.film-card__title a:hover) .film-card__play { gap: 8px; padding-right: 16px; transform: none; background: rgb(var(--ed-glass-rgb) / .92); }
  .film-card__media:is(:hover, :focus-visible) .film-card__play-label,
  .film-card:has(.film-card__title a:hover) .film-card__play-label { max-width: 120px; opacity: 1; }
  .film-card.film-card--lead .film-card__play { width: auto; min-width: 60px; padding: 0 21px 0 22px; }
  .film-card.film-card--lead .film-card__media:is(:hover, :focus-visible) .film-card__play { padding-right: 24px; }
  .film-card__media:focus-visible .film-card__img { transform: scale(1.03); filter: grayscale(0); }

  /* Video modal: same quiet fade as the cinema viewer */
  #as-video-modal:not([hidden]) .as-modal-backdrop { animation: m-fade var(--m-base) var(--ease-out) both; }
  #as-video-modal:not([hidden]) .as-modal-content { animation: m-open var(--m-edit) var(--ease-out) both; }

  /* ── 5. Microinteractions: nav + contact cards ───
     Nav links: a pill fades in behind (no layout movement).
     Contact cards: press feedback and a tick that pops in. */
  .site-nav__links a { transition: color var(--m-fast) var(--ease-snap), background-color var(--m-base) var(--ease-snap); }
  .ed-btn, .cin-btn, .ct-btn { transition: background-color var(--m-fast) var(--ease-snap), border-color var(--m-fast) var(--ease-snap), color var(--m-fast), transform var(--m-fast) var(--ease-snap); }
  .ed-btn:active { transform: scale(.98); }
  .ct-card { transition: border-color var(--m-base) var(--ease-snap), background-color var(--m-base) var(--ease-snap), transform var(--m-fast) var(--ease-snap); }
  .ct-card:active { transform: scale(.985); }
  .ct-card:has(.ct-card__input:checked) .ct-card__tick { animation: m-pop 320ms var(--ease-snap) both; }
  @keyframes m-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
}

/* Reduced motion: no expanding pill — the plain play button stays as before */
@media (prefers-reduced-motion: reduce) {
  .film-card__play-label { display: none; }
}