/* ========================
   PRINT LAYER — Cartoon modern tech print
   Technical spec-sheet structure (rules, metadata, breakers) printed in
   cream "ink" over the comic theme, with a light cartoon layer on top.
   Self-contained: keep this file's media queries here, not in responsive.css.
   Order: metadata → breakers → chrome restyle → texture → mascots/speech
          → motion → responsive → reduced motion
   ======================== */

/* ---- Metadata: manifest strip ---- */
.meta-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: var(--md-spacing-2);
  max-width: var(--md-layout-max-width);
  margin: 0 auto var(--md-spacing-10);
  padding-bottom: var(--md-spacing-3);
}

/* Bottom hairline is a pseudo (not border) so the load sequence can draw it in */
.meta-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--md-print-rule);
  background: var(--md-paper-faint);
}

.meta-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--md-spacing-2);
  padding: 0 var(--md-spacing-5);
  border-left: var(--md-print-rule) solid var(--md-outline-variant);
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size-small);
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-on-surface);
  white-space: nowrap;
}

.meta-strip__item:first-child {
  border-left: 0;
}

.meta-strip__key {
  color: var(--md-on-surface-variant);
}

.meta-strip__value {
  color: var(--md-paper);
}

/* ---- Metadata: status pills ---- */
.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--md-spacing-2);
  border: var(--md-print-rule) solid var(--md-paper);
  border-radius: var(--md-shape-extra-small);
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size-small);
  font-weight: 700;
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-paper);
  white-space: nowrap;
}

.meta-pill--live {
  background: var(--md-primary);
  border-color: var(--md-ink);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-1);
}

.meta-pill--live::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: var(--md-spacing-2);
  border-radius: var(--md-shape-full);
  background: currentColor;
  animation: pill-pulse 2s var(--md-motion-easing-standard) infinite;
}

.meta-pill--canceled {
  border-color: var(--md-outline);
  color: var(--md-on-surface-variant);
  text-decoration: line-through;
}

@keyframes pill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---- Metadata: dotted leader (KEY......VALUE) ---- */
.meta-leader {
  display: flex;
  align-items: baseline;
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.meta-leader__dots {
  flex: 1;
  min-width: var(--md-spacing-4);
  margin: 0 var(--md-spacing-2);
  border-bottom: var(--md-print-rule) dotted var(--md-paper-faint);
  transform: translateY(-3px);
}

.meta-leader__value {
  color: var(--md-paper);
}

/* ---- Metadata: one-line mono caption ---- */
.meta-note {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* ---- Metadata: registration corner brackets ---- */
/* Uses both pseudos — only apply to elements that don't already use ::before/::after */
.bracketed {
  position: relative;
}

.bracketed::before,
.bracketed::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.bracketed::before {
  top: -6px;
  left: -6px;
  border-top: var(--md-print-rule-bold) solid var(--md-paper);
  border-left: var(--md-print-rule-bold) solid var(--md-paper);
}

.bracketed::after {
  bottom: -6px;
  right: -6px;
  border-bottom: var(--md-print-rule-bold) solid var(--md-paper);
  border-right: var(--md-print-rule-bold) solid var(--md-paper);
}

/* ---- Metadata: section index code in titles ---- */
.sec-index {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  font-weight: 400;
  letter-spacing: var(--md-print-tracking);
  color: var(--md-paper);
  margin-right: var(--md-spacing-3);
  vertical-align: middle;
}

.ref-section__title .meta-pill {
  margin-left: var(--md-spacing-3);
  vertical-align: middle;
}

.timeline__title .meta-pill {
  margin-right: var(--md-spacing-2);
  vertical-align: middle;
}

/* ---- Stat tiles (stats band) ---- */
.schedule-band {
  background-color: var(--md-surface-container-low);
  padding: var(--md-spacing-8) var(--md-spacing-4);
  position: relative;
}

/* Vitals grid: fluid columns + fluid figures so the tiles scale with the
   viewport page instead of overflowing it */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(8px, 1.5vw, var(--md-spacing-4));
  width: 100%;
  max-width: var(--md-layout-max-width);
  margin: clamp(16px, 3vh, 32px) auto 0;
  text-align: center;
}

/* Tiles are flex columns: the value block grows and centers, the leader row
   pins to the same bottom line on every card regardless of value wrapping */
.stat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.6vh, 16px) var(--md-spacing-4) var(--md-spacing-3);
}

