/* ============================================================
   GMC Comment Picker — How-to videos page
   Theater stage for the YouTube playlist embed + step cards.
   Builds on site.css tokens; kinetic but honors reduced motion.
   ============================================================ */

:root { --stage-bg: #0a1512; }
@media (prefers-color-scheme: dark) { :root { --stage-bg: #060d0b; } }

/* ---- hero ---- */
.hero { padding: 72px 0 30px; text-align: center; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: ht-pulse 1.6s infinite; }
@keyframes ht-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 111, 94, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 111, 94, 0); }
}
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 6vw, 58px); line-height: 1.04; letter-spacing: -0.035em;
  margin: 20px 0 14px; text-wrap: balance;
}
.grad { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 620px; margin: 0 auto; color: var(--ink-soft); font-size: 19px; text-wrap: balance; }

/* ---- theater stage ---- */
.theater { padding: 40px 0 10px; }
.stage-wrap { position: relative; max-width: 920px; margin: 0 auto; }
.stage-glow {
  position: absolute; inset: -6%; z-index: 0; border-radius: 40px;
  background: var(--grad-hot); filter: blur(70px); opacity: 0.35;
  animation: ht-breathe 5s ease-in-out infinite;
}
@keyframes ht-breathe {
  0%, 100% { opacity: 0.28; transform: scale(0.98); }
  50% { opacity: 0.45; transform: scale(1.02); }
}
.stage {
  position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--mint) 35%, var(--line));
  box-shadow: var(--shadow-pop); background: var(--stage-bg);
  transition: transform 0.35s var(--ease-spring);
}
.stage:hover { transform: translateY(-4px); }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: var(--stage-bg); }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stage-caption {
  text-align: center; margin-top: 18px; color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 13px;
}

/* ---- step cards ---- */
.steps { padding: 66px 0 10px; }
.steps h2 {
  font-family: var(--font-display); font-weight: 800; text-align: center;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; margin: 0 0 8px; text-wrap: balance;
}
.steps .sub { text-align: center; color: var(--ink-soft); margin: 0 0 38px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .step-grid { grid-template-columns: 1fr; } }
.step-card {
  position: relative; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px 26px; box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink); display: block;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.3s;
  transform-style: preserve-3d;
}
.step-card:hover { transform: translateY(-8px) rotate3d(1, -1, 0, 3deg); box-shadow: var(--shadow); border-color: var(--mint); }
.step-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--teal);
  background: var(--mint-soft); border-radius: var(--radius-pill); padding: 5px 13px; display: inline-block;
}
@media (prefers-color-scheme: dark) { .step-num { color: var(--mint); } }
.step-emoji { font-size: 40px; display: block; margin: 18px 0 6px; }
.step-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.step-card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.step-card .go {
  display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14.5px;
  color: var(--teal); transition: transform 0.2s var(--ease-spring);
}
@media (prefers-color-scheme: dark) { .step-card .go { color: var(--mint); } }
.step-card:hover .go { transform: translateX(5px); }

/* ---- CTA ---- */
.cta { padding: 74px 0 10px; }
.cta-box {
  position: relative; overflow: hidden; text-align: center; background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 52px 30px;
  box-shadow: var(--shadow);
}
.cta-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-hot); }
.cta-box h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -0.03em; margin: 0 0 10px; text-wrap: balance;
}
.cta-box p { color: var(--ink-soft); max-width: 520px; margin: 0 auto 28px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-red { background: #e53935; color: #fff; box-shadow: 0 18px 40px -20px #e53935; }
.btn-red:hover { transform: translateY(-2px) scale(1.02); background: #c62828; }

/* ---- motion opt-out ---- */
@media (prefers-reduced-motion: reduce) {
  .live, .stage-glow { animation: none; }
  .stage:hover, .step-card:hover, .step-card:hover .go, .btn-red:hover { transform: none; }
}