/* Strategic text motion — keep subtle; respect reduced motion */
@keyframes str-fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero: plays once on load */
.reveal-hero {
  animation: str-fade-up 0.9s cubic-bezier(0.22, 0.8, 0.26, 1) forwards;
  opacity: 0;
}
.reveal-hero.d1 { animation-delay: 0.04s; }
.reveal-hero.d2 { animation-delay: 0.12s; }
.reveal-hero.d3 { animation-delay: 0.2s; }
.reveal-hero.d4 { animation-delay: 0.3s; }
.reveal-hero.d5 { animation-delay: 0.38s; }
.reveal-hero.d6 { animation-delay: 0.48s; }

/* Eyebrow: enter + very subtle letter-spacing drift */
.strategic-eyebrow {
  animation: str-fade-up 0.75s 0.04s cubic-bezier(0.22, 0.8, 0.26, 1) forwards,
    str-track 7s ease-in-out 1s infinite;
  opacity: 0;
}
@keyframes str-track {
  0%, 100% { letter-spacing: 0.1em; }
  50% { letter-spacing: 0.14em; }
}

/* Hollow stroke line: enter + soft stroke color pulse (keeps “SIMULATION” alive) */
.h1-alt.subtle-breathe {
  animation: str-fade-up 0.95s 0.18s cubic-bezier(0.22, 0.8, 0.26, 1) forwards,
    str-stroke-breathe 8s ease-in-out 1.1s infinite;
  opacity: 0;
}
@keyframes str-stroke-breathe {
  0%, 100% { -webkit-text-stroke: 1px rgba(18, 18, 18, 0.72); }
  50% { -webkit-text-stroke: 1px rgba(0, 122, 92, 0.45); }
}

/* Scroll-reveal (IntersectionObserver sets .is-visible) */
.js-reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.8, 0.26, 1),
    transform 0.8s cubic-bezier(0.22, 0.8, 0.26, 1);
  transition-delay: calc(var(--r, 0) * 0.08s);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Key numbers — extra ease on the transition only (no bounce) */
.strategic-metric .stat-val,
.strategic-metric .tier-val {
  transition: filter 0.9s ease 0.15s;
}
.js-reveal.is-visible.strategic-metric .stat-val,
.js-reveal.is-visible.strategic-metric .tier-val {
  filter: brightness(1.06);
}

/* One-line quotes / manifesto lines */
.js-reveal.strategic-quote { transition-duration: 0.95s; }

/* CTA on hover already; add micro entrance */
.reveal-hero.cta-anim {
  animation: str-fade-up 0.85s cubic-bezier(0.22, 0.8, 0.26, 1) 0.35s forwards;
  opacity: 0;
}
.reveal-hero.cta-anim.d5 { animation-delay: 0.4s; }
.reveal-hero.cta-anim.d6 { animation-delay: 0.5s; }

