/* Formhouse Connected: crew pieces, shared by every page that shows a crew.
   Emblem, hoodie-number seats, the invite, the pool track, the standings ladder and the overtake.
   Pages load it after shared/app.css; markup comes from shared/crew.js. */

/* Crew palette: one colour per seat, all mixed from tokens */
:root {
  --seat-1: var(--blue-hi);
  --seat-2: var(--violet);
  --seat-3: color-mix(in srgb, var(--blue) 55%, var(--violet));
  --seat-4: color-mix(in srgb, var(--violet) 45%, var(--text));
  --seat-5: color-mix(in srgb, var(--danger) 55%, var(--violet));
  --seat-6: var(--text-3);

  --crew-gradient: linear-gradient(100deg, var(--blue-hi), var(--violet));
  --crew-scrim: color-mix(in srgb, var(--ink-0) 58%, transparent);
}

[data-seat='1'] { --c: var(--seat-1); }
[data-seat='2'] { --c: var(--seat-2); }
[data-seat='3'] { --c: var(--seat-3); }
[data-seat='4'] { --c: var(--seat-4); }
[data-seat='5'] { --c: var(--seat-5); }
[data-seat='6'] { --c: var(--seat-6); }

/* ---------------------------------------------------------------- Crew voice: shout, lasers, tape */

.shout { font-size: var(--fs-3xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.88; }
.shout--md { font-size: var(--fs-2xl); }
.shout__outline { color: transparent; -webkit-text-stroke: 1.5px var(--accent-hi); }

.lasers {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, black 10%, transparent 90%);
  mask-image: linear-gradient(180deg, black 10%, transparent 90%);
}
.lasers::before,
.lasers::after {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 240%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 8deg, color-mix(in srgb, var(--blue-hi) 30%, transparent) 8deg 8.5deg, transparent 8.5deg 17deg);
  animation: sweep 10s var(--ease-in-out) infinite alternate;
}
.lasers::after {
  background: repeating-conic-gradient(from 4deg at 50% 50%, transparent 0deg 11deg, color-mix(in srgb, var(--violet) 38%, transparent) 11deg 11.6deg, transparent 11.6deg 23deg);
  animation-duration: 13s; animation-direction: alternate-reverse;
}
@keyframes sweep { from { rotate: -9deg; } to { rotate: 9deg; } }

