/* Panic Meter - Visual Escalation System */

/* CSS Custom Properties for Panic States */
:root {
  --calm-hue: 200deg;
  --awareness-hue: 150deg;
  --urgency-hue: 60deg;
  --alarm-hue: 30deg;
  --meltdown-hue: 0deg;
}

/* Base Panic Meter Container */
.panic-meter {
  transition: filter 1s ease-in-out;
  will-change: auto; /* Default, only enable during animation */
}

/* State 1: Calm (90+ days) */
.panic-meter.calm {
  filter: hue-rotate(var(--calm-hue)) brightness(1.0);
}

/* State 2: Awareness (60-89 days) */
.panic-meter.awareness {
  filter: hue-rotate(var(--awareness-hue)) brightness(1.05);
  animation: pulse-awareness 2s ease-in-out infinite;
}

/* State 3: Urgency (30-59 days) */
.panic-meter.urgency {
  filter: hue-rotate(var(--urgency-hue)) brightness(1.1);
  animation: pulse-urgency 1.5s ease-in-out infinite;
}

/* State 4: Alarm (14-29 days) */
.panic-meter.alarm {
  filter: hue-rotate(var(--alarm-hue)) brightness(1.15);
  animation: pulse-alarm 1s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255, 165, 0, 0.3);
}

/* State 5: Meltdown (<14 days) */
.panic-meter.meltdown {
  filter: hue-rotate(var(--meltdown-hue)) brightness(1.2) saturate(1.5);
  animation: shake 0.3s infinite, pulse-meltdown 0.5s ease-in-out infinite;
  will-change: transform, filter; /* Enable GPU acceleration */
  text-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
}

/* Keyframe Animations - GPU-Accelerated Only */

/* Shake Animation - Uses transform for GPU acceleration */
@keyframes shake {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 2px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  75% {
    transform: translate(-2px, -2px);
  }
}

/* Mobile Shake - Reduced intensity */
@keyframes shake-mobile {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
}

/* Pulse Animations - Uses opacity for GPU acceleration */
@keyframes pulse-awareness {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes pulse-urgency {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes pulse-alarm {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

@keyframes pulse-meltdown {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* Mobile Optimization */
@media (max-width: 768px) {
  /* Use reduced shake intensity on mobile */
  .panic-meter.meltdown {
    animation: shake-mobile 0.3s infinite, pulse-meltdown 0.5s ease-in-out infinite;
  }

  /* Reduce text shadow for performance */
  .panic-meter.alarm {
    text-shadow: 0 0 15px rgba(255, 165, 0, 0.2);
  }

  .panic-meter.meltdown {
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
  }
}

/* Accessibility: Disable Animations for Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .panic-meter,
  .panic-meter.calm,
  .panic-meter.awareness,
  .panic-meter.urgency,
  .panic-meter.alarm,
  .panic-meter.meltdown {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Use static colors only - no animations */
  .panic-meter.calm {
    filter: hue-rotate(var(--calm-hue)) brightness(1.0);
  }

  .panic-meter.awareness {
    filter: hue-rotate(var(--awareness-hue)) brightness(1.05);
  }

  .panic-meter.urgency {
    filter: hue-rotate(var(--urgency-hue)) brightness(1.1);
  }

  .panic-meter.alarm {
    filter: hue-rotate(var(--alarm-hue)) brightness(1.15);
  }

  .panic-meter.meltdown {
    filter: hue-rotate(var(--meltdown-hue)) brightness(1.2) saturate(1.5);
  }
}