/* ======================================================================
   PAGE-SPECIFIC INTRO STYLES
   ====================================================================== */
@import url('./colors_and_type.css');

/* Common intro-brand placed below the main visual */
.intro-brand-bottom {
  position: absolute; left: 50%; bottom: 12vh;
  transform: translateX(-50%);
  text-align: center; color: var(--fg1);
  opacity: 0;
  animation: brand-in 600ms var(--ease-out) 1300ms forwards;
  max-width: 90vw;
}
.intro-brand-bottom .intro-brand-tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--city-blue-deep);
  margin-bottom: 0.6rem;
}
.intro-brand-bottom .intro-brand-name {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.015em; color: var(--fg1);
}

/* ======================================================================
   ABOUT — stick figure assembles from dots
   ====================================================================== */
.intro-about-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.about-bone {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  opacity: 0;
}
.intro-about.intro-phase-2 .about-bone,
.intro-about.intro-phase-3 .about-bone,
.intro-about.intro-phase-4 .about-bone,
.intro-about.intro-phase-5 .about-bone {
  animation: draw-bone 550ms var(--ease-out) forwards;
}
@keyframes draw-bone {
  from { stroke-dashoffset: 1000; opacity: 0; }
  60%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
.about-head {
  stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0;
}
.intro-about.intro-phase-2 .about-head,
.intro-about.intro-phase-3 .about-head,
.intro-about.intro-phase-4 .about-head,
.intro-about.intro-phase-5 .about-head {
  animation: draw-bone 700ms var(--ease-out) 100ms forwards;
}
.about-joint {
  opacity: 0; transform-origin: center; transform: scale(0);
}
.intro-about.intro-phase-1 .about-joint,
.intro-about.intro-phase-2 .about-joint,
.intro-about.intro-phase-3 .about-joint,
.intro-about.intro-phase-4 .about-joint,
.intro-about.intro-phase-5 .about-joint {
  animation: joint-pop 450ms var(--ease-out) forwards;
}
@keyframes joint-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.8); }
  100% { opacity: 0.9; transform: scale(1); }
}

/* ball rolls from left foot to right foot (between the feet in SVG coords: 265→340) */
.about-ball {
  transform: translate(220px, 520px);
  opacity: 0;
}
.intro-about.intro-phase-3 .about-ball,
.intro-about.intro-phase-4 .about-ball,
.intro-about.intro-phase-5 .about-ball {
  animation: ball-roll 900ms var(--ease-out) forwards;
}
@keyframes ball-roll {
  0%   { opacity: 0; transform: translate(160px, 520px) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: translate(420px, 520px) rotate(720deg); }
}

/* role labels spin in */
.about-labels > g {
  opacity: 0;
  transform-origin: center;
  transform: translateY(20px);
}
.intro-about.intro-phase-4 .about-labels > g,
.intro-about.intro-phase-5 .about-labels > g {
  animation: chip-in 500ms var(--ease-out) forwards;
}
.intro-about.intro-phase-4 .about-labels > g:nth-child(1),
.intro-about.intro-phase-5 .about-labels > g:nth-child(1) { animation-delay: 0ms; }
.intro-about.intro-phase-4 .about-labels > g:nth-child(2),
.intro-about.intro-phase-5 .about-labels > g:nth-child(2) { animation-delay: 120ms; }
.intro-about.intro-phase-4 .about-labels > g:nth-child(3),
.intro-about.intro-phase-5 .about-labels > g:nth-child(3) { animation-delay: 240ms; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-about.intro-phase-5 .intro-flash { animation: flash 500ms var(--ease-out) forwards; }

/* ======================================================================
   PHILOSOPHY — neural network
   ====================================================================== */
.intro-philo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Brain outline — draws itself first */
.philo-outline {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  opacity: 0;
}
.intro-philosophy.intro-phase-1 .philo-outline,
.intro-philosophy.intro-phase-2 .philo-outline,
.intro-philosophy.intro-phase-3 .philo-outline,
.intro-philosophy.intro-phase-4 .philo-outline,
.intro-philosophy.intro-phase-5 .philo-outline {
  animation: draw-brain 900ms var(--ease-out) forwards;
}
.philo-outline-r { animation-delay: 80ms !important; }
.philo-outline-m { animation-delay: 200ms !important; }
.philo-outline-s { animation-delay: 400ms !important; }
@keyframes draw-brain {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  40%  { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0.55; }
}
.philo-fold {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  opacity: 0;
}
.intro-philosophy.intro-phase-2 .philo-fold,
.intro-philosophy.intro-phase-3 .philo-fold,
.intro-philosophy.intro-phase-4 .philo-fold,
.intro-philosophy.intro-phase-5 .philo-fold {
  animation: draw-fold 600ms var(--ease-out) forwards;
}
@keyframes draw-fold {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.35; }
}

