/* ========================================
   SVG动态图标系统
   ======================================== */

/* 基础图标容器 */
.svg-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* 图标状态图层 */
.svg-icon img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}

/* 状态显示控制 */
.svg-icon[data-status="normal"] .state-normal { 
  opacity: 1; 
}
.svg-icon[data-status="warning"] .state-warning { 
  opacity: 1; 
}
.svg-icon[data-status="danger"] .state-danger { 
  opacity: 1; 
}
.svg-icon[data-status="inactive"] .state-inactive { 
  opacity: 1; 
}

/* ========================================
   心率图标特殊动画
   ======================================== */

/* 危险状态 - 快速心跳 */
.icon-heart[data-status="danger"] img {
  animation: heartBeatFast 0.6s ease-in-out infinite;
}

/* 警告状态 - 中速心跳 */
.icon-heart[data-status="warning"] img {
  animation: heartBeatMedium 1s ease-in-out infinite;
}

/* 正常状态 - 慢速心跳 */
.icon-heart[data-status="normal"] img {
  animation: heartBeatNormal 1.5s ease-in-out infinite;
}

@keyframes heartBeatFast {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(0.92); }
  45% { transform: scale(1.08); }
  60% { transform: scale(1); }
}

@keyframes heartBeatMedium {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.1); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.05); }
}

@keyframes heartBeatNormal {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.05); }
  50% { transform: scale(0.98); }
}

/* ========================================
   呼吸图标特殊动画
   ======================================== */

/* 正常呼吸 - 平缓律动 */
.icon-breathe[data-status="normal"] img {
  animation: breathingNormal 4s ease-in-out infinite;
}

/* 警告状态 - 急促呼吸 */
.icon-breathe[data-status="warning"] img {
  animation: breathingWarning 2.5s ease-in-out infinite;
}

/* 危险状态 - 异常呼吸 */
.icon-breathe[data-status="danger"] img {
  animation: breathingDanger 1.5s ease-in-out infinite;
}

@keyframes breathingNormal {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.12);
    opacity: 0.85;
  }
}

@keyframes breathingWarning {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.15);
    opacity: 0.8;
  }
}

@keyframes breathingDanger {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  25% { 
    transform: scale(1.18);
    opacity: 0.75;
  }
  75% { 
    transform: scale(0.92);
    opacity: 0.9;
  }
}

/* ========================================
   危险状态 - 警告光晕效果
   ======================================== */

.icon-heart[data-status="danger"]::after,
.icon-breathe[data-status="danger"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(244, 67, 54, 0.25) 0%, transparent 60%);
  border-radius: 50%;
  animation: dangerPulse 1.5s ease-out infinite;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

@keyframes dangerPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* 警告状态 - 柔和光晕 */
.icon-heart[data-status="warning"]::after,
.icon-breathe[data-status="warning"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.2) 0%, transparent 60%);
  border-radius: 50%;
  animation: warningGlow 2s ease-in-out infinite;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

@keyframes warningGlow {
  0%, 100% { 
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* ========================================
   响应式调整
   ======================================== */

/* 大图标（80px）动画调整 */
.svg-icon[style*="80px"] img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.svg-icon[style*="80px"][data-status="danger"] img {
  filter: drop-shadow(0 4px 12px rgba(244, 67, 54, 0.4));
}

/* 小图标（24px）保持简洁 */
.svg-icon[style*="24px"] .icon-heart img,
.svg-icon[style*="24px"] .icon-breathe img {
  animation: none !important;
}

.svg-icon[style*="24px"][data-status="danger"]::after,
.svg-icon[style*="24px"][data-status="warning"]::after {
  display: none;
}

/* 暗色模式优化 */
@media (prefers-color-scheme: dark) {
  .svg-icon img {
    filter: brightness(1.1);
  }
}

/* ========================================
   通用SVG图标样式（非状态切换型）
   ======================================== */

/* 基础SVG图标 - 平滑过渡 */
img[src*=".svg"] {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* 悬停效果 */
.group:hover img[src*=".svg"],
.card-hover:hover img[src*=".svg"] {
  transform: scale(1.05);
}

/* 跌倒检测图标特殊动画 */
img[src*="Fall"][src*=".svg"] {
  animation: fallAlert 2s ease-in-out infinite;
}

@keyframes fallAlert {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
  }
  25% { 
    transform: scale(1.05) rotate(-2deg);
  }
  75% { 
    transform: scale(1.05) rotate(2deg);
  }
}

/* 睡眠图标柔和呼吸效果 */
img[src*="sleep"][src*=".svg"],
img[src*="Sleep"][src*=".svg"],
img[src*="Bed"][src*=".svg"] {
  animation: sleepBreathing 3s ease-in-out infinite;
}

@keyframes sleepBreathing {
  0%, 100% { 
    opacity: 0.9;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.03);
  }
}

/* 雷达旋转扫描效果 */
img[src*="雷达"][src*=".svg"] {
  animation: radarScan 4s linear infinite;
  transform-origin: center;
}

@keyframes radarScan {
  0% { 
    transform: rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(0, 162, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 162, 255, 0.5));
  }
  100% { 
    transform: rotate(360deg);
    filter: drop-shadow(0 0 8px rgba(0, 162, 255, 0.3));
  }
}

