/* ============================================
   IX7 GAME — animations.css
   All keyframes & reveal/animation classes
   ============================================ */

/* --- Keyframes --- */

@keyframes floatPhone {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(-2deg); }
}

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

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

@keyframes expandRing {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.82); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(229, 57, 53, 0.35), 0 4px 20px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 44px rgba(255, 23, 68, 0.75), 0 0 80px rgba(229, 57, 53, 0.35), 0 4px 24px rgba(0,0,0,0.5); }
}

@keyframes neonFlicker {
  0%, 92%, 100% { opacity: 1; }
  93%, 95%       { opacity: 0.78; }
  94%, 96%       { opacity: 1; }
  98%            { opacity: 0.85; }
}

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

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

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

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

@keyframes orbitSlow {
  from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes orbitalPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(229,57,53,0.4); }
  50%       { transform: scale(1.12); box-shadow: 0 0 18px rgba(229,57,53,0.8); }
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes alertBounce {
  0%, 100% { transform: translateY(0); }
  30%       { transform: translateY(-4px); }
  60%       { transform: translateY(-2px); }
}

@keyframes circuitTrace {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.6; }
}

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

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 300% center; }
}

@keyframes scanLine {
  0%   { top: 0%; opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(3deg); }
  66%       { transform: translateY(6px) rotate(-2deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(-18px) rotate(-4deg); }
  70%       { transform: translateY(8px) rotate(2deg); }
}

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

/* --- Reveal Classes (JS adds .revealed) --- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Stagger delays */
.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-float-phone   { animation: floatPhone 4s ease-in-out infinite; }
.anim-pulse-badge   { animation: pulseBadge 2s ease-in-out infinite; }
.anim-glow-pulse    { animation: glowPulse 2.5s ease-in-out infinite; }
.anim-neon-flicker  { animation: neonFlicker 6s linear infinite; }
.anim-shimmer       { animation: shimmer 3s linear infinite; }
.anim-gold-shimmer  { animation: goldShimmer 3s linear infinite; }
.anim-spin          { animation: spin 8s linear infinite; }
.anim-slide-in-up   { animation: slideInUp 0.6s ease forwards; }
.anim-fade-scale    { animation: fadeInScale 0.5s ease forwards; }
.anim-ripple        { animation: ripple 1.5s ease-out infinite; }

/* Card neon shorthand */
.card-neon {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.card-neon:hover {
  box-shadow: 0 0 28px rgba(229, 57, 53, 0.5), 0 8px 32px rgba(0,0,0,0.5);
  border-color: rgba(229, 57, 53, 0.7);
  transform: translateY(-4px);
}

/* Loading shimmer skeleton */
.skeleton {
  background: linear-gradient(90deg, #1a0000 25%, #2a0505 50%, #1a0000 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Entrance animations (one-shot) */
.entrance-up    { animation: slideInUp 0.6s ease both; }
.entrance-left  { animation: slideInLeft 0.6s ease both; }
.entrance-right { animation: slideInRight 0.6s ease both; }
.entrance-down  { animation: slideInDown 0.5s ease both; }

.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.2s; }
.delay-3  { animation-delay: 0.3s; }
.delay-4  { animation-delay: 0.4s; }
.delay-5  { animation-delay: 0.5s; }
.delay-6  { animation-delay: 0.6s; }
.delay-7  { animation-delay: 0.7s; }
.delay-8  { animation-delay: 0.8s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}