:root {
  --easing-linear-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--easing-linear-out), transform 600ms var(--easing-linear-out);
  will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 150ms ease;
  }
}

/* Hero load animations */
.hero-fade {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFade 700ms var(--easing-linear-out) forwards;
}

.hero-fade-1 { animation-delay: 100ms; }
.hero-fade-2 { animation-delay: 200ms; }
.hero-fade-3 { animation-delay: 300ms; }
.hero-fade-4 { animation-delay: 400ms; }
.hero-fade-5 { animation-delay: 500ms; }

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow breathe */
.glow-breathe {
  animation: glowBreathe 3s ease-in-out infinite;
}

@keyframes glowBreathe {
  0%, 100% {
    box-shadow: 0 0 32px rgba(249, 115, 22, 0.15);
  }
  50% {
    box-shadow: 0 0 48px rgba(249, 115, 22, 0.28);
  }
}

/* Pulse dot */
.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

/* SVG node pulse */
.node-pulse {
  animation: nodePulse 4s ease-in-out infinite;
}

.node-pulse:nth-child(2) { animation-delay: 1s; }
.node-pulse:nth-child(3) { animation-delay: 2s; }
.node-pulse:nth-child(4) { animation-delay: 3s; }
.node-pulse:nth-child(5) { animation-delay: 4s; }

@keyframes nodePulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(249, 115, 22, 0));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5));
  }
}

/* Floating metric chips */
.float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.float-slow:nth-child(2) { animation-delay: -2s; }
.float-slow:nth-child(3) { animation-delay: -4s; }

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Packet travel along SVG path */
.packet-travel {
  offset-path: path(var(--path));
  animation: packetTravel 1.6s var(--easing-linear-out) infinite;
}

@keyframes packetTravel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* Draw line animation */
.draw-line {
  stroke-dasharray: var(--dash, 1000);
  stroke-dashoffset: var(--dash, 1000);
  transition: stroke-dashoffset 1.2s var(--easing-linear-out);
}

.draw-line.visible {
  stroke-dashoffset: 0;
}

/* Chart area draw */
.chart-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s var(--easing-linear-out);
}

.chart-draw.visible {
  stroke-dashoffset: 0;
}

/* CTA band glow */
.cta-glow {
  position: relative;
  overflow: hidden;
}

.cta-glow::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--orange-glow-soft), transparent 70%);
  animation: ctaGlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes ctaGlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-10%) scale(1.05);
    opacity: 1;
  }
}

/* Progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--orange-500);
  width: 0%;
  z-index: 100;
  transition: width 50ms linear;
}

/* Chevron rotation for FAQ */
.chevron {
  transition: transform 250ms var(--easing-linear-out);
}

[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* FAQ panel */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--easing-linear-out);
}

[aria-expanded="true"] + .faq-panel,
.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel > div {
  overflow: hidden;
}

/* Back to top */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 250ms var(--easing-linear-out), transform 250ms var(--easing-linear-out), visibility 250ms;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Architecture diagram active states */
.arch-node {
  transition: fill 250ms var(--easing-linear-out), stroke 250ms var(--easing-linear-out), filter 250ms var(--easing-linear-out);
}

.arch-node:hover,
.arch-node.active {
  stroke: var(--orange-500);
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.35));
}

.arch-edge {
  transition: stroke 250ms var(--easing-linear-out), stroke-width 250ms var(--easing-linear-out);
}

.arch-edge.active {
  stroke: var(--orange-500);
  stroke-width: 2;
}

/* Mobile nav */
.mobile-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 250ms var(--easing-linear-out), transform 250ms var(--easing-linear-out), visibility 250ms;
}

.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Network background fade in */
.network-bg {
  opacity: 0;
  animation: networkFade 800ms var(--easing-linear-out) 200ms forwards;
}

@keyframes networkFade {
  to {
    opacity: 1;
  }
}

/* Particles */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--orange-500);
  opacity: 0.35;
  pointer-events: none;
}

/* Toast */
.toast {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--easing-linear-out), transform 200ms var(--easing-linear-out);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}