/* ─── HERO ENTRY (keyframe — fires on load) ─── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-anim {
  animation: fadeUp 1s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-anim--eyebrow { animation-delay: 0.2s; }
.hero-anim--headline { animation-delay: 0.38s; }
.hero-anim--sub      { animation-delay: 0.54s; }
.hero-anim--actions  { animation-delay: 0.70s; }

/* ─── HERO AMBIENT GLOW (breathing) ─── */

@keyframes glowBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.88); }
}

@keyframes glowBreathe2 {
  0%, 100% { opacity: 0.7; transform: scale(1) translate(0, 0); }
  50%       { opacity: 1;   transform: scale(1.12) translate(-20px, 10px); }
}

@keyframes glowBreathe3 {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  33%       { opacity: 0.8; transform: scale(1.08) translate(10px, -15px); }
  66%       { opacity: 0.3; transform: scale(0.92) translate(-5px, 5px); }
}

/* ─── HERO DOT GRID DRIFT ─── */

@keyframes dotDrift {
  0%   { background-position: 0px 0px; }
  100% { background-position: 28px 28px; }
}

/* ─── HERO SCAN LINE ─── */

@keyframes scanSweep {
  0%   { top: -2px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* ─── CTA GLOW PULSE ─── */

@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -60%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -60%) scale(1.15); }
}

/* ─── SCROLL REVEAL ─── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.16,1,0.3,1),
    transform 0.75s cubic-bezier(0.16,1,0.3,1);
}

.reveal.up {
  opacity: 1;
  transform: translateY(0);
}

/* Cards get a subtle scale lift on reveal */
.problem-card.reveal,
.offering-card.reveal,
.outcomes-col.reveal {
  transform: translateY(28px) scale(0.985);
}

.problem-card.reveal.up,
.offering-card.reveal.up,
.outcomes-col.reveal.up {
  transform: translateY(0) scale(1);
}

.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }

/* ─── FLOW LINE (intelligence loop) ─── */

@keyframes flowPulse {
  0%   { left: -40%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.flow-pulse {
  position: absolute;
  width: 40%;
  height: 100%;
  left: -40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(202,255,46,0.3) 20%,
    var(--acid) 50%,
    rgba(202,255,46,0.3) 80%,
    transparent 100%
  );
  animation: flowPulse 3s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* ─── NODE PULSE (active node ring) ─── */

@keyframes nodePulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}

.flow-node--active .flow-node__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(202,255,46,0.4);
  animation: nodePulse 2s ease-out infinite;
}