/* =============================================
   Animations — Fist Bump Site
   ============================================= */

/* --- Hero title entrance --- */
@keyframes title-drop {
  0% {
    opacity: 0;
    transform: translateY(-80px) rotate(-8deg) scale(1.3);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) rotate(2deg) scale(0.95);
  }
  80% {
    transform: translateY(-5px) rotate(-1deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

.anim-title-drop {
  animation: title-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

/* --- Tagline fade-up --- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-up {
  animation: fade-up 0.6s ease forwards;
  opacity: 0;
}

.anim-delay-1 { animation-delay: 0.3s; }
.anim-delay-2 { animation-delay: 0.6s; }
.anim-delay-3 { animation-delay: 0.9s; }
.anim-delay-4 { animation-delay: 1.2s; }

/* --- Fist bump collision --- */
@keyframes fist-left {
  0% { transform: translateX(-60px) rotate(-10deg); opacity: 0; }
  50% { transform: translateX(5px) rotate(2deg); opacity: 1; }
  70% { transform: translateX(-2px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}

@keyframes fist-right {
  0% { transform: translateX(60px) rotate(10deg) scaleX(-1); opacity: 0; }
  50% { transform: translateX(-5px) rotate(-2deg) scaleX(-1); opacity: 1; }
  70% { transform: translateX(2px) rotate(1deg) scaleX(-1); }
  100% { transform: translateX(0) rotate(0) scaleX(-1); opacity: 1; }
}

@keyframes impact-burst {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

@keyframes impact-lines {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

.fist-bump-anim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fist-bump-anim__left {
  font-size: 2em;
  animation: fist-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.fist-bump-anim__right {
  font-size: 2em;
  animation: fist-right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
  opacity: 0;
}

.fist-bump-anim__burst {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--gold);
  border-radius: 50%;
  animation: impact-burst 0.4s ease 0.4s forwards;
  transform: scale(0);
}

/* --- Floating football --- */
@keyframes float-spin {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.anim-float {
  animation: float-spin 4s ease-in-out infinite;
}

/* --- Bounce for CTAs --- */
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.anim-bounce {
  animation: gentle-bounce 2s ease-in-out infinite;
}

/* --- Parallax layers --- */
.parallax-wrapper {
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  bottom: -20%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* --- Confetti burst (on buy click) --- */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  z-index: 9999;
  animation: confetti-fall 2s ease-in forwards;
  pointer-events: none;
}

/* --- Comic panel hover --- */
.comic-panel {
  transition: transform var(--transition-bounce), box-shadow var(--transition-base);
}

.comic-panel:hover {
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 6px 6px 0px var(--navy-deep);
}

/* --- Stadium lights flicker --- */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

.anim-flicker {
  animation: flicker 5s ease-in-out infinite;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .parallax-bg {
    transform: none !important;
  }

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