/* Astra execution, 2026-09-24. App-derived accents on the approved Pearl surface.
   Sources: packages/ui/src/tokens/color.ts and canvas/mastheadRamp.ts.
   The semantic ink variants are contrast adjustments for Pearl, not app edits. */
:root {
  --lockup: clamp(340px, min(58vw, 92svh), 960px);
  --d-welcome: clamp(64px, min(6.8vw, 10svh), 130px);
  --d-welcome-lh: 0.88;
  --sport-orange: #ff7c2a;
  /* Dark: the inks are text on the night surfaces, so they take §6.2's dark text values
     (success #56B977) and a matching light orange, both above 4.5:1 on #1A1D28/#242835. */
  --sport-orange-ink: light-dark(#9a410b, #ff9a5c);
  --sport-orange-wash: color-mix(in srgb, var(--sport-orange) 8%, var(--surface));
  --sport-green: #56b977;
  --sport-green-ink: light-dark(#286d45, #56b977);
  --sport-green-wash: color-mix(in srgb, var(--sport-green) 7%, var(--surface));
  --sport-line: color-mix(in srgb, var(--app-accent) 15%, var(--surface));
  --ease-athletic: cubic-bezier(0.16, 1, 0.3, 1);
}
::selection {
  background: var(--app-accent);
  color: light-dark(white, #0f1118);
}
:focus-visible {
  outline-offset: 5px;
}
.top .top__link {
  position: relative;
  background-image: none;
  transition: color 180ms ease;
}
.top__link::after {
  content: '';
  position: absolute;
  height: 2px;
  inset: auto 0 6px;
  background: var(--app-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-athletic);
}
.top__link:hover::after,
.top__link[aria-current='page']::after {
  transform: scaleX(1);
}
.top .top__nav.is-open .top__link::after {
  content: none;
}
.button,
.icon-button {
  transition-timing-function: var(--ease-athletic);
}
.text-link {
  text-underline-offset: 0.25em;
}

/* The hero shell, capsule and dock are unchanged. The app's left-aligned identity
   now occupies the quiet side of the landscape cut, leaving the action visible. */
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__copy {
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  padding-inline: clamp(36px, 5.5vw, 104px);
  text-align: left;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__identity,
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer {
  width: min(44%, 610px);
  align-items: flex-start;
  margin-inline: 0;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__mark {
  width: min(100%, 470px);
  margin-bottom: clamp(22px, 3svh, 36px);
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__masthead {
  align-items: flex-start;
}
.sports-hero[data-video-prefix^='astra-v'] h1.masthead {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: clamp(76px, min(8.4vw, 12.2svh), 132px);
  line-height: 0.92;
  transform: none;
  filter: none;
  text-shadow: none;
}
.sports-hero[data-video-prefix^='astra-v'] .masthead__slot {
  justify-items: start;
}
.sports-hero[data-video-prefix^='astra-v'] .masthead__object {
  color: #f2f3f7;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__masthead::before,
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__masthead::after,
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__copy::before,
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer::before {
  content: none;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__scrim {
  /* One continuous exposure falloff, not a backplate around the wordmark. */
  background: linear-gradient(
    90deg,
    rgb(9 14 18 / 92%) 0%,
    rgb(9 14 18 / 88%) 28%,
    rgb(9 14 18 / 60%) 45%,
    rgb(9 14 18 / 8%) 67%,
    rgb(9 14 18 / 2%) 100%
  );
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__tagline {
  color: #f2f3f7;
  text-shadow: none;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__actions {
  justify-content: flex-start;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__availability {
  margin-inline: 0;
  text-shadow: none;
}
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__video,
.sports-hero[data-video-prefix^='astra-v'] .sports-hero__poster {
  object-position: 61% center;
}
@media (min-width: 761px) and (max-height: 800px) {
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__mark {
    width: min(100%, 340px);
    margin-bottom: 18px;
  }
  .sports-hero[data-video-prefix^='astra-v'] h1.masthead {
    font-size: clamp(64px, 11svh, 92px);
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer {
    margin-top: 18px;
  }
}
@media (max-width: 1023px) and (min-width: 761px) {
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__identity,
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer {
    width: min(56%, 480px);
  }
  .sports-hero[data-video-prefix^='astra-v'] h1.masthead {
    font-size: 84px;
  }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__copy {
    justify-content: space-between;
    align-self: stretch;
    padding: calc(var(--capsule-bottom-in-window, 80px) + 48px) 24px
      calc(var(--hero-dock-h, 64px) + 22px);
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__identity,
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__mark {
    width: min(100%, 332px);
    margin-bottom: 20px;
  }
  .sports-hero[data-video-prefix^='astra-v'] h1.masthead {
    font-size: clamp(58px, 15vw, 94px);
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__scrim {
    background: linear-gradient(
      180deg,
      rgb(9 14 18 / 95%) 0%,
      rgb(9 14 18 / 95%) 40%,
      rgb(9 14 18 / 34%) 51%,
      rgb(9 14 18 / 8%) 59%,
      rgb(9 14 18 / 70%) 74%,
      rgb(9 14 18 / 91%) 100%
    );
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__availability {
    font-size: var(--fs-13);
    line-height: 1.4;
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__offer {
    align-items: center;
    text-align: center;
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__actions {
    justify-content: center;
  }
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__video,
  .sports-hero[data-video-prefix^='astra-v'] .sports-hero__poster {
    object-position: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top__link::after,
  .button,
  .icon-button {
    transition: none;
  }
}
@media (max-width: 360px) {
  /* Retain the app's two-line lockup, including at 150% text size. */
  .sports-hero[data-video-prefix^='astra-v'] h1.masthead {
    font-size: clamp(48px, 15vw, 54px);
  }
}
@media (max-width: 360px) and (max-height: 740px) {
  /* Leave a visible action band between the identity and the two stacked actions (the split
     layout only). The centered stack, one availability line since 2026-10-19, fits the phone
     window as it is (the viewport less its insets), so at 320x640 the whole hero, actions, line
     and dock, is in the first view instead of the actions ending 4px under the fold. */
  .sports-hero[data-video-prefix^='astra-v']:not([data-hero-layout='centered'])
    .sports-hero__window {
    min-height: 740px;
  }
}

/* Centered welcome identity, owner correction 2026-09-25. Keep native DOM order:
   mark, masthead, tagline, offer. Dock-side alignment lowers the mark as far as the
   complete offer allows. The reveal retains ownership of mark/canvas transforms. */
.sports-hero[data-hero-layout='centered'] .sports-hero__copy {
  align-self: stretch;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--capsule-bottom-in-window, 80px) + 16px) 32px
    calc(var(--hero-dock-h, 64px) + 16px);
  text-align: center;
}
.sports-hero[data-hero-layout='centered'] .sports-hero__identity,
.sports-hero[data-hero-layout='centered'] .sports-hero__offer {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.sports-hero[data-hero-layout='centered'] .sports-hero__mark {
  width: min(100%, var(--lockup));
  margin: 0 auto clamp(16px, 2svh, 22px);
}
.sports-hero[data-hero-layout='centered'] .sports-hero__masthead {
  align-items: center;
}
.sports-hero[data-hero-layout='centered'] .masthead__slot {
  justify-items: center;
}
.sports-hero[data-hero-layout='centered'] h1.masthead {
  align-items: center;
  margin-bottom: 0;
  font-size: var(--d-welcome);
  line-height: var(--d-welcome-lh);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 50%));
}
.sports-hero[data-hero-layout='centered'] :is(.sports-hero__tagline, .sports-hero__availability) {
  text-shadow:
    0 1px 2px rgb(0 0 0 / 70%),
    0 0 16px rgb(0 0 0 / 65%);
}
.sports-hero[data-hero-layout='centered'] .sports-hero__tagline {
  margin: 14px 0 0;
  font-size: var(--fs-20);
  letter-spacing: 0.01em;
}
/* The offer is the actions and the availability line (owner, 2026-10-19: no lede). The tagline
   closes the identity 14px under the masthead, so the actions keep a clearly larger step from it
   (26px at 720 high, 32px at 900, 39px at 1080) and the stack reads masthead, tagline, then offer. */
.sports-hero[data-hero-layout='centered'] .sports-hero__offer {
  margin-top: clamp(24px, 3.6svh, 40px);
}
.sports-hero[data-hero-layout='centered'] .sports-hero__actions {
  justify-content: center;
  gap: 14px;
}
.sports-hero[data-hero-layout='centered'] .sports-hero__availability {
  max-width: 62ch;
  margin: 18px auto 0;
  line-height: var(--lh-ui);
  font-size: var(--fs-15);
  text-wrap: pretty;
}
.sports-hero[data-hero-layout='centered'] .sports-hero__video,
.sports-hero[data-hero-layout='centered'] .sports-hero__poster {
  object-position: center;
}
.sports-hero[data-hero-layout='centered'] .sports-hero__scrim {
  /* Uniform full-frame dim only: no radial pool, plateau, or copy backplate. 54% is the
     smallest whole percent that holds the hero copy at 4.5:1 on every sampled frame of
     astra-v9-eight (check-hero-motion.py run_copy_contrast); it was 36%, 38% on phones,
     until 2026-09-25. The phone rule below matches it. */
  background: rgb(9 14 18 / 54%);
}
@media (min-width: 761px) and (max-height: 800px) {
  :root {
    --lockup: clamp(300px, min(54vw, 88svh), 760px);
    --d-welcome: clamp(56px, min(6.4vw, 9.4svh), 96px);
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__tagline {
    font-size: var(--fs-17);
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__availability {
    margin-top: 14px;
  }
}
@media (min-width: 761px) and (max-height: 620px) {
  .sports-hero[data-hero-layout='centered'] .sports-hero__window {
    min-height: 620px;
  }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  :root {
    --lockup: min(calc(100vw - 40px), 460px);
    --d-welcome: clamp(52px, 17vw, 88px);
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__copy {
    padding: calc(var(--capsule-bottom-in-window, 70px) + 16px) 22px
      calc(var(--hero-dock-h, 58px) + 16px);
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__tagline {
    font-size: var(--fs-17);
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__offer {
    max-width: 420px;
    margin-top: 28px;
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__actions {
    gap: 12px;
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__availability {
    margin-top: 14px;
    font-size: var(--fs-13);
    text-wrap: balance;
  }
  .sports-hero[data-hero-layout='centered'] .sports-hero__scrim {
    background: rgb(9 14 18 / 54%);
  }
}
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  :root {
    --lockup: min(80vw, 640px);
    --d-welcome: clamp(80px, 12vw, 120px);
  }
  /* Portrait tablets draw the 64px notch, not the phones' 58px dock, so the copy clears it by
     the desktop 16px. On the 58px fallback the one-line availability sat 10px above the notch,
     inside the pearl rim's light, and measured 3.9:1 there (2026-10-19). */
  .sports-hero[data-hero-layout='centered'] .sports-hero__copy {
    padding-bottom: calc(var(--hero-dock-h, 64px) + 16px);
  }
}
@media (max-width: 360px) {
  :root {
    --lockup: calc(100vw - 36px);
    --d-welcome: clamp(52px, 16.5vw, 60px);
  }
}

/* Local owner checkpoint: one concise proof state beside the existing media control. */
.sports-hero__proof {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
  color: var(--ink-secondary);
}