/*
 * Floating decorations, loading, toast, and animation keyframes
 */

    /* 漂浮装饰 */
    .floating-flower {
      position: fixed; bottom: 20px; left: 20px; font-size: 2rem; opacity: 0.2;
      color: #dcc2b0; z-index: 1; pointer-events: none;
      animation: float 6s ease-in-out infinite;
    }
    .floating-flower2 {
      top: 100px; right: 20px; position: fixed; font-size: 2.8rem; opacity: 0.15;
      color: #b8cfc0; z-index: 1; pointer-events: none;
      animation: float 8s ease-in-out infinite reverse;
    }
    
    /* 加载动画 */
    .loading-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(255, 250, 240, 0.9); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999; transition: opacity 0.3s ease;
    }
    .loading-spinner {
      width: 60px; height: 60px; border: 3px solid #f3e5d8;
      border-top: 3px solid #b8cfc0; border-radius: 50%;
      animation: spin 1s linear infinite;
      position: relative;
    }
    .loading-spinner::after {
      content: '🐾'; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%); font-size: 20px;
    }
    
    /*  Toast 通知 */
    .toast {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;
      padding: 16px 28px; border-radius: 40px; font-size: 16px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      --toast-fade-duration: 320ms;
      --toast-fade-delay: 2680ms;
      animation: fadeIn 0.3s ease, fadeOut var(--toast-fade-duration) ease var(--toast-fade-delay);
      backdrop-filter: blur(8px);
      min-width: 200px;
      text-align: center;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .toast.success {
      background: rgba(184, 207, 192, 0.9); color: #2f463a;
    }
    .toast.error {
      background: rgba(255, 138, 122, 0.9); color: #722f2f;
    }
    .toast.info {
      background: rgba(200, 180, 165, 0.9); color: #4e3f36;
    }
    
    /* 按钮加载状态 */
    .btn-loading {
      position: relative; opacity: 0.7; pointer-events: none;
    }
    .btn-loading::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 16px; height: 16px; margin: -8px 0 0 -8px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-top: 2px solid #fff; border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    /* 动画关键帧 */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes float {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(2deg); }
      75% { transform: rotate(-2deg); }
    }
    @keyframes worshipAura {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0.8);
      }
      20% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
      }
      40% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
      }
      60% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.4;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      }
      100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
      }
    }
    @keyframes heartFloat {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
    opacity: 1;
  }
  80% {
    transform: translate(var(--final-x), var(--final-y)) scale(1) rotate(720deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--final-x), var(--final-y)) scale(0) rotate(900deg);
    opacity: 0;
  }
}
    @keyframes lanternRise {
      0% {
        transform: translateY(80%) rotate(0deg) translateX(0) scale(0.8);
        opacity: 0;
      }
      5% {
        opacity: 0.7;
      }
      10% {
        opacity: 1;
      }
      20% {
        transform: translateY(70%) rotate(1deg) translateX(2px) scale(0.85);
        opacity: 1;
      }
      30% {
        transform: translateY(60%) rotate(-1deg) translateX(-2px) scale(0.9);
        opacity: 1;
      }
      40% {
        transform: translateY(50%) rotate(1.5deg) translateX(3px) scale(0.95);
        opacity: 1;
      }
      50% {
        transform: translateY(40%) rotate(-0.5deg) translateX(-1px) scale(1);
        opacity: 1;
      }
      60% {
        transform: translateY(30%) rotate(1deg) translateX(2px) scale(1.05);
        opacity: 1;
      }
      70% {
        transform: translateY(20%) rotate(-1deg) translateX(-2px) scale(1.1);
        opacity: 1;
      }
      80% {
        transform: translateY(10%) rotate(0.5deg) translateX(1px) scale(1.15);
        opacity: 0.8;
      }
      90% {
        transform: translateY(0%) rotate(-0.5deg) translateX(-1px) scale(1.2);
        opacity: 0.4;
      }
      100% {
        transform: translateY(-10%) rotate(0deg) translateX(0) scale(1.25);
        opacity: 0;
      }
    }
    @keyframes lotusFloat {
      0% {
        transform: translateY(0) rotate(0deg) translateX(0);
      }
      25% {
        transform: translateY(-2px) rotate(1deg) translateX(6px);
      }
      50% {
        transform: translateY(0) rotate(0deg) translateX(0);
      }
      75% {
        transform: translateY(2px) rotate(-1deg) translateX(-6px);
      }
      100% {
        transform: translateY(0) rotate(0deg) translateX(0);
      }
    }
    @keyframes candleFlicker {
      0%, 100% {
        transform: scale(0.95);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.05);
        opacity: 1;
      }
    }
    @keyframes amuletShine {
      0%, 100% {
        transform: scale(1);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.1);
        opacity: 1;
        filter: brightness(1.2);
      }
    }
    @keyframes starFall {
      0% {
        transform: translateY(-100px) rotate(0deg) translateX(0);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      50% {
        transform: translateY(150px) rotate(180deg) translateX(calc(var(--sway) * 0.5px));
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(600px) rotate(360deg) translateX(calc(var(--sway) * 1px));
        opacity: 0;
      }
    }
    @keyframes twinkle {
      0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.2);
        opacity: 1;
      }
    }
    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    /* 樱花飘落动画（参考专业实现） */
    @keyframes cherryBlossomFall {
      0% {
        transform: translateY(calc(var(--start-y, -50px))) rotate(0deg) translateX(0) scale(0.8);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      20% {
        transform: translateY(calc(var(--start-y, -50px) + 100px)) rotate(45deg) translateX(calc(var(--sway) * 0.5px)) scale(1);
        opacity: 1;
      }
      30% {
        transform: translateY(calc(var(--start-y, -50px) + 150px)) rotate(90deg) translateX(calc(var(--sway) * 0.8px)) scale(1);
        opacity: 1;
      }
      40% {
        transform: translateY(calc(var(--start-y, -50px) + 200px)) rotate(135deg) translateX(calc(var(--sway) * 1px)) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(calc(var(--start-y, -50px) + 250px)) rotate(180deg) translateX(calc(var(--sway) * 0.8px)) scale(1);
        opacity: 1;
      }
      60% {
        transform: translateY(calc(var(--start-y, -50px) + 300px)) rotate(225deg) translateX(calc(var(--sway) * 0.5px)) scale(1);
        opacity: 1;
      }
      70% {
        transform: translateY(calc(var(--start-y, -50px) + 350px)) rotate(270deg) translateX(calc(var(--sway) * 0px)) scale(1);
        opacity: 1;
      }
      80% {
        transform: translateY(calc(var(--start-y, -50px) + 400px)) rotate(315deg) translateX(calc(var(--sway) * -0.5px)) scale(1);
        opacity: 1;
      }
      90% {
        transform: translateY(calc(var(--start-y, -50px) + 450px)) rotate(340deg) translateX(calc(var(--sway) * -0.8px)) scale(0.95);
        opacity: 1;
      }
      95% {
        opacity: 1;
      }
      100% {
        transform: translateY(calc(var(--start-y, -50px) + 500px)) rotate(360deg) translateX(calc(var(--sway) * -1px)) scale(0.9);
        opacity: 0;
      }
    }
    
    /* 樱花样式 */
    .cherry-petal {
      position: absolute;
      font-size: 1.2rem;
      animation: cherryBlossomFall linear 10s infinite;
      pointer-events: none;
      z-index: 10;
      text-shadow: 0 2px 4px rgba(255, 182, 193, 0.3);
      --start-y: -100px; /* 默认初始位置，避免堆积 */
    }