/* ===========================================================================
   LazyConMan — motion. One orchestrated moment (the hero tunnel canvas in JS);
   everything else is restrained scroll-reveal + a couple of ambient pulses.
   All gated behind prefers-reduced-motion.
   =========================================================================== */

/* Scroll-reveal: elements start hidden, .is-visible (set by IntersectionObserver) reveals. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children within a revealed group. */
.steps .step.is-visible,
.grid .card.is-visible,
.grid .feature.is-visible,
.grid .plan.is-visible {
  transition-delay: var(--reveal-delay, 0s);
}

/* Ambient pulse on the live status dot. */
.eyebrow__pulse {
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(84, 240, 168, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(84, 240, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 240, 168, 0); }
}

/* Scroll hint travels down its track. */
.hero__scroll-line {
  animation: scrollHint 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0% { transform: translateY(0); opacity: 0.2; }
  40% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Slow gradient drift on hero headline accent for a faint kinetic shimmer. */
.hero__title .grad-text {
  background-size: 220% 220%;
  animation: gradDrift 9s ease-in-out infinite;
}
@keyframes gradDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Terminal cursor blink in the product mockup. */
.cursor {
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Live status pulse in the window bar. */
.window__pulse {
  animation: pulse 2.4s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .eyebrow__pulse,
  .hero__scroll-line,
  .hero__title .grad-text,
  .cursor,
  .window__pulse {
    animation: none;
  }
  .cursor { opacity: 1; }
  /* Preloader must never trap content for reduced-motion users. */
  .preloader { display: none; }
  * {
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}