/* Onboarding stage — the dark petrol-green panel (same tone as the landing's
   showcase band) with a self-drawing line-art stickman, floating props, and the
   caption carousel. Desktop: full-height left column. Below 1024px: compact banner. */

.ob-stage {
  --stage-accent: #34d399;
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 0;
  border: 1px solid rgba(200, 240, 240, 0.12);
  color: #eaf3f4;
  background:
    radial-gradient(620px 360px at 20% 8%, rgba(22, 160, 106, 0.22), transparent 60%),
    radial-gradient(560px 380px at 88% 96%, rgba(52, 211, 153, 0.16), transparent 62%),
    linear-gradient(180deg, #0e241b 0%, #0a1a15 58%, #0a1712 100%);
  box-shadow: var(--shadow);
}
/* faint storyboard grid, fading out towards the edges */
.ob-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 45%, #000 30%, transparent 100%);
}
.ob-stage > * { position: relative; }

.ob-stage .eyebrow { color: rgba(234, 243, 244, 0.55); }
.ob-stage h2 {
  color: #fff;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  margin-top: 8px;
  max-width: 22ch;
}

/* ---- art ---- */
.ob-stage-art {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.ob-stage-art svg {
  width: 100%;
  height: 100%;
  max-width: 480px;
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(22, 160, 106, 0.35));
}

/* draw-in: every stroke starts hidden and "draws" along its length.
   pathLength="1" on each shape lets the same dasharray work for all of them.
   --d = delay, --t = duration (set inline per shape). */
.sm-draw {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
  animation: sm-draw var(--t, 0.5s) cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) both;
}
@keyframes sm-draw { to { stroke-dashoffset: 0; } }

.sm-fade {
  opacity: 0;
  animation: sm-fade 0.5s ease var(--d, 0s) both;
}
@keyframes sm-fade { to { opacity: 1; } }

/* loops — start once the figure has finished drawing (~2.4s) */
.sm-head {
  transform-origin: 236px 176px;
  animation: sm-nod 3.4s ease-in-out 2.4s infinite;
}
@keyframes sm-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3.5deg); }
  65% { transform: rotate(3deg); }
}

.sm-arm-r {
  transform-origin: 236px 208px;
  animation: sm-wave 2.8s ease-in-out 2.4s infinite;
}
@keyframes sm-wave {
  0%, 12% { transform: rotate(0deg); }
  32% { transform: rotate(-14deg); }
  52% { transform: rotate(4deg); }
  72% { transform: rotate(-12deg); }
  100% { transform: rotate(0deg); }
}

.sm-phone {
  opacity: 0.85;
  animation: sm-bob 4.2s ease-in-out 2.4s infinite;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
@keyframes sm-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.sm-paper {
  opacity: 0.78;
  transform: rotate(-3deg);
  transform-box: fill-box;
  transform-origin: center;
  animation: sm-drift 5s ease-in-out 2.6s infinite;
  transition: opacity 0.6s ease;
}
@keyframes sm-drift {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(8px) rotate(-1deg); }
}

.sm-stars { opacity: 0.7; transition: opacity 0.6s ease; }
.sm-star {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    sm-fade 0.5s ease var(--d, 0s) both,
    sm-twinkle 2.2s ease-in-out calc(var(--d, 0s) + 0.9s) infinite;
}
@keyframes sm-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.75); }
}

/* ---- per-step scenes: only the active scene shows; its lines re-draw each time it opens ---- */
.ob-stage-art { position: relative; }
.ob-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.ob-scene.is-on { opacity: 1; visibility: visible; }
.ob-scene svg {
  width: 100%;
  height: 100%;
  max-width: 440px;
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(22, 160, 106, 0.3));
}
/* draw only while the scene is active, so the stroke-in replays on every step change */
.ob-scene .sm-draw { animation: none; stroke-dashoffset: 1.01; }
.ob-scene.is-on .sm-draw {
  animation: sm-draw var(--t, 0.6s) cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) both;
}
.ob-scene .sm-star { animation: none; opacity: 0; }
.ob-scene.is-on .sm-star {
  animation:
    sm-fade 0.5s ease var(--d, 0s) both,
    sm-twinkle 2.2s ease-in-out calc(var(--d, 0s) + 0.9s) infinite;
}

