/* ==========================================================================
   ANIMATIONS — keyframes, scroll-reveal, floats, reduced-motion escape hatch
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes line-up   { to { transform: translateY(0); } }
@keyframes drawer-in { to { opacity: 1; transform: translateY(0); } }
@keyframes spin      { to { transform: rotate(360deg); } }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(52,208,122,.65); }
  70%  { box-shadow: 0 0 0 8px rgba(52,208,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,208,122,0); }
}

@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -20px, 0) rotate(-1.4deg); }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(14px, -18px, 0) scale(1.06); }
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(220%) skewX(-18deg); }
}

/* ---- Scroll-triggered entrance ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity var(--t-enter) var(--ease-out),
              transform var(--t-enter) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.reveal-left  { opacity: 0; transform: translateX(-34px); transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal-right { opacity: 0; transform: translateX(34px);  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* ---- Floating decoration ---- */
.float-a { animation: float-a 7s var(--ease-inout) infinite; }
.float-b { animation: float-b 9s var(--ease-inout) infinite; animation-delay: -2.5s; }
.float-c { animation: float-a 8s var(--ease-inout) infinite; animation-delay: -4s; }
.glow--drift { animation: drift 16s var(--ease-inout) infinite; }
.glow--drift-slow { animation: drift 22s var(--ease-inout) infinite reverse; }

/* ---- Marquee trust strip ---- */
.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; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline: var(--s-6);
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; color: var(--crimson-lt); }

/* ---- Sheen sweep on featured surfaces ---- */
.sheen { position: relative; overflow: hidden; }
.sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: sheen 5.5s var(--ease-inout) infinite;
  pointer-events: none;
}

/* ---- Counter placeholder keeps layout stable while counting ---- */
.count-up { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   REDUCED MOTION — resolve everything to its final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-line > span { transform: none !important; }
  .hero__layer, .hero__badge, .split__img-2, .split__badge { transform: none !important; }
  .float-a, .float-b, .float-c, .glow--drift, .glow--drift-slow, .sheen::before { animation: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
  .card::after { display: none; }
}