/* ============================================================
   ZP VENTURES — animations.css
   All keyframes, scroll-reveal states, and animation triggers.
   Triggers: elements get an `.in` / `.lit` / `.is-active` class
   added by script.js (IntersectionObserver) — CSS handles the
   actual transition. Everything is disabled under
   prefers-reduced-motion at the bottom of this file.
   ============================================================ */

/* ---------- Scroll reveal (generic) ----------
   .reveal starts hidden+offset; script.js adds .in when the
   element enters the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Stagger children that carry a --i index (cards, timeline, tiles) */
.eco-card.reveal,
.sub-tile.reveal,
.tl-node { transition-delay: calc(var(--i, 0) * 90ms); }
.tl-node.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.tl-node.reveal.in { opacity: 1; transform: none; }

/* ---------- Backdrop: flowing circuit pulses ----------
   Long dash travels along each trace to read as current flow. */
.backdrop-circuits .trace {
  stroke-dasharray: 26 340;
  stroke-dashoffset: 0;
  animation: traceFlow 9s linear infinite;
}
.backdrop-circuits .trace.vert { animation-duration: 12s; }
@keyframes traceFlow { to { stroke-dashoffset: -366; } }

.backdrop-circuits .node { animation: nodePulse 4s ease-in-out infinite; }
@keyframes nodePulse { 0%,100% { opacity: .3; } 50% { opacity: .9; } }

/* ---------- Hero monogram: line-draw + letter reveal ----------
   Frame strokes draw on from 0; letters and spark fade after. */
.emblem-frame {
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: drawFrame 1.6s var(--ease) forwards;
}
.emblem-frame.inner { stroke: var(--gold-dim); stroke-width: 1.4; animation-delay: .25s; }
@keyframes drawFrame { to { stroke-dashoffset: 0; } }

.emblem-letters {
  fill: var(--white); font-family: var(--serif); font-weight: 500;
  font-size: 62px; letter-spacing: 2px;
  opacity: 0; transform: scale(.9); transform-origin: center;
  animation: letterIn .9s var(--ease) .9s forwards;
}
@keyframes letterIn { to { opacity: 1; transform: scale(1); } }

.emblem-spark { fill: var(--gold-soft); opacity: 0; animation: sparkIn .6s var(--ease) 1.5s forwards, nodePulse 3s ease-in-out 2.1s infinite; }
@keyframes sparkIn { to { opacity: 1; } }

/* ---------- Hero content: sequential fade-up on load ----------
   Hero uses load-time reveal rather than scroll (it's above fold). */
.hero .reveal { animation: heroIn 1s var(--ease) forwards; opacity: 0; transform: translateY(20px); transition: none; }
.hero .emblem       { animation-delay: .1s; }
.hero .hero-eyebrow { animation-delay: .9s; }
.hero .hero-title   { animation-delay: 1.05s; }
.hero .hero-sub     { animation-delay: 1.25s; }
.hero .hero-actions { animation-delay: 1.4s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.scroll-cue-line { transform-origin: top; animation: cueDrop 2.4s var(--ease) infinite; }
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}

/* ---------- Ecosystem / subsidiary icon line-draw ----------
   `.dash` paths draw in when their card gets `.in`. */
.eco-icon .dash, .sub-mark {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.eco-card.in .eco-icon .dash,
.sub-tile.in .sub-mark { stroke-dashoffset: 0; }

/* ---------- Philosophy triad ----------
   Orbit rotates continuously; links draw and nodes pop when the
   diagram receives `.in`. */
.triad-orbit { transform-origin: 180px 180px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.triad-link { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1s var(--ease); }
#triad.in .triad-link { stroke-dashoffset: 0; }
#triad.in .triad-link:nth-of-type(2) { transition-delay: .15s; }
#triad.in .triad-link:nth-of-type(3) { transition-delay: .3s; }

.triad-node { opacity: 0; transform: scale(.8); transform-origin: center; transform-box: fill-box;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
#triad.in .triad-node { opacity: 1; transform: scale(1); transition-delay: calc(.4s + var(--i) * .15s); }

.triad-core { opacity: 0; transition: opacity .8s var(--ease) 1s; }
#triad.in .triad-core { opacity: 1; }
#triad.in .triad-core circle { animation: coreGlow 3.5s ease-in-out 1.2s infinite; }
@keyframes coreGlow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(201,162,75,.3)); }
  50%     { filter: drop-shadow(0 0 12px rgba(201,162,75,.6)); }
}

/* ---------- Map dots ----------
   Dots fade in (JS sets per-dot delay = distance from Cleveland,
   producing a wave). City rings pulse continuously. */
.map-dot { transition: opacity .5s ease, fill .5s ease; }
.map-dot.lit { opacity: .55; }
.map-link { stroke-dasharray: 1; stroke-dashoffset: 1; }   /* dash values set inline by JS */
.map-link.draw { transition: stroke-dashoffset 1.1s var(--ease); stroke-dashoffset: 0 !important; }
.city-ring { transform-origin: center; transform-box: fill-box; animation: ringPulse 3s ease-out infinite; }
@keyframes ringPulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
.city-dot, .city-hq { opacity: 0; transition: opacity .5s ease; }
.city-dot.show, .city-hq.show { opacity: 1; }

/* ---------- Reduced motion: disable all motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .tl-node.reveal { opacity: 1 !important; transform: none !important; }
  .emblem-frame { stroke-dashoffset: 0; }
  .emblem-letters, .emblem-spark, .triad-node, .triad-core { opacity: 1; transform: none; }
  .eco-icon .dash, .sub-mark, .triad-link { stroke-dashoffset: 0; }
  .map-dot { opacity: .55; }
  .city-dot, .city-hq { opacity: 1; }
}