.philo-conn {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  opacity: 0;
}
.intro-philosophy.intro-phase-2 .philo-conn,
.intro-philosophy.intro-phase-3 .philo-conn,
.intro-philosophy.intro-phase-4 .philo-conn,
.intro-philosophy.intro-phase-5 .philo-conn {
  animation: draw-conn 700ms var(--ease-out) forwards;
}
@keyframes draw-conn {
  0% { stroke-dashoffset: 1000; opacity: 0; }
  40% { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0.45; }
}

.philo-node {
  opacity: 0; transform-origin: center; transform: scale(0);
}
.intro-philosophy.intro-phase-1 .philo-node,
.intro-philosophy.intro-phase-2 .philo-node,
.intro-philosophy.intro-phase-3 .philo-node,
.intro-philosophy.intro-phase-4 .philo-node,
.intro-philosophy.intro-phase-5 .philo-node {
  animation: node-pop 500ms var(--ease-out) forwards, node-pulse 1.6s ease-in-out 800ms infinite;
}
@keyframes node-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 8px #A5D8FF); }
  100% { opacity: 0.95; transform: scale(1); filter: drop-shadow(0 0 4px rgba(108,171,221,0.6)); }
}
@keyframes node-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(108,171,221,0.5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(165,216,255,0.9)); }
}