/* scene 1 — blinking cursor once the text has drawn */
.ob-scene[data-scene="1"] .sc-cursor { opacity: 0; }
.ob-scene.is-on[data-scene="1"] .sc-cursor { animation: sc-blink 1s step-end 1.9s infinite; }
@keyframes sc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* scene 2 — storyboard cards settle with a soft pop */
.ob-scene[data-scene="2"] .sc2-card { transform-box: fill-box; transform-origin: center; }
.ob-scene.is-on[data-scene="2"] .sc2-card {
  animation: sc-pop 0.5s ease both;
  animation-delay: calc(1.2s + var(--i) * 0.3s);
}
@keyframes sc-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* scene 4 — play button pulse + sound waves */
.ob-scene[data-scene="4"] .sc-play { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ob-scene.is-on[data-scene="4"] .sc-play {
  animation: sm-fade 0.5s ease 1.2s both, sc-pulse 2.4s ease-in-out 1.7s infinite;
}
@keyframes sc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ob-scene[data-scene="4"] .sc-wave { opacity: 0; }
.ob-scene.is-on[data-scene="4"] .sc-wave {
  animation: sc-wavepulse 1.8s ease-in-out calc(var(--i) * 0.35s) infinite;
}
@keyframes sc-wavepulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .ob-scene .sm-draw, .ob-scene.is-on .sm-draw { animation: none; stroke-dashoffset: 0; }
  .ob-scene .sc-cursor, .ob-scene .sc-play, .ob-scene .sc-wave, .ob-scene .sm-star { opacity: 1; animation: none; }
}

/* the caption in view lights up the matching prop */
.ob-stage[data-cap="1"] .sm-paper { opacity: 1; }
.ob-stage[data-cap="2"] .sm-stars,
.ob-stage[data-cap="3"] .sm-stars { opacity: 1; }
.ob-stage[data-cap="4"] .sm-phone { opacity: 1; filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.65)); }

/* ---- caption carousel ---- */
.ob-cap {
  position: relative;
  height: 3.1em;
  font-size: 1.02rem;
}
.ob-cap-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: rgba(234, 243, 244, 0.92);
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.ob-cap-line.is-on { opacity: 1; transform: none; }
.ob-cap-line .k {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--stage-accent);
  margin-right: 8px;
}

.ob-dots { display: flex; gap: 6px; }
.ob-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(234, 243, 244, 0.28);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.ob-dots button:hover { background: rgba(234, 243, 244, 0.5); }
.ob-dots button.is-on { width: 24px; background: var(--stage-accent); }

/* ---- compact banner below 1024px ---- */
@media (max-width: 1023px) {
  .ob-stage {
    height: 180px;
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "art head"
      "art cap"
      "art dots";
    column-gap: 18px;
    row-gap: 6px;
    padding: 16px 20px;
    border-radius: 22px;
    margin-bottom: 18px;
  }
  .ob-stage-head { grid-area: head; }
  .ob-stage-art { grid-area: art; }
  .ob-cap { grid-area: cap; align-self: center; height: auto; min-height: 2.9em; font-size: 0.92rem; }
  .ob-dots { grid-area: dots; }
  .ob-stage .eyebrow { display: none; }
  .ob-stage h2 { font-size: 1.05rem; margin-top: 0; max-width: none; }
  .ob-stage-art svg { max-width: none; }
}
@media (max-width: 480px) {
  .ob-stage { grid-template-columns: 118px 1fr; column-gap: 14px; padding: 14px 16px; }
  .ob-stage-head { display: none; }
}

/* ---- reduced motion: show the finished drawing, no loops ---- */
@media (prefers-reduced-motion: reduce) {
  .sm-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .sm-fade, .sm-star { animation: none; opacity: 1; }
  .sm-head, .sm-arm-r, .sm-phone, .sm-paper { animation: none; }
  .ob-cap-line { transition: none; transform: none; }
}