/* ════ MOTION v1 (26 Oct 2026): motion-graphics layer ═════════════════
     Modelled on the "cards opening" reference: masked headline reveals,
     cards sliding in as a staggered row, images settling from a zoom,
     a thin gold progress line, and a full-screen wipe between pages.
     Hidden start states only apply under html.mx, which a one-line script
     in <head> sets; reduced-motion visitors never get it. */
  :root{--mx-ease:cubic-bezier(.16,1,.3,1);--mx-wipe:cubic-bezier(.77,0,.18,1)}

  /* Gold progress line along the top edge, tracking scroll. */
  #mx-progress{position:fixed;left:0;top:0;z-index:95;height:3px;width:100%;
    transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
    background:linear-gradient(90deg,#e2a336,#f8c048 60%,#ffe7a3)}

  /* Full-screen wipe between pages: brown panel with the crest. */
  #mx-curtain{position:fixed;inset:0;z-index:99;display:flex;align-items:center;
    justify-content:center;background:#4a2e12;pointer-events:none;
    clip-path:inset(0 0 0 100%)}
  #mx-curtain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:#f8c048;transform-origin:0 50%;transform:scaleX(0)}
  #mx-curtain img{width:84px;height:84px;opacity:0;transform:scale(.8);
    transition:opacity .35s ease,transform .5s var(--mx-ease)}
  #mx-curtain.mx-cover{pointer-events:auto;clip-path:inset(0 0 0 0);
    transition:clip-path .55s var(--mx-wipe)}
  #mx-curtain.mx-cover img{opacity:1;transform:none;transition-delay:.2s}
  #mx-curtain.mx-cover::after{transform:scaleX(1);transition:transform .9s var(--mx-ease) .15s}
  #mx-curtain.mx-open{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--mx-wipe) .1s}
  #mx-curtain.mx-open img{opacity:0;transition-duration:.25s}

  /* Masked headline reveal: each word rises from behind its own edge. */
  .mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
  .mx-wi{display:inline-block;transform:translateY(105%);
    transition:transform 1s var(--mx-ease);transition-delay:calc(var(--i,0) * 55ms + var(--d,0ms))}
  .mx-in .mx-wi{transform:none}
  html.mx main :is(h1,h2):not(.mx-split){visibility:hidden}

  /* Eyebrow labels: a short gold rule draws in ahead of the text. */
  html.mx main .eyebrow{opacity:0;transform:translateX(-14px);
    transition:opacity .6s ease,transform .8s var(--mx-ease)}
  html.mx main .eyebrow.mx-in{opacity:1;transform:none}

  /* Card rows: slide in from the right, staggered, like the reference row. */
  html.mx main .grid > *,html.mx main .reveal{opacity:0;
    transform:translate3d(56px,0,0) scale(.965);
    transition:opacity .7s ease,transform 1.1s var(--mx-ease);
    transition-delay:calc(var(--i,0) * 90ms)}
  html.mx main .grid > *.mx-in,html.mx main .reveal.mx-in,
  html.mx main .reveal.in{opacity:1;transform:none}
  html.mx main form .grid > *{opacity:1;transform:none;transition:none}

  /* Photos settle from a zoom as an inset mask opens. */
  html.mx main img.object-cover:not(.mx-hero-img){clip-path:inset(12% 0 0 0 round 0);transform:scale(1.14);
    transition:clip-path 1.2s var(--mx-ease),transform 1.6s var(--mx-ease)}
  html.mx main img.object-cover.mx-in{clip-path:inset(0 0 0 0);transform:none}
  html.mx main .group:hover img.object-cover.mx-in{transform:scale(1.04)}

  /* Home hero: slow push-in on the illustration, crest lands, words rise. */
  .mx-hero-img{transform:scale(1.14);transition:transform 2.6s var(--mx-ease)}
  .mx-hero.mx-go .mx-hero-img{transform:none}
  html.mx .mx-hero .hero-in{opacity:0;transform:scale(.82) translateY(10px);filter:blur(6px);animation:none;
    transition:opacity .9s ease .25s,transform 1.2s var(--mx-ease) .25s,filter .9s ease .25s}
  html.mx .mx-hero.mx-go .hero-in{opacity:1;transform:none;filter:none}
  html.mx .mx-hero :is(.hero-in-2,.hero-in-3){animation:none;opacity:1;transform:none}

  /* Buttons and pills: a quick press, as in the reference UI. */
  html.mx main a[class*="rounded-xl"],html.mx main a[class*="rounded-full"]{transition:transform .25s var(--mx-ease),background-color .2s,color .2s,border-color .2s}
  html.mx main a[class*="rounded-xl"]:active,html.mx main a[class*="rounded-full"]:active{transform:scale(.97)}

  /* Speaker profiles open from their card (driven by the script). */
  html.mx .profile-dialog[open]{animation:none}

  @media (prefers-reduced-motion:reduce){
    #mx-progress,#mx-curtain{display:none}
    .mx-wi{transform:none;transition:none}
  }
  /* ════ MOTION v1 END (styles) ════════════════════════════════════════ */