/* ============================================================
   Deck shell — slide stage, navigation, transitions
   16:9 stage scaled to viewport. Keyboard-driven.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background:
    radial-gradient(1200px 700px at 12% -10%, #ffe8d6 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 110%, #e0f7f4 0%, transparent 50%),
    var(--bg);
  font-family: var(--font);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* Korean: wrap between words only */
  overflow-wrap: break-word;
}
.cover h1, .intro-card h1 { text-wrap: balance; }

/* --- Stage: a 16:9 canvas centered & scaled ---
   NOTE: named .deck-stage (NOT .stage) — roadmap.css uses .stage for its
   station nodes, and that rule would otherwise override this container's
   position:fixed → breaking fullscreen centering. */
.deck-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;       /* vertical centering of the single deck item */
  justify-content: center;   /* horizontal centering */
  overflow: hidden;
}
.deck {
  position: relative;        /* must stay relative — absolute breaks slide rendering */
  flex: 0 0 auto;
  width: 1280px;
  height: 720px;
  transform-origin: center center;
}

/* --- Slides --- */
.slide {
  position: absolute;
  inset: 0;
  padding: 46px 72px;
  display: none;
  /* Korean line-breaking: never split inside a word (신입 변/호사 금지) */
  word-break: keep-all;
  overflow-wrap: break-word;
  flex-direction: column;
  opacity: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.slide.active { display: flex; }

/* enter / leave transitions */
.slide.enter-next { animation: slideInNext var(--t-med) var(--ease-out) both; }
.slide.enter-prev { animation: slideInPrev var(--t-med) var(--ease-out) both; }
@keyframes slideInNext {
  from { opacity: 0; transform: translateX(46px) scale(.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes slideInPrev {
  from { opacity: 0; transform: translateX(-46px) scale(.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- Step reveals (fragments) ---
   kf-rise recipe: opacity + lift + slight blur = premium entrance */
[data-step] {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(7px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1),
              filter .65s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform, filter;
}
[data-step].shown { opacity: 1; transform: none; filter: none; }
[data-step][data-anim="scale"]     { transform: scale(.8); transition-timing-function: cubic-bezier(.22,1.3,.36,1); }
[data-step][data-anim="scale"].shown{ transform: scale(1); }
[data-step][data-anim="left"]      { transform: translateX(-44px); }
[data-step][data-anim="left"].shown{ transform: none; }
[data-step][data-anim="right"]     { transform: translateX(44px); }
[data-step][data-anim="right"].shown{ transform: none; }

/* accessibility: kill motion when the OS asks for it */
@media (prefers-reduced-motion: reduce) {
  [data-step], .slide, .mascot .bob, .galton .gball, .hub-line, .hub-dot,
  .loop .ring.spin { animation: none !important; transition: none !important; }
  [data-step] { opacity: 1; transform: none; filter: none; }
}

/* --- Progress bar --- */
.progress {
  position: fixed;
  left: 0; top: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--amber), var(--teal), var(--purple));
  border-radius: 0 4px 4px 0;
  z-index: 50;
  transition: width var(--t-fast) var(--ease-out);
}

/* --- Minimal page counter (fullscreen-clean, no nav chrome) --- */
.hud {
  position: fixed;
  bottom: 16px; right: 20px;
  font-size: 13px; color: var(--ink-faint);
  z-index: 50;
  user-select: none;
  opacity: .45;
  transition: opacity var(--t-fast);
}
.hud:hover { opacity: .9; }
.hud .count { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }

/* --- Decorative floating blobs (per-slide background candy) --- */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(2px); opacity: .5; z-index: 0;
  pointer-events: none;
}

/* generic slide content layering */
.slide > * { position: relative; z-index: 1; }
/* …but decorative blobs must stay out of the flex flow (higher specificity) */
.slide > .blob { position: absolute; z-index: 0; }

/* --- Fullscreen start intro --- */
.intro {
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 100; transition: opacity .5s var(--ease-out);
  background:
    radial-gradient(900px 600px at 20% 0%, #ffe2cc 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 100%, #ccf3ec 0%, transparent 55%),
    var(--bg);
}
.intro.gone { opacity: 0; pointer-events: none; }
.intro-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px; }
.intro-emoji { font-size: 72px; animation: floaty 3.5s var(--ease-out) infinite; }
.intro-card h1 {
  font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 1.08; letter-spacing: -.02em;
  max-width: 16ch;
}
.intro-card h1 .grad {
  background: linear-gradient(100deg, var(--coral), var(--tangerine) 45%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro-card .tag { font-size: 18px; font-weight: 700; color: var(--ink-soft); }
.intro-btn {
  margin-top: 14px; cursor: pointer; border: 0;
  font-family: var(--font); font-size: 22px; font-weight: 800; color: #fff;
  padding: 18px 44px; border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--coral), var(--tangerine));
  box-shadow: var(--shadow-pop);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
.intro-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 50px rgba(255,107,107,.4); }
.intro-btn:active { transform: scale(.97); }
.intro-hint { font-size: 14px; color: var(--ink-faint); margin-top: 4px; }