/* ═══════════════════════════════════════════════════════════════════════════
   KEEMCO LIVE — “Premiere”
   An evening at a film premiere: the lights go down, the art fills the room,
   and everything else is quiet glass and fine print.

   World
   · Canvas   near-black with a warm bias (#060504), film grain over everything.
   · Accent   KEEMCO red, rationed: live, rank, the one thing that matters now.
   · Type     Bebas Neue for marquee titles, Instrument Serif italic for the
              human voice (greetings, subtitles), Inter for everything you read.
   · Depth    Art is the only thing allowed to be loud. Chrome is smoked glass.
   · Motion   Slow where it's atmosphere (Ken Burns, crossfades, parallax),
              quick and springy where it's feedback (press, save, tab, toast).
   Loaded after styles.css; this file is the visual source of truth.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --canvas: #060504;
  --canvas-2: #111010;
  --canvas-3: #1A1918;
  --canvas-4: #262423;
  --on-canvas: #F7F5F2;
  --on-canvas-2: #ADA9A4;
  --on-canvas-3: #8A8580;
  --line: rgba(255, 245, 235, .08);
  --line-2: rgba(255, 245, 235, .16);
  --glass: rgba(255, 245, 235, .07);
  --paper: #121110;
  --paper-2: #1C1A19;
  --paper-3: #2A2826;
  --ink: #F7F5F2;
  --ink-2: #ADA9A4;
  --ink-3: #8A8580;
  --paper-line: rgba(255, 245, 235, .08);
  --live: #E50914;
  --live-glow: rgba(229, 9, 20, .45);

  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* long, cinematic settle */
  --spring: cubic-bezier(.34, 1.56, .64, 1);     /* small overshoot for feedback */
  --smoke: rgba(14, 13, 12, .62);                /* glass chrome */
  --smoke-line: rgba(255, 245, 235, .09);
  --r-card: 8px;
  --r-panel: 16px;
  --tabbar-h: 84px;
}
:root[data-theme="light"] {
  --smoke: rgba(250, 248, 245, .72);
  --smoke-line: rgba(20, 16, 12, .08);
  --live-glow: rgba(229, 9, 20, .25);
}

body { background: var(--canvas); letter-spacing: -.005em; }

/* Film grain: a whisper of texture so the black reads as cinema, not as empty. */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 300; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
:root[data-theme="light"] body::after { opacity: .03; }
@keyframes grain { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } }

/* ── type ─────────────────────────────────────────────────────────────── */
.pagehead { padding-top: var(--s6); gap: 6px; }
.pagehead h1 { font-size: clamp(30px, 7.5vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.pagehead__sub, .row__head h2 small, .row__head small { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0; color: var(--on-canvas-2); }
.row__head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.marquee, .tp-title, .premiere__title { font-kerning: normal; }
.empty h2, .empty__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: 0; }

/* ── header: smoked glass that tucks away on the way down ─────────────── */
.topbar {
  transition: background 400ms var(--ease-out), transform 520ms var(--ease-out), box-shadow 400ms var(--ease-out);
  will-change: transform;
}
.topbar.is-solid {
  background: var(--smoke); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 1px 0 var(--smoke-line);
}
.topbar.is-tucked { transform: translateY(-110%); }
.brand__mark { border-radius: 6px; box-shadow: 0 0 18px var(--live-glow); transition: transform 500ms var(--spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.country { background: var(--smoke); border-color: var(--smoke-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 200ms, border-color 200ms; }
.country:hover { border-color: var(--line-2); }
.topbar__nav a { position: relative; background: none !important; color: var(--on-canvas-2); transition: color 200ms; }
.topbar__nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--live); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease-out); }
.topbar__nav a:hover { color: var(--on-canvas); }
.topbar__nav a:hover::after { transform: scaleX(.4); }
.topbar__nav a[aria-current="page"] { color: var(--on-canvas); }
.topbar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.count-badge { animation: badgeIn 600ms var(--spring) both; box-shadow: 0 0 0 2px var(--canvas), 0 0 12px var(--live-glow); }
@keyframes badgeIn { from { transform: scale(0); } }

/* ── dock: floating glass tab bar with a gliding indicator ────────────── */
.tabbar {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 64px; padding: 6px;
  display: flex; align-items: stretch; justify-content: stretch;
  border-radius: 22px; border: 1px solid var(--smoke-line); border-top: 1px solid var(--smoke-line);
  background: var(--smoke); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.tabbar a { flex: 1; min-width: 0; justify-content: center; gap: 2px; z-index: 1; color: var(--on-canvas-3); transition: color 260ms; -webkit-tap-highlight-color: transparent; }
.tabbar a:active .navpill, .tabbar a:active .tab-avatar { transform: scale(.88); }
.dock__ind {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 16px;
  background: color-mix(in srgb, var(--on-canvas) 11%, transparent);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 560ms var(--spring), opacity 300ms;
}
.navpill, .navpill.is-on { width: auto; height: 28px; background: transparent !important; transition: transform 300ms var(--spring); }
.tabbar a[aria-current="page"] .navpill .ms { animation: tabPop 520ms var(--spring); }
@keyframes tabPop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.dock__label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.tab-avatar { transition: transform 300ms var(--spring), box-shadow 300ms; }
.tabbar .dot { top: 6px; right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--canvas-2); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 2px var(--canvas-2), 0 0 10px var(--live-glow); } }
main { padding-bottom: calc(var(--tabbar-h) + var(--s6)); }

