/* /live: a 1920 x 1080 stage scaled to the window (letterboxed), every size in --u (one stage pixel). */

.page-live { overflow: hidden; background: #0b0911; }
.live { position: fixed; inset: 0; display: grid; place-items: center; background: #0b0911; }
.live-stage {
  --u: calc(min(100vw, 177.7778vh) / 1920);
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  overflow: hidden;
  background: radial-gradient(120% 95% at 35% 20%, #3a3160 0%, #1d1830 52%, #110e1b 100%);
  color: #fff;
  font-size: calc(26 * var(--u));
  cursor: none;
}
.live-wall { position: absolute; inset: 0; }
.live-wall canvas { width: 100%; height: 100%; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 48%, transparent 55%, rgba(8, 6, 14, 0.55) 100%); transition: opacity 1.2s ease; opacity: 0.7; }
.live-stage.focus .vignette { opacity: 1; background: radial-gradient(48% 60% at 38% 50%, transparent 40%, rgba(8, 6, 14, 0.7) 100%); }

/* top bar */
.l-top { position: absolute; top: calc(30 * var(--u)); left: calc(40 * var(--u)); right: calc(40 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
.l-brand { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.l-brand img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.4)); }
.l-name { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: calc(40 * var(--u)); letter-spacing: -0.02em; }
.l-live { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); margin-left: calc(10 * var(--u)); background: #ff3b5c; color: #fff; border-radius: 999px; padding: calc(8 * var(--u)) calc(18 * var(--u)); font-weight: 800; font-size: calc(20 * var(--u)); letter-spacing: 0.08em; }
.l-live i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
.l-live span, .l-take-kicker span, .l-eyebrow span, .l-cta-title span, .l-sub span, .l-gate-box button span { font-family: var(--zh); letter-spacing: 0.06em; }
.l-test { background: var(--yellow); color: var(--ink); border-radius: 999px; padding: calc(8 * var(--u)) calc(16 * var(--u)); font-weight: 800; font-size: calc(18 * var(--u)); }
@keyframes blink { 50% { opacity: 0.25; } }
.l-meta { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u)); font-size: calc(20 * var(--u)); color: var(--on-dark); background: rgba(17, 14, 27, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: calc(22 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.l-x { color: #fff; font-weight: 700; }
.l-burn { color: #ffb347; font-weight: 800; }
.l-clock { font-family: var(--mono); font-size: calc(30 * var(--u)); color: #fff; }

/* wide shot caption */
.l-caption { position: absolute; left: calc(48 * var(--u)); bottom: calc(112 * var(--u)); max-width: calc(860 * var(--u)); padding: calc(26 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)); border-radius: calc(32 * var(--u)); background: rgba(17, 14, 27, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.l-caption.out { opacity: 0; transform: translateY(calc(20 * var(--u))); }
.l-eyebrow { margin: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: calc(18 * var(--u)); color: var(--yellow); }
.l-big { margin: calc(8 * var(--u)) 0 0; font-family: var(--display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 0.9; font-size: calc(76 * var(--u)); text-shadow: 0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.45); }
.l-sub { margin: calc(14 * var(--u)) 0 0; font-size: calc(28 * var(--u)); color: var(--on-dark); max-width: 40ch; }

/* spotlight card */
.l-card { position: absolute; right: calc(48 * var(--u)); top: calc(140 * var(--u)); width: calc(560 * var(--u)); background: #fff; color: var(--ink); border-radius: calc(36 * var(--u)); padding: calc(34 * var(--u)); box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.45); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.l-card.out { opacity: 0; transform: translateX(calc(60 * var(--u))) scale(0.96); }
.l-tag { display: inline-block; margin: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: calc(6 * var(--u)) calc(16 * var(--u)); font-family: var(--mono); font-size: calc(16 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; }
.l-tag.hot { background: #ff3b5c; }
.l-title { margin: calc(16 * var(--u)) 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: calc(54 * var(--u)); line-height: 0.95; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.l-domain { margin: calc(12 * var(--u)) 0 0; font-family: var(--mono); font-size: calc(24 * var(--u)); color: var(--purple); overflow-wrap: anywhere; }
.l-kv { display: grid; grid-template-columns: auto 1fr; gap: calc(10 * var(--u)) calc(20 * var(--u)); margin: calc(22 * var(--u)) 0 0; font-size: calc(22 * var(--u)); }
.l-kv dt { color: var(--muted); }
.l-kv dd { margin: 0; text-align: right; font-weight: 700; }

/* buy and burn proof card */
.l-proof { position: absolute; right: calc(48 * var(--u)); top: calc(140 * var(--u)); width: calc(620 * var(--u)); background: linear-gradient(160deg, #2a1c12, #1a1220); border: calc(2 * var(--u)) solid #ff9a3c; color: #fff; border-radius: calc(36 * var(--u)); padding: calc(32 * var(--u)); box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.5); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.l-proof.out { opacity: 0; transform: translateX(calc(60 * var(--u))) scale(0.96); }
.l-proof .l-title { color: #ffd08a; }
.l-proof .l-domain { color: #ffb347; font-size: calc(20 * var(--u)); }
.l-proof-list { list-style: none; margin: calc(18 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(8 * var(--u)); }
.l-proof-list li { display: grid; grid-template-columns: 1fr auto; gap: calc(4 * var(--u)) calc(16 * var(--u)); background: rgba(255, 255, 255, 0.06); border-radius: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(20 * var(--u)); }
.l-proof-list b { color: #ffd08a; }
.l-proof-list small { grid-column: 1 / -1; font-family: var(--mono); color: var(--on-dark-muted); font-size: calc(16 * var(--u)); }
.l-takeover.burn .l-take-banner { background: linear-gradient(90deg, #ff7a2f, #ffcc4d); }

/* the call to action, always on */
.l-cta { position: absolute; right: calc(48 * var(--u)); bottom: calc(112 * var(--u)); display: flex; align-items: center; gap: calc(22 * var(--u)); background: var(--purple); border-radius: calc(30 * var(--u)); padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.4); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.l-cta.big { transform: scale(1.12) translateY(calc(-8 * var(--u))); }
.l-qr { width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; padding: calc(6 * var(--u)); image-rendering: pixelated; }
.l-cta-title { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: calc(34 * var(--u)); text-transform: uppercase; }
.l-cta-url { margin: calc(6 * var(--u)) 0 0; font-family: var(--mono); font-size: calc(24 * var(--u)); color: var(--yellow); }
.l-cta-price { margin: calc(6 * var(--u)) 0 0; font-size: calc(20 * var(--u)); color: #ece9ff; max-width: calc(330 * var(--u)); }

/* the new ad takeover */
.l-takeover { position: absolute; left: 50%; top: calc(126 * var(--u)); transform: translateX(-50%); pointer-events: none; }
.l-take-banner { display: flex; align-items: center; gap: calc(24 * var(--u)); background: linear-gradient(90deg, var(--yellow), #ffb347); color: var(--ink); border-radius: calc(40 * var(--u)); padding: calc(18 * var(--u)) calc(44 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, 0.45); animation: take-in 0.7s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.l-take-banner img { width: calc(110 * var(--u)); height: calc(110 * var(--u)); animation: hop 0.6s ease-in-out infinite alternate; }
.l-take-kicker { margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: calc(20 * var(--u)); }
.l-take-title { margin: calc(4 * var(--u)) 0 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: calc(60 * var(--u)); line-height: 0.95; max-width: calc(1100 * var(--u)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-take-sub { margin: calc(6 * var(--u)) 0 0; font-size: calc(24 * var(--u)); font-weight: 600; }
.l-takeover.extend .l-take-banner { background: linear-gradient(90deg, var(--green), #9ff0cf); }
.l-takeover.open .l-take-banner { background: linear-gradient(90deg, var(--blue), #d9f2ff); }
@keyframes take-in { from { opacity: 0; transform: translateY(calc(-40 * var(--u))) scale(0.8) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes hop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(calc(-14 * var(--u))) rotate(6deg); } }

/* recent events */
.l-feed { position: absolute; left: calc(48 * var(--u)); top: calc(130 * var(--u)); margin: 0; padding: 0; list-style: none; display: grid; gap: calc(10 * var(--u)); width: calc(520 * var(--u)); }
.l-feed li { animation: feed-in 0.5s ease both, feed-out 1s ease 24s forwards; background: rgba(23, 20, 32, 0.78); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: calc(18 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); font-size: calc(20 * var(--u)); display: flex; gap: calc(12 * var(--u)); align-items: baseline; backdrop-filter: blur(6px); }
.l-feed time { font-family: var(--mono); color: var(--on-dark-muted); font-size: calc(17 * var(--u)); }
.l-feed b { color: var(--yellow); }
.l-feed span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes feed-in { from { opacity: 0; transform: translateX(calc(-30 * var(--u))); } }
@keyframes feed-out { to { opacity: 0; } }

.l-health, .l-sound { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100 * var(--u)); background: rgba(23, 20, 32, 0.9); border-radius: 999px; padding: calc(10 * var(--u)) calc(22 * var(--u)); font-size: calc(20 * var(--u)); }
.l-health { color: var(--yellow); }
.l-sound { bottom: auto; top: calc(40 * var(--u)); cursor: pointer; }

/* ticker */
.l-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: calc(76 * var(--u)); background: rgba(13, 11, 20, 0.92); border-top: calc(3 * var(--u)) solid var(--purple); overflow: hidden; display: flex; align-items: center; }
.l-track { display: flex; white-space: nowrap; will-change: transform; animation: tick var(--dur, 60s) linear infinite; }
.l-track span { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; }
.l-track span::after { content: ''; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--yellow); margin-left: calc(28 * var(--u)); }
.l-track span:nth-child(3n + 2)::after { background: var(--green); }
.l-track span:nth-child(3n)::after { background: var(--pink); }
.l-track b { color: var(--yellow); font-family: var(--display); font-stretch: 112%; font-weight: 900; }
@keyframes tick { to { transform: translateX(-50%); } }

/* start gate (normal browsers need one click before sound) */
.l-gate { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 9, 17, 0.72); backdrop-filter: blur(8px); cursor: default; }
.l-gate-box { text-align: center; display: grid; justify-items: center; gap: calc(14 * var(--u)); max-width: calc(980 * var(--u)); }
.l-gate-box img { width: calc(160 * var(--u)); height: calc(160 * var(--u)); animation: hop 0.8s ease-in-out infinite alternate; }
.l-gate-box .btn { font-size: calc(30 * var(--u)); min-height: calc(76 * var(--u)); padding: 0 calc(44 * var(--u)); margin-top: calc(12 * var(--u)); }
.l-gate-note { margin: calc(10 * var(--u)) 0 0; color: var(--on-dark-muted); font-size: calc(20 * var(--u)); max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .l-track { animation-duration: 0s; }
  .l-take-banner img, .l-gate-box img, .l-live i { animation: none; }
}