/* Code / technical blocks: subtle left border glow when visible */
.js-reveal.code-reveal {
  box-shadow: inset 3px 0 0 0 transparent;
  transition: box-shadow 0.65s ease, opacity 0.8s ease, transform 0.8s ease;
}
.js-reveal.code-reveal.is-visible {
  box-shadow: inset 3px 0 0 0 var(--accent, #007a5c);
}

/* —— Mock chart / trajectory SVGs: draw on scroll + very light “live” motion —— */
.graph-svg,
.path-growth-svg {
  overflow: visible;
}
.graph-line--primary,
.graph-line--secondary,
.path-line--curve,
.path-line--axis {
  fill: none;
  vector-effect: non-scaling-stroke;
}
/* pathLength="1" + normalized dash = reliable stroke draw */
.graph-line--primary:not(.graph-line--dashed),
.graph-line--secondary,
.path-line--curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 0.85, 0.36, 1);
}
.graph-line--primary.graph-line--dashed {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.graph-line--secondary {
  transition-duration: 0.9s;
  transition-delay: 0.12s;
}
.graph-container.js-reveal.is-visible .graph-line--primary:not(.graph-line--dashed),
.graph-container.js-reveal.is-visible .graph-line--secondary,
.growth-path-viz.js-reveal.is-visible .path-line--curve {
  stroke-dashoffset: 0;
}
/* Draw first, then switch to a light dash (pathLength-normalized) */
.graph-container.js-reveal.is-visible .graph-line--primary.graph-line--dashed {
  animation: graph-line-dashed-finish 1.45s cubic-bezier(0.22, 0.85, 0.36, 1) 0.05s both;
}
@keyframes graph-line-dashed-finish {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  58% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 0.04 0.04;
    stroke-dashoffset: 0;
  }
}
/* Horizontal baseline: dash march (user units) — not pathLength */
.path-line--axis {
  stroke-dasharray: 6 8;
  stroke-dashoffset: 0;
  opacity: 0.4;
  transition: opacity 0.6s ease 0.2s;
}
.growth-path-viz.js-reveal.is-visible .path-line--axis {
  opacity: 0.5;
  animation: path-axis-march 20s linear 0.6s infinite;
}
/* Path to Growth: endpoint moves along curve (see path-growth-traveler.js) */
.growth-path-viz .path-traveler {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.growth-path-viz.js-reveal.is-visible .path-traveler {
  opacity: 1;
}
.path-end-anim--traveler,
.growth-path-viz .path-traveler .path-end-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transform-box: initial;
  transform-origin: center;
}
.growth-path-viz .path-node-halo {
  animation-delay: 1.1s;
}
.growth-path-viz .path-node-core {
  animation-delay: 1.05s;
}
@keyframes path-axis-march {
  to {
    stroke-dashoffset: 56;
  }
}
.graph-pivot {
  opacity: 0;
  transition: opacity 0.5s ease 0.95s;
}
.graph-container.js-reveal.is-visible .graph-pivot {
  opacity: 1;
}
.path-end-anim {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.5s ease 0.9s,
    transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 0.9s;
}
.growth-path-viz.js-reveal.is-visible .path-end-anim {
  opacity: 1;
  transform: scale(1);
}
.path-node-halo {
  animation: path-halo-breathe 5s ease-in-out 1.4s infinite;
}
@keyframes path-halo-breathe {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.42;
  }
}
.path-node-core {
  animation: path-core-tick 6s ease-in-out 1.2s infinite;
}
@keyframes path-core-tick {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 122, 92, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(0, 122, 92, 0.55));
  }
}
/* “Scatter” field: no layout transform on dots (inline scale preserved) */
.vector-space.js-reveal.is-visible .vector-dot {
  animation: vector-dot-glow 4s ease-in-out infinite;
}
.vector-space .vector-dot:nth-child(2) { animation-delay: 0s; }
.vector-space .vector-dot:nth-child(3) { animation-delay: 0.3s; }
.vector-space .vector-dot:nth-child(4) { animation-delay: 0.6s; }
.vector-space .vector-dot:nth-child(5) { animation-delay: 0.2s; }
.vector-space .vector-dot:nth-child(6) { animation-delay: 0.5s; }
.vector-space .vector-dot:nth-child(7) { animation-delay: 0.15s; }
@keyframes vector-dot-glow {
  0%,
  100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}
/* Override base opacities from inline where needed — preserve hierarchy */
.vector-space .vector-dot:nth-child(5) {
  animation-name: vector-dot-glow-dim;
}
@keyframes vector-dot-glow-dim {
  0%,
  100% { opacity: 0.2; }
  50% { opacity: 0.45; }
}
.vector-space.js-reveal.is-visible line.vector-link {
  animation: vector-link-line 5s ease-in-out 1.1s infinite;
}
@keyframes vector-link-line {
  0%,
  100% { stroke-opacity: 0.2; }
  50% { stroke-opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-hero,
  .strategic-eyebrow,
  .h1-alt.strategic-stroke-anim,
  .reveal-hero.cta-anim {
    animation: none !important;
    opacity: 1 !important;
  }
  .h1-alt.subtle-breathe {
    -webkit-text-stroke: 1px rgba(18, 18, 18, 0.72) !important;
    animation: none !important;
  }
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .strategic-eyebrow {
    letter-spacing: 0.1em;
    animation: none !important;
  }
  .strategic-metric .stat-val,
  .strategic-metric .tier-val {
    filter: none !important;
  }
  .js-reveal.code-reveal {
    box-shadow: none !important;
  }
  .graph-line--primary,
  .graph-line--secondary,
  .path-line--curve {
    stroke-dashoffset: 0 !important;
    transition: none !important;
    animation: none !important;
  }
  .graph-line--primary.graph-line--dashed {
    stroke-dasharray: 0.04 0.04 !important;
  }
  .path-line--axis {
    animation: none !important;
  }
  .path-end-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .path-end-anim--traveler,
  .growth-path-viz .path-traveler .path-end-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .growth-path-viz .path-traveler {
    opacity: 1 !important;
  }
  /* do not set transform on .path-traveler: path-growth-traveler.js sets translate(…) */
  .path-node-halo,
  .path-node-core {
    animation: none !important;
    filter: none !important;
  }
  .vector-space .vector-dot {
    animation: none !important;
  }
  .vector-space line.vector-link {
    animation: none !important;
  }
  .vector-space--pattern .pattern-node,
  .vector-space--pattern .pattern-curve {
    transition: none !important;
  }
}