@font-face { font-family: "Bricolage Grotesque"; src: url("/bricolage.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/figtree.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@property --t { syntax: "<integer>"; inherits: true; initial-value: 0; }

:root {
  --bg: #140b0e; --surface: #1d1216; --surface-2: #26181d; --line: rgba(255, 235, 240, 0.12); --line-strong: rgba(255, 235, 240, 0.22);
  --t1: #fbf3f4; --t2: #cdbfc3; --t3: #a3959a;
  --red: #ff1f4b; --red-deep: #d1002f; --red-text: #ff7a93; --red-soft: rgba(255, 31, 75, 0.14);
  --plus: #fbbf24; --plus-text: #fcd34d; --plus-soft: rgba(251, 191, 36, 0.14); --plus-line: rgba(251, 191, 36, 0.42);
  --mega: #c084fc; --mega-text: #e9b8ff; --mega-pink: #f472b6; --mega-soft: rgba(192, 132, 252, 0.16); --mega-line: rgba(192, 132, 252, 0.5);
  --ink: #1b1215;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 64px;
  --wrap: min(1160px, 100% - 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--t1); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body.home { padding-bottom: var(--bar); }
a { color: var(--red-text); text-underline-offset: 3px; }
a:hover { color: var(--t1); }
:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; border-radius: 6px; }
.ico { width: 1em; height: 1em; flex: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; border-radius: 10px; background: var(--t1); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }

.top, main > section, .foot, .doc { width: var(--wrap); margin-inline: auto; }
.top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--t1); font: 800 26px/1 var(--display); font-stretch: 85%; letter-spacing: -0.02em; text-decoration: none; }
.brand b { color: var(--red-text); font-weight: 800; }
.brand svg { display: block; transition: transform 500ms var(--ease); }
.brand:hover svg { transform: rotate(-8deg) scale(1.08); }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--t2); text-decoration: none; font-weight: 600; font-size: 16px; }
.top nav a:hover { color: var(--t1); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: 0.96; font-stretch: 80%; }
h1 span { display: block; color: var(--red-text); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1; font-stretch: 84%; }
h3 { font-size: 1.25rem; line-height: 1.2; font-stretch: 92%; letter-spacing: -0.01em; }
.lead { margin: 18px 0 0; max-width: 58ch; color: var(--t2); font-size: 1.14rem; }
.fine { color: var(--t3); font-size: 0.9rem; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.btn.primary { background: var(--red-deep); color: #fff; }
.btn.soon { border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--t2); cursor: default; }
.btn.ghost { border: 1px solid var(--line-strong); color: var(--t1); transition: background 200ms ease, border-color 200ms ease; }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--t2); }
.btn.ghost .ico { transition: transform 300ms var(--ease); }
.btn.ghost:hover .ico { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }

/* ---- Hero: the video is the backdrop, the headline sits on it at the left and the chat panel at the right */
main > section.hero { width: 100%; }
.hero { position: relative; isolation: isolate; }
.hero-bg { position: absolute; inset: -110px 0 0 0; z-index: -1; overflow: hidden; }
.hero-bg > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; filter: blur(2px) saturate(1.2); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(20, 11, 14, 0.75), transparent 20%, transparent 62%, var(--bg) 100%),
  linear-gradient(90deg, var(--bg) 0%, rgba(20, 11, 14, 0.94) 34%, rgba(20, 11, 14, 0.42) 68%, rgba(20, 11, 14, 0.68) 100%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 44px; align-items: center; width: var(--wrap); margin-inline: auto; padding: 34px 0 20px; min-height: calc(100svh - var(--bar) - 80px); }
