/* =========================================================
   ONE STEP PROGRESS — Keyframes + Motion
   ========================================================= */

/* ---- Pulse ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse { animation: pulse 1.6s ease-in-out infinite; }

/* ---- Marquee ---- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee:hover { animation-play-state: paused; }

/* ---- Float (subtle vertical) ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* ---- Spin slow ---- */
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin 14s linear infinite; }

/* ---- Shake on hover ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-0.5deg); }
  40% { transform: translateX(2px) rotate(0.5deg); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}
.shake-on-hover:hover { animation: shake 320ms ease-in-out; }

/* ---- Reveal (used by scroll-reveal.js) ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px) rotate(-1.5deg);
  transition:
    opacity 700ms var(--ease-street),
    transform 700ms var(--ease-street);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
.reveal.from-left  { transform: translateX(-40px) rotate(-1deg); }
.reveal.from-right { transform: translateX(40px) rotate(1deg); }
.reveal.from-left.is-visible,
.reveal.from-right.is-visible { transform: translate(0,0) rotate(0); }

/* Stagger via inline custom prop --i (set by JS or HTML) */
.reveal { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---- Stamp slam (button press) ---- */
@keyframes slam {
  0% { transform: scale(1); }
  40% { transform: scale(0.94) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
.slam-on-click:active { animation: slam 220ms var(--ease-snap); }

/* ---- Marquee reverse for second strip ---- */
.marquee.reverse { animation-direction: reverse; }

/* ---- Floating BG tags base style (positioning by JS) ---- */
.bg-tag {
  position: fixed;
  z-index: var(--z-bg);
  pointer-events: none;
  font-family: var(--font-tag);
  color: var(--paper);
  opacity: 0.06;
  font-size: clamp(80px, 12vw, 220px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.02em;
  will-change: transform;
}
.bg-tag.red { color: var(--red-brand); opacity: 0.07; }
.bg-tag.acid { color: var(--acid-yellow); opacity: 0.05; }
.bg-tag.bungee { font-family: var(--font-street); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee,
  .float,
  .spin-slow,
  .pulse,
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal { transition: none !important; }
  .bg-tag { display: none !important; }
}