/* ── page arrival + scroll reveals ────────────────────────────────────── */
main.is-entering > :not(.buybar) { animation: pageIn 620ms var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }
.reveal-pending { opacity: 0; transform: translateY(32px); }
.is-revealed { transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); }
.row.is-revealed .rail > * { animation: cardIn 800ms var(--ease-out) both; }
.row.is-revealed .rail > :nth-child(2) { animation-delay: 60ms; }
.row.is-revealed .rail > :nth-child(3) { animation-delay: 120ms; }
.row.is-revealed .rail > :nth-child(4) { animation-delay: 180ms; }
.row.is-revealed .rail > :nth-child(5) { animation-delay: 240ms; }
.row.is-revealed .rail > :nth-child(n+6) { animation-delay: 300ms; }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }

/* ── buttons: weight, sheen and a press you can feel ──────────────────── */
.btn { position: relative; overflow: hidden; border-radius: 6px; letter-spacing: -.01em; transition: transform 220ms var(--spring), background 200ms, box-shadow 300ms var(--ease-out), color 200ms; }
.btn:active { transform: scale(.96); }
.btn--play { box-shadow: 0 6px 24px rgba(255, 255, 255, .12); }
.btn--play:hover { background: #fff; box-shadow: 0 10px 34px rgba(255, 255, 255, .22); }
.btn--play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
.btn--play:hover::after { transform: translateX(120%); transition: transform 900ms var(--ease-out); }
:root[data-theme="light"] .btn--play::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%); }
.btn--grey { background: rgba(120, 116, 112, .38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn--grey:hover { background: rgba(120, 116, 112, .55); }
.btn .ms { transition: transform 300ms var(--spring); }
.btn:hover .ms { transform: scale(1.12); }
.btn--live { box-shadow: 0 0 0 0 var(--live-glow); animation: liveRing 2.4s ease-out infinite; }
@keyframes liveRing { 0% { box-shadow: 0 0 0 0 var(--live-glow); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.iconbtn { transition: background 200ms, transform 260ms var(--spring); }
.iconbtn:active { transform: scale(.9); }
.iconbtn--ring { width: 52px; height: 52px; flex: none; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(0, 0, 0, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.iconbtn--ring:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.iconbtn--ring[aria-pressed="true"] { color: var(--live); border-color: rgba(255, 255, 255, .9); background: #fff; }
.is-popping .ms { animation: heartPop 620ms var(--spring); }
/* Only things that aren't already positioned; the card heart is pinned to its corner and must stay there. */
.is-popping:not(.ecard__save) { position: relative; }
.is-popping::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--live); animation: heartRing 620ms var(--ease-out) forwards; pointer-events: none; }
@keyframes heartPop { 0% { transform: scale(.4); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes heartRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

/* chips: the selected one turns to light */
.chip { transition: background 240ms var(--ease-out), color 240ms, border-color 240ms, transform 200ms var(--spring); border-color: var(--line-2); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--on-canvas); color: var(--canvas); border-color: var(--on-canvas); }

/* ── posters: shimmer while loading, then a soft focus-pull in ────────── */
.poster--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 1.6s linear infinite; }
.poster--photo:has(img.is-in)::before { content: none; }
@keyframes shimmer { to { background-position: -150% 0; } }
.poster img { filter: blur(8px); transform: scale(1.04); transition: opacity 700ms var(--ease-out), filter 900ms var(--ease-out), transform 1200ms var(--ease-out); }
.poster img.is-in { filter: none; transform: none; }
.poster__mark { color: var(--live); text-shadow: 0 0 14px var(--live-glow); }

/* ═══ HOME — the premiere ═══════════════════════════════════════════════ */
.premiere {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  margin-top: calc(-1 * var(--topbar-h)); height: max(600px, 86svh); max-height: 900px;
}
.premiere__stage { position: absolute; inset: 0 0 -60px; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
.premiere__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--ease-out); }
.premiere__slide.is-on { opacity: 1; z-index: 1; }
.premiere__slide .poster { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.premiere__slide .poster::after, .premiere__slide .poster__mark { display: none; }
.premiere__slide .poster img.is-in { transform: scale(1.14); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 12s cubic-bezier(.2, .6, .35, 1); }
.premiere__slide.is-on .poster img.is-in { transform: scale(1.0); }
.premiere__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, transparent 20%),
    linear-gradient(to top, #060504 0%, rgba(6, 5, 4, .92) 26%, rgba(6, 5, 4, .45) 52%, transparent 74%),
    radial-gradient(130% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55));
}
.premiere::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; background: linear-gradient(to bottom, transparent, var(--canvas)); pointer-events: none; }
.premiere__body { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 var(--s4) 72px; display: flex; flex-direction: column; gap: 14px; }
.premiere__hello { font-size: 13px; color: rgba(255, 255, 255, .72); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; animation: lineIn 900ms var(--ease-out) both; }
.premiere__hello em { font-family: var(--font-serif); font-size: 22px; color: #fff; letter-spacing: 0; }
.premiere__lines { display: flex; flex-direction: column; gap: 10px; }
.premiere__lines > * { animation: lineIn 900ms var(--ease-out) both; }
.premiere__lines > :nth-child(2) { animation-delay: 70ms; }
.premiere__lines > :nth-child(3) { animation-delay: 140ms; }
.premiere__lines > :nth-child(4) { animation-delay: 200ms; }
.premiere__lines > :nth-child(5) { animation-delay: 260ms; }
.premiere__lines > :nth-child(6) { animation-delay: 320ms; }
@keyframes lineIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.premiere__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.premiere__eyebrow > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-right: 10px; vertical-align: middle; opacity: .7; }
.premiere__rank { padding: 4px 8px 3px; border-radius: 4px; background: var(--live); color: #fff; letter-spacing: .12em; box-shadow: 0 0 20px var(--live-glow); }
.premiere__rank + span::before { display: none !important; }
.premiere__title { font-family: var(--font-marquee); font-weight: 400; font-size: clamp(64px, 18vw, 148px); line-height: .84; letter-spacing: .005em; text-wrap: balance; margin-top: 2px; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.premiere__sub { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.1; color: rgba(255, 255, 255, .9); margin-top: -6px; }
.premiere__meta { font-size: 14px; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
.premiere__proof { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.premiere__proof b { color: #fff; }
.premiere__actions { display: flex; gap: 10px; margin-top: 6px; }
.premiere__actions .btn { flex: 1; padding: 0 16px; }
.premiere__ticks { display: flex; gap: 6px; margin-top: 8px; }
.premiere__ticks button { height: 24px; display: grid; align-items: center; }
.premiere__ticks i { position: relative; display: block; width: 26px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .28); transition: width 600ms var(--ease-out); }
.premiere__ticks [aria-selected="true"] i { width: 56px; }
.premiere__ticks i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.premiere__ticks [aria-selected="true"] i::after { transform: scaleX(1); }
.premiere.is-timing .premiere__ticks [aria-selected="true"] i::after { animation: tick var(--slide-ms, 8000ms) linear both; }
@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.home-body { position: relative; z-index: 5; }
.home-body > .livebar:first-child { margin-top: -6px; }

@media (min-width: 900px) {
  .premiere { height: min(92vh, 900px); min-height: 640px; }
  .premiere__shade {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, transparent 18%),
      linear-gradient(to right, rgba(6, 5, 4, .92) 0%, rgba(6, 5, 4, .55) 38%, transparent 66%),
      linear-gradient(to top, #060504 0%, rgba(6, 5, 4, .5) 22%, transparent 45%);
  }
  .premiere__body { left: max(var(--s7), calc((100vw - 1240px) / 2 + var(--s6))); right: auto; width: min(620px, 48vw); padding: 0 0 112px; }
  .premiere__title { font-size: clamp(96px, 9vw, 152px); }
  .premiere__actions .btn { flex: none; padding: 0 30px; }
  .home-body { margin-top: -48px; }
}

/* live banner: a lit marquee strip */
.livebar {
  position: relative; overflow: hidden; border-radius: var(--r-panel); padding: 12px; gap: 14px;
  background: linear-gradient(110deg, rgba(229, 9, 20, .16), rgba(229, 9, 20, .04) 50%), var(--canvas-2);
  border: 1px solid rgba(229, 9, 20, .45); box-shadow: 0 0 40px rgba(229, 9, 20, .12);
  transition: transform 300ms var(--spring), box-shadow 300ms;
}
.livebar:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(229, 9, 20, .22); }
.livebar__art { border-radius: 8px; }
.livebar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%) 0 0 / 300% 100%; animation: shimmer 4s linear infinite; pointer-events: none; }
.live-badge { border-radius: 4px; box-shadow: 0 0 18px var(--live-glow); }

/* ── rows & cards ─────────────────────────────────────────────────────── */
.row__head > a { gap: 4px; transition: color 200ms; }
.row__head > a .ms { transition: transform 300ms var(--spring); }
.row__head > a:hover .ms { transform: translateX(4px); }
.ecard__art { border-radius: var(--r-card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.ecard__art .poster img.is-in { transition: transform 1400ms var(--ease-out), opacity 700ms, filter 900ms; }
.ecard__link { transition: none; }
.ecard__link:hover { transform: none; }
.ecard__link:active .ecard__art { transform: scale(.965); transition-duration: 160ms; }
@media (hover: hover) {
  .ecard__link:hover .ecard__art { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 40px -12px rgba(0, 0, 0, .8); }
  .ecard__link:hover .ecard__art .poster img.is-in { transform: scale(1.07); }
  .ecard__link:hover .ecard__meta > b { color: #fff; }
}
.ecard__meta > b { transition: color 200ms; }
.ecard__save { background: rgba(10, 9, 8, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 260ms var(--spring), background 200ms, color 200ms; }
.ecard__save:active { transform: scale(.85); }
.ecard__save[aria-pressed="true"] { background: #fff; color: var(--live); }
.ecard__flag { border-radius: 0 0 6px 0; }

/* top 10: the numbers are cut from the dark, lit at the edge */
.top-item { transition: transform 400ms var(--ease-out); }
.top-item__n { color: var(--canvas); -webkit-text-stroke: 2px rgba(255, 245, 235, .32); transition: -webkit-text-stroke-color 300ms; }
.top-item .poster { border-radius: var(--r-card); transition: transform 420ms var(--ease-out), box-shadow 420ms; }
@media (hover: hover) {
  .top-item:hover .top-item__n { -webkit-text-stroke-color: var(--live); }
  .top-item:hover .poster { transform: translateY(-6px); box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .8); }
}
:root[data-theme="light"] .top-item__n { -webkit-text-stroke-color: rgba(0, 0, 0, .25); }

/* ═══ EVENT — the title page ════════════════════════════════════════════ */
.tp-hero { position: relative; overflow: hidden; height: max(560px, 80svh); max-height: 860px; isolation: isolate; }
.tp-hero__art { position: absolute; inset: 0 0 -60px; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
.tp-hero__art .poster { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.tp-hero__art .poster img.is-in { animation: kenburns 16s cubic-bezier(.2, .6, .35, 1) both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.tp-hero .poster::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, transparent 22%), linear-gradient(to top, #060504 0%, rgba(6, 5, 4, .9) 30%, rgba(6, 5, 4, .35) 58%, transparent 78%) !important; }
.tp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 1; background: linear-gradient(transparent, var(--canvas)); }
.tp-hero__over { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 var(--s4) 40px; color: #fff; }
.tp-hero__over .tp-head > * { animation: lineIn 900ms var(--ease-out) both; }
.tp-hero__over .tp-head > :nth-child(2) { animation-delay: 80ms; }
.tp-hero__over .tp-head > :nth-child(3) { animation-delay: 150ms; }
.tp-hero__over .tp-head > :nth-child(4) { animation-delay: 210ms; }
.tp-hero__over .tp-head > :nth-child(5) { animation-delay: 270ms; }
.tp-title { font-size: clamp(60px, 16vw, 132px); line-height: .84; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.tp-series { color: rgba(255, 255, 255, .8); }
.tp-meta { color: rgba(255, 255, 255, .82); }
.tp-meta .box { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .4); }
.tp-proof { color: rgba(255, 255, 255, .82); }
.tp-buttons { display: flex; gap: 10px; }
.tp-buttons .btn { flex: 1; width: auto; }
.tp-hero__top .iconbtn--scrim { background: rgba(10, 9, 8, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); }
.tp-body { position: relative; z-index: 3; }
.tp-desc { font-size: 16px; line-height: 1.65; color: var(--on-canvas); max-width: 62ch; }
.tp-tabs { background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--line); }
.tp-tabs button { transition: color 200ms; }
.tp-tabs button:hover { color: var(--on-canvas); }
.tp-tabs button::before { border-radius: 0 0 3px 3px; transform: scaleX(0); transition: transform 420ms var(--ease-out); background: var(--live) !important; }
.tp-tabs button[aria-selected="true"]::before { transform: scaleX(1); animation: tabLine 480ms var(--ease-out); box-shadow: 0 0 14px var(--live-glow); }
@keyframes tabLine { from { transform: scaleX(0); } }
.tp-actions button { transition: transform 260ms var(--spring), color 200ms; }
.tp-actions button:active { transform: scale(.9); }
.tp-actions button[aria-pressed="true"] { color: var(--on-canvas); }
.tp-actions button[aria-pressed="true"] .ms { color: #FFC233; animation: heartPop 620ms var(--spring); }
.buybar { background: var(--smoke) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-top: 1px solid var(--smoke-line) !important; animation: barUp 700ms var(--ease-out) both; }
@keyframes barUp { from { transform: translateY(100%); } }
.tabbody > * { animation: pageIn 520ms var(--ease-out) both; }
.ep { transition: background 240ms; border-radius: 10px; }
.ep:hover { background: var(--glass); }
@media (min-width: 900px) {
  .tp-hero { height: min(88vh, 860px); }
  .tp-hero .poster::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, transparent 18%), linear-gradient(to right, rgba(6, 5, 4, .92) 0%, rgba(6, 5, 4, .5) 40%, transparent 68%), linear-gradient(to top, #060504 0%, transparent 40%) !important; }
  .tp-hero__over { left: max(var(--s7), calc((100vw - 1240px) / 2 + var(--s7))); right: auto; bottom: 88px; width: min(600px, 46vw); padding: 0; }
  .tp-title { font-size: clamp(96px, 8.5vw, 150px); }
  .tp-buttons .btn { flex: none; padding: 0 30px; }
}

/* ═══ DISCOVER ══════════════════════════════════════════════════════════ */
.searchbar { border-radius: 14px; min-height: 56px; background: var(--canvas-3); border: 1px solid var(--line); transition: border-color 300ms, box-shadow 400ms var(--ease-out), background 300ms; }
.searchbar:focus-within { background: var(--canvas-2); border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 18px 40px -18px rgba(0, 0, 0, .8); }
.searchbar > .ms:first-child { transition: transform 400ms var(--spring), color 200ms; color: var(--on-canvas-3); }
.searchbar:focus-within > .ms:first-child { transform: scale(1.12) rotate(-8deg); color: var(--on-canvas); }
.moods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mood { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: 12px; text-align: left; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transition: transform 360ms var(--spring); }
.mood__art { position: absolute; inset: 0; z-index: -1; }
.mood__art .poster { height: 100%; aspect-ratio: auto; border-radius: 0; }
.mood__art .poster__mark { display: none; }
.mood__art .poster::after { background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1) 70%) !important; }
.mood__art .poster img.is-in { transition: transform 1200ms var(--ease-out), opacity 700ms, filter 900ms; }
.mood__name { font-family: var(--font-marquee); font-size: 30px; line-height: .9; letter-spacing: .01em; }
.mood small { font-size: 12px; color: rgba(255, 255, 255, .78); }
.mood:active { transform: scale(.96); }
@media (hover: hover) { .mood:hover .poster img.is-in { transform: scale(1.08); } }
@media (min-width: 700px) { .moods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.rec { border-radius: 12px; overflow: hidden; transition: background 220ms, transform 300ms var(--spring); }
.rec:active { transform: scale(.98); }
.rec .ms { transition: transform 300ms var(--spring); }
.rec:hover .ms { transform: translateX(4px); }

/* ═══ TICKETS — passes, not rows ════════════════════════════════════════ */
.dl { gap: 18px; }
.dl__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "text code";
  gap: 0; padding: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, var(--canvas-3), var(--canvas-2));
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(0, 0, 0, .9);
  transition: transform 420ms var(--ease-out), box-shadow 420ms;
}
@media (hover: hover) { .dl__row:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 1px var(--line-2), 0 30px 50px -24px rgba(0, 0, 0, .9); } }
.dl__row:active { transform: scale(.98); }
.dl__thumb { grid-area: thumb; border-radius: 0; border-bottom: 2px dashed rgba(255, 245, 235, .16); }
.dl__thumb .poster { aspect-ratio: 16 / 6 !important; }
.dl__thumb .poster img.is-in { transition: transform 1400ms var(--ease-out), opacity 700ms, filter 900ms; }
@media (hover: hover) { .dl__row:hover .dl__thumb .poster img.is-in { transform: scale(1.05); } }
/* the punched notches where the stub tears: pinned to the tear line, half cut away by the pass edge */
.dl__thumb { position: relative; overflow: visible; }
.dl__thumb::before, .dl__thumb::after { content: ""; position: absolute; z-index: 3; bottom: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--canvas); }
.dl__thumb::before { left: -11px; } .dl__thumb::after { right: -11px; }
.dl__thumb .poster { overflow: hidden; }
.dl__text { grid-area: text; padding: 16px 0 18px 20px; gap: 4px; }
.dl__text b { font-family: var(--font-marquee); font-size: 30px; font-weight: 400; line-height: .95; letter-spacing: .01em; }
.dl__row .qrprev { grid-area: code; align-self: center; margin: 0 20px 0 12px; width: 68px; height: 68px; border-radius: 8px; padding: 4px; display: block !important; }
@media (min-width: 760px) { .dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
@media (max-width: 420px) { .dl__row { grid-template-columns: minmax(0, 1fr) auto; } }

/* ═══ PANELS, SHEETS, TOASTS ════════════════════════════════════════════ */
.npanel, .yearcard, .settings-list, .paper, .setcard, .badgecard, .post, .composer, .nh, .walletchip, .panel-dark, .gatecard, .txlist {
  border-radius: var(--r-panel) !important;
  background: linear-gradient(180deg, var(--canvas-3), var(--canvas-2)) !important;
  border: 1px solid var(--line) !important; box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .9);
}
:root[data-theme="light"] :is(.npanel, .yearcard, .settings-list, .paper, .setcard, .badgecard, .post, .composer, .nh, .walletchip, .panel-dark, .gatecard, .txlist) { background: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 32px -24px rgba(0, 0, 0, .25); }
.npanel { transition: transform 360ms var(--ease-out), border-color 300ms; }
.npanel:hover { border-color: var(--line-2) !important; transform: translateY(-2px); }
.yearcard { position: relative; overflow: hidden; }
.yearcard::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--live-glow), transparent); filter: blur(10px); opacity: .5; pointer-events: none; }
.yearcard__grid b { background: linear-gradient(180deg, #fff, #c9c3bc); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .yearcard__grid b { background: none; color: var(--ink); }
.settings-list > a, .settings-list > button { transition: background 200ms; }
.settings-list > a .ms:last-child { transition: transform 300ms var(--spring); }
.settings-list > a:hover .ms:last-child { transform: translateX(3px); }
.itile { transition: transform 360ms var(--spring); }
.settings-list > a:hover .itile { transform: rotate(-6deg) scale(1.06); }
.toggle__sw::after { transition: transform 420ms var(--spring), width 300ms, height 300ms, top 300ms, left 300ms, background 200ms !important; }

.scrim { background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade 320ms var(--ease-out); }
.sheet { background: linear-gradient(180deg, #1D1B1A, #141312) !important; border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0 !important; animation: sheetUp 560ms var(--ease-out) both; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .sheet { background: #fff !important; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@media (min-width: 700px) { .sheet { border-radius: 20px !important; border-bottom: 1px solid var(--line); animation: sheetPop 460ms var(--spring) both; } }
@keyframes sheetPop { from { transform: translateY(24px) scale(.96); opacity: 0; } }

.toast { background: rgba(28, 26, 25, .86) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding: 12px 18px !important; animation: toastIn 620ms var(--spring) both; box-shadow: 0 20px 40px rgba(0, 0, 0, .45) !important; }
.toast--ok .ms { color: var(--ok); }
.toast--bad .ms { color: var(--live-ink); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -18px) scale(.9); } }

/* ═══ PROFILE ═══════════════════════════════════════════════════════════ */
.phead { padding-top: var(--s7); overflow-x: clip; }
.phead__glow { inset: 0 calc(-1 * var(--s4)) auto; height: 300px; overflow: hidden; background: radial-gradient(60% 100% at 50% 0%, hsl(var(--h) 70% 40% / .45), transparent 70%); -webkit-mask-image: radial-gradient(60% 62% at 50% 52%, #000 35%, transparent 100%); mask-image: radial-gradient(60% 62% at 50% 52%, #000 35%, transparent 100%); }
.phead__glow img { position: absolute; inset: -30%; width: 160%; height: 160%; object-fit: cover; filter: blur(46px) saturate(1.6); opacity: .5; transform: scale(1.1); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.25) translate(3%, 2%); } }
.phead__avatar { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px rgba(255, 255, 255, .22), 0 20px 50px rgba(0, 0, 0, .6) !important; animation: avatarIn 800ms var(--spring) both; }
@keyframes avatarIn { from { transform: scale(.7); opacity: 0; } }
.phead__name { font-size: clamp(28px, 7vw, 36px) !important; letter-spacing: -.03em; }
.phead__bio { font-family: var(--font-serif); font-style: italic; font-size: 19px !important; line-height: 1.35; color: var(--on-canvas) !important; max-width: 36ch; margin-inline: auto; }
.badgecard__art { transition: transform 500ms var(--spring), filter 400ms; }
.badgecard.is-done:hover .badgecard__art { transform: translateY(-4px) rotate(-6deg) scale(1.06); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }

/* ═══ SOCIAL ════════════════════════════════════════════════════════════ */
.plan__ring { transition: transform 360ms var(--spring); }
.plan:hover .plan__ring, .plan:active .plan__ring { transform: scale(1.06); }
.plan__ring { background: conic-gradient(from 200deg, var(--pa), var(--pb), var(--live), var(--pa)) !important; animation: ringSpin 8s linear infinite; }
.plan__ring > .avatar { animation: ringSpin 8s linear infinite reverse; }
@keyframes ringSpin { to { transform: rotate(1turn); } }
.post { transition: border-color 300ms; }
.post:hover { border-color: var(--line-2) !important; }

/* ═══ desktop dock → header nav; keep the dock for mobile only ═════════ */
@media (min-width: 900px) {
  .tabbar { display: none; }
  main { padding-bottom: var(--s8); }
}

/* Calm mode: atmosphere off, feedback stays instant. */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .premiere__slide .poster img.is-in, .tp-hero__art .poster img.is-in { transform: none !important; animation: none !important; }
  .reveal-pending { opacity: 1; transform: none; }
  .plan__ring, .plan__ring > .avatar, .phead__glow img, .livebar::after, .btn--live { animation: none; }
}