/* ============================================
   AVALON: THE FORGOTTEN WORLD
   Animations & Effects Stylesheet
   ============================================ */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Rune Glow Pulse */
@keyframes runeGlow {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 10px var(--color-aether-cyan),
      0 0 20px var(--color-aether-blue),
      0 0 30px var(--color-mystic-purple);
  }
  50% {
    filter: brightness(1.3);
    text-shadow:
      0 0 20px var(--color-aether-cyan),
      0 0 40px var(--color-aether-blue),
      0 0 60px var(--color-mystic-purple);
  }
}

/* Gold Rune Glow */
@keyframes runeGlowGold {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 10px var(--color-arcane-gold),
      0 0 20px var(--color-copper),
      0 0 30px var(--color-ember-orange);
  }
  50% {
    filter: brightness(1.2);
    text-shadow:
      0 0 20px var(--color-arcane-gold),
      0 0 40px var(--color-copper),
      0 0 60px var(--color-ember-orange);
  }
}

/* Slow Rotation for Gear Elements */
@keyframes rotateGear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Gentle Sway */
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade In Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

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

/* Slide In */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Magical Particles */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) rotate(720deg);
    opacity: 0;
  }
}

/* Border Glow Pulse */
@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 5px var(--color-aether-cyan),
                0 0 10px var(--color-aether-blue);
  }
  50% {
    box-shadow: 0 0 15px var(--color-aether-cyan),
                0 0 30px var(--color-aether-blue),
                0 0 45px var(--color-mystic-purple);
  }
}

/* Typewriter Effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--color-aether-cyan); }
}

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

/* Rune Glow Effects */
.animate-rune-glow {
  animation: runeGlow 2s ease-in-out infinite;
}

.animate-rune-glow-gold {
  animation: runeGlowGold 2s ease-in-out infinite;
}

/* Rotation */
.animate-rotate {
  animation: rotateGear 20s linear infinite;
}

.animate-rotate-reverse {
  animation: rotateGearReverse 20s linear infinite;
}

.animate-rotate-slow {
  animation: rotateGear 40s linear infinite;
}

/* Floating */
.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 4s ease-in-out infinite;
  animation-delay: 1s;
}

/* Sway */
.animate-sway {
  animation: sway 3s ease-in-out infinite;
}

/* Pulse */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

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

/* Fade In On Scroll (triggered by JS) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll--left {
  transform: translateX(-30px);
}

.animate-on-scroll--left.animated {
  transform: translateX(0);
}

.animate-on-scroll--right {
  transform: translateX(30px);
}

.animate-on-scroll--right.animated {
  transform: translateX(0);
}

.animate-on-scroll--scale {
  transform: scale(0.9);
}

.animate-on-scroll--scale.animated {
  transform: scale(1);
}

/* Staggered Animation Delays */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-600 { animation-delay: 600ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-800 { animation-delay: 800ms; }

/* Animation Duration */
.animate-duration-fast { animation-duration: 0.3s; }
.animate-duration-normal { animation-duration: 0.6s; }
.animate-duration-slow { animation-duration: 1s; }

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Lift on Hover */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Scale on Hover */
.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Glow on Hover */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-cyan);
}

.hover-glow--gold:hover {
  box-shadow: var(--shadow-glow-gold);
}

.hover-glow--purple:hover {
  box-shadow: var(--shadow-glow-purple);
}

/* Border Color Change on Hover */
.hover-border-glow {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.hover-border-glow:hover {
  border-color: var(--color-aether-cyan);
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.3);
}

/* ============================================
   MAGICAL PARTICLE EFFECTS
   ============================================ */

/* Particle Container */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-aether-cyan);
  border-radius: 50%;
  animation: particleFloat linear infinite;
  opacity: 0;
}

.particle:nth-child(1) { left: 5%; animation-duration: 15s; animation-delay: 0s; }
.particle:nth-child(2) { left: 15%; animation-duration: 18s; animation-delay: 2s; }
.particle:nth-child(3) { left: 25%; animation-duration: 12s; animation-delay: 4s; }
.particle:nth-child(4) { left: 35%; animation-duration: 20s; animation-delay: 1s; }
.particle:nth-child(5) { left: 45%; animation-duration: 14s; animation-delay: 3s; }
.particle:nth-child(6) { left: 55%; animation-duration: 16s; animation-delay: 5s; }
.particle:nth-child(7) { left: 65%; animation-duration: 13s; animation-delay: 2s; }
.particle:nth-child(8) { left: 75%; animation-duration: 19s; animation-delay: 4s; }
.particle:nth-child(9) { left: 85%; animation-duration: 11s; animation-delay: 0s; }
.particle:nth-child(10) { left: 95%; animation-duration: 17s; animation-delay: 3s; }

.particle--gold {
  background: var(--color-arcane-gold);
}

.particle--purple {
  background: var(--color-mystic-purple);
}

/* ============================================
   DECORATIVE GEAR ANIMATIONS
   ============================================ */

.gear-container {
  position: absolute;
  pointer-events: none;
}

.gear {
  color: var(--color-brass);
  opacity: 0.1;
  font-size: 4rem;
}

.gear--sm { font-size: 2rem; }
.gear--lg { font-size: 6rem; }
.gear--xl { font-size: 8rem; }

.gear--animated {
  animation: rotateGear 30s linear infinite;
}

.gear--animated-reverse {
  animation: rotateGearReverse 30s linear infinite;
}

/* ============================================
   PARALLAX EFFECTS
   ============================================ */

.parallax {
  position: relative;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
}

.parallax__layer--base {
  transform: translateZ(0);
}

.parallax__layer--front {
  transform: translateZ(1px) scale(0.5);
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-none { transition: none; }
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* Specific Property Transitions */
.transition-opacity { transition: opacity var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }
.transition-colors {
  transition: color var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base);
}

/* ============================================
   TYPEWRITER EFFECT
   ============================================ */

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-aether-cyan);
  animation:
    typewriter 3s steps(40, end),
    blinkCursor 0.75s step-end infinite;
}

/* ============================================
   LOADING ANIMATION
   ============================================ */

.loader {
  display: inline-flex;
  gap: var(--space-sm);
}

.loader__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-aether-cyan);
  animation: pulse 1.4s ease-in-out infinite both;
}

.loader__dot:nth-child(1) { animation-delay: -0.32s; }
.loader__dot:nth-child(2) { animation-delay: -0.16s; }
.loader__dot:nth-child(3) { animation-delay: 0; }

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-charcoal);
  border-top-color: var(--color-aether-cyan);
  border-radius: 50%;
  animation: rotateGear 1s linear infinite;
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.scroll-indicator__mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--color-text-muted);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator__wheel {
  width: 4px;
  height: 8px;
  background: var(--color-aether-cyan);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% { opacity: 1; top: 8px; }
  100% { opacity: 0; top: 20px; }
}

.scroll-indicator__arrow {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animate-rune-glow,
  .animate-rune-glow-gold,
  .animate-rotate,
  .animate-rotate-reverse,
  .animate-rotate-slow,
  .animate-float,
  .animate-float-slow,
  .animate-float-delayed,
  .animate-sway,
  .animate-pulse,
  .animate-shimmer,
  .particle,
  .gear--animated,
  .gear--animated-reverse,
  .typewriter,
  .loader__dot,
  .spinner,
  .scroll-indicator__wheel,
  .scroll-indicator__arrow {
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}