/* =====================================================================
   MEASURI LTD — animations.css
   Premium, restrained motion. Everything gated behind IntersectionObserver
   (see animations.js) and prefers-reduced-motion.
   ===================================================================== */

/* Base reveal state — elements start slightly lowered & transparent */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal variants */
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Stagger — set --i on children; delay cascades */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hero floating illustration */
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-0.4deg); }
}
.floaty { animation: float-soft 8s ease-in-out infinite; }
.floaty--slow { animation-duration: 11s; }
.floaty--delay { animation-delay: -3s; }

/* Gentle drift for decorative orbits */
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14px, -18px); }
}
.drift { animation: drift 14s ease-in-out infinite; }

/* Parallax layer (JS updates --py) */
.parallax { transform: translateY(var(--py, 0)); transition: transform 0.15s linear; }

/* Line draw for SVG illustration accents */
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* Count-up numbers hold layout stable */
.stat-num[data-count] { font-variant-numeric: tabular-nums; }

/* Marquee for tech / trust rows (optional, paused on hover) */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee-wrap {
  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);
}

/* Subtle gradient shimmer for hero background wash */
@keyframes hue-drift {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(1.08); }
}
.aura { animation: hue-drift 12s ease-in-out infinite; }

/* Nav link entrance handled by CSS transitions elsewhere */

/* ------------------------------------------------------------------ */
/* Respect reduced motion — disable all non-essential movement        */
/* ------------------------------------------------------------------ */
@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;
  }
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .floaty, .drift, .aura, .marquee { animation: none !important; }
  .parallax { transform: none !important; }
}