/* 姿态图标轻微摇摆 */
img[src*="Sitting"][src*=".svg"],
img[src*="Yuga"][src*=".svg"],
img[src*="AsiaSit"][src*=".svg"] {
  animation: postureGentle 3s ease-in-out infinite;
}

@keyframes postureGentle {
  0%, 100% { 
    transform: rotate(0deg);
  }
  25% { 
    transform: rotate(-1deg);
  }
  75% { 
    transform: rotate(1deg);
  }
}

/* 小图标禁用动画（性能优化） */
img[src*=".svg"][style*="24px"],
img[src*=".svg"][style*="18px"] {
  animation: none !important;
}

/* 大图标（80px）增强效果 */
img[src*=".svg"][style*="80px"] {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* 橙色警告图标 */
img[src*="Fall"][src*=".svg"][style*="hue-rotate"] {
  filter: hue-rotate(-10deg) saturate(1.3) drop-shadow(0 4px 12px rgba(255, 87, 34, 0.3));
}

/* ========================================
   报警灯循环动画
   ======================================== */

/* 报警灯图标容器 */
.svg-icon.icon-alarm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 报警灯图标状态 - 循环闪烁 */
.svg-icon.icon-alarm img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

/* 报警灯自动循环 - 红橙黄绿四色轮转 */
.svg-icon.icon-alarm .alarm-red {
  animation: alarmCycleRed 2s ease-in-out infinite;
}

.svg-icon.icon-alarm .alarm-orange {
  animation: alarmCycleOrange 2s ease-in-out infinite;
}

.svg-icon.icon-alarm .alarm-yellow {
  animation: alarmCycleYellow 2s ease-in-out infinite;
}

.svg-icon.icon-alarm .alarm-green {
  animation: alarmCycleGreen 2s ease-in-out infinite;
}

/* 红色: 0-25% 显示 */
@keyframes alarmCycleRed {
  0%, 5% { opacity: 0; }
  10%, 22% { opacity: 1; }
  27%, 100% { opacity: 0; }
}

/* 橙色: 25-50% 显示 */
@keyframes alarmCycleOrange {
  0%, 22% { opacity: 0; }
  27%, 47% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

/* 黄色: 50-75% 显示 */
@keyframes alarmCycleYellow {
  0%, 47% { opacity: 0; }
  52%, 72% { opacity: 1; }
  77%, 100% { opacity: 0; }
}

/* 绿色: 75-100% 显示 */
@keyframes alarmCycleGreen {
  0%, 72% { opacity: 0; }
  77%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* 报警灯呼吸/脉冲效果 */
.svg-icon.icon-alarm img {
  animation-timing-function: ease-in-out;
}

/* 报警灯光晕效果 */
.svg-icon.icon-alarm::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  animation: alarmGlow 2s ease-in-out infinite;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

@keyframes alarmGlow {
  0%, 5%, 27%, 52%, 77%, 100% {
    background: radial-gradient(circle, transparent 0%, transparent 60%);
  }
  10%, 22% {
    background: radial-gradient(circle, rgba(247, 70, 2, 0.25) 0%, transparent 60%);
  }
  32%, 47% {
    background: radial-gradient(circle, rgba(255, 163, 93, 0.25) 0%, transparent 60%);
  }
  57%, 72% {
    background: radial-gradient(circle, rgba(255, 184, 0, 0.25) 0%, transparent 60%);
  }
  82%, 95% {
    background: radial-gradient(circle, rgba(0, 201, 136, 0.25) 0%, transparent 60%);
  }
}

/* 大尺寸报警灯增强效果 */
.svg-icon.icon-alarm[style*="80px"] img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.svg-icon.icon-alarm[style*="80px"]::after {
  width: 140%;
  height: 140%;
}

/* ========================================
   姿态图标循环动画
   ======================================== */

/* 姿态图标容器 */
.svg-icon.icon-posture {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 姿态图标状态 - 循环切换 */
.svg-icon.icon-posture img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* 姿态自动循环 - 坐->站->走->躺->瑜伽 五姿态轮转 */
.svg-icon.icon-posture .posture-sitting {
  animation: postureCycleSitting 10s ease-in-out infinite;
}

.svg-icon.icon-posture .posture-standing {
  animation: postureCycleStanding 10s ease-in-out infinite;
}

.svg-icon.icon-posture .posture-walking {
  animation: postureCycleWalking 10s ease-in-out infinite;
}

.svg-icon.icon-posture .posture-lying {
  animation: postureCycleLying 10s ease-in-out infinite;
}

.svg-icon.icon-posture .posture-yuga {
  animation: postureCycleYuga 10s ease-in-out infinite;
}

/* 坐: 0-20% 显示 */
@keyframes postureCycleSitting {
  0%, 2% { opacity: 0; }
  5%, 17% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

/* 站: 20-40% 显示 */
@keyframes postureCycleStanding {
  0%, 17% { opacity: 0; }
  20%, 37% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

/* 走: 40-60% 显示 */
@keyframes postureCycleWalking {
  0%, 37% { opacity: 0; }
  40%, 57% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

/* 躺: 60-80% 显示 */
@keyframes postureCycleLying {
  0%, 57% { opacity: 0; }
  60%, 77% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* 瑜伽: 80-100% 显示 */
@keyframes postureCycleYuga {
  0%, 77% { opacity: 0; }
  80%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

/* 姿态图标柔和过渡效果 */
.svg-icon.icon-posture img {
  animation-timing-function: ease-in-out;
}

/* ========================================
   隐私保护图标循环动画
   ======================================== */

/* 隐私图标容器 */
.svg-icon.icon-privacy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 隐私图标状态 - 循环切换 */
.svg-icon.icon-privacy img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* 隐私自动循环 - 保护中->已验证->安全确认->警报提示 四状态轮转 */
.svg-icon.icon-privacy .privacy-protected {
  animation: privacyCycleProtected 12s ease-in-out infinite;
}

.svg-icon.icon-privacy .privacy-verified {
  animation: privacyCycleVerified 12s ease-in-out infinite;
}

.svg-icon.icon-privacy .privacy-secure {
  animation: privacyCycleSecure 12s ease-in-out infinite;
}

.svg-icon.icon-privacy .privacy-alert {
  animation: privacyCycleAlert 12s ease-in-out infinite;
}

/* 保护中: 0-25% 显示 */
@keyframes privacyCycleProtected {
  0%, 2% { opacity: 0; }
  5%, 22% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

/* 已验证: 25-50% 显示 */
@keyframes privacyCycleVerified {
  0%, 22% { opacity: 0; }
  25%, 47% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 安全确认: 50-75% 显示 */
@keyframes privacyCycleSecure {
  0%, 47% { opacity: 0; }
  50%, 72% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

/* 警报提示: 75-100% 显示 */
@keyframes privacyCycleAlert {
  0%, 72% { opacity: 0; }
  75%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

/* 隐私图标柔和过渡效果 */
.svg-icon.icon-privacy img {
  animation-timing-function: ease-in-out;
}