/* ============================================
   Animations - Subtle & Elegant Steampunk
   ============================================ */

/* Keyframe Animations */

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

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

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

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse (for LIVE indicator) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Glow effect */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(212, 168, 88, 0.3),
                0 0 10px rgba(212, 168, 88, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(212, 168, 88, 0.6),
                0 0 20px rgba(212, 168, 88, 0.4);
  }
}

/* Steam puff */
@keyframes steamPuff {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(1.5);
  }
}

/* Decorative Gear Elements */
.gear {
  animation: rotate-slow 30s linear infinite;
  will-change: transform;
}

.gear-reverse {
  animation: rotate-reverse 40s linear infinite;
  will-change: transform;
}

.gear-fast {
  animation: rotate-slow 15s linear infinite;
}

/* Page Load Animations */
.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.fade-in-up {
  /* fade-in-up animation disabled */
}

/* Staggered animation delays for sequential reveals */
.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;
}

/* LIVE Indicator */
.live-indicator {
  animation: pulse 2s ease-in-out infinite;
}

.live-indicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #ff4444;
  border-radius: 50%;
  margin-right: 0.5rem;
  animation: glow 2s ease-in-out infinite;
}

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

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

.hover-scale {
  transition: transform var(--transition-base);
}

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

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

.hover-glow:hover {
  box-shadow: 0 0 15px rgba(212, 168, 88, 0.4),
              0 0 30px rgba(212, 168, 88, 0.2);
}

/* Button Gear Icon Rotation on Hover */
.btn-with-gear:hover .gear-icon {
  transform: rotate(45deg);
}

.gear-icon {
  display: inline-block;
  transition: transform var(--transition-base);
}

/* Loading State */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 168, 88, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  to {
    left: 100%;
  }
}

/* Scroll Reveal Animation Classes - fade-in disabled, elements always visible */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
}

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

/* Blueprint Grid Background */
.blueprint-bg {
  background-image:
    linear-gradient(rgba(91, 155, 142, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 155, 142, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Rivet Decorations */
.rivet {
  position: relative;
}

.rivet::before,
.rivet::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--color-brown);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.rivet::before {
  top: 10px;
  left: 10px;
}

.rivet::after {
  top: 10px;
  right: 10px;
}

/* Metal Panel Border Effect */
.metal-panel {
  position: relative;
  border: 3px solid var(--color-gold);
  background: linear-gradient(135deg,
    var(--color-ivory) 0%,
    var(--color-cream) 100%
  );
}

.metal-panel::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid var(--color-primary-teal);
  border-radius: inherit;
  pointer-events: none;
}

/* Gauge Meter Animation */
.gauge {
  position: relative;
  width: 100%;
  height: 200px;
}

.gauge-needle {
  transform-origin: bottom center;
  transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Steam Puff Elements */
.steam-puff {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle,
    rgba(245, 241, 232, 0.6) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: steamPuff 3s ease-out infinite;
}

.steam-puff:nth-child(2) {
  animation-delay: 1s;
}

.steam-puff:nth-child(3) {
  animation-delay: 2s;
}

/* Parallax Layers */
.parallax-layer {
  will-change: transform;
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .gear,
  .gear-reverse,
  .gear-fast,
  .live-indicator,
  .steam-puff,
  .loading::after {
    animation: none !important;
  }

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

  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
  }
}