/* ==========================================================================
   SLIDE 00 — WOJAK START SCREEN  (the pre-roll gag, before the cold open)
   ---------------------------------------------------------------------------
   A crude smoothbrain/brainlet wojak hunt-and-pecks the dumbest possible
   prompt into a NeuroClaw terminal — and the agentic crew takes it dead
   seriously and ships a whole brand. The contrast between the crude meme
   doodle and the premium deck IS the joke.

   Auto-runs on entry, then HALTS on a blinking "press any key ▶" cue — it
   does NOT advance itself. The presenter pages forward with the same key,
   landing on the cold-open slide (Zaha's scanline transition carries the cut).

   Look = NeuroClaw terminal chrome (dark, mono, red/cyan/green), with a
   crude Press-Start-2P pixel accent for the retro-meme flavour. Offline,
   deterministic, reduced-motion falls back to a static end state.

   State machine: [data-start-state] on .nc-start__stage
     idle    -> nothing typed yet (markup default, also the no-JS fallback:
                shows the final "✓ ok." + press-any-key so it's never blank)
     typing  -> the wojak is pecking / the agents are working
     halt    -> sequence finished, press-any-key cue blinks (the hold)
   ========================================================================== */

.nc-start__frame {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--stage-pad-y) var(--stage-pad-x);
  display: flex;
  flex-direction: column;
}

/* top + bottom mono chrome — same idiom as the cold-open frame */
.nc-start__topbar,
.nc-start__footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: none;
}
.nc-start__topbar { margin-bottom: var(--space-lg); }
.nc-start__topbar .idx { color: var(--accent); }
.nc-start__footbar { margin-top: var(--space-lg); }
.nc-start__footbar .accent { color: var(--accent-text); }
.nc-start__cursorline { display: inline-flex; align-items: center; color: var(--text-muted); }

/* the working area: wojak on the left, terminal on the right */
.nc-start__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  gap: var(--space-3xl);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-3xl);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 40%, #161414 0%, #0c0b0b 62%, #080707 100%);
}
/* a faint technical dot grid (matches the cold-open frame texture) */
.nc-start__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(168,162,154,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 50%, #000 0%, transparent 80%);
          mask-image: radial-gradient(85% 75% at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}

/* ----------------------------------------------------------------- WOJAK */
/* The real meme is Daniel's own art — NOW A VIDEO of him typing
   (assets/video/wojak-start.mp4). Black line-art, white page toned to the
   deck's off-white paper (#F5F2EC) so it sits seamless in the light paper
   panel (same look as the QR scan-card on the connect slide). The video
   carries its own keyboard clatter; the terminal text reveals are locked to
   its timeline (JS). reduced-motion / video-failure falls back to the static
   poster <img>. JS only nudges the panel a hair in the typing rhythm. */
.nc-start__wojak {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: clamp(300px, 34vw, 520px);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 60% 80%;     /* pivot at the hands -> a press, not a wobble */
}

/* the light paper panel that holds the original black-on-white meme — same
   paper tone, radius + elevation as the connect-slide scan-card, so the bright
   panel sits intentionally framed on the dark stage (premium, on-brand). */
.nc-start__wojak-panel {
  position: relative;
  width: 100%;
  background: var(--c-paper-200);            /* #F5F2EC — matches the art's bg */
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
}
/* quiet red corner-brackets — same brand cue as the scan-card, never over art */
.nc-start__wojak-panel::before,
.nc-start__wojak-panel::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.nc-start__wojak-panel::before { top: -7px; left: -7px; border-right: none; border-bottom: none; }
.nc-start__wojak-panel::after  { bottom: -7px; right: -7px; border-left: none; border-top: none; }

/* video + fallback still are stacked in the panel; both fill it square. The
   <img> is the fail-safe (shown only when the video can't play). */
.nc-start__wojak-video,
.nc-start__wojak-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;            /* 960x960 source -> always square in the panel */
  border-radius: calc(var(--radius-md) - 3px);
}
.nc-start__wojak-video { object-fit: cover; background: var(--c-paper-200); }
/* default: the video is the surface, the still hides behind it */
.nc-start__wojak-img { display: none; }
/* the panel is a positioning context so the two layers can overlap when both
   need to exist (they never both SHOW — one is always display:none) */
.nc-start__wojak-panel { display: block; }

/* FALLBACK: JS marks the figure .wojak-fallback when the video is unusable
   (missing / decode error). reduced-motion ALSO uses the still (no autoplay,
   no sound). In both cases: hide the video, show the static poster. */
.nc-start__wojak.wojak-fallback .nc-start__wojak-video { display: none; }
.nc-start__wojak.wojak-fallback .nc-start__wojak-img { display: block; }
@media (prefers-reduced-motion: reduce) {
  .nc-start__wojak-video { display: none; }
  .nc-start__wojak-img { display: block; }
}

/* OPTIONAL faint typing pulse: a tiny downward "press" on each keystroke, the
   whole figure dipping a hair toward the keyboard. JS toggles .is-peck; if it
   ever reads as too much it can simply never be toggled (figure stays static).
   Pure GPU transform, no layout, respects reduced-motion below. */
