/* ==========================================================================
   animations.css — reveal primitives, keyframes, reduced-motion policy
   ========================================================================== */

/* Split-line masked reveal. JS wraps each line in .line > .line__i */
.line { overflow: hidden; display: block; }
.line__i { display: block; will-change: transform; }

/* Elements JS will animate in. Hidden by default ONLY when JS is running,
   so content stays visible if scripts fail (progressive enhancement). */
.js .reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
.js .reveal-fade { opacity: 0; }

@keyframes scrollHint {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

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

@keyframes blobDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(180px, 120px) scale(1.25); }
}

@keyframes blobDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-160px, -100px) scale(1.2); }
}

/* Magnetic buttons get transform from JS; keep the transition short so the
   spring feels responsive rather than laggy. */
.magnetic { transition: transform 0.35s var(--ease); }

/* ==========================================================================
   Reduced motion — disable non-essential movement, keep everything readable.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Content must never stay hidden waiting on an animation that won't run. */
  .js .reveal,
  .js .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__scroll-line::after { animation: none; }
  .pulse { animation: none; opacity: 0.7; }
  .magnetic { transform: none !important; }
  .service::after { display: none; }
}