/* =========================================
   BIGGLE NEW YEAR 2026 - Animations
   90s Indian Kollywood Retro Theme
   ========================================= */

/* =========================================
   SHIMMER ANIMATIONS
   Gold text with moving highlight effect
   ========================================= */

/* Shimmer - Linear gradient moving across text */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Shimmer variant for golden text */
@keyframes shimmerGold {
  0% {
    background-position: -100% 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Text shimmer effect class */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-text-gold) 0%,
    #fff 25%,
    var(--color-text-gold) 50%,
    #fff 75%,
    var(--color-text-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* =========================================
   PULSE ANIMATIONS
   Subtle glow pulse for buttons and elements
   ========================================= */

/* Basic pulse */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Glow pulse for buttons */
@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255, 107, 53, 0.5),
      0 0 20px rgba(255, 107, 53, 0.3);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 107, 53, 0.7),
      0 0 40px rgba(255, 107, 53, 0.5),
      0 0 60px rgba(255, 20, 147, 0.3);
  }
}

/* Heartbeat pulse */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* Ripple pulse effect */
@keyframes ripplePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

/* Pulse utility classes */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* =========================================
   SPARKLE ANIMATIONS
   CSS-only decorative sparkles
   ========================================= */

/* Sparkle twinkle effect */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1) rotate(90deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.5) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1) rotate(270deg);
  }
}

/* Multi-point sparkle */
@keyframes sparkleStar {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    transform: scale(1.2) rotate(72deg);
    opacity: 1;
  }
  40% {
    transform: scale(0.9) rotate(144deg);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.1) rotate(216deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) rotate(288deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Sparkle float effect */
@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0.7;
  }
  90% {
    opacity: 1;
  }
}

/* Glitter effect */
@keyframes glitter {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Sparkle container - creates multiple sparkle points */
.sparkle-container {
  position: relative;
}

.sparkle-container::before,
.sparkle-container::after {
  content: '✦';
  position: absolute;
  font-size: 0.75rem;
  color: var(--color-text-gold);
  animation: sparkle 2s ease-in-out infinite;
  pointer-events: none;
}

.sparkle-container::before {
  top: -5px;
  left: -5px;
  animation-delay: 0s;
}

.sparkle-container::after {
  bottom: -5px;
  right: -5px;
  animation-delay: 1s;
}

/* =========================================
   ENTRANCE ANIMATIONS
   Fade up on scroll into view
   ========================================= */

/* Fade up entrance */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale up entrance */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bounce entrance */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Entrance utility classes */
.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fadeInRight {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.5s ease-out forwards;
}

.animate-bounceIn {
  animation: bounceIn 0.8s ease-out forwards;
}

/* Initial hidden state for scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered entrance delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* =========================================
   FLIP/SLIDE TRANSITIONS
   For countdown timer numbers
   ========================================= */

/* Flip down animation */
@keyframes flipDown {
  0% {
    transform: perspective(400px) rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
}

/* Slide up animation */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide down animation */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Number flip effect */
.flip-number {
  display: inline-block;
  animation: flipDown 0.3s ease-out;
}

/* =========================================
   CELEBRATION ANIMATIONS
   Festive party effects
   ========================================= */

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

/* Firework burst */
@keyframes fireworkBurst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Party pop effect */
@keyframes partyPop {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Celebration shake */
@keyframes celebrationWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

/* Party utility classes */
.confetti {
  animation: confettiFall 4s linear infinite;
}

.party-pop {
  animation: partyPop 0.6s ease-out forwards;
}

.wiggle {
  animation: celebrationWiggle 0.5s ease-in-out infinite;
}

/* =========================================
   NEON GLOW ANIMATIONS
   90s retro neon effects
   ========================================= */

/* Neon flicker */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px var(--color-primary),
      0 0 10px var(--color-primary),
      0 0 20px var(--color-primary),
      0 0 40px var(--color-highlight),
      0 0 80px var(--color-highlight);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* Neon breathe */
@keyframes neonBreathe {
  0%, 100% {
    text-shadow:
      0 0 5px var(--color-text-gold),
      0 0 10px var(--color-text-gold),
      0 0 20px var(--color-primary);
  }
  50% {
    text-shadow:
      0 0 10px var(--color-text-gold),
      0 0 20px var(--color-text-gold),
      0 0 40px var(--color-primary),
      0 0 60px var(--color-highlight);
  }
}

/* Neon border glow */
@keyframes neonBorderGlow {
  0%, 100% {
    box-shadow:
      0 0 5px var(--color-primary),
      inset 0 0 5px var(--color-primary);
  }
  50% {
    box-shadow:
      0 0 20px var(--color-primary),
      0 0 30px var(--color-highlight),
      inset 0 0 10px var(--color-primary);
  }
}

/* Neon utility classes */
.neon-flicker {
  animation: neonFlicker 3s linear infinite;
}

.neon-breathe {
  animation: neonBreathe 3s ease-in-out infinite;
}

.neon-border {
  animation: neonBorderGlow 2s ease-in-out infinite;
}

/* =========================================
   FLOATING ANIMATIONS
   Subtle floating/hovering effects
   ========================================= */

/* Float up and down */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Float with rotation */
@keyframes floatRotate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

/* Gentle sway */
@keyframes sway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* Float utility classes */
.float {
  animation: float 3s ease-in-out infinite;
}

.float-rotate {
  animation: floatRotate 4s ease-in-out infinite;
}

.sway {
  animation: sway 4s ease-in-out infinite;
}

/* =========================================
   LOADING/SPINNER ANIMATIONS
   ========================================= */

/* Spin */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dots loading */
@keyframes dotsLoading {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Loading utility classes */
.spin {
  animation: spin 1s linear infinite;
}

/* =========================================
   ATTENTION ANIMATIONS
   Draw user attention
   ========================================= */

/* Shake attention */
@keyframes attention {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Ring bell effect */
@keyframes ring {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-13deg);
  }
  30% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(2deg);
  }
  80%, 100% {
    transform: rotate(0deg);
  }
}

/* Attention utility classes */
.attention {
  animation: attention 0.8s ease-in-out;
}

.ring {
  animation: ring 1s ease-in-out;
}

/* =========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep static visual states but remove motion */
  .shimmer-text {
    background-position: 0% center;
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .float,
  .float-rotate,
  .sway,
  .pulse,
  .glow-pulse,
  .heartbeat,
  .wiggle,
  .spin {
    animation: none;
  }
}