/* ==================== 性能优化样式 - GPU 加速版 ==================== */

/*
 * 优化策略：强制 GPU 加速所有动画 + 防止 CLS
 * 
 * 降级策略：
 * - Level 0 (perf-full): 完整动画效果
 * - Level 1 (perf-medium): 减少粒子数量，降低动画复杂度
 * - Level 2 (perf-lite): 最小化动画，仅保留核心效果
 */

/* ========== Canvas 层样式 ========== */

.effects-canvas,
.photo-wall-canvas,
.lottery-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.photo-wall-canvas {
    z-index: 2;
    pointer-events: auto;
}

.lottery-canvas {
    z-index: 100;
    pointer-events: none;
    display: none;  /* 默认隐藏，抽奖时显示 */
}

.lottery-canvas.active {
    display: block;
}

/* Worker 模式：隐藏 DOM 特效元素（保留照片墙用于抽奖高亮） */
body.worker-mode .effects-layer,
body.worker-mode .stars,
body.worker-mode .meteors,
body.worker-mode .particles {
    display: none !important;
}

/* Worker 模式抽奖时：DOM 照片墙提升到 Canvas 之上，确保高亮可见 */
body.worker-mode.lottery-active .photo-wall {
    z-index: 3;
}
body.worker-mode.lottery-active .photo-wall-canvas {
    pointer-events: none;
}

/* 降级模式：隐藏 Canvas */
body:not(.worker-mode) .effects-canvas,
body:not(.worker-mode) .photo-wall-canvas {
    display: none !important;
}

/* ========== 全局性能优化 ========== */

/* 强制 GPU 合成层隔离 */
body {
    isolation: isolate;
}

/* ========== 防止 CLS (布局偏移) ========== */

/* 所有动画元素必须绝对定位，不影响文档流 */
.star,
.meteor,
.particle,
.spark-particle,
.border-spark,
.firework-burst,
.sakura,
.ingot,
.ribbon,
.red-packet,
.gold-coin,
.fu-character,
.lantern-item,
.falling-coin,
.falling-packet,
.extra-gold-particle,
.glow-orb,
.light-spot,
.cloud,
.firecracker,
.firecracker-item,
.firework-bloom,
.firework-trail,
.confetti-piece,
.winner-firework-center,
.winner-firework-spark,
.firework-explosion-big,
.firework-center-big,
.firework-spark-big,
.neon-border-effect,
.wave-light-effect,
.shimmer-sweep-effect,
.shimmer-overlay,
.neon-border,
.wave-light,
.chinese-knot,
.chinese-knot-deco,
.spring-couplet {
    position: absolute !important;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    contain: layout style paint;
}

/* 容器层隔离 - 创建独立合成层，防止影响主内容 */
.effects-layer,
.particles,
.stars,
.meteors,
.fireworks-bg,
.border-fireworks,
.sakura-container,
.ingot-container,
.ribbon-container,
.coin-rain-container,
.red-packet-rain,
.lantern-string {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateZ(0);
    isolation: isolate;
    contain: strict;
    z-index: 1;
}

/* 照片墙 GPU 加速 */
.photo-wall {
    transform: translateZ(0);
    contain: layout style;
}

.photo-wall .photo-item {
    position: absolute;
    transform: translateZ(0) rotate(var(--rotation, 0deg));
    will-change: transform, filter;
    pointer-events: auto;
}

/* ========== 完整模式 (Level 0) - 默认 ========== */
html.perf-full .effects-layer,
html.perf-full .particles,
html.perf-full .sakura-container,
html.perf-full .ingot-container,
html.perf-full .ribbon-container,
html.perf-full .coin-rain-container,
html.perf-full .red-packet-rain {
    opacity: 1;
}

/* 完整模式也要优化：减少同时运行的动画 */
html.perf-full .star:nth-child(3n),
html.perf-full .particle:nth-child(3n) {
    animation-play-state: paused;
}

/* ========== 中等模式 (Level 1) - 减少粒子，保持红色背景 ========== */
html.perf-medium .effects-layer {
    opacity: 0.7;
}

/* 隐藏部分粒子效果 */
html.perf-medium .sakura-container,
html.perf-medium .ingot-container,
html.perf-medium .ribbon-container {
    display: none !important;
}

/* 减少星星和流星数量（隐藏偶数项） */
html.perf-medium .star:nth-child(2n),
html.perf-medium .meteor:nth-child(2n),
html.perf-medium .particle:nth-child(2n),
html.perf-medium .falling-coin:nth-child(2n),
html.perf-medium .falling-packet:nth-child(2n) {
    display: none !important;
}

/* 降低动画复杂度 */
html.perf-medium .firework-burst,
html.perf-medium .spark-particle,
html.perf-medium .border-spark {
    animation-duration: 2s !important;
}

/* 减少光晕效果但保持红色背景 */
html.perf-medium .glow-orb,
html.perf-medium .light-spot {
    opacity: 0.3;
}

/* 降低金色光晕强度，保持红色主调 */
html.perf-medium body::after {
    opacity: 0.4 !important;
}

html.perf-medium .top-glow,
html.perf-medium .bottom-glow {
    opacity: 0.5;
}

/* ========== 轻量模式 (Level 2) - 最小化 ========== */
html.perf-lite .effects-layer,
html.perf-lite .particles,
html.perf-lite .sakura-container,
html.perf-lite .ingot-container,
html.perf-lite .ribbon-container,
html.perf-lite .coin-rain-container,
html.perf-lite .red-packet-rain {
    display: none !important;
}

/* 隐藏所有装饰性动画 */
html.perf-lite .star,
html.perf-lite .meteor,
html.perf-lite .firework-burst,
html.perf-lite .spark-particle,
html.perf-lite .border-spark,
html.perf-lite .glow-orb,
html.perf-lite .light-spot,
html.perf-lite .cloud {
    display: none !important;
}

/* 保留核心动画但简化 */
html.perf-lite .lantern {
    animation: none !important;
}

html.perf-lite .photo-item {
    transition: none !important;
}

/* ========== 页面状态控制 ========== */

/* 页面不可见时暂停动画节省资源 */
html.page-hidden * {
    animation-play-state: paused !important;
}

/* 抽奖进行时暂停所有背景装饰动画，释放 GPU 合成资源给抽奖核心动画 */
html.lottery-running .effects-layer,
html.lottery-running .particles,
html.lottery-running .sakura-container,
html.lottery-running .ingot-container,
html.lottery-running .ribbon-container,
html.lottery-running .coin-rain-container,
html.lottery-running .red-packet-rain,
html.lottery-running #fireworks-bg,
html.lottery-running #border-fireworks,
html.lottery-running .shimmer-overlay,
html.lottery-running .neon-border,
html.lottery-running .wave-light,
html.lottery-running .firework-explosion-big {
    animation-play-state: paused !important;
    opacity: 0.3;
    transition: opacity 0.3s;
}

html.lottery-running .star,
html.lottery-running .meteor,
html.lottery-running .particle,
html.lottery-running .spark-particle,
html.lottery-running .border-spark,
html.lottery-running .firework-burst,
html.lottery-running .falling-coin,
html.lottery-running .falling-packet,
html.lottery-running .extra-gold-particle,
html.lottery-running .glow-orb,
html.lottery-running .light-spot,
html.lottery-running .cloud,
html.lottery-running .confetti-piece {
    animation-play-state: paused !important;
}

/* 抽奖时稍微降低背景特效 */
html.lottery-active .effects-layer {
    opacity: 0.7;
}

/* ========== 系统偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}