/* ============================================================
   Scene engine — fixed-canvas scenes (auto-scaled by scenes.js)
   Primitives + Part I & II simulations
   ============================================================ */

.slide:not(.is-active) .scene *,
.slide:not(.is-active) .scene::before,
.slide:not(.is-active) .scene::after { animation-play-state: paused !important; }

.s-body.has-scene { justify-content: center; gap: .8cqw; }
.s-head .s-head-title { flex: 1; }
/* course-section eyebrow above each slide title, so the lesson structure is visible */
.s-head-title .s-htxt { display: flex; flex-direction: column; gap: .12em; line-height: 1.2; min-width: 0; }
.s-part { font-size: .44em; font-weight: 800; color: var(--color-orange-600);
  display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.s-brk { padding: .12em .8em; border-radius: 99px; background: #fdf1df;
  border: 1px solid #f3dcbb; color: var(--color-orange-600); font-weight: 800; }
.slide.dk .s-part { color: #f5b45f; }
.slide.dk .s-brk { background: rgba(240,152,48,.16); border-color: rgba(240,152,48,.4); color: #f9c67f; }
/* keep header/title/footer from ballooning on short-but-wide viewports
   (cqw scales with width); vh caps only engage when the short axis is small */
.s-logo { height: min(6.4cqw, 9vh); }
.s-head-title { font-size: min(2.35cqw, 3vh); }
.s-head { padding-bottom: min(1.4cqw, 1.7vh); }
.s-body { padding: min(2cqw, 1.8vh) 0; }
.s-foot { font-size: min(1.5cqw, 1.9vh); padding-top: min(1.2cqw, 1.4vh); }
.sc-title {
  text-align: center; font-weight: 800; color: var(--color-navy);
  font-size: min(2.7cqw, 4.4vh); line-height: 1.4; position: relative; z-index: 3;
}
.sc-title .hl { color: var(--color-blue); }
.scene {
  position: relative; flex: 1; min-height: 0; z-index: 1;
  display: grid; place-items: center; overflow: visible;
  /* counter the caption's top-weight so the scene reads centered in the body */
  margin-top: -1.6vh;
}
.stagebox { position: relative; flex: none; transform-origin: center center; }

/* interactive affordances */
.try-chip {
  position: absolute; top: 0; left: 0; z-index: 12;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 99px;
  background: #fff7ec; border: 1.6px dashed var(--color-orange);
  color: var(--color-orange-600); font-weight: 800; font-size: 17px;
  animation: tryPulse 2.6s ease-in-out infinite;
}
@keyframes tryPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,152,48,.35); }
  50% { box-shadow: 0 0 0 9px rgba(240,152,48,0); } }
.sc-btn {
  position: absolute; z-index: 12; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 99px; border: none;
  background: linear-gradient(135deg, var(--color-blue), var(--color-navy));
  color: #fff; font-family: inherit; font-weight: 800; font-size: 18px;
  box-shadow: 0 10px 26px -10px rgba(24,72,120,.65);
  transition: transform .15s var(--nav-ease), box-shadow .15s;
}
.sc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(24,72,120,.75); }
/* horizontal centering WITHOUT transform: the :hover lift and the press keyframes both
   set `transform`, which would otherwise replace translateX(-50%) and make the button
   jump sideways by half its width (and slip out from under the cursor mid-click). */
.sc-btn.cx { left: 0; right: 0; margin-inline: auto; width: fit-content; }
.sc-btn.alt { background: linear-gradient(135deg, var(--color-orange), var(--color-orange-600)); }
.sc-btn.pressed { animation: btnPress .45s var(--reveal-ease); }
@keyframes btnPress { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.sc-replay {
  position: static; flex: none; z-index: 12; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--color-line);
  background: #fff; color: var(--color-blue); font-size: 17px; font-weight: 900;
  display: grid; place-items: center; font-family: inherit;
  box-shadow: 0 6px 16px -8px rgba(24,72,120,.45);
  transition: transform .3s var(--nav-ease), color .2s;
}
.sc-replay:hover { transform: rotate(-180deg) scale(1.08); color: var(--color-orange-600); }
.sc-replay.pressed { animation: btnPress .45s var(--reveal-ease); }

/* --- primitives (px inside canvases) --------------------------- */
.k-lbl {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 99px; white-space: nowrap; z-index: 8;
  background: #fff; border: 1px solid var(--color-line);
  color: var(--color-navy); font-weight: 700; font-size: 21px;
  box-shadow: 0 6px 16px -8px rgba(24,72,120,.35);
}
.k-doc {
  position: absolute; background: #fff; border: 2.5px solid var(--color-navy);
  border-radius: 6px; box-shadow: 0 4px 10px -4px rgba(24,72,120,.4);
}
.k-doc::before, .k-doc::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 8%;
  border-radius: 99px; background: #b9c8dc;
}
.k-doc::before { top: 30%; } .k-doc::after { top: 52%; }
.k-db {
  position: absolute; border: 2.5px solid var(--color-blue);
  border-radius: 50% / 12%;
  background: linear-gradient(180deg,#eaf2fd,#d9e7fa);
}
.k-db::before {
  content: ""; position: absolute; left: -1%; right: -1%; top: -4%; height: 20%;
  border: 2.5px solid var(--color-blue); border-radius: 50%; background: #f3f8ff;
}
.k-db::after {
  content: ""; position: absolute; left: 18%; right: 18%; height: 5%;
  top: 42%; border-radius: 99px; background: rgba(47,111,214,.35);
  box-shadow: 0 14px 0 rgba(47,111,214,.25), 0 28px 0 rgba(47,111,214,.15);
}
.k-line {
  position: absolute; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg,#c4d4ea 0 14px, transparent 14px 28px);
  background-size: 28px 100%;
  animation: kMarch 1.3s linear infinite;
}
@keyframes kMarch { to { background-position: -28px 0; } }