/* ==========================================================================
   Plumbix — Motion layer
   All motion is opt-in via [data-reveal] and is disabled when the visitor
   has requested reduced motion.
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-right {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 228, 242, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 228, 242, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 228, 242, 0); }
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -3.5%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Scroll reveal ---- */
[data-reveal] { opacity: 0; will-change: opacity, transform; }
[data-reveal].is-revealed { animation: rise-in 720ms var(--ease-out-soft) both; }
[data-reveal="fade"].is-revealed { animation-name: fade-in; }
[data-reveal="right"].is-revealed { animation-name: slide-right; }
[data-reveal="scale"].is-revealed { animation-name: scale-in; }

/* Stagger children of a revealed group */
[data-stagger] > * { opacity: 0; }
[data-stagger].is-revealed > * { animation: rise-in 640ms var(--ease-out-soft) both; }
[data-stagger].is-revealed > *:nth-child(1) { animation-delay: 0ms; }
[data-stagger].is-revealed > *:nth-child(2) { animation-delay: 80ms; }
[data-stagger].is-revealed > *:nth-child(3) { animation-delay: 160ms; }
[data-stagger].is-revealed > *:nth-child(4) { animation-delay: 240ms; }
[data-stagger].is-revealed > *:nth-child(5) { animation-delay: 320ms; }
[data-stagger].is-revealed > *:nth-child(6) { animation-delay: 400ms; }
[data-stagger].is-revealed > *:nth-child(n+7) { animation-delay: 460ms; }

/* ---- Hero atmosphere: slow drifting plume field ---- */
.hero-canvas .plume {
  transform-origin: 50% 50%;
  animation: drift 22s ease-in-out infinite;
}
.hero-canvas .plume:nth-child(2) { animation-duration: 30s; animation-delay: -6s; }
.hero-canvas .plume:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }

.hero-canvas .grid-line {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: draw 2.6s var(--ease-out-soft) forwards;
}
.hero-canvas .grid-line:nth-child(even) { animation-delay: 220ms; }

/* ---- Sparkline draw-on ---- */
.panel-spark path.line {
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}
.panel-spark.is-drawn path.line { animation: draw 1.8s var(--ease-out-soft) forwards; }
.panel-spark path.area { opacity: 0; transition: opacity 900ms var(--ease) 700ms; }
.panel-spark.is-drawn path.area { opacity: 1; }

/* ---- Marquee (partner strip, optional) ---- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: var(--sp-5); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- Counter ---- */
.stat-value[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Hover micro-interactions ---- */
.hover-lift { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* ---- Page-load sequence for the hero ---- */
.hero [data-seq] { opacity: 0; animation: rise-in 820ms var(--ease-out-soft) both; }
.hero [data-seq="1"] { animation-delay: 60ms; }
.hero [data-seq="2"] { animation-delay: 180ms; }
.hero [data-seq="3"] { animation-delay: 300ms; }
.hero [data-seq="4"] { animation-delay: 420ms; }
.hero [data-seq="5"] { animation-delay: 560ms; }

/* ---- Reduced motion ---- */
@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;
  }
  [data-reveal], [data-stagger] > *, .hero [data-seq] { opacity: 1 !important; transform: none !important; }
  .panel-spark path.line { stroke-dashoffset: 0; }
  .panel-spark path.area { opacity: 1; }
}