.stat-tile > div:first-child {
  flex: 1;
}

.stat-tile .meta-leader {
  margin-top: auto;
}

/* Figures print in the site mono, not the comic display face */
.stat-tile .md-display-small {
  font-family: var(--md-font-main);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 1rem + 1.2vw, var(--md-display-small-size));
}

/* ---- Breakers (section dividers) ---- */
.breaker {
  margin: var(--md-spacing-8) auto;
  max-width: var(--md-layout-max-width);
}

/* Chevron marquee: full-bleed scrolling >>>>> strip.
   Same containment as .marquee: overflow:hidden wrapper, max-content track. */
.breaker--chevron {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: var(--md-spacing-2) 0;
  border-top: var(--md-print-rule) solid var(--md-paper-faint);
  border-bottom: var(--md-print-rule) solid var(--md-paper-faint);
}

.breaker__track {
  display: flex;
  width: max-content;
  animation: breaker-scroll 40s linear infinite;
}

.breaker--chevron:hover .breaker__track {
  animation-play-state: paused;
}

.breaker__chevrons {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  letter-spacing: 0.35em;
  color: var(--md-paper);
  white-space: nowrap;
  padding-right: 0.35em;
}

@keyframes breaker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Runner mascot pinned at the strip's left edge; solid backing so the
   chevrons appear to stream out from behind it */
.breaker--chevron .mascot--runner {
  position: absolute;
  left: var(--md-spacing-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: var(--md-surface);
  padding: 0 var(--md-spacing-3);
}

/* Dotted leader interrupted by a boxed label */
.breaker--leader {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3);
}

.breaker--leader::before,
.breaker--leader::after {
  content: '';
  flex: 1;
  border-top: var(--md-print-rule-bold) dotted var(--md-paper-faint);
}

.breaker__label {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-paper);
  border: var(--md-print-rule) solid var(--md-paper);
  padding: 2px var(--md-spacing-3);
  white-space: nowrap;
}

/* Capped double rule */
.breaker--rule {
  position: relative;
  height: 6px;
  border-top: var(--md-print-rule) solid var(--md-paper);
  border-bottom: var(--md-print-rule) solid var(--md-paper);
}

.breaker--rule::before,
.breaker--rule::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--md-paper);
}

.breaker--rule::before { left: 0; }
.breaker--rule::after { right: 0; }

/* Blip strip: barcode with a stutter; bar widths encoded from a real string in EJS */
.breaker--blip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-2);
}

.breaker__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.breaker__bar {
  height: 12px;
  background: var(--md-paper);
}

.breaker__bar:nth-child(3n) { height: 18px; }
.breaker__bar:nth-child(4n) { height: 8px; }

.breaker__caption {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size-small);
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* Hazard bar: full-bleed diagonal stripes (hard stops — flat print, no fades) */
.breaker--hazard {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  height: 14px;
  border-top: var(--md-print-rule) solid var(--md-paper);
  border-bottom: var(--md-print-rule) solid var(--md-paper);
  background: repeating-linear-gradient(
    45deg,
    var(--md-paper) 0 8px,
    transparent 8px 20px
  );
}

/* Dot row: text glyphs; text-indent balances the trailing letter-space */
.breaker--dots {
  text-align: center;
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  color: var(--md-paper);
  letter-spacing: 40px;
  text-indent: 40px;
  line-height: 1;
}

/* Hand-drawn squiggle rule (inline SVG in the partial) */
.breaker--squiggle {
  text-align: center;
  color: var(--md-paper);
  line-height: 0;
}

.breaker--squiggle svg {
  display: inline-block;
  max-width: 100%;
}

/* ---- Chrome restyle: nav + footer go mono ---- */
.navbar__link {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--md-print-tracking);
}

.navbar__logo {
  display: inline-block;
  font-family: var(--md-font-main);
  font-weight: 700;
  /* Drop the 1.2x Bangers compensation — mono is wide enough at title-large */
  font-size: var(--md-title-large-size);
  text-transform: uppercase;
  transition: color var(--md-motion-duration-short) var(--md-motion-easing-standard),
              transform var(--md-motion-duration-squash) var(--md-motion-easing-overshoot);
}

.navbar__logo:hover {
  transform: scale(1.04, 0.96);
}

.footer__link {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size-small);
  letter-spacing: var(--md-print-tracking);
  text-transform: uppercase;
  color: var(--md-on-surface);
  text-decoration: none;
}

.footer__link:hover {
  color: var(--md-paper);
  text-decoration: underline;
}

.footer .meta-note {
  margin-top: var(--md-spacing-3);
}

/* ---- Supporters band: spec-sheet voice on the paper strip ---- */
.marquee__name {
  font-family: var(--md-font-mono);
  font-weight: 700;
  font-size: var(--md-print-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-ink);
}

.marquee__count {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-ink);
  opacity: 0.62;
}

.marquee__separator {
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  color: var(--md-ink);
  opacity: 0.35;
}

/* ---- Texture: paper grain overlay ---- */
/* Static SVG noise tile rasterized once (not a live filter). Sits above in-flow
   content (z ≤ 3), below header (100) and every overlay (≥ 199). */
.print-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ---- Hero display type: tech-print voice on the intro title + tagline ---- */
.hero-intro__title {
  font-family: var(--md-font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hero__cta-tagline {
  font-family: var(--md-font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--md-print-tracking);
}

/* Community CTA headline joins the same voice */
.social-cta-group .misreg {
  font-family: var(--md-font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 1.2rem + 2vw, var(--md-display-medium-size));
}

/* Sub-page display titles: Hall of Fame, Founders, Contact — Bangers retired */
.print-display,
.hof-hero__title,
.founders-hero__title,
.social-cta-group h2 {
  font-family: var(--md-font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Mono runs wider than Bangers — keep the long titles on one line on phones */
.hof-hero__title,
.founders-hero__title {
  font-size: clamp(1.9rem, 7.5vw, var(--md-display-medium-size));
}

/* ---- Texture: misregistration (second ink pass behind big headlines) ---- */
.misreg {
  position: relative;
  z-index: 0;
  text-shadow: none;
}

.misreg::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--md-primary);
  transform: translate(3px, 3px);
  pointer-events: none;
}

.misreg--secondary::before {
  color: var(--md-secondary);
}

/* ---- Texture: halftone dot fill (compose with a background-color) ---- */
.halftone {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: 12px 12px;
}

/* ---- Mascots (line-drawn, cream ink, 2px round strokes) ---- */
.mascot {
  display: inline-block;
  color: var(--md-paper);
  line-height: 0;
}

.mascot svg {
  display: block;
}

.mascot--abs {
  position: absolute;
  z-index: 1;
}

/* Eye-in-capsule blink: pupil squashes shut. transform-box centers the
   transform on the pupil itself. */
.mascot__pupil,
.mascot__lid {
  transform-box: fill-box;
  transform-origin: center;
}

.mascot--eye.is-blinking .mascot__pupil {
  animation: mascot-blink 0.2s linear;
}

@keyframes mascot-blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.05); }
}

/* Anchor for the absolutely-positioned eye mascot */
.hero-intro {
  position: relative;
}

/* Below the art band — cream line-art vanishes against the busy artwork */
.hero-intro .mascot--abs {
  right: 4%;
  top: 50%;
}

/* ---- Speech bubble (rounded rect + hard triangular tail, adhered = tilted) ---- */
.speech {
  position: relative;
  display: inline-block;
  background: var(--md-surface);
  border: 2.5px solid var(--md-paper);
  border-radius: var(--md-shape-large);
  padding: var(--md-spacing-2) var(--md-spacing-4);
  font-family: var(--md-font-mono);
  font-size: var(--md-print-size);
  letter-spacing: 0.04em;
  color: var(--md-on-surface);
  box-shadow: var(--md-elevation-2);
  transform: rotate(-1.5deg);
}

.speech::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--md-surface);
  border-right: 2.5px solid var(--md-paper);
  border-bottom: 2.5px solid var(--md-paper);
  transform: rotate(45deg);
}

/* ---- Motion: squash-and-stretch hovers ---- */
.btn {
  transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),
              box-shadow var(--md-motion-duration-short) var(--md-motion-easing-standard),
              transform var(--md-motion-duration-squash) var(--md-motion-easing-overshoot);
}

.btn:hover {
  transform: translate(-1px, -1px) scale(1.04, 0.96);
}

/* Re-declared after :hover — this file loads after components.css, so without
   this the new :hover rule would win while the button is pressed */
.btn:active {
  transform: translate(3px, 3px) scale(0.98);
  box-shadow: none;
}

.social-icon {
  transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),
              color var(--md-motion-duration-short) var(--md-motion-easing-standard),
              transform var(--md-motion-duration-squash) var(--md-motion-easing-overshoot);
}

.social-icon:hover {
  transform: scale(1.08, 0.92);
}

/* ---- Motion: load/scroll sequence ---- */
/* Pre-states exist ONLY under html.print-anim (added by JS when motion is
   allowed) — no JS or reduced motion means static final state, no hidden UI.
   The sequence fires when scroll-animate marks the element .is-visible:
   rule draws in → strip items pop staggered (--i) → misreg pass slides on. */
html.print-anim .meta-strip::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--md-motion-easing-standard);
}

html.print-anim .meta-strip.is-visible::after {
  transform: scaleX(1);
}

html.print-anim .meta-strip__item {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity 0.45s var(--md-motion-easing-standard) calc(0.3s + var(--i, 0) * var(--md-print-stagger)),
              transform 0.5s var(--md-motion-easing-overshoot) calc(0.3s + var(--i, 0) * var(--md-print-stagger));
}

html.print-anim .meta-strip.is-visible .meta-strip__item {
  opacity: 1;
  transform: none;
}

html.print-anim .misreg::before {
  transform: translate(0, 0);
  transition: transform 0.4s var(--md-motion-easing-standard) 0.2s;
}

html.print-anim .is-visible .misreg::before,
html.print-anim .misreg.is-visible::before {
  transform: translate(3px, 3px);
}

/* Status flip: JS swaps PENDING → real value and adds .is-flipped for a tick */
[data-flip].is-pending {
  color: var(--md-on-surface-variant);
}

.is-flipped {
  animation: flip-tick 0.45s var(--md-motion-easing-standard);
}

@keyframes flip-tick {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Hall of Fame podium (1st / 2nd / 3rd) ---- */
.hof-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--md-spacing-5);
  max-width: var(--md-content-max-width-medium);
  margin: var(--md-spacing-12) auto var(--md-spacing-6);
}

.hof-podium__card {
  position: relative;
  flex: 1;
  max-width: 260px;
  background: var(--md-surface-container-high);
  border: 2px solid var(--md-ink);
  border-radius: var(--md-shape-medium);
  box-shadow: var(--md-elevation-3);
  padding: var(--md-spacing-8) var(--md-spacing-4) var(--md-spacing-5);
  text-align: center;
}

/* Winner sits center and elevated; markup order is 1-2-3, flex order 2-1-3 */
.hof-podium__card--p1 {
  order: 2;
  border-color: var(--md-primary);
  box-shadow: var(--md-elevation-5);
  transform: translateY(-16px);
}

.hof-podium__card--p2 {
  order: 1;
  border-color: var(--md-secondary);
}

.hof-podium__card--p3 {
  order: 3;
  border-color: var(--md-tertiary);
}

.hof-podium__rank {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-surface);
}

.hof-podium__card--p1 .hof-podium__rank { border-color: var(--md-primary); }
.hof-podium__card--p2 .hof-podium__rank { border-color: var(--md-secondary); }
.hof-podium__card--p3 .hof-podium__rank { border-color: var(--md-tertiary); }

.hof-podium__crown {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--md-rating-active);
  animation: hof-crown-bounce 2s var(--md-motion-easing-standard) infinite alternate;
}

.hof-podium__crown .material-symbols-outlined {
  font-size: 28px;
}

.hof-podium__avatar {
  margin: 0 auto var(--md-spacing-3);
}

.hof-podium__name {
  font-size: var(--md-title-large-size);
  font-weight: 700;
  margin-bottom: var(--md-spacing-2);
  overflow-wrap: anywhere;
}

.hof-podium__stat {
  max-width: 200px;
  margin: 0 auto;
}

/* ---- Paged sections (home) ---- */
/* Each section is its own viewport-height "page": breaker at the top,
   content centered, chevron cue to the next page. Proximity snap keeps
   pages aligned without trapping content taller than the viewport
   (Highlights/Shorts tabs, mobile stacks). Header is sticky, so pages
   are viewport minus header and snap to just below it. */
html {
  scroll-snap-type: y proximity;
}

.page {
  min-height: calc(100vh - var(--md-header-height));
  min-height: calc(100svh - var(--md-header-height));
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-margin-top: var(--md-header-height);
}

.page.ref-section {
  margin-bottom: 0;
}

.hero--landing {
  scroll-snap-align: start;
  scroll-margin-top: var(--md-header-height);
}

.page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Breakers open each page: pinned at the top, band types touch the edge */
.page > .breaker {
  margin-top: var(--md-spacing-4);
  margin-bottom: var(--md-spacing-4);
}

.page > .breaker--chevron,
.page > .breaker--hazard {
  margin-top: 0;
}

/* Intro page: cue sits near the bottom edge of the viewport page */
.hero-intro.page {
  padding-bottom: 0;
}

/* .hero-intro centers text; the section header must stay left like every page */
.hero-intro .ref-section__title {
  text-align: left;
}

/* Vitals backdrop: streaming-studio artwork band across the top of the page,
   feathered into the surface with a mask gradient (reads like a print fade —
   softer and cheaper than a real blur). A scrim keeps the header and manifest
   strip readable over the art. The band frames the artwork responsively:
   cover + a high focal point keeps the lights/desk scene in view at any size. */
.hero-intro {
  isolation: isolate;
}

/* Sandwich fade: surface at the top edge -> art blooms in the middle ->
   surface again at the bottom. Header and strip sit in the faded top zone. */
.hero-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: clamp(240px, 46vh, 520px);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(13, 15, 22, 0.5), rgba(13, 15, 22, 0.15) 45%, rgba(13, 15, 22, 0.4) 100%),
    url('/images/vitals_streaming.jpg') 50% 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 62%, transparent 100%);
}

/* Backdrop fades in as the page scrolls into view (static under no-JS / RM) */
html.print-anim .hero-intro::before {
  opacity: 0;
  transition: opacity 0.9s var(--md-motion-easing-standard) 0.15s;
}

html.print-anim .hero-intro.is-visible::before {
  opacity: 1;
}

/* Content anchors low: the title block sits toward the end of the page and
   the stat cards close it out as the section's footer — art gets the middle */
.hero-intro .page__body {
  justify-content: flex-end;
}

.hero-intro .stat-grid {
  margin-bottom: var(--md-spacing-2);
}

/* Next-page cue (reuses the hero chevron glyphs) */
.page-cue {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--md-spacing-2);
  margin: var(--md-spacing-4) 0 var(--md-spacing-3);
  animation: page-cue-bounce 2s var(--md-motion-easing-standard) infinite;
}

.page-cue:hover .hero__chevron {
  border-color: var(--md-tertiary);
}