.stage { display: flex; justify-content: flex-end; }
/* Faces drift across the right side only, above the veil, and fade out before they reach the headline */
.floaters { position: absolute; inset: 0 0 0 44%; z-index: 1; -webkit-mask: linear-gradient(90deg, transparent, #000 34%); mask: linear-gradient(90deg, transparent, #000 34%); }
.floater { position: absolute; left: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); animation: drift 9s linear infinite; }
.floater svg { display: block; }
.f0 { top: 8%; animation-delay: -1s; } .f1 { top: 30%; animation-delay: -4.2s; animation-duration: 11s; } .f2 { top: 52%; animation-delay: -6.8s; }
.f3 { top: 18%; animation-delay: -8.4s; animation-duration: 12s; } .f4 { top: 64%; animation-delay: -2.6s; animation-duration: 10s; } .f5 { top: 42%; animation-delay: -9.5s; animation-duration: 13s; } .f6 { top: 74%; animation-delay: -5.3s; }
@keyframes drift { to { transform: translateX(calc(-56vw - 80px)) rotate(-14deg); } }

.panel { position: relative; width: min(410px, 100%); border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(180deg, #2a171d, #190f13); box-shadow: 0 50px 110px rgba(0, 0, 0, 0.7), 0 30px 120px -20px rgba(255, 31, 75, 0.5); font-size: 14.5px; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-family: var(--display); font-size: 15px; }
.panel-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 31, 75, 0.6); animation: live 2s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 9px rgba(255, 31, 75, 0); } }
.panel-count { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--t2); font: 600 12px var(--body); }
.panel-tabs { display: inline-flex; gap: 2px; margin: 0 14px 10px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.28); color: var(--t2); font-size: 12px; font-weight: 600; }
.panel-tabs span { padding: 4px 9px; border-radius: 8px; }
.panel-tabs .on { background: rgba(255, 255, 255, 0.12); color: var(--t1); }
.ticker { height: 352px; overflow: hidden; border-top: 1px solid var(--line); -webkit-mask: linear-gradient(180deg, transparent, #000 16%); mask: linear-gradient(180deg, transparent, #000 16%); }
.ticker-roll { display: grid; gap: 4px; padding: 6px 10px; animation: roll 30s linear infinite; }
.stage:hover .ticker-roll, .stage:hover .floater { animation-play-state: paused; }
@keyframes roll { to { transform: translateY(-50%); } }
.panel-input { display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.fake-input { flex: 1; min-width: 0; padding: 8px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; color: var(--t3); white-space: nowrap; text-overflow: ellipsis; }
.fake-send { padding: 8px 14px; border-radius: 999px; background: var(--red-deep); color: #fff; font-weight: 700; }
.demo-note { grid-column: 1 / -1; margin: 0; color: var(--t3); font-size: 0.85rem; }

/* ---- Chat lines: the page's recurring material */
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; line-height: 1.35; }
.line b { font-weight: 700; }
.line-text { color: var(--t1); overflow-wrap: anywhere; }
.line-face { display: grid; flex: none; }
.line-face svg, .yap { display: block; }
.line-time { color: var(--t3); font-size: 12px; font-variant-numeric: tabular-nums; }
.line.hi-plus { border-color: var(--plus-line); background: linear-gradient(100deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.04)); font-weight: 600; }
.line.hi-pro { border-color: var(--mega-line); background: linear-gradient(100deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.08)); font-weight: 600; }
.badge { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; }
.badge.plus { background: var(--plus-soft); color: var(--plus-text); }
.badge.pro { background: var(--mega-soft); color: var(--mega-text); }
.line .yap-frame { --fw: 1.5px; --fg: 2px; }

/* ---- Moments */
.moment { padding: clamp(72px, 11vh, 132px) 0 0; }
.moment-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 36px; }
.stamp { display: inline-block; margin-top: 0.42em; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--t1); font: 700 15px/1 var(--body); font-variant-numeric: tabular-nums; text-decoration: none; transition: background 200ms ease, border-color 200ms ease; }
.stamp:hover { border-color: var(--red); background: var(--red-soft); color: var(--t1); }

