/* ==========================================================================
   SLIDE 08 — AKT 2 — SHOP: the live storefront
   Two browser-window frames side by side: a WIDE home shot + a TALL PDP shot.
   The browser chrome is a quiet, accurate motif (sharp dots + a mono url) —
   it says "this is real and shipped", not a mockup. The PDP is long, so its
   view is a fixed-height window showing the top, with a soft fade implying
   "scrolls further". Captions in mono name what each proves.
   ========================================================================== */

.nc-shop__slide { justify-content: center; gap: var(--space-xl); }

.nc-shop__head { text-align: left; }
.nc-shop__head .nc-eyebrow { margin-bottom: var(--space-sm); }
.reveal .nc-shop__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

/* wide home gets more room than the tall PDP */
.nc-shop__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* --- browser window frame -------------------------------------------------- */
.nc-browser {
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elev-3);
}

.nc-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
}
.nc-browser__dots { display: inline-flex; gap: 6px; flex: none; }
.nc-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.nc-browser__url {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.8em;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-browser__view {
  background: var(--bg-inset);
  display: block;
}
.nc-browser__view img { display: block; width: 100%; height: auto; }

/* the tall PDP: a fixed window onto the top of the page, fading out below */
.nc-browser--tall .nc-browser__view--scroll {
  height: 520px;
  overflow: hidden;
  position: relative;
}
.nc-browser--tall .nc-browser__view--scroll img {
  width: 100%;
  height: auto;
}
.nc-browser--tall .nc-browser__view--scroll::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, transparent, var(--bg-surface));
  pointer-events: none;
}

.nc-browser__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   SLIDE 09 — AKT 2 — THE MECHANISM (the wow)
   The OVERCLOCK explainer animation, full-frame. It already composes its own
   16:9-ish panel (clock dial + signal graph), so we just seat it on a calm
   brand-dark stage and let it loop — proof that the agents build interactive
   product experiences, not just static pages. Same frame grammar as cold-open.
   ========================================================================== */

.nc-mech__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;
}

.nc-mech__topbar,
.nc-mech__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-mech__topbar { margin-bottom: var(--space-lg); }
.nc-mech__topbar .nc-eyebrow .idx { color: var(--accent-2); }
.nc-mech__footbar { margin-top: var(--space-lg); }
.nc-mech__footbar .accent { color: var(--accent-text); }
.nc-mech__meta { letter-spacing: 0.14em; }

.nc-mech__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: radial-gradient(110% 90% at 50% 45%, #141313 0%, #0c0b0b 60%, #080707 100%);
  display: grid;
  place-items: center;
  padding: var(--space-xl);
}
/* the animation composes its own panel — contain it, never crop or stretch */
.nc-mech__video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-3);
}