/* ==========================================================================
   Motion
   Loaded after styles.css. Everything here is decorative.
   The reduced-motion block at the bottom of styles.css switches it off.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes logo3d {
  0% {
    transform: rotateX(16deg) rotateY(-24deg) translateZ(20px) translateY(0);
  }
  50% {
    transform: rotateX(10deg) rotateY(24deg) translateZ(36px) translateY(-16px);
  }
  100% {
    transform: rotateX(16deg) rotateY(-24deg) translateZ(20px) translateY(0);
  }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ripple {
  to { transform: scale(12); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: rise 0.8s ease both;
  }
  .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.34s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.44s; }

  .stage-card { animation: pop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }

  .logo-3d { animation: logo3d 7s ease-in-out infinite; }

  .sticker { animation: rise 0.8s ease 0.55s both; }

  .marquee-track { animation: marquee 42s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }

  .ripple { animation: ripple 0.65s ease-out forwards; }

  /* Hidden until JS marks them .in — only when scripting is on. */
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js .reveal.in {
    opacity: 1;
    transform: none;
  }
}