.nc-start__wojak { transition: transform 80ms var(--ease-out); }
.nc-start__wojak.is-peck { transform: translateY(2px) scale(1.004); }

/* a tiny caption under the wojak — labels him so the joke lands instantly.
   It flows BELOW the art (not absolute), so it can never clip the keyboard. */
.nc-start__wojak-tag {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.nc-start__wojak-tag .accent { color: var(--accent-text); }

/* ----------------------------------------------------------------- TERMINAL */
.nc-start__term {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  background: #0b0b0b;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  overflow: hidden;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
/* terminal title bar — three dots + a title, the universal "this is a shell" */
.nc-start__term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  background: #111;
  flex: none;
}
.nc-start__term-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.nc-start__term-dot--r { background: #E8675F; }
.nc-start__term-dot--y { background: #FFB000; }
.nc-start__term-dot--g { background: #3FBF6A; }
.nc-start__term-title {
  margin-left: var(--space-xs);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: none;
}
.nc-start__term-title .accent { color: var(--accent-text); }

/* the console body — generous line height for a stage read */
.nc-start__console {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-xl) var(--space-xl);
  font-size: 1.5rem;
  line-height: 1.85;
  color: var(--text-primary);
  overflow: hidden;
}
.nc-start__line { display: block; white-space: pre-wrap; }
/* lines start hidden; JS reveals them one at a time (deterministic) */
.nc-start__line[data-line] { display: none; }
.nc-start__line.is-shown { display: block; }

.nc-start__prompt { color: var(--accent-text); }      /* the "> " sigil (user) */
.nc-start__sys    { color: var(--text-muted); }       /* dim system chatter */
.nc-start__agent  { color: var(--accent-2); }         /* cyan: the agents speak */
.nc-start__ok     { color: var(--status-ok); font-weight: 700; }  /* green ✓ ok */
.nc-start__loud   { color: var(--accent-text); font-weight: 700; } /* the SHOUTY prompt */

/* the typing caret — a solid block that blinks; JS parks it on the active
   line. Blink is deterministic (steps), not a soft fade. */
.nc-start__caret {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--text-primary);
  animation: nc-start-blink 1s steps(1) infinite;
}
@keyframes nc-start-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* while characters are being typed the caret rides solid (no blink) */
.nc-start__console.is-typing .nc-start__caret { animation: none; opacity: 1; }

/* the agents-working line gets an animated ellipsis (deterministic via JS) */
.nc-start__spin { color: var(--accent-2); }

/* ---- the HALT cue: "press any key ▶" — the blinking hold ------------------ */
.nc-start__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid rgba(43,212,196,0.4);
  border-radius: var(--radius-pill);
  background: rgba(43,212,196,0.06);
  box-shadow: var(--glow-cyan);
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  text-transform: uppercase;
  white-space: nowrap;
}
.nc-start__cue .tri { color: var(--accent-2); }
@keyframes nc-start-cue {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; box-shadow: 0 0 18px -2px rgba(43,212,196,0.55); }
}

/* two labels in one pill: show "begin" at the idle gate, "press any key" at the
   halt. Default (no-JS) hides both spans and the fallback below handles it. */
.nc-start__cue-begin,
.nc-start__cue-halt { display: none; }

/* GESTURE GATE (JS armed): the slide waits idle for the first key; the cue
   invites it. The caret blinks on the empty prompt; lines stay hidden. */
.nc-start__stage.js-armed[data-start-state="idle"] .nc-start__cue {
  display: inline-flex;
  animation: nc-start-cue 1.6s var(--ease-out) infinite;
}
.nc-start__stage.js-armed[data-start-state="idle"] .nc-start__cue-begin { display: inline; }
.nc-start__stage.js-armed[data-start-state="idle"] .nc-start__caret { display: inline-block; }
/* the waiting prompt line ("> ▮") is visible at the gate; all others hidden */
.nc-start__stage.js-armed[data-start-state="idle"] .nc-start__line[data-line="l1"] { display: block; }

/* HALT: the run finished -> blink "press any key" to page on */
.nc-start__stage[data-start-state="halt"] .nc-start__cue {
  display: inline-flex;
  animation: nc-start-cue 1.25s var(--ease-out) infinite;
}
.nc-start__stage[data-start-state="halt"] .nc-start__cue-halt { display: inline; }

/* ---- no-JS fallback ----------------------------------------------------- */
/* With JS off the markup default state is "idle" and .js-armed is never set;
   we still want the room to see a coherent frame, so we reveal every line
   statically and show the (static) halt cue — the gag reads even fully static. */
.nc-start__stage:not(.js-armed)[data-start-state="idle"] .nc-start__line[data-line] { display: block; }
.nc-start__stage:not(.js-armed)[data-start-state="idle"] .nc-start__caret { display: none; }
.nc-start__stage:not(.js-armed)[data-start-state="idle"] .nc-start__cue { display: inline-flex; }
.nc-start__stage:not(.js-armed)[data-start-state="idle"] .nc-start__cue-halt { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .nc-start__wojak,
  .nc-start__caret,
  .nc-start__cue { animation: none !important; transition: none !important; }
  .nc-start__wojak.is-peck { transform: none; }   /* never dip on reduced-motion */
  .nc-start__cue { display: inline-flex; opacity: 1; }
}