/* 72Hz Ready — topbar attention effects */

/* Unread notification: gentle bell-shake bursts until all notifications are read. */
.notification-bell:has(.notification-count) .premium-icon {
  transform-origin: 50% 12%;
  animation: notificationBellAttention 3.2s ease-in-out infinite;
  will-change: transform;
}
.notification-bell:has(.notification-count) {
  position: relative;
}
.notification-bell:has(.notification-count)::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(241, 90, 42, .18);
  animation: notificationBellHalo 3.2s ease-out infinite;
}
@keyframes notificationBellAttention {
  0%, 9%, 18%, 100% { transform: rotate(0deg); }
  3% { transform: rotate(-10deg); }
  6% { transform: rotate(9deg); }
  12% { transform: rotate(-6deg); }
  15% { transform: rotate(5deg); }
}
@keyframes notificationBellHalo {
  0%, 18%, 100% { opacity: 0; transform: scale(.96); box-shadow: 0 0 0 0 rgba(241,90,42,.16); }
  4% { opacity: .34; }
  14% { opacity: 0; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(241,90,42,0); }
}

/* Orange emergency-guide trigger: premium slow pulse. */
.emergency-guide-trigger {
  position: relative;
  isolation: isolate;
  transform-origin: center;
  animation: emergencyTopbarPremiumPulse 2.5s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.emergency-guide-trigger::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  border: 1px solid rgba(255, 128, 68, .28);
  box-shadow: 0 0 0 0 rgba(241, 90, 42, .18);
  animation: emergencyTopbarPremiumHalo 2.5s ease-out infinite;
}
.emergency-guide-trigger:active {
  animation: none;
  transform: scale(.97);
}
@keyframes emergencyTopbarPremiumPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 5px 14px rgba(241, 90, 42, .18), inset 0 1px 0 rgba(255,255,255,.22);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 8px 20px rgba(241, 90, 42, .30), 0 0 18px rgba(255, 115, 54, .16), inset 0 1px 0 rgba(255,255,255,.30);
  }
}
@keyframes emergencyTopbarPremiumHalo {
  0% { opacity: 0; transform: scale(.98); box-shadow: 0 0 0 0 rgba(241,90,42,.16); }
  28% { opacity: .46; }
  76% { opacity: 0; transform: scale(1.08); box-shadow: 0 0 0 10px rgba(241,90,42,0); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-bell:has(.notification-count) .premium-icon,
  .notification-bell:has(.notification-count)::after,
  .emergency-guide-trigger,
  .emergency-guide-trigger::after {
    animation: none !important;
  }
}