/* =======================================================
   animations.css — keyframes + reduced-motion overrides
   ======================================================= */

@keyframes scroll-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-accent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 143, 230, 0.4); }
  50%      { box-shadow: 0 0 0 14px rgba(74, 143, 230, 0); }
}

/* hero cinematic curtain reveal */
@keyframes hero-curtain {
  0%   { clip-path: inset(50% 0 50% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* hero infinite marquee */
@keyframes hero-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* hero corner brackets reveal */
@keyframes hero-bracket-in {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* hero scene — grid fade-in */
@keyframes hero-grid-in {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* hero scene — diagonal sweep beam */
@keyframes hero-beam {
  0%   { background-position: 120% 0; }
  55%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}

/* hero scene — power mark fade + slight scale (centered backdrop) */
@keyframes hero-mark-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
}

/* hero scene — power mark glow pulse */
@keyframes hero-mark-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* hero scene — concentric rings slowly rotate */
@keyframes hero-mark-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* hero scene — power symbol stroke draw-on */
@keyframes hero-mark-power-in {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* hero scene — orbiting dot */
@keyframes hero-mark-orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* fade-up on scroll, used by ScrollTrigger via .js-fade-up */
.js-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}

.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger via JS — sets --i on children */
.js-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out) calc(var(--i, 0) * 80ms),
              transform 600ms var(--ease-out) calc(var(--i, 0) * 80ms);
}

.js-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Process step: fast hover transition (0,3,0 beats stagger 0,2,0) ---- */
.process__steps.is-visible .process-step {
  transition:
    opacity  600ms var(--ease-out) calc(var(--i, 0) * 80ms),
    transform 360ms var(--ease-out),
    box-shadow 360ms var(--ease-out);
}

.process__steps.is-visible .process-step:hover {
  transform: translateY(-9px) scale(1.02);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 14px 36px -8px rgba(0, 0, 0, 0.13),
    0 28px 64px -20px rgba(74, 143, 230, 0.18),
    0 0 0 1px rgba(74, 143, 230, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.process__steps.is-visible .process-step:hover::after {
  box-shadow: 0 0 12px rgba(74, 143, 230, 0.55), 0 0 28px rgba(74, 143, 230, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .process__steps.is-visible .process-step,
  .process__steps.is-visible .process-step:hover {
    transform: none;
    transition: opacity 600ms var(--ease-out) calc(var(--i, 0) * 80ms),
                box-shadow 280ms var(--ease-out);
  }
}

/* parallax hints — JS applies transform via requestAnimationFrame */
[data-parallax] {
  will-change: transform;
}

/* hover lift (buttons, cards that shouldn't animate on scroll) */
.hover-lift {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-3px);
}

/* testimonials 3D marquee — vertical scroll */
@keyframes testi-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% - 1.25rem)); }
}

/* ---------- reduced motion ---------- */
@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;
  }

  .hero__scroll-cue::after {
    animation: none;
    opacity: 0.5;
  }

  /* keep content visible even if JS-set classes never fire */
  .js-fade-up,
  .js-stagger > *,
  .reveal-word > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .draw-line::after,
  .hl::after {
    transform: scaleX(1) !important;
  }

  [data-parallax] {
    transform: none !important;
  }

  /* hero — kill cinematic motion, keep poster visible */
  .hero__media {
    animation: none !important;
    clip-path: none !important;
  }

  .hero__marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .hero__bracket {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  [data-hero-content] {
    transform: none !important;
  }

  /* hero scene — kill all looping animations on the mark/grid/beam */
  .hero__mark,
  .hero__mark-glow,
  .hero__mark-rings,
  .hero__mark-power,
  .hero__mark-orbit,
  .hero__grid,
  .hero__beam {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__mark {
    opacity: 0.55 !important;
    transform: translate(-50%, -50%) !important;
  }

  /* services block — keep cards visible, kill parallax + pulse */
  .sb-card,
  .sb-panel[data-side="right"] .sb-card,
  .sb-panel[data-side="left"]  .sb-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sb-card.is-active,
  .sb-card.in-view.is-active {
    transform: none !important;
    box-shadow:
      0 40px 80px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  .sb-ghost {
    transform: none !important;
    transition: none !important;
  }
  .sb-layer {
    transform: none !important;
  }
  .sb-progress__dot.is-active {
    box-shadow: none !important;
    transform: translate(-50%, -50%) scale(1.3) !important;
  }
  .sb-layer--paths {
    opacity: 0.5 !important;
  }
  /* testimonials marquee: freeze columns, show first set only */
  .testi-col__set {
    animation: none !important;
  }
  .testi-col {
    height: auto !important;
    overflow: visible !important;
  }
  .testi-col__set + .testi-col__set {
    display: none !important;
  }
}