/* ==========================================================================
   SCRUB & GLOW — Animation primitives
   ========================================================================== */

/* GSAP-driven reveal targets start hidden via class, JS animates to visible.
   This keeps no-JS / reduced-motion users seeing full content. */
.reveal-up,
.reveal-fade,
.reveal-scale {
  opacity: 1;
}

@media (scripting: enabled) {
  .js .reveal-up { opacity: 0; transform: translateY(36px); }
  .js .reveal-fade { opacity: 0; }
  .js .reveal-scale { opacity: 0; transform: scale(0.94); }
}

.split-text .line { overflow: hidden; }

/* ---- Loader ---- */
.page-loader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__mark {
  width: 56px; height: 56px;
  position: relative;
}
.page-loader__mark svg { width: 100%; height: 100%; }
.page-loader__ring {
  fill: none;
  stroke: var(--blue-electric);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: loader-draw 1.1s var(--ease-in-out) infinite;
}
@keyframes loader-draw {
  0% { stroke-dashoffset: 150; transform: rotate(0deg); }
  50% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 150; transform: rotate(360deg); }
}

/* ---- Cursor glow (desktop only, decorative) ---- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin-left: -210px; margin-top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,148,255,0.14) 0%, rgba(58,148,255,0) 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }

/* ---- Marquee (trust strip, optional) ---- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  gap: var(--sp-2xl);
  animation: marquee-scroll 28s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Floating particle dots (CSS fallback layer, non-WebGL sections) ---- */
.ambient-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189,235,255,0.9), rgba(58,148,255,0));
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(14px, -22px); opacity: 0.9; }
}

/* ---- Magnetic button active state ---- */
.magnetic.is-magnetized .btn { transition: transform 0.15s var(--ease-out); }

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal-up, .js .reveal-fade, .js .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero__canvas, .final-cta__canvas, .cursor-glow { display: none !important; }
}