/* ================================================================
   ELITEHOSTING.IN — Animation System v1.0
   ================================================================ */

@keyframes fadeIn       { from { opacity: 0; }                        to { opacity: 1; } }
@keyframes fadeOut      { from { opacity: 1; }                        to { opacity: 0; } }
@keyframes slideUp      { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes slideDown    { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes slideLeft    { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slideRight   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideOutRight{ from { opacity: 1; transform: none; }       to { opacity: 0; transform: translateX(40px); } }
@keyframes scaleIn      { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes spin         { from { transform: rotate(0deg); }           to { transform: rotate(360deg); } }
@keyframes pulse        { 0%,100% { opacity: 1; }                     50% { opacity: 0.5; } }
@keyframes float        { 0%,100% { transform: translateY(0); }       50% { transform: translateY(-12px); } }
@keyframes blink        { 0%,50%,100% { opacity: 1; }                 25%,75% { opacity: 0; } }
@keyframes shimmer      { 0% { background-position: 200% 0; }         100% { background-position: -200% 0; } }
@keyframes shake        { 0%,100% { transform: translateX(0); }       20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes bounceIn     { 0% { opacity: 0; transform: scale(0.7); }   60% { transform: scale(1.05); }          100% { opacity: 1; transform: scale(1); } }
@keyframes countUp      { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glowPulse    { 0%,100% { box-shadow: 0 0 10px var(--electric-glow); } 50% { box-shadow: 0 0 30px var(--electric-glow), 0 0 60px rgba(0,212,255,0.1); } }
@keyframes rotateRing   { from { transform: rotate(0deg); }           to { transform: rotate(360deg); } }
@keyframes typewriter   { from { width: 0; } to { width: 100%; } }

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

@keyframes meshShift {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes borderSpin {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* ── Utility Animation Classes ──────────────────────────────── */
.anim-fade-in   { animation: fadeIn     0.4s ease forwards; }
.anim-slide-up  { animation: slideUp    0.5s var(--ease) forwards; }
.anim-slide-down{ animation: slideDown  0.5s var(--ease) forwards; }
.anim-scale-in  { animation: scaleIn    0.35s var(--ease-spring) forwards; }
.anim-float     { animation: float      3s ease-in-out infinite; }
.anim-spin      { animation: spin       0.8s linear infinite; }
.anim-pulse     { animation: pulse      2s ease-in-out infinite; }
.anim-glow      { animation: glowPulse  2.5s ease-in-out infinite; }
.anim-shake     { animation: shake      0.4s ease; }
.anim-bounce-in { animation: bounceIn   0.5s var(--ease-spring) forwards; }

.delay-50  { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ── Scroll Reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(30px);  transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s var(--ease-spring); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Tilt Card ───────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* ── Glow Border ─────────────────────────────────────────────── */
.glow-border {
  position: relative;
}
.glow-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--grad-electric);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.glow-border:hover::before { opacity: 0.5; }

/* ── Pulse Ring ─────────────────────────────────────────────── */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--mint);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Typing Cursor ─────────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  color: var(--electric);
  animation: blink 0.8s step-end infinite;
}

/* ── Page Transitions ─────────────────────────────────────── */
.page-enter { animation: fadeIn 0.3s ease forwards; }
.page-exit  { animation: fadeOut 0.2s ease forwards; }

/* ── Number Counter ─────────────────────────────────────────── */
.counter-wrap { overflow: hidden; display: inline-block; }

/* ── Loading Dots ────────────────────────────────────────────── */
.loading-dots span {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--electric);
  animation: loadDot 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadDot { 0%,80%,100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }

/* ── Hero Mesh Background ─────────────────────────────────── */
.hero-mesh {
  background-image: var(--grad-hero-mesh);
  animation: meshShift 8s ease-in-out infinite;
}

/* ── Animated Grid Background ─────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 8s linear infinite;
}

/* ── Neon Text Flicker ─────────────────────────────────────── */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px var(--electric), 0 0 20px var(--electric), 0 0 40px var(--electric);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}
.neon-text { animation: neonFlicker 3s ease-in-out infinite alternate; }

/* ── Staggered Children ─────────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  animation: slideUp 0.5s var(--ease) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 80ms; }
.stagger-children > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { animation-delay: 480ms; }
.stagger-children > *:nth-child(8) { animation-delay: 560ms; }

/* ── Reduce Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}