/* The crew section: Alicia's star above, one card per crew member below.
 * Cards are built from data/crew.yml (partials/crew-cards.html), the star from data/alicia.yml.
 * The sprites themselves are css/sprites.css.
 *
 * Alicia's star is deliberately the calmest thing on the page: it never moves, never reacts to a
 * pointer, and its only motion is a slow glow that breathes over about nine seconds. Reduced
 * motion holds it at rest. It is not focusable and not a target for anything.
 */

.crew { position: relative; isolation: isolate; }
/* Below the launch hero, so the browser can skip styling, laying out and painting the six sprite
   sheets until the visitor scrolls near them. The size is a stand-in until the section has been
   rendered once (`auto` then keeps the real one). It is the content height (the section's padding
   comes on top), measured on the placeholder copy, and it matters here: everything above
   #mission-log is counted when jumping to it, so re-check that anchor if the cards change a lot. */
.crew { content-visibility: auto; contain-intrinsic-size: auto 200rem; }
@media (min-width: 40em) { .crew { contain-intrinsic-size: auto 118rem; } }
@media (min-width: 64em) { .crew { contain-intrinsic-size: auto 94rem; } }
@media (min-width: 96em) { .crew { contain-intrinsic-size: auto 87rem; } }

/* A little of the night sky behind the star, fading out before the cards */
.crew__sky {
  position: absolute; inset: 0 0 auto; height: min(34rem, 60%); z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, var(--night-950), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  pointer-events: none;
}
.crew__stars { width: 100%; height: 100%; opacity: 0.55; }

/* Alicia's star */
.alicia {
  --alicia-px: 0.3125rem;               /* one art pixel; a whole number of device pixels stays crisp */
  --twinkle: 9s;
  display: grid; justify-items: center; gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-8); text-align: center;
}
.alicia__star { position: relative; display: grid; place-items: center; width: calc(var(--alicia-px) * 15); }
.alicia__art { position: relative; width: 100%; height: auto; opacity: 0.94; }
.alicia__glow {
  position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 227 168 / 0.5), rgb(255 191 92 / 0.16) 45%, transparent);
  opacity: 0.75;
}
.alicia__caption { display: grid; gap: var(--space-1); }
.alicia__name { font: 600 var(--text-xl) / 1 var(--font-display); color: var(--amber-200); }
.alicia__line { font: 500 var(--text-sm) / 1.2 var(--font-pixel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .alicia__glow { animation: alicia-glow var(--twinkle) ease-in-out infinite alternate; }
  .alicia__art { animation: alicia-twinkle var(--twinkle) ease-in-out infinite alternate; }
}
@keyframes alicia-glow {
  from { opacity: 0.5; scale: 0.92; }
  to { opacity: 0.95; scale: 1.08; }
}
@keyframes alicia-twinkle {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

/* Art colours: names in data/alicia.yml, tokens in tokens.css */
.px-alicia-tip { fill: var(--px-alicia-tip); }
.px-alicia-body { fill: var(--px-alicia-body); }
.px-alicia-bright { fill: var(--px-alicia-bright); }
.px-alicia-core { fill: var(--px-alicia-core); }

/* Crew cards */
.crew-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.crew-card { display: grid; align-content: start; gap: var(--space-3); }
.crew-card > * { margin: 0; }
.crew-card__stage {
  display: grid; justify-items: center; align-items: end;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: radial-gradient(ellipse at 50% 100%, rgb(255 159 61 / 0.22), transparent 70%), var(--bg-deep);
  border-radius: var(--radius-md);
}
.crew-card__name { margin-top: var(--space-2); font-size: var(--text-xl); }
.crew-card__vibe { color: var(--text-muted); }
.crew-card__label { margin-top: var(--space-2); font: 600 var(--text-xs) / 1 var(--font-pixel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.crew-card__likes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

@media (min-width: 40em) {
  .alicia { --alicia-px: 0.375rem; }
  .crew-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 64em) {
  .alicia { --alicia-px: 0.4375rem; }
  .crew-cards { grid-template-columns: repeat(3, 1fr); }
  .crew-card .sprite { --sprite-px: 0.4375rem; }
}