/* signal pulses travel across connections via CSS vars */
.philo-pulse {
  cx: 0; cy: 0;
  opacity: 0;
  animation: pulse-travel 900ms var(--ease-out) infinite;
}
@keyframes pulse-travel {
  0%   { opacity: 0; transform: translate(var(--x1), var(--y1)); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}

.philo-labels text {
  opacity: 0;
}
.intro-philosophy.intro-phase-4 .philo-labels text,
.intro-philosophy.intro-phase-5 .philo-labels text {
  animation: reveal-up 500ms var(--ease-out) forwards;
}
.intro-philosophy.intro-phase-5 .intro-flash { animation: flash 500ms var(--ease-out) forwards; }

/* ======================================================================
   ANALYSIS — notebook writes itself
   ====================================================================== */
.notebook {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -56%);
  width: min(640px, 90vw);
  background: #F5F0E4;
  background-image:
    linear-gradient(90deg, rgba(220,30,30,0.08) 0, rgba(220,30,30,0.08) 38px, transparent 38px),
    repeating-linear-gradient(180deg, transparent 0, transparent 34px, rgba(108,128,160,0.28) 34px, rgba(108,128,160,0.28) 35px);
  color: #1C2C5B;
  border-radius: 4px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(108,171,221,0.15),
    0 0 60px rgba(108,171,221,0.15);
  padding: 30px 45px 50px 58px;
  min-height: 420px;
  opacity: 0;
  animation: notebook-in 500ms var(--ease-out) forwards;
  overflow: hidden;
}
@keyframes notebook-in {
  from { opacity: 0; transform: translate(-50%, -60%) rotate(-1deg) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -56%) rotate(-0.5deg) scale(1); }
}
.notebook-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.notebook-date {
  font-size: 11px; letter-spacing: 0.22em; color: #4A5680;
  font-family: 'Courier New', ui-monospace, monospace;
}
.notebook-rings {
  position: absolute; left: 18px; top: 20px; bottom: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.notebook-rings span {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3A3A3A, #111);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.3);
}

.nb-title {
  position: relative; display: inline-block;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  font-size: 36px; font-weight: 700; color: #0E1938;
  margin-bottom: 22px; letter-spacing: -0.01em;
}
.nb-title-text {
  clip-path: inset(0 100% 0 0);
  animation: type 400ms steps(20, end) 350ms forwards;
  display: inline-block;
}
.nb-title-underline {
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; background: #B91C1C;
  transform: scaleX(0); transform-origin: left center;
  border-radius: 1px;
  animation: underline 400ms var(--ease-out) 900ms forwards;
}
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes underline { to { transform: scaleX(1); } }

.nb-line {
  position: relative; font-family: 'Caveat', cursive;
  font-size: 22px; line-height: 1.9; color: #1C2C5B;
  margin-bottom: 4px; min-height: 34px;
}
.nb-handwrite {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
.intro-analysis.intro-phase-2 .nb-line-1 .nb-handwrite,
.intro-analysis.intro-phase-3 .nb-line-1 .nb-handwrite,
.intro-analysis.intro-phase-4 .nb-line-1 .nb-handwrite,
.intro-analysis.intro-phase-5 .nb-line-1 .nb-handwrite { animation: type 550ms steps(30) forwards, handwrite-in 200ms forwards; }
.intro-analysis.intro-phase-3 .nb-line-2 .nb-handwrite,
.intro-analysis.intro-phase-4 .nb-line-2 .nb-handwrite,
.intro-analysis.intro-phase-5 .nb-line-2 .nb-handwrite { animation: type 550ms steps(30) 100ms forwards, handwrite-in 200ms 100ms forwards; }
.intro-analysis.intro-phase-4 .nb-line-3 .nb-handwrite,
.intro-analysis.intro-phase-5 .nb-line-3 .nb-handwrite { animation: type 550ms steps(30) 200ms forwards, handwrite-in 200ms 200ms forwards; }
@keyframes handwrite-in { to { opacity: 1; } }

.nb-diagram {
  width: 220px; height: 110px;
  margin-top: 10px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}
.nb-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke: #0E1938; opacity: 0.8; }
.intro-analysis.intro-phase-4 .nb-draw-1,
.intro-analysis.intro-phase-5 .nb-draw-1 { animation: draw 600ms var(--ease-out) forwards; }
.intro-analysis.intro-phase-4 .nb-draw-2,
.intro-analysis.intro-phase-5 .nb-draw-2 { animation: draw 400ms var(--ease-out) 150ms forwards; }
.intro-analysis.intro-phase-4 .nb-draw-3,
.intro-analysis.intro-phase-5 .nb-draw-3 { animation: draw 500ms var(--ease-out) 300ms forwards; }
.nb-dots circle { opacity: 0; fill: #1C2C5B; }
.intro-analysis.intro-phase-4 .nb-dots circle,
.intro-analysis.intro-phase-5 .nb-dots circle { animation: joint-pop 400ms var(--ease-out) 500ms forwards; }
.intro-analysis.intro-phase-5 .nb-arrow { animation: handwrite-in 400ms forwards; }

.pen-cursor {
  position: absolute; right: 45px; top: 30px;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #1C2C5B 50%, #6CABDD 50%);
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0 70%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  animation: pen-bob 2s ease-in-out infinite;
  opacity: 0;
}
.intro-analysis.intro-phase-2 .pen-cursor,
.intro-analysis.intro-phase-3 .pen-cursor,
.intro-analysis.intro-phase-4 .pen-cursor { opacity: 1; }
@keyframes pen-bob {
  0%,100% { transform: translate(0, 0) rotate(0); }
  50%     { transform: translate(-4px, 3px) rotate(-3deg); }
}

.intro-analysis.intro-phase-5 .intro-flash { animation: flash 500ms var(--ease-out) forwards; }

/* ======================================================================
   VISUALS — tactical pitch drawing
   ====================================================================== */
.intro-vis-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vis-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.intro-visuals.intro-phase-2 .vis-draw-pitch,
.intro-visuals.intro-phase-3 .vis-draw-pitch,
.intro-visuals.intro-phase-4 .vis-draw-pitch,
.intro-visuals.intro-phase-5 .vis-draw-pitch,
.intro-visuals.intro-phase-6 .vis-draw-pitch { animation: draw 600ms var(--ease-out) forwards; }
.intro-visuals.intro-phase-2 .vis-draw-halfway,
.intro-visuals.intro-phase-3 .vis-draw-halfway,
.intro-visuals.intro-phase-4 .vis-draw-halfway,
.intro-visuals.intro-phase-5 .vis-draw-halfway,
.intro-visuals.intro-phase-6 .vis-draw-halfway { animation: draw 400ms var(--ease-out) 100ms forwards; }
.intro-visuals.intro-phase-2 .vis-draw-circle,
.intro-visuals.intro-phase-3 .vis-draw-circle,
.intro-visuals.intro-phase-4 .vis-draw-circle,
.intro-visuals.intro-phase-5 .vis-draw-circle,
.intro-visuals.intro-phase-6 .vis-draw-circle { animation: draw 500ms var(--ease-out) 160ms forwards; }
.intro-visuals.intro-phase-3 .vis-draw-box-l,
.intro-visuals.intro-phase-4 .vis-draw-box-l,
.intro-visuals.intro-phase-5 .vis-draw-box-l,
.intro-visuals.intro-phase-6 .vis-draw-box-l { animation: draw 400ms var(--ease-out) forwards; }
.intro-visuals.intro-phase-3 .vis-draw-box-r,
.intro-visuals.intro-phase-4 .vis-draw-box-r,
.intro-visuals.intro-phase-5 .vis-draw-box-r,
.intro-visuals.intro-phase-6 .vis-draw-box-r { animation: draw 400ms var(--ease-out) 60ms forwards; }

.vis-zones { opacity: 0; }
.intro-visuals.intro-phase-3 .vis-zones,
.intro-visuals.intro-phase-4 .vis-zones,
.intro-visuals.intro-phase-5 .vis-zones,
.intro-visuals.intro-phase-6 .vis-zones { animation: handwrite-in 400ms var(--ease-out) 200ms forwards; }

.vis-bubble {
  opacity: 0; transform-origin: center; transform: scale(0);
}
.intro-visuals.intro-phase-3 .vis-bubble,
.intro-visuals.intro-phase-4 .vis-bubble,
.intro-visuals.intro-phase-5 .vis-bubble,
.intro-visuals.intro-phase-6 .vis-bubble {
  animation: bubble-in 600ms var(--ease-out) forwards;
}
@keyframes bubble-in {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0.7; transform: scale(1); }
}

.vis-dots circle {
  opacity: 0; transform-origin: center; transform: scale(0);
}
.intro-visuals.intro-phase-4 .vis-dots circle,
.intro-visuals.intro-phase-5 .vis-dots circle,
.intro-visuals.intro-phase-6 .vis-dots circle {
  animation: joint-pop 400ms var(--ease-out) forwards;
}

.vis-arrow { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.intro-visuals.intro-phase-5 .vis-arrow-1,
.intro-visuals.intro-phase-6 .vis-arrow-1 { animation: draw 350ms var(--ease-out) forwards; }
.intro-visuals.intro-phase-5 .vis-arrow-2,
.intro-visuals.intro-phase-6 .vis-arrow-2 { animation: draw 350ms var(--ease-out) 120ms forwards; }
.intro-visuals.intro-phase-5 .vis-arrow-3,
.intro-visuals.intro-phase-6 .vis-arrow-3 { animation: draw 350ms var(--ease-out) 240ms forwards; }
.intro-visuals.intro-phase-5 .vis-arrow-4,
.intro-visuals.intro-phase-6 .vis-arrow-4 { animation: draw 350ms var(--ease-out) 360ms forwards; }
.intro-visuals.intro-phase-5 .vis-arrow-5,
.intro-visuals.intro-phase-6 .vis-arrow-5 { animation: draw 250ms var(--ease-out) 480ms forwards; }

.vis-shot-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.intro-visuals.intro-phase-6 .vis-shot-line { animation: draw 250ms linear forwards; }
.vis-shot-hit { opacity: 0; transform-origin: center; transform: scale(0); }
.intro-visuals.intro-phase-6 .vis-shot-hit { animation: shot-hit 500ms var(--ease-out) 250ms forwards; }
@keyframes shot-hit {
  0% { opacity: 0; transform: scale(0); }
  40% { opacity: 1; transform: scale(2.2); }
  100% { opacity: 0.9; transform: scale(1); }
}
.intro-visuals.intro-phase-6 .vis-shot-label { animation: handwrite-in 300ms 400ms forwards; }
.intro-visuals.intro-phase-6 .intro-flash { animation: flash 500ms var(--ease-out) forwards; }

/* ======================================================================
   DATA — terminal / code
   ====================================================================== */
.terminal {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  width: min(720px, 92vw); max-height: 70vh;
  background: #0A111E;
  border-radius: 10px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(108,171,221,0.18),
    0 0 60px rgba(108,171,221,0.12);
  overflow: hidden;
  font-family: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
  opacity: 0;
  animation: notebook-in 400ms var(--ease-out) forwards;
}
.terminal-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #172239, #111A2E);
  border-bottom: 1px solid rgba(108,171,221,0.1);
}
.terminal-dots {
  display: flex; gap: 6px;
}
.terminal-dots span {
  width: 11px; height: 11px; border-radius: 50%;
}
.terminal-dots span:nth-child(1) { background: #ff5f56; }
.terminal-dots span:nth-child(2) { background: #ffbd2e; }
.terminal-dots span:nth-child(3) { background: #27c93f; }
.terminal-title {
  flex: 1; text-align: center;
  font-size: 11.5px; color: #B4C2D9;
  letter-spacing: 0.02em;
}
.terminal-meta {
  font-size: 10.5px; color: #5A6680; letter-spacing: 0.04em;
}
.terminal-body {
  padding: 18px 20px 22px;
  font-size: 13.5px; line-height: 1.65;
  color: #B4C2D9;
}
.code-line { display: flex; gap: 14px; }
.code-line .ln {
  color: #3E4A70; user-select: none;
  font-variant-numeric: tabular-nums;
}
.code-line .lc { flex: 1; }
.code-line.stdout .lc { color: #7A8AA6; font-style: italic; }
.code-line.stdout-ok .lc { color: #6EE7A0; }

.tok-kw { color: #C792EA; }
.tok-fn { color: #A5D8FF; }
.tok-va { color: #E8EDF7; }
.tok-st { color: #F6C84B; }
.tok-nu { color: #89DDFF; }
.tok-op { color: #8BC0EB; }
.tok-co { color: #5A6680; font-style: italic; }
.tok-sp { color: #E8EDF7; }

.caret {
  display: inline-block;
  color: #A5D8FF;
  animation: blink 1s steps(2) infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }