/* ═══════════════════════════════════════════════════════
   ANIMATIONS — All @keyframes and animation rules
   ═══════════════════════════════════════════════════════ */

/* ── Respect user motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Keyframes ── */

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes logIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,.3); }
  50% { box-shadow: 0 0 12px rgba(34,197,94,.5); }
}

@keyframes warnPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,.3); }
  50% { box-shadow: 0 0 12px rgba(245,158,11,.6); }
}

@keyframes errPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,.3); }
  50% { box-shadow: 0 0 12px rgba(239,68,68,.6); }
}

@keyframes flowDash {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

@keyframes lcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes floatDown {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(4px); opacity: .7; }
}

@keyframes heroFloat {
  0%, 100% { transform: translate(-50%,-50%) rotate(0deg); }
  50% { transform: translate(-50%,-50%) rotate(1deg); }
}

@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes dotBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes headerShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes travelDot {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 4px); opacity: 0; }
}

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

@keyframes sectionArrive {
  0% { background: var(--primary-light); }
  100% { background: transparent; }
}

@keyframes arriveFlash {
  0% { box-shadow: inset 0 0 0 0 rgba(26,107,80,0); }
  30% { box-shadow: inset 0 0 0 2px rgba(26,107,80,.15); }
  100% { box-shadow: inset 0 0 0 0 rgba(26,107,80,0); }
}

@keyframes dotRing {
  0% { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes tabSnap {
  0% { transform: scale(1); }
  50% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes hintDrift {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(6px); opacity: 1; }
}

@keyframes copyPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes milestoneGlow {
  0% { box-shadow: 0 0 0 0 rgba(26,107,80,.3); }
  50% { box-shadow: 0 0 0 6px rgba(26,107,80,.15); }
  100% { box-shadow: 0 0 0 0 rgba(26,107,80,0); }
}

@keyframes foundIt {
  0% { opacity: 0; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes btnPop {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes toolGlow {
  0% { box-shadow: 0 0 0 0 rgba(94,234,212,.15); }
  50% { box-shadow: 0 0 0 4px rgba(94,234,212,.08); }
  100% { box-shadow: 0 0 0 0 rgba(94,234,212,0); }
}

@keyframes successPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  60% { transform: scale(.96); }
  100% { transform: scale(1); }
}

@keyframes shimmerSlide {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes eeFhda {
  0% { filter: none; }
  15% { filter: brightness(1.05) saturate(1.3); }
  30% { filter: none; }
  45% { filter: brightness(1.05) saturate(1.3); }
  60% { filter: none; }
  100% { filter: none; }
}

/* Easter egg: brief warm flash */
.ee-fhda { animation: eeFhda 2s ease; }
.ee-fhda .scroll-progress {
  background: linear-gradient(90deg, #0F766E, #1D4ED8, #7C3AED, #0F766E) !important;
  height: 4px !important;
  width: 100% !important;
}

@keyframes confettiBurst {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: .8; transform: translateY(-8px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-16px) scale(.8); }
}

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

@keyframes eyebrowPop {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: .8; transform: translateX(0); }
}

@keyframes h2Enter {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes descEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: .8; transform: translateY(0); }
}

@keyframes runPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,107,80,.3); }
  50% { box-shadow: 0 0 0 6px rgba(26,107,80,0); }
}

@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

@keyframes toastCheck {
  from { transform: scale(0) rotate(-90deg); }
  to { transform: scale(1) rotate(0); }
}

@keyframes dotAppear {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: .6; }
}

@keyframes badgeShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes storyBorder {
  0%, 100% { border-color: rgba(15,118,110,.1); }
  50% { border-color: rgba(15,118,110,.2); }
}

@keyframes wave {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(14deg); }
  75% { transform: rotate(-8deg); }
}

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

@keyframes deployPulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  50% { box-shadow: 0 0 0 16px rgba(22,163,74,.15); }
  100% { box-shadow: 0 0 0 30px rgba(22,163,74,0); }
}

@keyframes cellFlash {
  0% { background: var(--surface); }
  30% { background: rgba(22,163,74,.15); }
  100% { background: var(--surface); }
}

@keyframes rowHeal {
  0% { background: var(--red-light); }
  50% { background: var(--primary-light); }
  100% { background: transparent; }
}

@keyframes tagPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* ── Animation Applications ── */

/* Status indicator animations */
.s-ok { animation: glowPulse 3s ease infinite; }
.s-warn { animation: warnPulse 1.5s ease infinite; }
.s-err { animation: errPulse 1s ease infinite; }

/* Flow arrow dash animation */
.f-arrow-line {
  animation: flowDash 1s linear infinite;
}

/* Flow arrow traveling dot */
.f-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  animation: travelDot 2s ease-in-out infinite;
  left: 0;
}
.f-arrow:nth-child(2)::after { animation-delay: 0s; }
.f-arrow:nth-child(4)::after { animation-delay: .7s; }
.f-arrow:nth-child(6)::after { animation-delay: 1.4s; }

/* Lifecycle error node pulse */
.lc-err { animation: lcPulse 2s ease infinite; }

/* Equity bar shimmer */
.fill-high { background: linear-gradient(90deg, var(--red), #F87171, var(--red)); background-size: 200% 100%; animation: shimmer 2s ease-in-out 1; }
.fill-med { background: linear-gradient(90deg, var(--amber), #FBBF24, var(--amber)); background-size: 200% 100%; animation: shimmer 2s ease-in-out 1; }
.fill-low { background: linear-gradient(90deg, var(--blue), #60A5FA, var(--blue)); background-size: 200% 100%; animation: shimmer 2s ease-in-out 1; }
.corr-bar { background-size: 200% 100%; animation: shimmer 1.5s ease-in-out 1; }

/* Hero stat count-up animation */
.h-stat-num { animation: countUp .6s cubic-bezier(.16,1,.3,1) both; }
.h-stats > div:nth-child(1) .h-stat-num { animation-delay: .1s; }
.h-stats > div:nth-child(2) .h-stat-num { animation-delay: .2s; }
.h-stats > div:nth-child(3) .h-stat-num { animation-delay: .3s; }

/* Hero background float */
.hero-bg { animation: heroFloat 20s ease-in-out infinite; }

/* Bar grow on entry */
.bar-stack { animation: barGrow .5s cubic-bezier(.16,1,.3,1) both; }
.bar-group:nth-child(1) .bar-stack { animation-delay: .05s; }
.bar-group:nth-child(2) .bar-stack { animation-delay: .1s; }
.bar-group:nth-child(3) .bar-stack { animation-delay: .15s; }
.bar-group:nth-child(4) .bar-stack { animation-delay: .2s; }
.bar-group:nth-child(5) .bar-stack { animation-delay: .25s; }
.bar-group:nth-child(6) .bar-stack { animation-delay: .3s; }
.bar-group:nth-child(7) .bar-stack { animation-delay: .35s; }
.bar-group:nth-child(8) .bar-stack { animation-delay: .4s; }
.bar-group:nth-child(9) .bar-stack { animation-delay: .45s; }
.bar-group:nth-child(10) .bar-stack { animation-delay: .5s; }
.bar-group:nth-child(11) .bar-stack { animation-delay: .55s; }
.bar-group:nth-child(12) .bar-stack { animation-delay: .6s; }

/* Calendar dot bounce */
.cal-month:hover .cal-dot { animation: dotBounce .4s ease; }

/* Message icon pulse */
.msg-preview:hover .msg-icon { animation: iconPulse .5s ease; }

/* Journey column header shine */
.jch-ok { background: linear-gradient(90deg, var(--primary-light), rgba(255,255,255,.4), var(--primary-light)); background-size: 200% 100%; animation: headerShine 3s ease 1; }
.jch-broken { background: linear-gradient(90deg, var(--red-light), rgba(255,255,255,.3), var(--red-light)); background-size: 200% 100%; animation: headerShine 3s ease 1; }

/* Flow info panel animation */
.flow-info-panel { animation: panelSlide .35s cubic-bezier(.16,1,.3,1); }

/* Log line animation */
.td-log .log-line { animation: logIn .2s ease forwards; }

/* Quick action entrance */
.qa-card { animation: qaEntrance .5s cubic-bezier(.16,1,.3,1) both; }
.qa-card:nth-child(1) { animation-delay: .4s; }
.qa-card:nth-child(2) { animation-delay: .5s; }
.qa-card:nth-child(3) { animation-delay: .6s; }
.qa-card:nth-child(4) { animation-delay: .7s; }
.qa-card:nth-child(5) { animation-delay: .8s; }
.qa-card:nth-child(6) { animation-delay: .9s; }

/* Section arrival */
.sec-arrived { animation: arriveFlash .8s ease-out; }

/* Tab snap */
.filter-tab:active, .ai-tab:active, .outreach-tab:active, .lookup-filter:active {
  animation: tabSnap .15s ease;
}
.filter-tab.active, .ai-tab.active, .outreach-tab.active {
  transition: all .2s cubic-bezier(.16,1,.3,1);
}

/* Scroll hint drift */
.scroll-hint .hint-arrow { animation: hintDrift 2s ease-in-out infinite; }

/* Copy pop */
.msg-copy.copied { animation: successPop .4s cubic-bezier(.16,1,.3,1); }

/* Tool frame entrance glow */
.vis .tool-frame { animation: toolEnter .5s cubic-bezier(.16,1,.3,1) .2s both, toolGlow .8s ease .6s; }

/* Milestone glow */
.ic-milestone { animation: milestoneGlow .6s ease; }

/* IV card stagger entrance */
.iv-show .iv-card {
  animation: qaEntrance .4s cubic-bezier(.16,1,.3,1) both;
}
.iv-show .iv-card:nth-child(1)  { animation-delay: .05s; }
.iv-show .iv-card:nth-child(2)  { animation-delay: .08s; }
.iv-show .iv-card:nth-child(3)  { animation-delay: .11s; }
.iv-show .iv-card:nth-child(4)  { animation-delay: .14s; }
.iv-show .iv-card:nth-child(5)  { animation-delay: .17s; }
.iv-show .iv-card:nth-child(6)  { animation-delay: .20s; }
.iv-show .iv-card:nth-child(7)  { animation-delay: .23s; }
.iv-show .iv-card:nth-child(8)  { animation-delay: .26s; }
.iv-show .iv-card:nth-child(9)  { animation-delay: .29s; }
.iv-show .iv-card:nth-child(10) { animation-delay: .32s; }
.iv-show .iv-card:nth-child(11) { animation-delay: .35s; }
.iv-show .iv-card:nth-child(12) { animation-delay: .38s; }

/* Tracer found */
.trace-found { animation: foundIt .5s cubic-bezier(.16,1,.3,1); display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; background: var(--primary-light); border: 1px solid var(--primary-bd); border-radius: 100px; font-weight: 700; }

/* Tool frame entrance in visible sections */
.tool-frame { opacity: 0; transform: translateY(8px); }
.vis .tool-frame { animation: toolEnter .5s cubic-bezier(.16,1,.3,1) .2s both, toolGlow .8s ease .6s; }
.vis .tool-frame:nth-child(2) { animation-delay: .3s; }
.vis .tool-frame:nth-child(3) { animation-delay: .4s; }

/* Section element staggered entrance */
.vis .eyebrow { animation: eyebrowPop .4s cubic-bezier(.16,1,.3,1) .05s both; }
.vis h2 { animation: h2Enter .5s cubic-bezier(.16,1,.3,1) .1s both; }
.vis .sec-desc { animation: descEnter .5s cubic-bezier(.16,1,.3,1) .15s both; }

/* Tracer run button pulse */
.tracer-btn-run { animation: runPulse 2.5s ease infinite; }
.tracer-btn-run.running { animation: none; }

/* Ripple effect */
.ripple { animation: rippleOut .5s ease-out forwards; }

/* Toast check */
.kb-toast::before {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: .7rem;
  flex-shrink: 0;
  animation: toastCheck .4s cubic-bezier(.16,1,.3,1) .1s both;
}

/* Nav visited dot appear */
.nav-links a.nav-visited::after { animation: dotAppear .3s ease; }

/* Hero badge shimmer */
.h-badge { animation: badgeShimmer 4s ease-in-out infinite; }

/* Greeting toast wave */
.greeting-toast .gt-wave { display: inline-block; animation: wave .5s ease 1; transform-origin: 70% 70%; }

/* Journey resolved tag */
.j-resolved-tag { animation: tagPop .4s cubic-bezier(.16,1,.3,1) both; }

/* Origin story beat entrance — staggered children */
.origin-story .vis .origin-tl { animation: dotAppear .4s cubic-bezier(.16,1,.3,1) both; }
.origin-story .vis .origin-beat-label { animation: eyebrowPop .4s cubic-bezier(.16,1,.3,1) .1s both; }
.origin-story .vis .origin-photo { animation: toolEnter .5s cubic-bezier(.16,1,.3,1) .15s both; }
.origin-story .vis .origin-narrative { animation: descEnter .5s cubic-bezier(.16,1,.3,1) .25s both; }
.origin-story .vis .origin-quote-card { animation: toolEnter .5s cubic-bezier(.16,1,.3,1) .15s both; }
.origin-story .vis .origin-coda-line { animation: dotAppear .4s cubic-bezier(.16,1,.3,1) both; }
.origin-story .vis .origin-coda-quote { animation: h2Enter .5s cubic-bezier(.16,1,.3,1) .1s both; }
.origin-story .vis .origin-coda-closing { animation: descEnter .5s cubic-bezier(.16,1,.3,1) .2s both; }

/* ── Delight: Confetti fall ── */
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(calc(100vh + 40px)) translateX(var(--drift, 0px)) rotate(var(--spin, 720deg)); opacity: 0; }
}

/* ── Delight: Logo micro-interactions ── */
@keyframes logoBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}
@keyframes logoWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
}
@keyframes logoFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ── Delight: Matrix rain ── */
@keyframes matrixFall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── Delight: Scroll squeeze ── */
.scroll-squeeze .sec {
  transform: scaleY(0.998);
  transition: transform .15s cubic-bezier(.16,1,.3,1);
}
.sec {
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}