/* animations.css - Futuristic Mario Theme */

/* ========================================
   KEYFRAMES
   ======================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes float {
  0% { transform: translateY(0px) rotateX(5deg) rotateY(-15deg); }
  50% { transform: translateY(-20px) rotateX(10deg) rotateY(-5deg); }
  100% { transform: translateY(0px) rotateX(5deg) rotateY(-15deg); }
}

@keyframes gradientPulse {
  0% { opacity: 0.5; filter: hue-rotate(0deg); }
  100% { opacity: 1; filter: hue-rotate(20deg); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - (var(--space-6) / 2))); }
}

@keyframes whatsappEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whatsappPulse {
  0% { opacity: 0.7; transform: scale(0.92); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}

/* ========================================
   SCROLL REVEAL CLASSES
   ======================================== */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
}

.reveal-up {
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.active {
  transform: translateY(0);
}

.reveal-left {
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.active {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.active {
  transform: translateX(0);
}

.reveal-scale {
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.active {
  transform: scale(1);
}

/* ========================================
   STAGGER DELAYS
   ======================================== */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }

/* ========================================
   PAGE TRANSITIONS
   ======================================== */
.page-enter {
  animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ========================================
   MISC ANIMATIONS
   ======================================== */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@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;
  }
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}