/* animations.css - Rokda7 Gaming Platform */

/* =====================
   KEYFRAMES
   ===================== */

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

@keyframes pulseBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.2); }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes expandRing {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,0,55,0.3), 0 4px 20px rgba(255,0,55,0.2); }
  50% { box-shadow: 0 0 40px rgba(255,0,55,0.7), 0 4px 40px rgba(255,0,55,0.4); }
}

@keyframes neonFlicker {
  0%, 94%, 100% { opacity: 1; }
  95%, 99% { opacity: 0.82; }
}

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

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

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

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes particleFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@keyframes alertSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes textGlitch {
  0% { text-shadow: 2px 0 #FF0037, -2px 0 #00E5FF; }
  20% { text-shadow: -2px 0 #FF0037, 2px 0 #00E5FF; }
  40% { text-shadow: 2px 0 #FF3355, -2px 0 #FFD700; }
  60% { text-shadow: -2px 0 #FF3355, 2px 0 #FFD700; }
  80% { text-shadow: 2px 0 #FF0037, -2px 0 #00E5FF; }
  100% { text-shadow: none; }
}

/* =====================
   SCROLL REVEAL CLASSES
   ===================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delays for child items */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }
.stagger > *:nth-child(7) { transition-delay: 0.6s; }
.stagger > *:nth-child(8) { transition-delay: 0.7s; }

/* =====================
   ANIMATION UTILITY CLASSES
   ===================== */

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

.anim-neon-flicker {
  animation: neonFlicker 4s infinite;
}

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

.anim-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.anim-slide-in-up {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.anim-spin-slow {
  animation: spinSlow 20s linear infinite;
}

/* Card hover neon glow shorthand */
.card-neon {
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.card-neon:hover {
  box-shadow: 0 0 20px rgba(255,0,55,0.4), 0 0 60px rgba(255,0,55,0.15);
  border-color: rgba(255,0,55,0.6) !important;
  transform: translateY(-4px);
}

/* =====================
   PAGE TRANSITION
   ===================== */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Every page fades in on load — no JS required for entry */
body {
  animation: pageFadeIn 0.15s ease forwards;
}

/* JS adds this before navigating away — triggers smooth exit */
body.is-leaving {
  animation: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

/* Disable smooth-scroll during exit so the browser doesn't animate the scroll reset */
html.is-leaving {
  scroll-behavior: auto;
}

/* Legacy compatibility */
.page-enter {
  animation: pageFadeIn 0.22s ease forwards;
}

/* =====================
   LOADING SKELETON
   ===================== */

.skeleton {
  background: linear-gradient(90deg, #120014 25%, #1a001f 50%, #120014 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* =====================
   TOOLTIP
   ===================== */

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18,0,20,0.95);
  border: 1px solid rgba(255,0,55,0.3);
  color: #fff;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/* =====================
   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;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
  }
}