/* ==========================================================================
   SLIDE 01 — OPENING / TITLE  ("Agentic AI im E-Commerce")
   The deck boots in front of the room: the top status bar types itself in,
   step by step, then the title resolves. NeuroClaw is the case study (Act 1),
   NOT the subject — so no crab, no wordmark here. The topic is stated like a
   system spec; the "compiled" line survives as a quiet deadpan sub-statement.
   ========================================================================== */

.nc-open__slide {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nc-open__topbar,
.nc-open__footbar { text-align: left; }

/* --- centre stage ---------------------------------------------------------- */
.nc-open__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 1240px;
}

/* a contained brand halo behind the title — same disciplined near-black glow
   the hero-reveal uses, not a slop neon bloom. */
.nc-open__stage::before {
  content: "";
  position: absolute;
  top: 16%; left: 50%;
  width: 820px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(214,52,43,0.17) 0%, rgba(43,212,196,0.04) 42%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* command eyebrow */
.nc-open__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}
.nc-open__eyebrow .idx { color: var(--accent); opacity: 0.9; }

/* the hero — the topic, mega scale. "E-Commerce" carries the red accent. */
.reveal .nc-open__title {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 0;
  color: var(--text-primary);
}
.nc-open__title-2 { display: inline-block; }

/* subline — the promise of the deck. Generous air above it so it reads as a
   separate line of thought, not glued to the mega title's descenders (D3). */
.nc-open__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 3.5rem 0 0;
}
.nc-open__sub-em { color: var(--text-primary); font-weight: 500; }

/* the compiled statement — second act, separated by generous whitespace.
   Now clearly SUBORDINATE: a quiet deadpan aside, not a second hero. */
.nc-open__compiled {
  margin-top: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.nc-open__compiled-rule {
  width: 88px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.nc-open__claim {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.nc-open__claim-em { color: var(--text-primary); }

/* footer credit — the four agent names, quiet but present from slide one */
.nc-open__footbar span:last-child { color: var(--text-muted); letter-spacing: 0.2em; }

/* ---------------------------------------------------- BOOT-REVEAL ANIMATION */
/* The status bar boots itself in: command first, then each step ticks ✓ in
   sequence, then ONLINE lights. Driven by JS adding `.is-booting` then timed
   classes; CSS holds the choreography. Honours prefers-reduced-motion. */

.nc-open.is-booting .boot-cmd { opacity: 0; }
.nc-open.is-booting .boot-step { opacity: 0; transform: translateY(2px); }
.nc-open.is-booting .boot-step .tick { opacity: 0; }
.nc-open.is-booting .boot-online { opacity: 0; }

/* revealed states (JS toggles `.boot-go` on the section, staggered via nth) */
.nc-open.boot-go .boot-cmd {
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nc-open.boot-go .boot-step {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.nc-open.boot-go .boot-step:nth-child(2) { transition-delay: 0.45s; }
.nc-open.boot-go .boot-step:nth-child(3) { transition-delay: 0.90s; }
.nc-open.boot-go .boot-step:nth-child(4) { transition-delay: 1.35s; }
.nc-open.boot-go .boot-step:nth-child(5) { transition-delay: 1.80s; }

/* the tick lands a beat after its step label appears — the "probing… ✓" feel */
.nc-open.boot-go .boot-step .tick {
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nc-open.boot-go .boot-step:nth-child(2) .tick { transition-delay: 0.74s; }
.nc-open.boot-go .boot-step:nth-child(3) .tick { transition-delay: 1.19s; }
.nc-open.boot-go .boot-step:nth-child(4) .tick { transition-delay: 1.64s; }
.nc-open.boot-go .boot-step:nth-child(5) .tick { transition-delay: 2.09s; }

.nc-open.boot-go .boot-online {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
  transition-delay: 2.45s;
}

@media (prefers-reduced-motion: reduce) {
  .nc-open.is-booting .boot-cmd,
  .nc-open.is-booting .boot-step,
  .nc-open.is-booting .boot-step .tick,
  .nc-open.is-booting .boot-online { opacity: 1 !important; transform: none !important; }
}