/* ==========================================================
   CYF motion layer: load AFTER styles.css. Purely additive.
   Only transform / opacity / translate / scale are animated.
   ========================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx: 106 42 208; /* glow colour (r g b) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fx: 190 160 255; } }
:root[data-theme="dark"] { --fx: 190 160 255; }
:is(.vm, .side, .help, .band) { --fx: 255 255 255; }

/* ---------- Scroll progress (shines along the header's red rule) ---------- */
.sp {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--gold), #fff 55%, var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; will-change: transform;
}
@media (min-width: 861px) {
  header.top.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
}

/* ---------- Form polish (colour transitions only) ---------- */
input, select, textarea { transition: border-color .2s, box-shadow .2s; }
@keyframes pop { 0% { scale: .92; } 60% { scale: 1.06; } 100% { scale: 1; } }
@keyframes dtl { from { opacity: 0; transform: translateY(-6px); } }
details[open] > :not(summary) { animation: dtl .35s var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  .chips button.on, .amts button.on, .pt button.on, .tabs button.on { animation: pop .35s var(--ease-out); }

  /* ---------- Scroll reveal: richer, per-element direction ---------- */
  .rv {
    transform: translate3d(var(--rx, 0), var(--ry, 26px), 0) scale(var(--rs, 1));
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  }
  .rv.in { transform: none; }
  .hd.rv { --ry: 18px; }
  .stats > div.rv { --ry: 18px; --rs: .92; }
  .vm.rv, .band.rv, .help.rv { --ry: 34px; --rs: .96; }
  .say blockquote.rv:nth-child(odd) { --rx: -28px; --ry: 0px; }
  .say blockquote.rv:nth-child(even) { --rx: 28px; --ry: 0px; }
  .flow > div.rv { --rx: -18px; --ry: 0px; }
  .tg figure.rv { --rs: .85; --ry: 18px; }

  /* ---------- Hero: slow zoom + floating ambient light ---------- */
  .hero .art svg { scale: 1.14; transform-origin: 70% 50%; animation: kb 26s ease-in-out infinite alternate; will-change: transform; }
  @keyframes kb { to { scale: 1.22; } }

  .hero::before, .hero::after {
    content: ""; position: absolute; z-index: 1; border-radius: 50%;
    pointer-events: none; will-change: transform;
  }
  .hero::before {
    width: 520px; height: 520px; right: 6%; top: -22%;
    background: radial-gradient(circle, #ffc85747, transparent 65%);
    animation: drift1 15s ease-in-out infinite alternate;
  }
  .hero::after {
    width: 420px; height: 420px; right: 32%; bottom: -34%;
    background: radial-gradient(circle, #b8202f45, transparent 65%);
    animation: drift2 19s ease-in-out infinite alternate;
  }
  @keyframes drift1 { to { transform: translate3d(-60px, 40px, 0); scale: 1.12; } }
  @keyframes drift2 { to { transform: translate3d(70px, -30px, 0); scale: .92; } }

  /* ---------- Buttons: light sweep ---------- */
  .b { position: relative; overflow: hidden; isolation: isolate; }
  .b::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent);
    translate: -130% 0; transform: skewX(-20deg); pointer-events: none;
  }
  .b:hover::after { translate: 330% 0; transition: translate .8s var(--ease-out); }
  .hero .b.r.big::after { animation: idle 5.5s ease-in-out 2.2s infinite; }
  .hero .b.r.big:hover::after { animation: none; }
  @keyframes idle { 0%, 65% { translate: -130% 0; } 100% { translate: 330% 0; } }
  .b.r:hover { box-shadow: 0 10px 26px #b8202f55; }
  .b:active { scale: .97; }

  /* ---------- Soft-lift hover for team photos ---------- */
  .tg .p { transition: transform .45s var(--ease-out), box-shadow .45s; }
  .tg figure:hover .p { transform: scale(1.05); box-shadow: 0 10px 28px #0006; }
}

/* ---------- Scroll-linked shine across the big gradient panels ---------- */
.help, .band { position: relative; overflow: hidden; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.help, .band)::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: 1;
      background: linear-gradient(100deg, transparent, rgb(255 255 255 / .16), transparent);
      transform: skewX(-18deg); pointer-events: none;
      animation: sweep linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
    }
    @keyframes sweep { from { translate: 0 0; } to { translate: 350% 0; } }
  }
}

