/* =========================================================
   ANIMATIONS.CSS — subtle, premium, never distracting
   ---------------------------------------------------------
   Driven by two gates, both must pass for motion to run:
   1. html.gl-motion (set by main.js from GL_CONFIG.animations)
   2. NOT prefers-reduced-motion: reduce
   Reveal classes are toggled by animations.js via
   IntersectionObserver — CSS only defines the transition.
========================================================= */

/* Default state: elements start hidden only when motion is enabled,
   so disabling animations never hides content. */
html.gl-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}

html.gl-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.gl-motion [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
html.gl-motion [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
/* staggered children */
html.gl-motion [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 80ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 160ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 240ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 320ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 400ms; }
html.gl-motion [data-reveal-group].is-visible > *:nth-child(n+7) { transition-delay: 460ms; }

/* Fade-only variant (for large hero media, no vertical shift) */
html.gl-motion [data-reveal="fade"] { transform: none; }

/* ---------------------------------------------------------
   HOVER MICRO-INTERACTIONS (always on — these are instant,
   user-hover-triggered, not ambient motion)
--------------------------------------------------------- */
.card, .tech-chip, .btn, .process__step { will-change: transform; }

/* ---------------------------------------------------------
   HERO GRADIENT DRIFT (very slow, ambient, disabled by
   prefers-reduced-motion via the global rule in base.css)
--------------------------------------------------------- */
html.gl-motion .hero-glow {
  animation: gl-drift 18s ease-in-out infinite alternate;
}
@keyframes gl-drift {
  from { --x: 20%; --y: -10%; }
  to   { --x: 80%; --y: 20%; }
}

/* ---------------------------------------------------------
   COUNTER PULSE (tiny emphasis when a stat finishes counting)
--------------------------------------------------------- */
@keyframes gl-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
html.gl-motion .stat__value.gl-counted { animation: gl-pop 320ms var(--ease-out-expo); }

/* ---------------------------------------------------------
   PARALLAX LAYER (transform set inline by animations.js;
   this just declares the smoothing + opt-out)
--------------------------------------------------------- */
html.gl-motion [data-parallax] { transition: transform 80ms linear; }
html:not(.gl-motion) [data-parallax] { transform: none !important; }

/* ---------------------------------------------------------
   PAGE TRANSITION (simple fade on route change between pages)
--------------------------------------------------------- */
html.gl-page-transitions body { animation: gl-page-in 420ms var(--ease-out-expo); }
@keyframes gl-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------
   CUSTOM CURSOR (opt-in, off by default in config.js)
--------------------------------------------------------- */
.gl-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  pointer-events: none;
  z-index: var(--z-toast);
  transform: translate(-50%, -50%);
  transition: transform 120ms var(--ease-standard), width 200ms, height 200ms, background 200ms;
  mix-blend-mode: normal;
}
.gl-cursor-dot.is-active { width: 32px; height: 32px; background: var(--color-primary-200); }

/* ---------------------------------------------------------
   SKELETON SHIMMER (used only if an image is still loading)
--------------------------------------------------------- */
@keyframes gl-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.gl-shimmer {
  background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-surface-hover) 37%, var(--color-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: gl-shimmer 1.6s ease-in-out infinite;
}
html:not(.gl-motion) .gl-shimmer { animation: none; background: var(--color-surface-sunken); }