/* Entrepreneurs Cockpit — design system
   - Light, near-white background (warm-cool neutral)
   - Cyan #00e5ff and magenta #ff2bd6 accents (cyberpunk, restrained)
   - Subtle grid/scanlines via SVG pattern
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f7f8fa;
  --bg-warm: #fafaf7;
  --ink: #0a0e1a;
  --ink-soft: #2a3142;
  --ink-mute: #6b7280;
  --line: #d8dde6;
  --line-soft: #e8ecf2;

  --cyan: #00d4ff;
  --cyan-glow: rgba(0, 212, 255, 0.35);
  --cyan-soft: rgba(0, 212, 255, 0.08);

  --magenta: #ff2bd6;
  --magenta-glow: rgba(255, 43, 214, 0.35);
  --magenta-soft: rgba(255, 43, 214, 0.08);

  --red-dot: #ff3b6b;
  --blue-dot: #00d4ff;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
}

deck-stage {
  background: #1a1d24;
}

deck-stage > section {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-feature-settings: 'ss01' on, 'cv11' on;
  position: relative;
  overflow: hidden;
  letter-spacing: -0.01em;
}

/* Subtle grid background, used on most slides */
.slide-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 14, 26, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 14, 26, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Scanline overlay accent */
.slide-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(10, 14, 26, 0.015) 3px,
    rgba(10, 14, 26, 0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Corner registration marks (HUD vibes) */
.hud-corners::before,
.hud-corners::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: var(--cyan);
  pointer-events: none;
  z-index: 2;
}
.hud-corners.tl::before { top: 32px; left: 32px; border-top: 1px solid; border-left: 1px solid; }
.hud-corners.br::after { bottom: 32px; right: 32px; border-bottom: 1px solid; border-right: 1px solid; }

/* Reusable label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 24px;
  white-space: nowrap;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  border-radius: 50%;
  margin-right: 14px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Slide footer telemetry — small mono caption bottom-left */
.telemetry {
  position: absolute;
  bottom: 32px;
  left: 100px;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  z-index: 2;
}
.telemetry .sep { opacity: 0.4; margin: 0 10px; }
.telemetry .live { color: var(--cyan); }

/* Bullet reveal: bullets advance with arrow key, controlled via class on slide */
.reveal-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal-item.shown {
  opacity: 1;
  transform: translateY(0);
}

/* Drawn-line animation — used for hand-drawn feel diagrams */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
.draw-path {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.draw-path.go {
  animation: draw var(--dur, 1.4s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}

/* Glow utilities */
.text-cyan { color: var(--cyan); }
.text-magenta { color: var(--magenta); }
.text-red { color: var(--red-dot); }
.glow-cyan { text-shadow: 0 0 18px var(--cyan-glow); }
.glow-magenta { text-shadow: 0 0 18px var(--magenta-glow); }
.glow-red { text-shadow: 0 0 18px rgba(255, 59, 107, 0.55); }

/* Generic card */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  position: relative;
}
.card .corner-tl,
.card .corner-tr,
.card .corner-bl,
.card .corner-br {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--cyan);
}
.card .corner-tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.card .corner-tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
.card .corner-bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; }
.card .corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

/* Image placeholders */
.placeholder {
  background:
    repeating-linear-gradient(45deg,
      rgba(10,14,26,0.04) 0,
      rgba(10,14,26,0.04) 8px,
      transparent 8px,
      transparent 16px);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-mute);
  text-align: center;
  padding: 24px;
  letter-spacing: 0.08em;
}

/* Slide-level fade-in for non-bullet content */
.slide-enter > * {
  animation: slideEnter 0.6s ease both;
}
@keyframes slideEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes strikethrough {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}