/* ── MMORealms.gg ── Animations & Visual Effects ──────────────────── */

/* ── Keyframes ── */

/* Cyan glow pulse for the logo / brand mark */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4))
            drop-shadow(0 0 12px rgba(0, 212, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.7))
            drop-shadow(0 0 28px rgba(0, 212, 255, 0.4));
  }
}

/* Gentle floating up/down for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Shine swipe across buttons on hover */
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Subtle scanline animation (optional) */
@keyframes scanline-scroll {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Fade-in for reveals */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Utility Animation Classes ── */

.logo-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

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

/* Button shine swipe */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.btn-shine:hover::after {
  opacity: 1;
  animation: shine 0.6s ease-in-out forwards;
}

/* ── Scanline Overlay ── */

.scanlines::before,
.scanlines::after,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Horizontal scanlines */
body::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* Moving scanline beam (add `.scanlines` to body for full effect) */
.scanlines::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
}

.scanlines::after {
  width: 100%;
  height: 6px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 212, 255, 0.06),
    transparent
  );
  animation: scanline-scroll 8s linear infinite;
}

/* ── Canvas Particle Background ── */

.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.particle-canvas-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Glitch Text Effect (Optional) ── */

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch::before {
  color: var(--primary-accent);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px, -1px);
}

.glitch::after {
  color: var(--secondary-accent);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translate(2px, 1px);
}

/* ── Pulse Dot Indicator ── */

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary-accent);
  box-shadow: 0 0 8px var(--secondary-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}

/* ── Loading Spinner ── */

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 212, 255, 0.2);
  border-top-color: var(--primary-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── Stagger Utilities ── */

.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; }