/* ==========================================================================
   MOTION SYSTEM
   --------------------------------------------------------------------------
   Reusable animation primitives, driven by assets/js/motion.js
   (IntersectionObserver adds [data-revealed="true"]). CSS handles every
   simple case; JS only toggles the attribute. transform/opacity only, so
   this stays cheap even on long pages.

   Motion hierarchy (see brief):
   L1 hover · L2 micro-interaction · L3 reveal · L4 product transformation
   L5 ambient · L6 cinematic storytelling
   ========================================================================== */

/* ---- L3: scroll reveals -------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transition:opacity var(--duration-slow) var(--ease-cinematic),
             transform var(--duration-slow) var(--ease-cinematic);
  will-change:opacity, transform;
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="up"]{ transform:translateY(24px); }
[data-reveal="down"]{ transform:translateY(-24px); }
[data-reveal="scale"]{ transform:scale(.96); }
[data-reveal="stagger"]{ transform:translateY(20px); }

[data-revealed="true"]{
  opacity:1;
  transform:none;
}

/* stagger: children get an incrementing delay via inline --i, set by JS */
[data-reveal="stagger"] > *{
  transition-delay:calc(var(--i, 0) * 70ms);
}

[data-reveal-delay="1"]{ transition-delay:80ms; }
[data-reveal-delay="2"]{ transition-delay:160ms; }
[data-reveal-delay="3"]{ transition-delay:240ms; }
[data-reveal-delay="4"]{ transition-delay:320ms; }

/* ---- L1/L2: hover + micro-interaction utilities -------------------------- */
.hover-lift{ transition:transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.hover-glow{ transition:box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard); }
.hover-glow:hover{ box-shadow:var(--glow-accent); border-color:var(--border-interactive); }

.magnetic{ transition:transform var(--duration-fast) var(--ease-spring); }

/* ---- L5: ambient loops ---------------------------------------------------- */
@keyframes float-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.float{ animation:float-y 6s var(--ease-standard) infinite; }

@keyframes glow-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}
.glow-pulse{ animation:glow-pulse 2.4s ease-in-out infinite; }

@keyframes shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
.shimmer{
  background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}

/* ---- L4: product-transformation primitives -------------------------------- */
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slide-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes scale-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }

.anim-fade-in{ animation:fade-in var(--duration-normal) var(--ease-out) both; }
.anim-slide-up{ animation:slide-up var(--duration-normal) var(--ease-out) both; }
.anim-scale-in{ animation:scale-in var(--duration-normal) var(--ease-out) both; }

/* chart-draw foundation: apply to an SVG path, JS sets --path-length */
.chart-draw{
  stroke-dasharray:var(--path-length, 1000);
  stroke-dashoffset:var(--path-length, 1000);
  animation:chart-draw var(--duration-cinematic) var(--ease-cinematic) forwards;
}
@keyframes chart-draw{ to{ stroke-dashoffset:0; } }

/* number-counter foundation: JS drives the text content; this just adds a
   settle-in so the final value doesn't pop */
.counter-value{ font-variant-numeric:tabular-nums; }

/* border-glow (for card focus/hover) */
.border-glow{ position:relative; }
.border-glow::after{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--accent), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity var(--duration-normal) var(--ease-standard);
  pointer-events:none;
}
.border-glow:hover::after,
.border-glow:focus-within::after{ opacity:1; }

/* gradient movement (subtle background drift, used sparingly) */
@keyframes gradient-move{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.gradient-drift{
  background-size:200% 200%;
  animation:gradient-move 12s ease-in-out infinite;
}

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .float, .glow-pulse, .shimmer, .gradient-drift, .chart-draw{ animation:none !important; }
  .hover-lift:hover{ transform:none; }
  .anim-fade-in, .anim-slide-up, .anim-scale-in{ animation:none !important; opacity:1; transform:none; }
  /* Loading state stays visible (opacity/disabled cursor already signal
     "busy") but stops spinning — see foundation.css .btn.is-loading. */
  .btn.is-loading::after{ animation:none !important; opacity:.6; }
}