/* ==========================================================================
   Scroll reveal
   Gated on .js so content is never hidden if scripts fail to run.
   main.js assigns --i to siblings inside [data-stagger] for the cascade.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.js .reveal--left { transform: translateX(-34px); }
.js .reveal--right { transform: translateX(34px); }
.js .reveal--scale { transform: scale(0.965); }
.js .reveal--fade { transform: none; }

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Entrance (runs on load, above the fold)
   ========================================================================== */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

.js .stagger-in > * {
  animation: rise-in 0.85s var(--ease-out) both;
}

.js .stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.js .stagger-in > *:nth-child(2) { animation-delay: 0.13s; }
.js .stagger-in > *:nth-child(3) { animation-delay: 0.21s; }
.js .stagger-in > *:nth-child(4) { animation-delay: 0.29s; }
.js .stagger-in > *:nth-child(5) { animation-delay: 0.37s; }
.js .stagger-in > *:nth-child(6) { animation-delay: 0.45s; }

.js .hero-visual {
  animation: fade-scale 1s var(--ease-out) 0.28s both;
}

/* ==========================================================================
   Ambient motion
   ========================================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-layer-tl {
  0%, 100% { transform: translate3d(0, 0, 48px); }
  50% { transform: translate3d(0, -10px, 48px); }
}

@keyframes float-layer-br {
  0%, 100% { transform: translate3d(0, 0, 64px); }
  50% { transform: translate3d(0, -10px, 64px); }
}

@keyframes float-layer-ml {
  0%, 100% { transform: translate3d(0, 0, 40px); }
  50% { transform: translate3d(0, -8px, 40px); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.82); }
}

@keyframes bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 0.85; }
}

@keyframes bar-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes graph-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes graph-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes graph-fade-soft {
  from { opacity: 0; }
  to { opacity: 0.28; }
}

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

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------- process flow animations */
@keyframes process-beam-flow {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes process-pulse-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes process-icon-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

@keyframes process-card-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 62, 79, 0.05);
  }
  50% {
    box-shadow: 0 14px 36px -8px rgba(1, 123, 146, 0.28);
  }
}

@keyframes process-shine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

.pulse {
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  75% {
    transform: scale(1.55);
    opacity: 0;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ==========================================================================
   Reduced motion: keep every state, drop every movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .stagger-in > *,
  .js .hero-visual,
  .pulse,
  .wa-float::before,
  .mockup-chart i,
  .mockup-float,
  .hero-shot img,
  .hero-chip,
  .live-dot,
  .marquee-track,
  .cta-inner {
    animation: none !important;
  }

  .hero-scene-orbit {
    transform: none;
  }
}