/* ROOM 101 · KICKOFF — a strategy session in one song, then the owner's move */

.kickoff{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--rail-h) + 40px) var(--pad) 56px;
  overflow:hidden;
}
.kickoff::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:90%;
  background:radial-gradient(ellipse 60% 55% at 30% 40%,rgba(139,92,246,.28),transparent 70%);
  pointer-events:none;opacity:.55;transition:opacity .8s ease;
}
.kickoff.is-playing::before{opacity:1;animation:ko-breathe 4.8s ease-in-out infinite}
@keyframes ko-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.ko-inner{position:relative;max-width:1180px;width:100%;margin:0 auto}
.ko-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:var(--violet-b);
  margin-bottom:22px;text-transform:uppercase;
}
.ko-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;margin-bottom:26px;
  text-transform:uppercase;
}
.ko-label i{width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 0 rgba(239,68,68,.6)}
.kickoff.is-playing .ko-label i{animation:ko-pulse 1.4s ease-out infinite}
@keyframes ko-pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}100%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}

.ko-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px,9vw,128px);line-height:1.06;letter-spacing:-.01em;
  text-transform:uppercase;margin:12px 0 40px;
}
.ko-title .accent{display:block;color:var(--violet-b)}
.ko-quote{
  font-size:clamp(18px,2.1vw,24px);line-height:1.45;color:var(--ink-2);
  max-width:34ch;margin-bottom:40px;min-height:3em;
  transition:opacity .45s ease;
}
.ko-quote.is-swap{opacity:0}

/* ---------- player ---------- */
.ko-player{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ko-play{
  position:relative;flex:none;
  width:112px;height:112px;border-radius:50%;
  border:0;cursor:pointer;color:#0B0B11;
  background:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 0 0 10px rgba(139,92,246,.14),0 18px 60px rgba(139,92,246,.45);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.ko-play:hover{transform:scale(1.04);box-shadow:0 0 0 14px rgba(139,92,246,.2),0 22px 70px rgba(139,92,246,.6)}
.ko-play:focus-visible{outline:3px solid var(--violet-b);outline-offset:6px}
.ko-play svg{width:34px;height:34px}
.ko-play .ico-pause{display:none}
.kickoff.is-playing .ko-play .ico-play{display:none}
.kickoff.is-playing .ko-play .ico-pause{display:block}
.ko-ring{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);transform:rotate(-90deg);pointer-events:none}
.ko-ring circle{fill:none;stroke-width:3}
.ko-ring .trk{stroke:rgba(255,255,255,.08)}
.ko-ring .bar{stroke:var(--violet);stroke-linecap:round;transition:stroke-dashoffset .25s linear}

.ko-meta{display:flex;flex-direction:column;gap:8px;min-width:220px}
.ko-cta{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.01em}
.ko-time{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}
.ko-eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.ko-eq span{width:3px;height:4px;background:var(--violet-b);border-radius:1px;opacity:.5}
.kickoff.is-playing .ko-eq span{animation:ko-eq 1s ease-in-out infinite;opacity:1}
.ko-eq span:nth-child(2){animation-delay:.15s}.ko-eq span:nth-child(3){animation-delay:.3s}
.ko-eq span:nth-child(4){animation-delay:.45s}.ko-eq span:nth-child(5){animation-delay:.6s}
@keyframes ko-eq{0%,100%{height:4px}50%{height:18px}}

.ko-skip{
  margin-top:26px;background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--ink-2);
  text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--line);
}
.ko-skip:hover{color:var(--ink);border-color:var(--violet-b)}

/* ---------- your move ---------- */
.ko-move{
  margin-top:56px;padding-top:40px;border-top:1px solid var(--line);
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.ko-move[hidden]{display:none}
.ko-move.is-in{opacity:1;transform:none}
.ko-move-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:var(--violet-b);margin-bottom:14px}
.ko-move-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.02em;margin-bottom:10px;
}
.ko-move-sub{font-size:18px;color:var(--ink-2);margin-bottom:30px}
.ko-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ko-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px;
  font:inherit;min-height:188px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.ko-card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.6);box-shadow:0 20px 50px rgba(139,92,246,.22)}
.ko-card:focus-visible{outline:3px solid var(--violet-b);outline-offset:4px}
.ko-card .ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(139,92,246,.16);color:var(--violet-b);
}
.ko-card .ico svg{width:24px;height:24px}
.ko-card b{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.15}
.ko-card span.d{font-size:15px;color:var(--ink-2);line-height:1.5}
.ko-card span.go{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--violet-b);text-transform:uppercase}
.ko-card.is-primary{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 18px 60px rgba(139,92,246,.45)}
.ko-card.is-primary .ico{background:rgba(255,255,255,.18);color:#fff}
.ko-card.is-primary span.d{color:rgba(255,255,255,.88)}
.ko-card.is-primary span.go{color:#fff}
.ko-card.is-primary:hover{background:#7C4DEB}

@media (max-width:860px){
  .ko-moves{grid-template-columns:1fr}
  .ko-card{min-height:0}
  .ko-play{width:92px;height:92px}
}
@media (prefers-reduced-motion:reduce){
  .kickoff.is-playing::before,.ko-eq span,.ko-label i{animation:none !important}
  .ko-move{transition:none}
}

/* ring sits around the button, not at icon size */
.ko-play .ko-ring{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}
/* desktop: leave the right margin for Betty's docked console */
@media (min-width:1180px){
  .kickoff{padding-right:calc(var(--pad) + var(--b-dock-w) + var(--b-dock-gap) * 2)}
}
@media (max-width:620px){
  .kickoff{justify-content:flex-start;padding-top:calc(var(--rail-h) + 48px)}
}