/* Public site pages: homepage + login/auth cards. Tokens + base.css only. */

/* ================= Homepage ================= */
.home { overflow-x: clip; }
.home h2 { font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); }

.hero {
  display: grid; gap: var(--s-8); align-items: center;
  padding-top: var(--s-12); padding-bottom: var(--s-8);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr .85fr; gap: var(--s-12); padding-top: var(--s-16); }
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hero-copy h1 { font-size: clamp(var(--text-3xl), 5.4vw, var(--text-5xl)); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.hero-lede { font-size: var(--text-lg); color: var(--fg-muted); max-width: 52ch; }

/* ---- The phone mock: the one loud thing on this page ---- */
.hero-phone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.phone {
  position: relative; overflow: hidden;
  width: min(300px, 78vw); aspect-ratio: 9 / 16;
  border: var(--line-w) solid var(--ink); border-radius: 34px; box-shadow: var(--e-3);
  background:
    radial-gradient(circle at 18% 12%, var(--pop-soft), transparent 42%),
    radial-gradient(circle at 88% 72%, var(--info-soft), transparent 46%),
    var(--surface-2);
  font-size: var(--text-xs);
  transform: rotate(2deg);
}
.phone svg { width: 14px; height: 14px; }
.phone-top { position: absolute; top: 14px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; }
.phone-host {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-weight: 700;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent); border-radius: var(--r-full); padding: 3px 10px 3px 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-weight: 800; flex: none; }
.phone-live { background: var(--pop); color: var(--on-pop); font-weight: 800; border-radius: 6px; padding: 2px 7px; }
.phone-viewers { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; background: color-mix(in srgb, var(--surface-1) 80%, transparent); border-radius: var(--r-full); padding: 3px 8px; }

.phone-bus { position: absolute; top: 50px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; }
.phone-bus-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.phone-bus-track { height: 10px; border-radius: var(--r-full); border: var(--line-w) solid var(--ink); background: var(--surface-1); overflow: hidden; }
.phone-bus-fill { display: block; height: 100%; width: 74%; background: var(--pop); }

.phone-streamer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 70%; height: 48%; display: flex; flex-direction: column; align-items: center; }
.phone-head { width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--surface-3); }
.phone-body { flex: 1; width: 100%; margin-top: 6%; border-radius: 48% 48% 0 0; background: var(--surface-3); }

.phone-chat { position: absolute; left: 10px; right: 30%; bottom: 12px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.phone-chat li { background: color-mix(in srgb, var(--surface-1) 86%, transparent); border-radius: 10px; padding: 4px 8px; line-height: 1.3; }
.phone-chat b { color: var(--fg-muted); margin-right: 4px; }
.phone-chat .is-gift { background: var(--pop-soft); border: var(--line-w) solid var(--pop); font-weight: 700; }

.phone-alert {
  position: absolute; left: 50%; top: 40%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-3) var(--s-4); min-width: 62%;
  background: var(--brand); color: var(--on-brand);
  border: var(--line-w) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--e-2);
  transform: translate(-50%, -50%) rotate(-4deg);
  text-align: center;
}
.phone-alert-gift { font-size: 44px; line-height: 1; }
.phone-alert-text { font-size: var(--text-lg); font-weight: 650; white-space: nowrap; }
.phone-alert-text b { font-weight: 800; }

/* Orchestration: chat, chat, gift lands → alert pops → bus meter jumps. */
.phone.is-playing .c1 { animation: home-chat-in .35s var(--ease-out) .3s both; }
.phone.is-playing .c2 { animation: home-chat-in .35s var(--ease-out) .9s both; }
.phone.is-playing .c3 { animation: home-chat-in .35s var(--ease-out) 1.5s both; }
.phone.is-playing .phone-alert { animation: home-alert-pop .6s var(--ease-bounce) 1.75s both; }
.phone.is-playing .phone-alert-gift { animation: home-wiggle .5s var(--ease-out) 2.3s both; }
.phone.is-playing .phone-bus-fill { animation: home-bus-fill .7s var(--ease-out) 2s both; }

@keyframes home-chat-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes home-alert-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-14deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
}
@keyframes home-wiggle { 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg); } }
@keyframes home-bus-fill { from { width: 38%; } }

/* ---- Sections ---- */
.home-section { padding-top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); }

