/* ==========================================================================
   ANIMATIONS — keyframes, entrance states, micro-interactions
   All motion is gated behind prefers-reduced-motion at the bottom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes markPulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.62; transform: scale(0.96); }
}

@keyframes cueSlide {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  55%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes floatYSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -22px, 0); }
}

@keyframes particleDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0; }
  12%  { opacity: 0.45; }
  100% { transform: translate3d(0, -140px, 0) scale(0.4); opacity: 0; }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(224, 27, 36, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(224, 27, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 27, 36, 0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   2. SCROLL-TRIGGERED ENTRANCE
   Elements start hidden; the shared IntersectionObserver adds .is-visible.
   -------------------------------------------------------------------------- */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translate3d(0, 30px, 0); }
[data-animate="fade-down"]  { transform: translate3d(0, -24px, 0); }
[data-animate="fade-left"]  { transform: translate3d(34px, 0, 0); }
[data-animate="fade-right"] { transform: translate3d(-34px, 0, 0); }
[data-animate="zoom-in"]    { transform: scale(0.94); }
[data-animate="fade"]       { transform: none; }

/* Horizontal entrance offsets extend past the viewport edge on narrow
   screens and would create a sideways scrollbar before .is-visible lands.
   Below the tablet breakpoint, fall back to a vertical-only reveal. */
@media (max-width: 1024px) {
  [data-animate="fade-left"],
  [data-animate="fade-right"] { transform: translate3d(0, 26px, 0); }
}

[data-animate] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Stagger children — delay set inline by JS via --i */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   3. FLOATING DECORATIVE ELEMENTS
   -------------------------------------------------------------------------- */

.float      { animation: floatY 7s var(--ease-in-out) infinite; }
.float--slow{ animation: floatYSlow 10s var(--ease-in-out) infinite; }
.float--d1  { animation-delay: -2.2s; }
.float--d2  { animation-delay: -4.4s; }

.hero__glow--1 { animation: floatYSlow 14s var(--ease-in-out) infinite; }
.hero__glow--2 { animation: floatYSlow 18s var(--ease-in-out) infinite reverse; }

/* Pulse ring on primary phone CTA */
.pulse-ring { animation: pulseRing 2.4s var(--ease-out) infinite; }

/* Popup particles */
.popup__particle { animation: particleDrift 7s linear infinite; }
.popup__particle:nth-child(1) { left: 12%; bottom: 8%;  animation-delay: 0s;    }
.popup__particle:nth-child(2) { left: 28%; bottom: 4%;  animation-delay: -1.4s; }
.popup__particle:nth-child(3) { left: 52%; bottom: 10%; animation-delay: -2.8s; }
.popup__particle:nth-child(4) { left: 71%; bottom: 6%;  animation-delay: -4.2s; }
.popup__particle:nth-child(5) { left: 88%; bottom: 12%; animation-delay: -5.6s; }

/* --------------------------------------------------------------------------
   4. HOVER MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Magnetic button — JS sets --tx/--ty from pointer position */
.magnetic {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform var(--dur-base) var(--ease-out);
}
.magnetic:hover { transition: transform 90ms linear; }

/* Image frame zoom */
.zoom-frame { overflow: hidden; }
.zoom-frame img { transition: transform var(--dur-slow) var(--ease-out); }
.zoom-frame:hover img { transform: scale(1.06); }

/* Shimmer placeholder */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--charcoal) 25%,
    var(--smoke) 50%,
    var(--charcoal) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Counter — avoid layout shift while numbers tick */
.stat__value,
.trust-item__value { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. REDUCED MOTION — hard override
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure nothing stays invisible when transitions are neutralised */
  [data-animate],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-mask > span { transform: none !important; }
  .chalk-line::after  { transform: scaleX(1) !important; }

  /* Kill decorative motion outright */
  .float,
  .float--slow,
  .hero__glow--1,
  .hero__glow--2,
  .pulse-ring,
  .popup__particle,
  .shimmer,
  .scroll-cue__line::after {
    animation: none !important;
  }

  /* Neutralise pointer-driven 3D tilt */
  .tilt > *,
  .card,
  .hero__frame {
    transform: none !important;
  }
}