/* #hero — headline + animated top-down table + live events.log ticker */
#hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--s6) var(--s7);
  min-height: calc(100svh - 68px);
  display: grid;
  align-items: center;
}
/* felt-blue glow behind the table + a faint dot grid, fading out at the edges */
#hero::before,
#hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
#hero::before {
  width: min(900px, 120vw); aspect-ratio: 1;
  right: -20%; top: 50%; translate: 0 -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--felt) 34%, transparent), transparent);
  filter: blur(20px);
}
#hero::after {
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 50%, #000 20%, transparent 75%);
}
[data-theme="light"] #hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--felt) 22%, transparent), transparent); }

#hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s6);
  align-items: center;
  width: 100%;
}

/* ---- copy ---- */
#hero .hero-copy { container-type: inline-size; min-width: 0; }
#hero .hero-eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 var(--s4); }
#hero .hero-dot {
  width: .6em; height: .6em; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: hero-pulse 2s var(--ease-out) infinite;
}
@keyframes hero-pulse { to { box-shadow: 0 0 0 .7em transparent; } }

#hero .hero-title { font-size: clamp(2rem, 10.8cqi, 6.4rem); }
#hero .hero-title > span { display: block; }
#hero .hero-title.in-view > span { animation: hero-rise .9s var(--ease-out) both; }
#hero .hero-title.in-view > span:nth-child(2) { animation-delay: .08s; }
#hero .hero-title.in-view > span:nth-child(3) { animation-delay: .16s; }
@keyframes hero-rise { from { transform: translateY(.45em); opacity: 0; } }

/* "LOGGED." gets punched in: an orange block wipes across and the text flips to black */
#hero .hero-mark {
  width: fit-content;
  margin-top: .08em;
  padding: .04em .14em .02em;
  margin-left: -.14em;
  color: var(--accent-ink);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left / 0% 100%;
  rotate: -2deg;
  transition: background-size .7s var(--ease-out) .55s, color .25s .75s;
}
#hero .hero-title.in-view .hero-mark { background-size: 100% 100%; color: var(--on-accent); }

#hero .hero-sub {
  margin: var(--s4) 0 var(--s5);
  max-width: 34ch;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
  line-height: 1.45;
  color: var(--muted);
}
#hero .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }
#hero .hero-ctas .btn { padding: 1.05em 1.7em; }
#hero .hero-ctas .btn-primary span { transition: transform .3s var(--ease-spring); }
#hero .hero-ctas .btn-primary:hover span { transform: translateX(4px); }

/* ---- stage: table + log, tilts toward the pointer ---- */
#hero .hero-stage {
  position: relative;
  min-width: 0;
  perspective: 1200px;
}
#hero .hero-table,
#hero .hero-log { transition: transform .6s var(--ease-out); }
#hero .hero-stage.in-view .hero-table {
  transform: rotateX(calc(var(--tilt-x, 0) * 1deg)) rotateY(calc(var(--tilt-y, 0) * 1deg));
}
#hero .hero-stage.in-view .hero-log {
  transform: translate3d(calc(var(--tilt-y, 0) * 1.4px), calc(var(--tilt-x, 0) * -1.4px), 0);
}

#hero .hero-table {
  position: relative;
  margin: 0;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px var(--line),
    0 30px 80px -20px color-mix(in srgb, var(--felt) 45%, transparent),
    0 20px 50px -25px var(--shadow);
}
#hero .hero-table svg { width: 100%; height: auto; border-radius: 22px; }

#hero .t-rail { fill: var(--rail); }
#hero .t-felt { fill: var(--felt); }
#hero .t-diamonds { fill: var(--ball); opacity: .7; }
#hero .t-headstring { stroke: var(--on-felt); stroke-opacity: .18; stroke-width: .6; stroke-dasharray: 2 2; }
#hero .t-pockets { fill: var(--rail); }

#hero .trail { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#hero .trail-cue { stroke: var(--ball); stroke-opacity: .9; stroke-dasharray: .1 3.4; stroke-width: 2.2; }
#hero .trail-seven { stroke: var(--rail); stroke-opacity: .55; }

#hero .ball-shadow { fill: #000; opacity: .28; }
#hero .ball-body { fill: var(--rail); }
#hero .ball-cue .ball-body { fill: var(--ball); }
#hero .ball-disc { fill: var(--ball); }
#hero .ball-num { fill: var(--rail); font: 800 2.6px/1 var(--font-mono); text-anchor: middle; }
#hero .ball-shine { fill: #fff; opacity: .35; }

#hero .t-cue rect { fill: var(--ball); stroke: var(--rail); stroke-width: .5; }
#hero .t-cue .t-cue-tip { fill: var(--accent-ink); }

