/* ============================================
   VOLTASSISTANT CLOUD - MEGA VISUAL EFFECTS
   Ultra-visible animations for energy dashboard
   ============================================ */

/* === ANIMATED SUN/MOON ICON === */
.sun-moon-toggle {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.sun-icon {
  position: absolute;
  font-size: 2.5rem;
  animation: sun-rotate 20s linear infinite, sun-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

@keyframes sun-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sun-pulse {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
    transform: scale(1) rotate(0deg);
  }
  50% { 
    filter: drop-shadow(0 0 25px rgba(251, 191, 36, 1)) drop-shadow(0 0 50px rgba(251, 191, 36, 0.5));
    transform: scale(1.1);
  }
}

.moon-icon {
  position: absolute;
  font-size: 2.5rem;
  animation: moon-float 4s ease-in-out infinite, moon-glow 3s ease-in-out infinite;
}

@keyframes moon-float {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-5px) rotate(10deg); }
}

@keyframes moon-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.5));
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(148, 163, 184, 0.8)) drop-shadow(0 0 40px rgba(148, 163, 184, 0.4));
  }
}

/* === BATTERY GAUGE ANIMATED === */
.battery-gauge {
  position: relative;
  width: 120px;
  height: 60px;
  border: 4px solid #4ade80;
  border-radius: 10px;
  padding: 4px;
  background: #1f2937;
}

.battery-gauge::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 24px;
  background: #4ade80;
  border-radius: 0 4px 4px 0;
}

.battery-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 30%, #4ade80 70%, #22c55e 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.battery-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: battery-shine 2s ease-in-out infinite;
}

@keyframes battery-shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.battery-pulse {
  animation: battery-pulse-glow 2s ease-in-out infinite;
}

@keyframes battery-pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.3); }
  50% { box-shadow: 0 0 30px rgba(74, 222, 128, 0.6), 0 0 60px rgba(74, 222, 128, 0.3); }
}

/* === ANIMATED NUMBER COUNTER === */
.price-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.price-counter-animate {
  animation: number-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes number-pop {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Rolling number effect */
.number-roll {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.2em;
}

.number-roll-digit {
  display: block;
  animation: roll-up 0.5s ease-out;
}

@keyframes roll-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* === GLOW EFFECTS === */
.glow-green {
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), 0 0 40px rgba(74, 222, 128, 0.3);
}

.glow-green-text {
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5), 0 0 20px rgba(74, 222, 128, 0.3);
}

.glow-red {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.3);
}

.glow-yellow {
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.3);
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(74, 222, 128, 0.4); }
  50% { box-shadow: 0 0 30px rgba(74, 222, 128, 0.8), 0 0 60px rgba(74, 222, 128, 0.4); }
}

/* === PRICE CARD MEGA EFFECTS === */
.price-card-mega {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.price-card-mega::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(74, 222, 128, 0.1) 90deg,
    transparent 180deg
  );
  animation: card-rotate 6s linear infinite;
}

@keyframes card-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.price-card-mega:hover {
  transform: translateY(-10px) scale(1.02);
}

/* === STAT CARD ANIMATIONS === */
.stat-card-mega {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card-mega::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #4ade80, #3b82f6);
  transition: width 0.4s ease;
}

.stat-card-mega:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.stat-card-mega:hover::after {
  width: 100%;
}

/* === LIGHTNING BOLT ANIMATION === */
.lightning-bolt {
  animation: lightning-flash 3s ease-in-out infinite;
}

@keyframes lightning-flash {
  0%, 90%, 100% { 
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5));
  }
  92%, 94%, 96% { 
    opacity: 0.5;
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 1));
  }
  93%, 95%, 97% { 
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1)) drop-shadow(0 0 60px rgba(251, 191, 36, 0.5));
  }
}

/* === PRICE CHANGE INDICATORS === */
.price-up {
  color: #ef4444;
  animation: price-change-up 0.5s ease;
}

.price-down {
  color: #22c55e;
  animation: price-change-down 0.5s ease;
}

@keyframes price-change-up {
  0% { transform: translateY(10px); opacity: 0; }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes price-change-down {
  0% { transform: translateY(-10px); opacity: 0; }
  50% { transform: translateY(5px); }
  100% { transform: translateY(0); opacity: 1; }
}

/* === WAVE BACKGROUND === */
.wave-bg {
  position: relative;
  overflow: hidden;
}

.wave-bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%2310b981' fill-opacity='0.1' d='M0,50 C360,100 1080,0 1440,50 L1440,100 L0,100 Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: repeat-x;
  animation: wave-move 10s linear infinite;
}

@keyframes wave-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === FEATURE CARD HOVER === */
.feature-card-volt {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.feature-card-volt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
  transition: left 0.5s ease;
}

.feature-card-volt:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
  border-color: #10b981;
}

.feature-card-volt:hover::before {
  left: 100%;
}

/* === CHART GLOW === */
.chart-glow {
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.3));
}

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