/* ============================================================
   Apertool AI — Motion
   All motion is OPT-IN behind prefers-reduced-motion: no-preference.
   Content is fully visible by default (progressive enhancement):
   reveal styles only apply when JS adds .reveal and motion is allowed.
   ============================================================ */

/* Hero ambient backdrop — soft teal aurora blooming from the upper-right */
.hero__glow {
  position: absolute; inset: -35% -15% auto -10%; height: 135%;
  background:
    radial-gradient(38% 48% at 80% 16%, rgba(47, 143, 135, 0.22), transparent 70%),
    radial-gradient(48% 56% at 94% 4%, rgba(143, 199, 194, 0.30), transparent 72%),
    radial-gradient(36% 40% at 66% 42%, rgba(255, 122, 89, 0.14), transparent 70%),
    radial-gradient(42% 46% at 60% 32%, rgba(47, 143, 135, 0.10), transparent 70%);
  filter: blur(44px) saturate(115%);
  pointer-events: none; z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: JS sets .reveal initial state, .is-visible final */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal--delay-1 { transition-delay: 80ms; }
  .reveal--delay-2 { transition-delay: 160ms; }
  .reveal--delay-3 { transition-delay: 240ms; }

  /* Diagram flow pulses: dots traveling along SVG connector paths */
  .flow-pulse {
    offset-path: var(--flow-path, none);
    animation: flow-travel var(--flow-dur, 3.2s) var(--flow-delay, 0s) linear infinite;
  }
  @keyframes flow-travel {
    from { offset-distance: 0%; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    to   { offset-distance: 100%; opacity: 0; }
  }

  /* Dashed connector "energy" fallback when offset-path unsupported is fine;
     also animate stroke for connectors that opt in */
  .flow-line.is-animated {
    stroke-dasharray: 5 9;
    animation: dash-move 1.6s linear infinite;
  }
  @keyframes dash-move { to { stroke-dashoffset: -28; } }

  /* Hero aurora: very slow, gentle drift */
  .hero__glow { animation: aurora-drift 20s var(--ease) infinite alternate; will-change: transform; }
  @keyframes aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
  }

  /* Knowledge-layer hub: slow pulsing glow */
  .kl-hub__glow { animation: hub-pulse 3.4s var(--ease) infinite; }
  @keyframes hub-pulse {
    0%, 100% { opacity: 0.5;  transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.1); }
  }

  /* Central node soft pulse */
  .node-core.is-animated { animation: core-pulse 4s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes core-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
  }

  /* Directional "flow" tracks between diagram nodes (HTML diagrams).
     A soft highlight sweeps along the track to indicate direction. */
  .flow-track.is-animated::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(var(--flow-angle, 90deg),
      transparent 0%, var(--accent-soft) 45%, var(--accent) 55%, transparent 100%);
    background-size: 220% 220%;
    opacity: 0.9;
    animation: flow-sweep var(--flow-dur, 2.6s) linear infinite;
  }
  @keyframes flow-sweep {
    from { background-position: 0% 0%; }
    to   { background-position: -220% -220%; }
  }
}

/* Reduced motion: freeze everything to its readable static state */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; }
  .flow-pulse { display: none; }            /* hide traveling dots; static diagram remains legible */
  .flow-line.is-animated { animation: none; stroke-dasharray: none; }
  .node-core.is-animated { animation: none; opacity: 1; }
  .hero__glow { animation: none; }   /* keep the blurred aurora, just stop the drift */
  .hero__video { display: none; }    /* show the static poster instead of playing video */
}