/* Antigravity "Metaphorical Precision" Tokens (v5 Digital Dissolve) */

:root {
  /* --- The Spark Palette --- */
  --color-brand: #00bfd8;
  --color-brand-text: #007a8a;
  --color-brand-dim: #e0f9fc;
  --color-brand-dark: #008c9e;
  --color-brand-glow: rgba(0, 191, 216, 0.4);

  --color-canvas: #f8fafc; /* Unified to match Header */
  --color-ink: #1e293b;
  --color-ink-light: #64748b;

  /* Touchstone Palette */
  --color-pr1: #00e1a5;
  --color-pr2: #fd87e0;
  --color-sec-dark: #333333;
  --color-sec-light: #f2f2f2;
  --color-txt: #555555;
  --color-txt-900: #333333;

  /* Legacy / Utility */
  --color-slate-900: #0f172a;
  --color-pencil: #94a3b8;
  --color-rock: #cbd5e1;

  /* Metaphor Color: Digital Code */
  --color-code: var(--color-brand);

  /* --- Typography --- */
  --font-heading: "Outfit", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-code: "Space Mono", monospace;

  /* --- Physics & Motion --- */
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-digital: cubic-bezier(0.2, 0.8, 0.2, 1); /* Quick snapping tech feel */
}

body {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
}

/* --- Metaphor 1: The Digital Dissolve --- */

.disintegrate-target {
  transition:
    filter 0.8s ease,
    opacity 0.8s ease;
}

/* The Binary Particles */
.digital-particle {
  position: absolute;
  color: var(--color-code);
  font-family: var(--font-code);
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  opacity: 0;
  user-select: none;
  text-shadow: 0 0 5px var(--color-brand-glow);
}

/* Animation class triggered by JS */
.digital-flying {
  animation: digital-float 2.5s forwards var(--ease-digital);
}

@keyframes digital-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), -300px) scale(0.5); /* Fly UP and fade */
    opacity: 0;
  }
}

/* --- Metaphor 2: Progressive Timeline --- */

.timeline-thread-container {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-rock);
  transform: translateX(-50%);
  z-index: 0;
}

/* River path - Auto Animation (Hero) */
.river-path-auto {
  fill: none;
  stroke: var(--color-rock);
  stroke-width: 60;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: river-draw 2.5s var(--ease-elastic) forwards;
  opacity: 0.6;
}

/* River path - Scroll Driven (Subsequent Sections) */
.river-path-scroll {
  fill: none;
  stroke: var(--color-rock);
  stroke-width: 60;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000; /* Controlled by JS */
  opacity: 0.6;
  transition: stroke-dashoffset 0.1s linear;
}

@keyframes river-draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* River path - CTA (Auto-Play on Scroll) */
.cta-river-path {
  fill: none;
  stroke: var(--color-rock);
  stroke-width: 60;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  opacity: 0.6;
  /* Transition handled by JS or here */
  transition: stroke-dashoffset 2.5s var(--ease-elastic);
}

.timeline-thread-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-brand);
  box-shadow: 0 0 10px var(--color-brand-glow);
  height: 0%;
  transition: height 0.1s linear; /* Linear for direct scroll control */
}

.timeline-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-canvas);
  border: 2px solid var(--color-rock);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s var(--ease-elastic);
  z-index: 10;
}

.timeline-node.active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  box-shadow: 0 0 0 6px rgba(0, 191, 216, 0.2);
  transform: translateX(-50%) scale(1.3);
}

/* Content Reveal - Stricter */
.reveal-block {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.8s var(--ease-elastic);
  filter: blur(4px);
}
.reveal-block.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Utilities */
.input-minimal {
  border: none;
  border-bottom: 1px solid var(--color-rock);
  background: transparent;
  padding: 0.5rem 0;
  transition: all 0.3s;
  border-radius: 0;
}
.input-minimal:focus {
  outline: none;
  border-bottom: 2px solid var(--color-brand);
}

.text-highlight {
  position: relative;
  display: inline-block;
}
.text-highlight::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--color-brand-glow);
  z-index: -1;
  transform: skewX(-10deg);
}

.digital-card {
  background: white;
  border-left: 4px solid var(--color-brand);
  box-shadow: 0 20px 40px -10px rgba(0, 191, 216, 0.15);
  border-radius: 12px;
}

/* --- Standardized Design Tokens (Refactored from Inline) --- */

/* Retro/Pop Shadows */
.shadow-retro-gray {
  box-shadow: 8px 8px 0px #e2e8f0; /* Keeping hard gray for specific look */
}

.shadow-retro-brand {
  box-shadow: 8px 8px 0px var(--color-brand);
}

.shadow-retro-brand-sm {
  box-shadow: 4px 4px 0px var(--color-brand);
}

.shadow-retro-showcase {
  box-shadow: 8px 8px 0px rgba(0, 191, 216, 0.3);
}

.shadow-retro-showcase-hover {
  box-shadow: 12px 12px 0px rgba(0, 191, 216, 0.5);
}

/* Micro-interactions */
.hover-lift {
  transition:
    transform 0.3s var(--ease-smooth),
    box-shadow 0.3s var(--ease-smooth);
}
.hover-lift:hover {
  transform: translateY(-1px);
}

/* --- Utility Classes (Tailwind-like overrides) --- */
.bg-ink {
  background-color: var(--color-ink);
}
.bg-brand {
  background-color: var(--color-brand);
}
.text-ink {
  color: var(--color-ink);
}
.text-brand {
  color: var(--color-brand);
}

/* Animation State Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s var(--ease-smooth),
    transform 0.8s var(--ease-smooth);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}