@keyframes page-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ---- Responsive (print layer only) ---- */
@media (max-width: 1023px) {
  .mascot--abs {
    display: none;
  }
}

@media (max-width: 767px) {
  .meta-strip__item {
    padding: 0 var(--md-spacing-3);
  }

  /* Vitals page: tighter rhythm so the viewport page fits phones */
  .hero-intro.page {
    padding-top: var(--md-spacing-3);
  }

  .hero-intro__title {
    font-size: clamp(2.1rem, 8vw, 2.8rem);
  }

  .hero__cta-tagline {
    font-size: 1.05rem;
  }

  .hero-intro__description {
    font-size: 0.875rem;
    margin-bottom: var(--md-spacing-4);
  }

  .meta-strip {
    margin-bottom: var(--md-spacing-5);
  }

  /* Podium stacks 1-2-3 with room for the floating rank pills */
  .hof-podium {
    flex-direction: column;
    align-items: center;
    gap: var(--md-spacing-8);
  }

  .hof-podium__card {
    width: 100%;
    max-width: 320px;
  }

  .hof-podium__card--p1 {
    order: 1;
    transform: none;
  }

  .hof-podium__card--p2 { order: 2; }
  .hof-podium__card--p3 { order: 3; }

  .breaker {
    margin: var(--md-spacing-6) auto;
  }

  .breaker--chevron,
  .breaker--hazard {
    margin-left: calc(50% - 50vw);
  }
}

@media (max-width: 480px) {
  .meta-strip__item--secondary {
    display: none;
  }

  .breaker--dots {
    letter-spacing: 24px;
    text-indent: 24px;
  }

  /* Stat tiles: locked 2x2, compact figures, single-line labels.
     The F.0N indexes and dotted leaders come off — decoration goes first. */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--md-spacing-4) var(--md-spacing-3);
  }

  .stat-tile {
    padding: var(--md-spacing-2);
  }

  .stat-tile .md-display-small {
    font-size: 1.15rem;
  }

  .stat-tile .material-symbols-outlined {
    font-size: 20px !important; /* size is inline-styled in the template */
  }

  .stat-tile .meta-leader {
    justify-content: center;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .stat-tile .meta-leader span:first-child {
    white-space: nowrap;
  }

  .stat-tile .meta-leader__dots,
  .stat-tile .meta-leader__value {
    display: none;
  }

  /* Registration brackets hug tighter so neighbors don't collide */
  .bracketed::before,
  .bracketed::after {
    width: 10px;
    height: 10px;
  }

  .bracketed::before {
    top: -3px;
    left: -3px;
  }

  .bracketed::after {
    bottom: -3px;
    right: -3px;
  }
}

/* Short viewports: tighten the intro page's rhythm so one page still fits
   one screen (each section is a viewport — content adapts, not overflows) */
@media (max-height: 900px) {
  .hero-intro.page {
    padding-top: var(--md-spacing-4);
  }

  .hero-intro__title {
    font-size: clamp(2rem, 5.5vh, var(--md-display-large-size));
  }

  .hero-intro__description {
    margin-bottom: var(--md-spacing-4);
  }

  .meta-strip {
    margin-bottom: var(--md-spacing-5);
  }

  .page-cue {
    margin: var(--md-spacing-2) 0;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .breaker__track {
    animation: none;
  }

  .page-cue {
    animation: none;
  }

  .hof-podium__crown {
    animation: none;
  }

  .meta-pill--live::before {
    animation: none;
  }

  .mascot--eye.is-blinking .mascot__pupil {
    animation: none;
  }

  .is-flipped {
    animation: none;
  }

  .btn,
  .social-icon,
  .navbar__logo {
    transition-duration: var(--md-motion-duration-short);
    transition-timing-function: var(--md-motion-easing-standard);
  }

  .btn:hover {
    transform: translate(-1px, -1px);
  }

  .social-icon:hover,
  .navbar__logo:hover {
    transform: none;
  }

  .speech {
    transform: none;
  }
}