/* ---------- Pointer-tracking luminous border + surface sheen ---------- */
.card, .fm, .side, .vals > div { position: relative; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.card, .vm, .fm, .side, .qd, .vals > div)::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--fx) / .9), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s; pointer-events: none;
  }
  :is(.card, .vm, .fm, .side, .qd, .vals > div, .help, .band)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--fx) / .1), transparent 60%);
    opacity: 0; transition: opacity .35s; pointer-events: none;
  }
  :is(.card, .vm, .fm, .side, .qd, .vals > div):hover::before,
  :is(.card, .vm, .fm, .side, .qd, .vals > div, .help, .band):hover::after { opacity: 1; }

  /* ---------- Magnetic buttons (JS sets --tx / --ty) ---------- */
  .b, .wa {
    translate: var(--tx, 0px) var(--ty, 0px);
    transition: transform .18s, filter .18s, box-shadow .18s, scale .15s, translate .6s var(--ease-spring);
  }
  .b:hover, .wa:hover {
    transition: transform .18s, filter .18s, box-shadow .18s, scale .15s, translate .15s ease-out;
  }
}

/* ---------- Mobile menu: slide + fade + backdrop blur ---------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 49; background: rgb(11 6 48 / .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.nav-scrim.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease, visibility 0s; }
@media (min-width: 861px) { .nav-scrim { display: none; } }

@media (max-width: 860px) {
  nav.m {
    display: flex; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translate3d(0, -14px, 0); transform-origin: 50% 0;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    transition: opacity .3s ease, transform .45s var(--ease-out), visibility 0s linear .45s;
  }
  nav.m.open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none; animation: none;
    transition: opacity .3s ease, transform .45s var(--ease-out), visibility 0s;
  }
  nav.m a {
    opacity: 0; translate: 0 -10px;
    transition: opacity .3s ease, translate .45s var(--ease-out), background-color .2s, color .2s;
  }
  nav.m.open a {
    opacity: 1; translate: 0 0;
    transition-delay: calc(var(--i, 0) * 55ms + 70ms), calc(var(--i, 0) * 55ms + 70ms), 0s, 0s;
  }
  nav.m a:nth-child(2) { --i: 1; }
  nav.m a:nth-child(3) { --i: 2; }
  nav.m a:nth-child(4) { --i: 3; }
}

/* ---------- Reduced motion: switch everything decorative off ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .sp { display: none; }
  .hero .art svg { animation: none; }
  nav.m, nav.m a, .nav-scrim { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ==========================================================
   Headline text animation: masked word reveal (see motion.js)
   Only runs when JS has split the heading; text is plain
   visible text otherwise. Animates transform + opacity only.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Pre-split safety net: hide until split, but self-reveal if JS never runs */
  @keyframes show-fallback { to { opacity: 1; } }
  html.js :is(.hero h1:not([data-type]), .ph h1):not([data-split]) { opacity: 0; animation: show-fallback 0s 1.6s forwards; }

  /* Replace the old whole-block rise on the h1 with the per-word reveal */
  html.js .hero .tx > h1[data-split] { animation: none; }

  /* clip-path (not overflow) so the inline baseline never shifts; room left for descenders and italics */
  [data-split] .w-m { display: inline-block; clip-path: inset(-.06em -.14em -.16em -.14em); }
  [data-split] .w-i {
    display: inline-block; transform-origin: 0 100%;
    transform: translate3d(0, 112%, 0) rotate(5deg);
    transition: transform 1s var(--ease-out) calc(.12s + var(--i, 0) * 60ms);
    will-change: transform;
  }
  /* the red highlight fades in just before its first word lands */
  [data-split] em { opacity: 0; transition: opacity .6s ease calc(.05s + var(--ei, 0) * 60ms); }

  [data-split].is-in .w-i { transform: none; }
  [data-split].is-in em { opacity: 1; }

  /* once finished, drop clipping and compositor hints */
  [data-split].is-done .w-m { clip-path: none; }
  [data-split].is-done .w-i { will-change: auto; transition: none; }
}

/* ==========================================================
   Hero headline typing effect (see motion.js)
   Characters are always laid out (opacity only), so there is
   zero layout shift. Caret is absolutely positioned.
   ========================================================== */
.t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .tx > h1[data-type] { animation: none; }
  .t-c { position: relative; opacity: 0; }
  .t-c.on { opacity: 1; }
  .hero .hero-typewriter {
    background: transparent;
    transition: background-color .2s ease;
  }
  .hero .hero-typewriter.has-text { background: var(--red); }
  .t-c.cur::after {
    content: ""; position: absolute; right: -.07em; top: .12em; bottom: .08em; width: .055em;
    border-radius: 1px; background: currentColor; pointer-events: none;
  }
  .t-c.cur::after { animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
}