/* ============================================
   FRFR — Animations & Reveals
   ============================================ */

/* ---- Scroll Reveals ---- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

.reveal--left {
  opacity: 0; transform: translateX(-35px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal--right {
  opacity: 0; transform: translateX(35px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal--left.visible, .reveal--right.visible { opacity: 1; transform: translateX(0); }

.reveal--scale {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal--scale.visible { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }

/* ---- Hero Entrance ---- */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: hero-in 0.7s var(--ease) 0.2s both; }
.hero-anim-2 { animation: hero-in 0.7s var(--ease) 0.35s both; }
.hero-anim-3 { animation: hero-in 0.7s var(--ease) 0.5s both; }
.hero-anim-4 { animation: hero-in 0.7s var(--ease) 0.65s both; }
.hero-anim-5 { animation: hero-in 0.7s var(--ease) 0.8s both; }

/* ---- Float badges ---- */
@keyframes float-badge {
  0%, 100% { transform: translateY(0) rotate(var(--float-rot, 3deg)); }
  50% { transform: translateY(-8px) rotate(var(--float-rot, 3deg)); }
}
.hero__float-badge { animation: float-badge 4s ease-in-out infinite; }
.hero__float-badge--1 { --float-rot: 3deg; animation-delay: 0s; }
.hero__float-badge--2 { --float-rot: -2deg; animation-delay: 1.2s; }
.hero__float-badge--3 { --float-rot: -4deg; animation-delay: 0.6s; }

/* ---- Mascot idle ---- */
@keyframes mascot-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hero__mascot { animation: mascot-idle 5s ease-in-out infinite; }
.hero__mascot:hover { animation-play-state: paused; }

/* ---- Grid dot pattern (decorative) ---- */
.dot-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4;
  background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 1; transform: none; transition: none;
  }
  .hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4, .hero-anim-5 {
    animation: none; opacity: 1;
  }
  .hero__mascot, .hero__float-badge, .marquee__track { animation: none; }
}