.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.thumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 700ms var(--ease); }
.room:hover .thumb > svg { transform: scale(1.06); }
.here { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(20, 11, 14, 0.82); font-size: 12.5px; font-weight: 700; }
.room h3 { margin: 14px 0 8px; font: 700 1.02rem/1.3 var(--body); letter-spacing: 0; }
.room-chat { display: grid; gap: 2px; margin-left: -7px; }

.replay { position: relative; padding-top: 150px; }
.echoes { position: absolute; inset: 0 0 auto 0; height: 150px; }
.echo { position: absolute; left: calc(var(--x) * 100%); bottom: 12px; display: grid; gap: 4px; width: max-content; max-width: 250px; transform: translateX(-12%); }
.echo::after { content: ""; position: absolute; left: 12%; top: 100%; width: 1px; height: 12px; background: var(--line-strong); }
.echo.e1 { bottom: 62px; } .echo.e1::after { height: 62px; }
.echo.e3 { transform: translateX(-70%); } .echo.e3::after { left: 70%; }
.echo-time { display: inline-flex; align-items: center; gap: 5px; color: var(--t3); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.echo .line { background: var(--surface); border-color: var(--line); }
.echo .line.hi-pro { background: linear-gradient(100deg, #3b1d57, #2a1626); }
.strip { position: relative; height: 96px; border-bottom: 2px solid var(--line-strong); }
.heat { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 235, 240, 0.2); }
.heat.hot { fill: var(--red); }
.strip-played { position: absolute; inset: 0; clip-path: inset(0 48% 0 0); }
.strip-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--t3); font-size: 13px; font-variant-numeric: tabular-nums; }

