/* ══════════════════════════════════════════════════════════════
   Keln landing — the coach's word, and "What do you coach?".

   The headline's word dissolves into stardust and the next one is
   decoded out of noise, letter by letter, each letter flaring as it
   locks. The palette stays the hero's own: white into cold blue,
   the same three stops as the <em> beneath it, so the motion adds
   light without adding a hue.

   Every animation here is off under prefers-reduced-motion; the
   word is then simply set, and nothing rotates.
   ══════════════════════════════════════════════════════════════ */

/* ── The word ─────────────────────────────────────────────── */
.hw {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  /* Width eases between words so the comma glides rather than
     jumping. JS sets it in px from a hidden measure. */
  transition: width .62s cubic-bezier(.22, .8, .2, 1);
}
.hw__l {
  display: inline-block;
  position: relative;
  will-change: transform, opacity, filter;
}
/* A letter still being decoded: dimmer, slightly smaller, cold. */
.hw__l--scr {
  color: #93b6ea;
  opacity: .55;
  transform: translateY(.04em) scale(.94);
  text-shadow: 0 0 .5em rgba(147, 182, 234, .55);
}
/* Noise arrives as the old word leaves, in a wave from the left, so
   the two never sit on top of each other at full strength. */
.hw__l--in { animation: hw-in .38s ease both; animation-delay: var(--d, 0ms); }
@keyframes hw-in {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(.18em) scale(.9); }
  100% { opacity: .55; filter: none; transform: translateY(.04em) scale(.94); }
}
/* The moment a letter locks: a white flare that settles. */
.hw__l--lock { animation: hw-lock .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hw-lock {
  0%   { color: #fff; text-shadow: 0 0 .1em #fff, 0 0 .6em rgba(207, 224, 251, .95), 0 0 1.4em rgba(147, 182, 234, .7); transform: translateY(-.03em) scale(1.06); }
  100% { color: inherit; text-shadow: 0 0 0 transparent; transform: none; }
}
/* Leaving: each letter lifts, blurs and thins into the sky. */
.hw__l--out {
  animation: hw-out .78s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes hw-out {
  0%   { opacity: 1; filter: blur(0); transform: none; }
  35%  { opacity: .9; filter: blur(.5px) brightness(1.6); }
  100% { opacity: 0; filter: blur(7px); transform: translate(var(--dx, 0), -.55em) scale(.7); }
}
/* The outgoing word is laid over the incoming one, not before it. */
.hw__ghost {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
}
/* Motes: specks of the old word drifting off. */
.hw__mote {
  position: absolute;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #cfe0fb 45%, rgba(147, 182, 234, 0) 72%);
  box-shadow: 0 0 6px rgba(207, 224, 251, .8);
  pointer-events: none;
  animation: hw-mote var(--t, 1.1s) cubic-bezier(.15, .7, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes hw-mote {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--mx, 0), var(--my, -30px)) scale(1); }
}

/* The eyebrow decodes too, in its own mono. */
.portal-hud__eyebrow .eb-scr { color: #93b6ea; }

/* The sub-line trades places with a short blur. */
.portal-hud__sub.is-swap { animation: hw-sub .5s ease both; }
@keyframes hw-sub {
  0%   { opacity: 0; filter: blur(4px); transform: translateY(4px); }
  100% { opacity: 1; filter: none; transform: none; }
}

/* ── What do you coach? ───────────────────────────────────── */
.coach-pick {
  margin: 0 0 var(--hud-step, var(--s-9));
  max-width: 100%;
}
.coach-pick[hidden] { display: none; }
.coach-pick__l {
  display: block;
  font-size: var(--t-2xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim, #5a6b80);
  margin-bottom: var(--s-4);
}
/* One line that scrolls sideways, fading at whichever edge has more. */
.coach-pick__chips {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s-2) var(--s-1) var(--s-3);
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.coach-pick__chips.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.coach-pick__chips.is-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 100%);
}
.coach-pick__chips::-webkit-scrollbar { display: none; }

.coach-chip {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  font: inherit;
  font-size: var(--t-base);
  line-height: 1;
  color: var(--muted, #8b9bb0);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(207, 224, 251, .12);
  border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-7);
  cursor: pointer;
  isolation: isolate;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .2s ease;
}
.coach-chip:hover { color: var(--ink, #e9f0f7); border-color: rgba(207, 224, 251, .3); transform: translateY(-1px); }
.coach-chip:focus-visible { outline: 2px solid #93b6ea; outline-offset: 2px; }
.coach-chip:active { transform: scale(.97); }

/* Picked: a slow cold light running round the rim. */
.coach-chip[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: rgba(147, 182, 234, .12);
}
.coach-chip[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin, 0deg), rgba(147, 182, 234, .15), #fff 12%, #93b6ea 22%, rgba(147, 182, 234, .15) 40%, rgba(147, 182, 234, .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: chip-spin 3.2s linear infinite;
  z-index: -1;
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes chip-spin { to { --spin: 360deg; } }

/* The burst when a chip is picked: one ring, outward, gone. */
.coach-chip.is-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #cfe0fb;
  animation: chip-burst .7s cubic-bezier(.2, .8, .2, 1) both;
  pointer-events: none;
}
@keyframes chip-burst {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35, 1.9); }
}

.coach-pick__note {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--dim, #5a6b80);
  min-height: 1.3em;
}

/* Centred under 1080px, as the rest of the HUD is. */
@media (max-width: 1080px) {
  .coach-pick__chips { justify-content: flex-start; }
  .coach-pick__l { text-indent: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .hw { transition: none; }
  .hw__l--lock, .hw__l--out, .hw__l--in, .hw__mote,
  .portal-hud__sub.is-swap,
  .coach-chip.is-burst::after,
  .coach-chip[aria-pressed="true"]::before { animation: none; }
}

/* Read by screen readers, never drawn: the headline's word without
   the animation, which would otherwise be announced letter by letter. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}