/* Bento: fills every cell at each breakpoint (no orphan tile). */
.bento {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  grid-template-areas: "alerts" "bus" "presets" "library" "catalog" "phone" "stats";
}
@media (min-width: 700px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "alerts alerts"
      "bus presets"
      "bus library"
      "catalog phone"
      "stats stats";
  }
}
@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "alerts alerts bus"
      "presets library bus"
      "catalog phone stats";
  }
}
.tile {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--surface-1); border: var(--line-w) solid var(--border);
}
.tile h3 { font-size: var(--text-xl); }
.tile-alerts { grid-area: alerts; }
.tile-bus { grid-area: bus; }
.tile-presets { grid-area: presets; }
.tile-library { grid-area: library; }
.tile-catalog { grid-area: catalog; }
.tile-phone { grid-area: phone; }
.tile-stats { grid-area: stats; }
.tile-library a { font-weight: 700; margin-top: auto; }

.trigger-list { list-style: none; margin: var(--s-1) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.trig {
  --trig-bg: var(--surface-2); --trig-fg: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-full); font-weight: 650;
  background: var(--trig-bg); color: var(--fg); border: var(--line-w) solid var(--trig-fg);
}
.trig svg { width: 16px; height: 16px; color: var(--trig-fg); }
.trig-gift { --trig-bg: var(--pop-soft); --trig-fg: var(--pop); }
.trig-coins { --trig-bg: var(--brand-soft); --trig-fg: var(--warning); }
.trig-comment { --trig-bg: var(--info-soft); --trig-fg: var(--info); }
.trig-follow { --trig-bg: var(--success-soft); --trig-fg: var(--success); }

.bus-demo { flex: 1; justify-content: center; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--surface-2); border-radius: var(--r-lg); }
.bus-demo-row { display: flex; justify-content: space-between; gap: var(--s-2); font-weight: 700; font-size: var(--text-sm); flex-wrap: wrap; }
.bus-demo-track { position: relative; height: 24px; margin-top: var(--s-6); border-radius: var(--r-full); background: var(--surface-1); border: var(--line-w) solid var(--ink); }
.bus-demo-fill { position: absolute; inset: 0 auto 0 0; width: 71%; border-radius: var(--r-full); background: var(--pop); }
.bus-demo-bus { position: absolute; left: 71%; top: 50%; transform: translate(-50%, -62%); font-size: 44px; line-height: 1; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; }
.chip { padding: 5px 12px; border-radius: var(--r-full); border: var(--line-w) solid var(--border-strong); font-weight: 650; font-size: var(--text-sm); color: var(--fg-muted); }
.chip.is-on { background: var(--success-soft); border-color: var(--success); color: var(--fg); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); border: var(--line-w) dashed var(--border-strong); }
.steps li::before {
  content: counter(step); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--fg); font-weight: 800; border: var(--line-w) solid var(--ink);
}
.steps h3 { font-size: var(--text-lg); }

.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-8); border-radius: var(--r-xl);
  background: var(--surface-2); border: var(--line-w) solid var(--ink); box-shadow: var(--e-2);
}
.cta-band > .stack-sm { flex: 1 1 320px; min-width: 0; }

/* ================= Auth pages (/auth, beta denied, OAuth errors) ================= */
.auth-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
  padding: var(--s-8) var(--s-4);
  background:
    radial-gradient(circle at 15% 20%, var(--pop-soft), transparent 35%),
    radial-gradient(circle at 85% 85%, var(--brand-soft), transparent 35%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  background: var(--surface-1); border: var(--line-w) solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--e-3);
}
.auth-card h1 { font-size: var(--text-3xl); }
.auth-brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg); text-decoration: none; font-weight: 800; font-size: var(--text-xl); align-self: flex-start; }
.auth-brand img { width: 56px; height: 56px; border-radius: 16px; border: var(--line-w) solid var(--ink); box-shadow: var(--e-1); transform: rotate(-4deg); }
.auth-user { color: var(--pop); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-2); font-size: var(--text-sm); }
.auth-links a { color: var(--fg-muted); min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-2); }

/* TikTok's own button: black with white text in both themes. */
.btn-tiktok { --btn-bg: var(--ink); --btn-fg: var(--fg); min-height: 52px; font-size: var(--text-lg); border-color: var(--border-strong); }
.btn-tiktok:hover { background: var(--ink); filter: brightness(1.3); }
:root[data-theme="light"] .btn-tiktok { --btn-fg: var(--surface-1); border-color: var(--ink); }
.btn-tiktok svg { width: 20px; height: 20px; }