/* =========================================================
   SINUCA TICKETS — Animações
   ========================================================= */

@keyframes floatBall {
  0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px)) translateY(0) rotate(0deg); }
  50% { transform: translate(var(--px, 0px), var(--py, 0px)) translateY(-30px) rotate(15deg); }
}

.floating-ball {
  animation: floatBall 6s ease-in-out infinite;
}

.floating-ball.delay-1 { animation-delay: 1.2s; }
.floating-ball.delay-2 { animation-delay: 2.4s; }
.floating-ball.delay-3 { animation-delay: .6s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp .7s ease forwards;
  opacity: 0;
}

.fade-in-up.delay-1 { animation-delay: .1s; }
.fade-in-up.delay-2 { animation-delay: .25s; }
.fade-in-up.delay-3 { animation-delay: .4s; }
.fade-in-up.delay-4 { animation-delay: .55s; }

[data-observe] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-observe].in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-title .highlight,
.brand .brand-accent {
  background-size: 200% auto;
  animation: auroraShift 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(124,92,255,.25); }
  50% { box-shadow: 0 0 34px rgba(124,92,255,.55); }
}

.btn-primary {
  animation: glowPulse 3.5s ease-in-out infinite;
}

@keyframes goldGlowPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(242,183,5,.25); }
  50% { box-shadow: 0 0 30px rgba(242,183,5,.5); }
}

.btn-gold, .promo-banner .promo-badge {
  animation: goldGlowPulse 3.2s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

.spinner.on-dark {
  border: 2.5px solid rgba(255,255,255,.2);
  border-top-color: var(--primary-light);
}

.spinner.on-gold {
  border: 2.5px solid rgba(0,0,0,.25);
  border-top-color: #201a05;
}

@keyframes pulseDot {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
}

.hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.scale-in { animation: scaleIn .5s ease forwards; }

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

.modal-emoji { animation: modalFloat 2.6s ease-in-out infinite; display: inline-block; }

@keyframes ribbonShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.batch-ribbon { animation: ribbonShine 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .floating-ball, .fade-in-up, .hero-title .highlight, .brand .brand-accent,
  .btn-primary, .btn-gold, .promo-banner .promo-badge, .spinner, .pulse-dot,
  .skeleton, .scale-in, .modal-emoji, .batch-ribbon {
    animation: none !important;
  }
  [data-observe] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}