#hero .hero-clock {
  position: absolute; top: 11%; left: 9%;
  padding: .3em .55em; border-radius: 6px;
  background: color-mix(in srgb, var(--rail) 60%, transparent);
  display: flex; align-items: center; gap: .45em;
  font: 600 clamp(.6rem, .5rem + .4vw, .8rem)/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--ball);
  pointer-events: none;
}
#hero .rec { width: .65em; height: .65em; border-radius: 50%; background: var(--accent); animation: hero-blink 1.2s steps(1) infinite; }
@keyframes hero-blink { 50% { opacity: .2; } }

/* ---- events.log ticker: a terminal card hanging off the table's corner ---- */
#hero .hero-log {
  position: relative;
  z-index: 1;
  width: min(330px, 82%);
  margin: -3rem -1rem 0 auto;
  padding: var(--s3) var(--s4) var(--s4);
  border-radius: var(--radius);
  background: var(--rail);
  color: var(--ball);
  border: 2px solid color-mix(in srgb, var(--ball) 18%, var(--rail));
  box-shadow: 0 25px 50px -20px var(--shadow);
  font: 400 .92rem/1.5 var(--font-mono);
  rotate: 1.5deg;
}
#hero .hero-log-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px dashed color-mix(in srgb, var(--ball) 25%, transparent);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ball) 60%, transparent);
}
#hero .hero-live { display: inline-flex; align-items: center; gap: .4em; color: var(--accent); font-weight: 600; }
#hero .hero-live::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; animation: hero-blink 1.2s steps(1) infinite; }

#hero .hero-log-lines { list-style: none; margin: 0; padding: 0; min-height: 4.6em; }
#hero .hero-log-lines li { white-space: nowrap; animation: hero-line .35s var(--ease-out) both; }
#hero .hero-log-lines time { color: color-mix(in srgb, var(--ball) 50%, transparent); }
/* the typing: reveal the event text in character steps */
#hero .hero-log-lines li > span { display: inline-block; vertical-align: top; animation: hero-type .45s steps(10, end) both; }
#hero .hero-log-lines b { font-weight: 600; }
#hero .log-pot b { background: var(--accent); color: var(--on-accent); padding: 0 .3em; border-radius: 4px; }
#hero .log-still b { color: color-mix(in srgb, var(--ball) 65%, transparent); }
#hero .hero-log-lines li:last-child > span::after {
  content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: .3em; vertical-align: -.15em;
  background: var(--accent); animation: hero-blink 1s steps(1) infinite;
}
@keyframes hero-line { from { opacity: 0; transform: translateX(-6px); } }
@keyframes hero-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -1em 0 0); } }

/* off-screen: stop the CSS loops too (hero.js toggles this) */
#hero.is-paused *, #hero.is-paused *::after, #hero.is-paused *::before { animation-play-state: paused !important; }

/* ---- session card: the outcome, floating over the table's top-right ---- */
#hero .hero-stats {
  position: absolute; z-index: 2; top: -1.6rem; right: -1rem;
  margin: 0; padding: var(--s3) var(--s4); min-width: 11rem;
  border-radius: var(--radius); background: var(--surface); border: 2px solid var(--line);
  box-shadow: 0 25px 50px -20px var(--shadow);
  font: 600 .78rem/1 var(--font-mono); rotate: -2deg;
}
#hero .hero-stats > div { display: flex; justify-content: space-between; gap: var(--s4); padding: .45rem 0; border-top: 1px solid var(--line); }
#hero .hero-stats .hero-stats-head { border: 0; padding-top: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#hero .hero-stats dt { color: var(--muted); }
#hero .hero-stats dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
#hero .hero-stats div:nth-child(3) dd { color: var(--accent-ink); }

/* ---- proof strip ---- */
#hero .hero-facts {
  list-style: none; width: 100%; margin-top: var(--s6); padding-block: var(--s4);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#hero .hero-facts li { display: grid; gap: .3rem; }
#hero .hero-facts b { font: 900 clamp(2.2rem, 5vw, 3.6rem)/1 var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; color: var(--accent-ink); }
#hero .hero-facts span { font: 600 .75rem/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- layout breakpoints ---- */
@media (max-width: 960px) {
  #hero { min-height: 0; padding-block: var(--s5) var(--s6); }
  #hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  #hero::before { right: -40%; top: 70%; }
}
@media (max-width: 560px) {
  #hero .hero-log { width: calc(100% - 6px); margin: var(--s3) 0 0; rotate: none; font-size: .85rem; }
  #hero .hero-stage.in-view .hero-log { transform: none; }
  #hero .hero-table, #hero .hero-table svg { border-radius: 14px; }
  #hero .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  #hero .hero-stats { position: static; rotate: none; margin-top: var(--s3); }
  #hero .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-stage.in-view .hero-table,
  #hero .hero-stage.in-view .hero-log { transform: none; }
  #hero .hero-mark { background-size: 100% 100%; color: var(--on-accent); }
  #hero .hero-title > span { animation: none !important; }
}