.tape {
  position: relative; overflow: hidden;
  margin-inline: calc(var(--sp-5) * -1 - 4%);
  padding-block: var(--sp-2);
  rotate: -3deg;
  background: var(--crew-gradient);
  color: var(--ink-0);
  box-shadow: 0 12px 40px -12px var(--violet);
}
.tape__run {
  display: flex; align-items: center; gap: var(--sp-3); width: max-content;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  animation: marquee 24s linear infinite;
}
.tape__run i { font-style: normal; font-size: 0.8em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- Emblem */

.emblem { display: block; width: 100%; height: auto; overflow: visible; }
.emblem__stop-a { stop-color: var(--blue-hi); }
.emblem__stop-b { stop-color: var(--violet); }
.emblem__ring { transform-box: view-box; transform-origin: 50% 50%; animation: crew-spin 40s linear infinite; }
@keyframes crew-spin { to { transform: rotate(360deg); } }
.emblem__text { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; fill: var(--text-2); }
.emblem__inner { fill: color-mix(in srgb, var(--ink-0) 72%, transparent); stroke: var(--line-strong); stroke-width: 1; }
.emblem__seat { fill: var(--ink-1); stroke: var(--text-4); stroke-width: 1.6; stroke-dasharray: 3 2.4; transition: fill var(--t-med); }
.emblem__seat.is-on { fill: var(--blue-hi); stroke: var(--text); stroke-dasharray: none; stroke-width: 1; filter: drop-shadow(0 0 5px var(--blue-hi)); }
.emblem__hex { fill: color-mix(in srgb, var(--violet) 22%, var(--ink-0)); stroke-width: 3; stroke-linejoin: round; }
.emblem__tag { font-family: var(--font-sans); font-size: 42px; font-weight: 800; letter-spacing: -0.05em; fill: var(--text); }

/* ---------------------------------------------------------------- Hoodie-number avatars */

.hood { display: block; width: 100%; height: auto; overflow: visible; }
.hood__body { fill: color-mix(in srgb, var(--c, var(--text-4)) 14%, var(--ink-2)); stroke: var(--c, var(--text-4)); stroke-width: 1.6; stroke-linejoin: round; }
.hood__neck { fill: none; stroke: var(--c, var(--text-4)); stroke-width: 1.2; opacity: 0.7; }
.hood__no { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; fill: var(--text); letter-spacing: -0.02em; }

.seats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(12cqw, 1fr)); gap: var(--sp-2); }
.seat { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.seat .hood { width: 12.5cqw; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c, transparent) 45%, transparent)); }
.seat__handle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-2); }
.seat__no { font-size: var(--fs-2xs); color: var(--text-4); }
.seat.is-you .hood__body { fill: color-mix(in srgb, var(--c) 30%, var(--ink-2)); stroke-width: 2.2; }
.seat.is-you .seat__handle { color: var(--blue-hi); }
.seat__cap { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-2xs); font-weight: 700; color: var(--gold); }
.seat__cap svg { width: 1.1em; height: 1.1em; }
.seat--open .hood__body { fill: transparent; stroke: var(--text-4); stroke-dasharray: 3 3; }
.seat--open .hood__neck { stroke: var(--text-4); }
.seat--open .hood__no { font-size: 14px; font-weight: 400; fill: var(--text-3); }
.seat--open .seat__handle { color: var(--text-4); }
.seat__btn { display: grid; justify-items: center; gap: 2px; width: 100%; min-height: var(--tap-min); border-radius: var(--r-md); }
.seat__btn:hover .hood__body { stroke: var(--accent-hi); }
.seat.is-held .hood { animation: held 1.6s var(--ease-in-out) infinite alternate; }
.seat.is-held .hood__body { stroke-dasharray: 4 2.5; }
@keyframes held { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-3px); opacity: 1; } }
.seat.is-joined .hood, .seat.is-pop .hood { animation: seat-pop 800ms var(--ease-spring) both; }
@keyframes seat-pop { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* Home: three across, more room for the handle */
.seats--home { grid-template-columns: repeat(auto-fit, minmax(26cqw, 1fr)); gap: var(--sp-2); }
.seats--home .seat { padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.seats--home .seat.is-you { border-color: color-mix(in srgb, var(--blue-hi) 45%, transparent); background: color-mix(in srgb, var(--blue-hi) 8%, var(--glass)); }
.seats--home .seat--open { padding: 0; border-style: dashed; background: transparent; }
.seats--home .seat--open .seat__btn { padding: var(--sp-3) var(--sp-2); }
.seats--home .hood { width: 15cqw; margin-bottom: var(--sp-1); }

/* ---------------------------------------------------------------- Claim: the invite */

.inv { position: relative; isolation: isolate; min-height: 100%; display: grid; align-content: start; gap: var(--sp-4); padding: var(--safe-top) var(--sp-5) calc(var(--safe-bottom) + var(--sp-6)); overflow: hidden; }
.inv__bg { position: absolute; inset: 0 0 auto; height: 74cqh; z-index: -1; overflow: hidden; }
.inv__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.inv__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--crew-scrim), transparent 30%, color-mix(in srgb, var(--ink-1) 70%, transparent) 62%, var(--ink-1)); }

.verified {
  justify-self: center; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); white-space: nowrap;
  background: var(--crew-scrim); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.verified > span { display: inline-flex; width: 1.3em; color: var(--success); }
.inv__emblem { width: 44cqw; justify-self: center; filter: drop-shadow(0 0 32px color-mix(in srgb, var(--violet) 55%, transparent)); }
.inv__from { text-align: center; }
.inv .shout { text-align: center; }
.inv > .body { text-align: center; }
.inv__seats { display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg); background: var(--crew-scrim); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.inv__seats .seats { width: 100%; }
.inv__seats .seat__no, .inv__seats .seat:not(.is-held) .seat__handle { display: none; }
.inv__seats .seat.is-held .seat__handle { color: var(--blue-hi); }
.inv__crew { text-align: center; max-width: 34ch; }
.inv__crew b.accent { color: var(--accent-hi); }
.inv .tape { margin-block: var(--sp-2); }