.play { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.pred { padding: 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(180deg, #2a171d, var(--surface)); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4); }
.pred-top { display: flex; justify-content: space-between; color: var(--t2); font-size: 13px; font-weight: 700; }
.pred-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--red-text); }
.pred-q { margin: 10px 0 14px; font: 800 1.5rem/1.15 var(--display); font-stretch: 88%; }
.pred-split, .pred-pools { display: flex; justify-content: space-between; font-size: 14px; }
.pred-split b { font-size: 1.1rem; }
.pred-track { height: 10px; margin: 8px 0; overflow: hidden; border-radius: 999px; background: rgba(192, 132, 252, 0.5); }
.pred-track i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--red); transform-origin: left; }
.pred-pools { color: var(--plus-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pred-pools span { display: inline-flex; align-items: center; gap: 4px; }
.pred-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bet { padding: 10px; border-radius: 12px; font-size: 14px; font-weight: 700; text-align: center; }
.bet.yes { background: var(--red-deep); color: #fff; }
.bet.no { border: 1px solid var(--mega-line); color: var(--mega-text); }
.play-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.play-list li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.play-list li:last-child { border-bottom: 1px solid var(--line); }
.play-list b { font: 800 1.15rem/1.3 var(--display); font-stretch: 90%; }
.play-list span { color: var(--t2); }

/* ---- The drop: the one loud moment */
.drop { position: relative; width: 100%; margin-top: clamp(80px, 12vh, 140px); padding: clamp(80px, 13vh, 150px) 0 0; overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, rgba(255, 31, 75, 0.42), transparent 70%), linear-gradient(180deg, var(--bg), #2a0a16 55%, #3a0b1c); }
main > section.drop { width: 100%; }
.drop-inner { position: relative; z-index: 2; width: var(--wrap); margin-inline: auto; text-align: center; }
.drop h2 { font-size: clamp(4rem, 13vw, 6rem); line-height: 0.9; font-stretch: 76%; }
.drop .lead { margin-inline: auto; }
.stamp.big { margin: 0 0 18px; padding: 8px 16px; border-color: var(--red); background: var(--red-deep); color: #fff; font-size: 20px; }
.drop-chat { display: grid; gap: 6px; width: min(460px, 100%); margin: 30px auto 0; text-align: left; }
.drop-chat .line { background: rgba(20, 11, 14, 0.72); font-size: 15px; }
.drop-chat .line.hi-plus { background: linear-gradient(100deg, #5a4210, #2d2010); }
.drop-chat .line.hi-pro { background: linear-gradient(100deg, #4a2370, #33162c); }
.drop-burst { position: absolute; inset: 0; z-index: 1; }
.burst { position: absolute; left: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); animation: fly 7s linear infinite; }
.burst svg { display: block; }
.b0 { top: 12%; animation-delay: -0.5s; } .b1 { top: 26%; animation-delay: -3.1s; animation-duration: 8.5s; } .b2 { top: 40%; animation-delay: -5.4s; animation-duration: 6.4s; }
.b3 { top: 7%; animation-delay: -4.2s; animation-duration: 9s; } .b4 { top: 55%; animation-delay: -1.7s; } .b5 { top: 33%; animation-delay: -6.3s; animation-duration: 7.6s; }
.b6 { top: 62%; animation-delay: -2.8s; animation-duration: 8.8s; } .b7 { top: 19%; animation-delay: -6.9s; animation-duration: 6.8s; } .b8 { top: 47%; animation-delay: -0.9s; animation-duration: 9.4s; } .b9 { top: 70%; animation-delay: -4.8s; }
@keyframes fly { to { transform: translateX(calc(-100vw - 120px)) rotate(-22deg); } }
.spikes { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 0.55%; height: clamp(120px, 22vh, 220px); margin-top: 46px; padding: 0 2%; }
.spikes i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ff5c7d, var(--red-deep)); transform-origin: bottom; }

.faces { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.faces span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform 400ms var(--ease), background 200ms ease, border-color 200ms ease; }
.faces span:hover { transform: translateY(-6px) rotate(-5deg); border-color: var(--line-strong); background: var(--surface-2); }
.sub { margin: 52px 0 4px; }
.sub-lead { margin: 0 0 18px; color: var(--t2); }
.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scene { margin: 0; }
.scene svg { display: block; width: 100%; height: 116px; border-radius: 14px; }
.scene figcaption, .frame-demo figcaption { margin-top: 8px; color: var(--t2); font-size: 14px; font-weight: 600; }
.frames { display: flex; flex-wrap: wrap; gap: 34px; padding: 8px 6px 0; }
.frame-demo { margin: 0; text-align: center; }
.frame-demo .yap-frame { --fw: 3px; --fg: 6px; }

.crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.pals { display: grid; }
.pal { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.pal:last-child { border-bottom: 1px solid var(--line); }
.pal-face { position: relative; display: grid; flex: none; }
.pal-face svg { display: block; }
.pal-face .yap-frame { --fw: 2px; --fg: 3px; }
.pal-face.online::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--bg); border-radius: 50%; background: #34d399; }
.pal-info { display: grid; flex: 1; min-width: 0; }
.pal-info small { overflow: hidden; color: var(--t2); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.pal-action { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 700; }
.party { padding: 20px; border: 1px solid var(--mega-line); border-radius: 18px; background: linear-gradient(160deg, rgba(192, 132, 252, 0.18), var(--surface) 60%); }
.party-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.party-top b { font: 800 1.35rem/1.2 var(--display); font-stretch: 88%; }
.chip { padding: 3px 10px; border: 1px solid var(--mega-line); border-radius: 999px; color: var(--mega-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.party-host { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 6px; }
.party-host .ico { color: var(--mega-text); }
.party-note { margin: 0 0 16px; color: var(--t2); font-size: 15px; }
.party-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--t2); font-size: 14px; }
.party-code b { color: var(--t1); font: 700 1.1rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.14em; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.plan { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.plan.plus { border-color: var(--plus-line); background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), var(--surface) 46%); }
.plan.pro { border-color: var(--mega-line); background: linear-gradient(180deg, rgba(192, 132, 252, 0.2), var(--surface) 52%); }
.plan h3 { font-size: 1.7rem; font-stretch: 84%; }
.plan.plus h3 { color: var(--plus-text); }
.plan.pro h3 { color: var(--mega-text); }
.plan-line { margin: 2px 0 14px; color: var(--t2); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.price strong { font: 800 2.9rem/1 var(--display); font-stretch: 84%; letter-spacing: -0.03em; }
.price .usd, .price .per { color: var(--t2); font-size: 15px; }
.plan .line { margin: 0 -7px 16px; }
.plan .line:not(.hi-plus):not(.hi-pro) { border-color: var(--line); }
.plan ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--t2); font-size: 15.5px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.plan li .ico { margin-top: 5px; color: var(--t3); }
.plan.plus li .ico { color: var(--plus); }
.plan.pro li .ico { color: var(--mega); }

.end { padding-bottom: clamp(60px, 10vh, 110px); }
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: 720px; }
.steps li { position: relative; padding: 16px 0 16px 58px; border-top: 1px solid var(--line); color: var(--t2); counter-increment: step; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: var(--t1); font: 800 1.1rem/1 var(--display); }
.steps b { color: var(--t1); }

/* ---- The player bar: the page's timeline, pinned to the bottom */
.player { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; height: var(--bar); padding: 0 max(20px, calc((100% - 1160px) / 2)); border-top: 1px solid var(--line-strong); background: rgba(20, 11, 14, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.clock { min-width: 4ch; color: var(--t1); counter-reset: min calc(round(down, var(--t) / 60)) sec mod(var(--t), 60); }
.clock::after { content: counter(min) ":" counter(sec, decimal-leading-zero); }
.total { color: var(--t3); }
.track { position: relative; height: 34px; }
.track > .heat { fill: rgba(255, 235, 240, 0.16); }
.played { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.track::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; border-radius: 3px; background: rgba(255, 235, 240, 0.16); }
.head { position: absolute; left: 0; bottom: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 31, 75, 0.28); }
.chapters a { position: absolute; left: calc(var(--x) * 100%); top: 0; bottom: 0; width: 22px; margin-left: -11px; }
.chapters a::before { content: ""; position: absolute; left: 10px; bottom: 0; width: 2px; height: 9px; background: var(--bg); }
.chapters span { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--t1); white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity 160ms ease, transform 240ms var(--ease); pointer-events: none; }
.chapters a:hover span, .chapters a:focus-visible span { opacity: 1; transform: translate(-50%, 0); }

/* ---- Footer and the legal pages */
.foot { padding: 34px 0 46px; border-top: 1px solid var(--line); color: var(--t2); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; }
.foot a { color: var(--t2); }
.foot a:hover { color: var(--t1); }
.foot p { margin: 6px 0; }
.doc { max-width: 720px; margin-top: 40px; margin-bottom: 72px; }
main > .doc { width: min(720px, 100% - 40px); }
.doc h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; }
.doc h2 { margin-top: 40px; font-size: 1.5rem; line-height: 1.2; font-stretch: 92%; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--t2); }
.doc b { color: var(--t1); }
.doc li { margin: 6px 0; }
.updated { color: var(--t3); font-size: 15px; }
.big-mail { font: 800 1.7rem/1.2 var(--display); font-stretch: 90%; }


  .yap-scene { display: block; width: 100%; height: 100%; }
  .yap-scene .live-only { display: none; }
  .live .yap-scene .live-only { display: inline; }
  .live .yap-scene .still-only { display: none; }
  .yap-scene .sc-flicker, .yap-scene .sc-steam, .yap-scene .sc-flame { transform-box: fill-box; }
  .live .yap-scene .sc-twinkle { animation: scTwinkle 3s ease-in-out infinite; }
  .live .yap-scene .sc-flicker { animation: scFlicker 2.4s ease-in-out infinite; transform-origin: center; }
  .live .yap-scene .sc-rain { animation: scRain 0.7s linear infinite; }
  .live .yap-scene .sc-steam { animation: scSteam 2.6s ease-out infinite; transform-origin: bottom; }
  .live .yap-scene .sc-grid { animation: scGrid 3s cubic-bezier(0.55, 0, 1, 0.45) infinite; }
  .live .yap-scene .sc-window { animation: scWindow 6s steps(1) infinite; }
  .live .yap-scene .sc-beacon { animation: scBeacon 1.6s ease-in-out infinite; }
  .live .yap-scene .sc-shoot { animation: scShoot 7s ease-in infinite; }
  .live .yap-scene .sc-flame { animation: scFlame 0.9s ease-in-out infinite alternate; transform-origin: bottom; }
  .live .yap-scene .sc-spark { animation: scSpark 2.2s ease-out infinite; }
  .live .yap-scene .sc-shuffle { animation: scShuffle 1.4s linear infinite; }
  .live .yap-scene .sc-shot { animation: scShot 1.4s linear infinite; }
  .live .yap-scene .sc-scan { animation: scScan 0.25s steps(1) infinite; }
  @keyframes scTwinkle { 50% { opacity: 0.1; } }
  @keyframes scFlicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.8; } 55% { opacity: 0.95; } 75% { opacity: 0.72; } }
  @keyframes scRain { to { transform: translate(-9px, 40px); } }
  @keyframes scSteam { from { opacity: 0; transform: translateY(3px) scaleY(0.7); } 40% { opacity: 0.6; } to { opacity: 0; transform: translateY(-6px) scaleY(1.1); } }
  @keyframes scGrid { from { transform: translateY(0); opacity: 0.25; } to { transform: translateY(40px); opacity: 0.9; } }
  @keyframes scWindow { 0% { opacity: 0.85; } 40% { opacity: 0; } 70% { opacity: 0.85; } }
  @keyframes scBeacon { 50% { opacity: 0.15; } }
  @keyframes scShoot { 0%, 78% { transform: translate(120px, 6px) rotate(14deg); opacity: 0; } 80% { opacity: 1; } 92% { transform: translate(300px, 52px) rotate(14deg); opacity: 0; } 100% { opacity: 0; } }
  @keyframes scFlame { from { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(0.94, 1.08) skewX(-3deg); } to { transform: scale(1.04, 0.95) skewX(3deg); } }
  @keyframes scSpark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-6px, -40px); opacity: 0; } }
  @keyframes scShuffle { 0%, 49% { transform: translateX(0); } 50%, 100% { transform: translateX(8px); } }
  @keyframes scShot { from { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(-62px); opacity: 0; } }
  @keyframes scScan { 50% { opacity: 0.7; } }

  /* Avatar frames: a ring drawn around the avatar. --fw is the ring width and --fg how far it sits outside */
  .yap-frame { position: relative; display: inline-grid; place-items: center; border-radius: 50%; --fw: 3px; --fg: 5px; }
  .yap-frame > svg { position: relative; }
  .yap-frame::before { content: ""; position: absolute; inset: calc(var(--fg) * -1); border-radius: 50%; pointer-events: none; }
  .yap-frame.f-0::before,
  .yap-frame.f-1::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 0.5px));
  }
  .yap-frame.f-0::before { background: conic-gradient(#ff4fd8, #22d3ee, #a78bfa, #ff4fd8); }
  .yap-frame.f-1::before { background: conic-gradient(from 180deg, #f97316, #fbbf24, #ef4444, #f97316); }
  .yap-frame.f-2::before { border: var(--fw) solid #fbbf24; box-shadow: 0 0 0 1px #7c4a03, 0 0 10px rgba(251, 191, 36, 0.55); }
  .yap-frame.f-3::before { border: var(--fw) dashed #4ade80; border-radius: 30%; box-shadow: 0 0 8px rgba(74, 222, 128, 0.35); }
  .live .yap-frame.f-0::before,
  .live .yap-frame.f-1::before { animation: scSpin 4s linear infinite; }
  .live .yap-frame.f-2::before { animation: scGold 2.4s ease-in-out infinite; }
  @keyframes scSpin { to { transform: rotate(1turn); } }
  @keyframes scGold { 50% { box-shadow: 0 0 0 1px #7c4a03, 0 0 18px rgba(251, 191, 36, 0.85); } }

  @media (prefers-reduced-motion: reduce) {
    .live .yap-scene .live-only { display: none; }
    .live .yap-scene .still-only { display: inline; }
    .live .yap-scene *,
    .live .yap-frame::before { animation: none !important; }
  }

/* ---- Motion that follows the scroll. Everything above is the complete, still page. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .player { animation: scrub linear both; animation-timeline: scroll(root); }
    .played { animation: reveal linear both; animation-timeline: scroll(root); }
    .head { animation: travel linear both; animation-timeline: scroll(root); }
    .pop { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .room-chat .pop:nth-child(2), .play-list .pop:nth-child(2), .pal:nth-child(2), .drop-chat .pop:nth-child(2) { animation-range: entry 25% entry 85%; }
    .play-list .pop:nth-child(3), .pal:nth-child(3), .drop-chat .pop:nth-child(3) { animation-range: entry 40% entry 100%; }
    .play-list .pop:nth-child(4), .drop-chat .pop:nth-child(4) { animation-range: entry 55% cover 30%; }
    .strip-played { animation: strip linear both; animation-timeline: view(); animation-range: entry 20% cover 62%; }
    .pred-track i { animation: fill linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .spikes i { animation: spike linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .drop h2 { animation: slam linear both; animation-timeline: view(); animation-range: entry 20% cover 34%; }
    .faces span { animation: pop linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 3%) entry calc(60% + var(--i) * 3%); }
  }
}
@keyframes scrub { to { --t: 342; } }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes travel { to { left: 100%; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(4px); } }
@keyframes strip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fill { from { transform: scaleX(0.5); } }
@keyframes spike { from { transform: scaleY(0.12); } }
@keyframes slam { from { transform: scale(1.5); filter: blur(10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-roll, .panel-head .dot { animation: none; }
  .floater, .burst { display: none; }
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding-top: 22px; }
  .stage { justify-content: flex-start; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(20, 11, 14, 0.8), rgba(20, 11, 14, 0.72) 55%, var(--bg) 100%); }
  .floaters { display: none; }
  .rooms { grid-template-columns: 1fr; gap: 30px; }
  .play, .crew { grid-template-columns: 1fr; gap: 30px; }
  .plans { grid-template-columns: 1fr; }
  .faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --bar: 54px; --wrap: calc(100% - 32px); }
  body { font-size: 16px; }
  .top nav { gap: 16px; }
  .brand { font-size: 23px; }
  .moment-head { grid-template-columns: 1fr; gap: 10px; }
  .stamp { justify-self: start; margin-top: 0; }
  .panel { width: 100%; }
  .ticker { height: 250px; }
  .replay { padding-top: 0; }
  .echoes { position: static; display: grid; gap: 10px; height: auto; margin-bottom: 18px; }
  .echo, .echo.e3 { position: static; max-width: none; width: auto; transform: none; }
  .echo::after { display: none; }
  .b5, .b6, .b7, .b8, .b9 { display: none; }
  .burst svg { width: 34px; height: 34px; }
  .b0 { top: 3%; } .b1 { top: 84%; } .b2 { top: 92%; } .b3 { top: 9%; } .b4 { top: 76%; }
  .play-list li { grid-template-columns: 1fr; gap: 4px; }
  .player { gap: 10px; padding: 0 16px; }
  .track { height: 26px; }
  .chapters span { display: none; }
  .frames { gap: 24px; }
}