.inv__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--sp-3); border-block: 1px solid var(--line); }
.inv__stats div { display: grid; gap: 2px; }
.inv__stats b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; }
.inv__stats small { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.inv__fine { text-align: center; }

/* ---------------------------------------------------------------- Home: the pool */

.pool {
  position: relative; isolation: isolate; overflow: hidden;
  margin: calc(var(--safe-top) * -1) calc(var(--sp-5) * -1) 0;
  padding: var(--safe-top) var(--sp-5) var(--sp-5);
  background: radial-gradient(130% 75% at 50% 0%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 70%);
  border-bottom: 1px solid var(--line);
}
.pool__head { display: grid; grid-template-columns: 31cqw 1fr; gap: var(--sp-4); align-items: center; }
.pool__emblem { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--violet) 55%, transparent)); }
.pool__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.pool__label { margin-top: var(--sp-5); }
.pool__miles {
  margin-top: var(--sp-1);
  font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9;
  background: linear-gradient(95deg, var(--text) 35%, var(--blue-hi) 70%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pool__gap { margin-top: var(--sp-3); }
.pool__gap b, .recruit-note b { color: var(--text); }
.pool__gap b.accent { color: var(--accent-hi); }

.track { position: relative; margin-top: var(--sp-4); padding-top: var(--sp-5); }
.track__bar { display: flex; gap: 2px; height: 3.4cqw; min-height: 10px; border-radius: var(--r-pill); background: var(--glass-strong); overflow: hidden; }
.track__seg { flex: none; width: calc(var(--w) * 1%); background: var(--c); box-shadow: 0 0 14px var(--c); transition: width var(--t-xslow) var(--ease-out); }
.track__mark {
  position: absolute; top: 0; bottom: -0.8cqw; left: calc(var(--x) * 1%);
  display: flex; align-items: flex-start; gap: var(--sp-1);
  translate: -100% 0; padding-right: var(--sp-1);
  border-right: 1.5px solid var(--text);
  font-size: var(--fs-2xs); white-space: nowrap; line-height: 1;
  transition: left var(--t-xslow) var(--ease-spring);
}
.track__mark small { font-family: var(--font-mono); color: var(--text-3); }
.track__mark.is-passed { border-color: var(--success); color: var(--success); animation: flag 700ms var(--ease-out); }
@keyframes flag { 30% { transform: scale(1.12); } }

.legend { list-style: none; display: grid; margin-top: var(--sp-3); }
.legend li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); }
.legend li:last-child { border-bottom: 0; }
.legend i { width: 2.6cqw; min-width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.legend .num { font-weight: 700; }
.legend .legend__pc { width: 4ch; text-align: right; font-weight: 500; color: var(--text-3); }

.recruit-cta { margin-top: var(--sp-5); }
.recruit-note { text-align: center; margin-top: var(--sp-2); }

.prize { display: block; width: 100%; height: 48cqw; margin-top: var(--sp-4); border: 1px solid var(--line); text-align: left; }
.prize .media__body { padding: var(--sp-4); }

/* ---------------------------------------------------------------- Ladder (home + race) */

.ladder { list-style: none; display: grid; gap: 3px; }
.ladder li {
  position: relative;
  display: grid; grid-template-columns: 6cqw auto 1fr auto; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--glass);
  font-size: var(--fs-sm);
}
.ladder__rank { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.ladder li:first-child .ladder__rank { color: var(--gold); }
.ladder__who { min-width: 0; }
.ladder__who b { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder__who small { font-size: var(--fs-2xs); color: var(--text-3); font-family: var(--font-mono); }
.ladder__miles { font-weight: 800; letter-spacing: -0.02em; }
.ladder__miles small { font-weight: 500; color: var(--text-3); font-size: var(--fs-2xs); }
.ladder__move { margin-left: var(--sp-1); font-size: var(--fs-2xs); color: var(--success); }
.ladder__bar { grid-column: 3 / -1; height: 3px; border-radius: var(--r-pill); background: var(--glass-strong); overflow: hidden; }
.ladder__bar span { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--text-4); border-radius: inherit; }
.ladder li.is-you { background: linear-gradient(100deg, color-mix(in srgb, var(--blue-hi) 16%, transparent), color-mix(in srgb, var(--violet) 22%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 55%, transparent), 0 10px 30px -14px var(--violet); z-index: 1; }
.ladder li.is-you .ladder__rank { color: var(--blue-hi); }
.ladder li.is-you .ladder__bar span { background: var(--crew-gradient); }
.ladder li.is-up { animation: up-glow 1.6s var(--ease-out); }
@keyframes up-glow { 0%, 40% { box-shadow: inset 0 0 0 1px var(--blue-hi), 0 0 40px -4px var(--blue-hi); } }

.badge {
  display: grid; place-items: center;
  width: 8.5cqw; aspect-ratio: 1;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--ink-4); color: var(--text-2);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: -0.02em;
}
.badge--you { background: var(--crew-gradient); color: var(--ink-0); }

/* ---------------------------------------------------------------- Overtake: the wow */

.ot { position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-4); isolation: isolate; overflow: hidden; padding: calc(var(--safe-top) + 14cqw) 0 calc(var(--safe-bottom) + var(--sp-6)); }
.ot__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ot__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.ot__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 55% at 50% 45%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--crew-scrim), color-mix(in srgb, var(--ink-1) 80%, transparent) 70%, var(--ink-1)); }
.ot__bg .lasers { z-index: 1; }
.ot__close { position: absolute; top: calc(var(--safe-top) - var(--sp-2)); right: var(--sp-4); z-index: 3; display: grid; place-items: center; width: max(var(--tap-min), 11cqw); height: max(var(--tap-min), 11cqw); border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--line-strong); }
.ot__close svg { width: 42%; height: 42%; }
.ot .tape { margin-inline: -8%; }
.tape--a { rotate: -5deg; }
.tape--b { rotate: 4deg; background: linear-gradient(100deg, var(--violet), var(--blue-hi)); }
.tape--b .tape__run { animation-direction: reverse; }
.ot__body { display: grid; gap: var(--sp-3); align-content: center; justify-items: center; padding: 0 var(--sp-5); text-align: center; }
.ot__emblem { width: 30cqw; filter: drop-shadow(0 0 30px var(--violet)); }
.ot__rank { display: flex; align-items: baseline; gap: var(--sp-3); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; }
.ot__rank s { font-size: var(--fs-2xl); color: var(--text-4); text-decoration-thickness: 3px; text-decoration-color: var(--danger); }
.ot__rank b { font-size: clamp(76px, 30cqw, 130px); background: var(--crew-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--blue-hi) 45%, transparent)); }
.ot .body b { color: var(--text); }
.ot .stack { width: 100%; margin-top: var(--sp-2); }
.sheet.is-open .ot__emblem { animation: seat-pop 900ms var(--ease-spring) both 100ms; }
.sheet.is-open .ot__rank b { animation: rank-in 900ms var(--ease-spring) both 350ms; }
.sheet.is-open .ot__rank s { animation: reveal var(--t-slow) var(--ease-out) both; }
@keyframes rank-in { from { transform: translateY(45%) scale(0.5); opacity: 0; } }


/* ---------------------------------------------------------------- Reduced motion: loops stop, moments land instantly */

@media (prefers-reduced-motion: reduce) {
  .lasers::before, .lasers::after, .tape__run, .emblem__ring, .seat.is-held .hood { animation: none; }
  .seat.is-joined .hood, .seat.is-pop .hood, .ladder li.is-up, .track__mark.is-passed,
  .sheet.is-open .ot__emblem, .sheet.is-open .ot__rank b, .sheet.is-open .ot__rank s { animation: none; }
}