/* ============================================================
   holidays.css - 节日主题层视觉
   原则：同一个房间，不同的日子 —— 装饰 / 光照 / 窗外 / 狗宝配饰
   全部低饱和手绘 SVG，动画只用 transform / opacity
   ============================================================ */

/* ---------- 装饰层与淡入淡出 ---------- */
.decor-layer {
    position: absolute; inset: 0;
    opacity: 1; transition: opacity 1.1s ease;
}
.decor-layer.entering { opacity: 0; }
.decor-layer.leaving { opacity: 0; }

.hd {
    position: absolute;
    width: 2em;
    transform: rotate(var(--tilt, 0deg));
    filter: drop-shadow(0 2px 2px rgba(90, 55, 35, 0.18));
    pointer-events: none;
}
.hd svg { width: 100%; height: auto; display: block; overflow: visible; }
.hd.hclick { pointer-events: auto; cursor: pointer; transition: transform 0.25s ease; }
.hd.hclick:hover { transform: rotate(var(--tilt, 0deg)) scale(1.08); }
.hd.hclick:active { transform: rotate(var(--tilt, 0deg)) scale(0.94); }

/* ---------- 装饰微动画（克制） ---------- */
.hd.sway { transform-origin: top center; animation: hd-sway 4.6s ease-in-out infinite; }
.hd.sway.slow { animation-duration: 6.8s; }
@keyframes hd-sway {
    0%, 100% { transform: rotate(calc(var(--tilt, 0deg) + -2.6deg)); }
    50% { transform: rotate(calc(var(--tilt, 0deg) + 2.6deg)); }
}
.hd.float { animation: hd-float 4.2s ease-in-out infinite; }
.hd.float.d1 { animation-delay: 1.1s; }
.hd.float.d2 { animation-delay: 2.3s; }
@keyframes hd-float {
    0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
    50% { transform: translateY(-0.42em) rotate(var(--tilt, 0deg)); }
}
.hd.breathe { animation: hd-breathe 5s ease-in-out infinite; transform-origin: bottom center; }
@keyframes hd-breathe {
    0%, 100% { transform: rotate(var(--tilt, 0deg)) scale(1); }
    50% { transform: rotate(var(--tilt, 0deg)) scale(1.025); }
}
.hd.glow-soft { animation: hd-glowsoft 3.4s ease-in-out infinite; }
@keyframes hd-glowsoft {
    0%, 100% { filter: drop-shadow(0 2px 2px rgba(90,55,35,.18)); }
    50% { filter: drop-shadow(0 2px 2px rgba(90,55,35,.18)) drop-shadow(0 0 0.5em rgba(255, 220, 150, 0.55)); }
}
.hd.glow-tree { animation: hd-treetop 5s ease-in-out infinite; }
@keyframes hd-treetop {
    0%, 100% { filter: drop-shadow(0 3px 3px rgba(90,55,35,.2)); }
    50% { filter: drop-shadow(0 3px 3px rgba(90,55,35,.2)) drop-shadow(0 0 0.7em rgba(255, 214, 120, 0.4)); }
}
.hd.wave { transform-origin: left center; animation: hd-wave 3.8s ease-in-out infinite; }
@keyframes hd-wave {
    0%, 100% { transform: skewY(0deg) rotate(var(--tilt, 0deg)); }
    50% { transform: skewY(-2.5deg) rotate(var(--tilt, 0deg)); }
}
.hd.wobble-occasional { animation: hd-wobble-occ 47s ease-in-out infinite; }
@keyframes hd-wobble-occ {
    0%, 92%, 100% { transform: rotate(var(--tilt, 0deg)); }
    93.5% { transform: rotate(calc(var(--tilt, 0deg) + 4deg)); }
    95% { transform: rotate(calc(var(--tilt, 0deg) + -3deg)); }
    96.5% { transform: rotate(calc(var(--tilt, 0deg) + 1.5deg)); }
}
.hd.pop { animation: hd-pop 0.55s cubic-bezier(.34,1.6,.64,1); }
@keyframes hd-pop {
    0% { transform: rotate(var(--tilt,0deg)) scale(1); }
    35% { transform: rotate(calc(var(--tilt,0deg) + 6deg)) scale(1.14); }
    70% { transform: rotate(calc(var(--tilt,0deg) - 3deg)) scale(0.98); }
    100% { transform: rotate(var(--tilt,0deg)) scale(1); }
}
.hd.opened { opacity: 0.72; filter: saturate(0.6) drop-shadow(0 2px 2px rgba(90,55,35,.18)); }

/* SVG 内部动画：烛焰 / 茶汽 / 灯串 */
.hd .hd-flame { transform-origin: 50px 26px; animation: hd-flame 0.7s ease-in-out infinite alternate; }
@keyframes hd-flame {
    from { transform: scale(1, 1) translateX(0); opacity: 0.92; }
    to { transform: scale(0.86, 1.1) translateX(1px); opacity: 1; }
}
.hd .hd-steam { animation: hd-steam 3.2s ease-in-out infinite; }
@keyframes hd-steam {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(-3px); }
}
.hd .hd-bulbs circle { animation: bulb-pulse 2.6s ease-in-out infinite; }
.hd .hd-bulbs circle:nth-child(2n) { animation-delay: 0.55s; }
.hd .hd-bulbs circle:nth-child(3n) { animation-delay: 1.15s; }
@keyframes bulb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.42; }
}
.hd.twinkle-line .hd-bulbs circle { animation-duration: 3.4s; }

/* ---------- 节日光照层（与时间/天气叠乘，不覆盖；位于关灯遮罩之上、狗宝之下） ---------- */
.holiday-light {
    position: absolute; inset: 0; z-index: 26;
    pointer-events: none;
    opacity: 0; transition: opacity 1.4s ease;
}
.holiday-light.on { opacity: 1; }

/* 春节：两盏灯笼晕出的暖光 + 整体微暖 */
.hl-lantern {
    background:
        radial-gradient(ellipse 22% 30% at 22% 12%, rgba(255, 176, 96, 0.16), transparent 70%),
        radial-gradient(ellipse 20% 26% at 57% 10%, rgba(255, 176, 96, 0.13), transparent 70%),
        linear-gradient(180deg, rgba(255, 190, 120, 0.05), rgba(255, 170, 110, 0.07));
}
/* 情人节：玫瑰色空气 */
.hl-rose {
    background:
        radial-gradient(ellipse 60% 70% at 76% 46%, rgba(224, 140, 150, 0.09), transparent 70%),
        linear-gradient(180deg, rgba(240, 180, 190, 0.05), rgba(210, 140, 150, 0.06));
}
/* 七夕：清冷的星光感 */
.hl-starry {
    background: linear-gradient(200deg, rgba(150, 150, 220, 0.07) 0%, transparent 55%);
}
/* 中秋：月光从窗户落到地面 */
.hl-moon {
    background:
        linear-gradient(202deg, rgba(226, 232, 250, 0.16) 0%, rgba(226, 232, 250, 0.05) 26%, transparent 44%),
        radial-gradient(ellipse 34% 10% at 16% 66%, rgba(216, 228, 252, 0.2), transparent 70%);
}
/* 国庆：几乎不可察的暖意 */
.hl-warm-lite {
    background: linear-gradient(180deg, rgba(255, 190, 120, 0.04), rgba(255, 190, 120, 0.05));
}
/* 圣诞：树顶星光 + 壁炉感暖光 */
.hl-tree {
    background:
        radial-gradient(ellipse 26% 34% at 33% 52%, rgba(255, 205, 120, 0.12), transparent 70%),
        radial-gradient(ellipse 20% 24% at 16% 8%, rgba(255, 214, 140, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(120, 150, 120, 0.03), rgba(255, 190, 130, 0.06));
}
/* 生日：蛋糕蜡烛的暖光，轻微摇曳 */
.hl-candle {
    background:
        radial-gradient(ellipse 24% 26% at 76% 48%, rgba(255, 196, 110, 0.16), transparent 70%),
        radial-gradient(ellipse 40% 34% at 50% 60%, rgba(255, 208, 150, 0.06), transparent 75%);
}
.hl-candle.on { animation: candle-breathe 3.6s ease-in-out infinite; }
@keyframes candle-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

/* ---------- 狗宝节日配饰（只在房间里出现） ---------- */
#room-stage.theme-spring .dog-scarf,
#room-stage.theme-valentine .dog-flower,
#room-stage.theme-christmas .dog-santa,
#room-stage.theme-birthday .dog-ribbon { display: block; }
/* 圣诞：帽子变圣诞红（与 SVG 线条同风格） */
#room-stage.theme-christmas .dog-hat { fill: #a8463a; stroke: #8c332b; }
#room-stage.theme-christmas .dog-hat-pom { fill: #f7ecd9; stroke: #d9cbb4; }

/* ---------- 窗外节日氛围 ---------- */
/* 远处城市暖灯（夜里才出现） */
.room-window .distant { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; opacity: 0; transition: opacity 2s; z-index: 1; pointer-events: none; }
.room-window.h-distant .distant {
    opacity: 1;
    background:
        radial-gradient(circle at 8% 92%, rgba(255, 214, 140, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 86%, rgba(255, 214, 140, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 30% 94%, rgba(255, 226, 170, 0.8) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 88%, rgba(255, 214, 140, 0.6) 0 1px, transparent 2px),
        radial-gradient(circle at 58% 93%, rgba(255, 226, 170, 0.85) 0 1px, transparent 2px),
        radial-gradient(circle at 71% 87%, rgba(255, 214, 140, 0.65) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 92%, rgba(255, 226, 170, 0.8) 0 1px, transparent 2px),
        radial-gradient(circle at 94% 88%, rgba(255, 214, 140, 0.6) 0 1px, transparent 2px),
        linear-gradient(180deg, transparent 40%, rgba(40, 34, 60, 0.5) 100%);
}
.room-window.h-distant.sky-morning .distant, .room-window.h-distant.sky-noon .distant,
.room-window.h-distant.sky-afternoon .distant, .room-window.h-distant.sky-dawn .distant { opacity: 0.15; }

/* 稀疏光点（情人节/圣诞/生日夜空） */
.room-window.h-sparkle .flash::before {
    content: ''; position: absolute; left: 20%; top: 30%; width: 3px; height: 3px; border-radius: 50%;
    background: #ffe9b8; box-shadow: 45px 18px 0 #ffd9a0, 90px -6px 0 #ffe9b8;
    animation: sparkle-blink 4.2s ease-in-out infinite;
}
@keyframes sparkle-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.9; }
}

/* 路灯（圣诞窗外） */
.room-window.h-streetlamp .birds::before {
    content: ''; position: absolute; right: 14%; bottom: 0;
    width: 2px; height: 34%;
    background: linear-gradient(180deg, #556, #334);
    box-shadow: 0 -0.3em 0.6em 0.15em rgba(255, 220, 150, 0.5);
}
.room-window.h-streetlamp .birds::after {
    content: ''; position: absolute; right: 10.5%; bottom: 32%;
    width: 0.5em; height: 0.4em; border-radius: 50% 50% 20% 20%;
    background: #ffdf9e; box-shadow: 0 0 0.9em 0.3em rgba(255, 223, 158, 0.55);
}

/* 模拟薄雪（节日自带，真实下雪时由天气系统接管增强） */
.fakesnow { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.fakesnow i {
    position: absolute; top: -6%;
    width: 0.28em; height: 0.28em; border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: world-snowfall linear infinite;
}

/* 烟花：一朵 1.6 秒，安静地开 */
.fw-slot { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.firework {
    position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
    background: var(--fwc, #e8c377);
    box-shadow:
        12px 0 0 -0.5px var(--fwc), 8.5px 8.5px 0 -0.5px var(--fwc), 0 12px 0 -0.5px var(--fwc),
        -8.5px 8.5px 0 -0.5px var(--fwc), -12px 0 0 -0.5px var(--fwc), -8.5px -8.5px 0 -0.5px var(--fwc),
        0 -12px 0 -0.5px var(--fwc), 8.5px -8.5px 0 -0.5px var(--fwc);
    animation: fw-bloom 1.55s ease-out forwards;
}
@keyframes fw-bloom {
    0% { transform: scale(0.15); opacity: 0; }
    12% { opacity: 1; }
    55% { transform: scale(1.15); opacity: 0.9; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* 中秋：掠过月亮的小鸟 */
.moon-cross {
    position: absolute; left: -12%; top: 16%; font-size: 0.5em; z-index: 4;
    filter: brightness(0.4);
    animation: moon-fly 6.5s linear forwards;
}
@keyframes moon-fly {
    from { transform: translate(0, 0.6em); }
    to { transform: translate(11em, -0.4em); }
}

/* 七夕：牵牛织女星 + 鹊桥 */
.wish-stars { position: absolute; inset: 0; z-index: 5; }
.wishstar {
    position: absolute; width: 0.5em; height: 0.5em; border-radius: 50%;
    background: #fff6d8; box-shadow: 0 0 0.7em 0.2em rgba(255, 246, 216, 0.65);
    cursor: pointer; padding: 6px; background-clip: content-box;
    animation: sparkle-blink 3.2s ease-in-out infinite;
}
.wishstar.ws1 { left: 18%; top: 22%; }
.wishstar.ws2 { left: 64%; top: 12%; animation-delay: 1.4s; }
.ws-line {
    position: absolute; left: 24%; top: 18%;
    width: 40%; height: 1px;
    background: linear-gradient(90deg, rgba(255,246,216,0), rgba(255,246,216,0.55), rgba(255,246,216,0));
    transform: rotate(-12deg);
    opacity: 0; transition: opacity 1.6s ease;
}
.wish-stars.done .ws-line { opacity: 1; }
.wish-stars.done .wishstar { animation: none; opacity: 1; }
/* 鹊桥：一串小小的鸟影弧线 */
.magpie-bridge { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.magpie-bridge i {
    position: absolute; width: 0.42em; height: 0.2em;
    border-top: 1.5px solid rgba(255, 250, 230, 0.75);
    border-radius: 50%;
}
.magpie-bridge i:nth-child(1) { left: 20%; top: 34%; }
.magpie-bridge i:nth-child(2) { left: 29%; top: 29%; }
.magpie-bridge i:nth-child(3) { left: 38%; top: 26%; }
.magpie-bridge i:nth-child(4) { left: 47%; top: 25%; }
.magpie-bridge i:nth-child(5) { left: 56%; top: 26%; }
.magpie-bridge i:nth-child(6) { left: 65%; top: 29%; }
.magpie-bridge i:nth-child(7) { left: 74%; top: 33%; }
/* 银河只在夜里显形 */
.room-window.milkyway .milky { opacity: 0; }
.room-window.milkyway.sky-night .milky, .room-window.milkyway.sky-deepNight .milky, .room-window.milkyway.sky-dusk .milky { opacity: 1; }

/* 中秋大月亮被点到的反应 */
.sun-moon.touched { animation: moon-touched 1.4s ease; }
@keyframes moon-touched {
    0%, 100% { box-shadow: 0 0 1em 0.15em rgba(253, 246, 221, 0.45); }
    40% { box-shadow: 0 0 2.2em 0.8em rgba(255, 250, 230, 0.85); }
}

/* ---------- 减少动画模式 ---------- */
@media (prefers-reduced-motion: reduce) {
    .hd.sway, .hd.float, .hd.breathe, .hd.wave, .hd.glow-soft, .hd.glow-tree,
    .hd.wobble-occasional, .holiday-light, .hd .hd-flame, .hd .hd-steam, .hd .hd-bulbs circle,
    .firework, .fakesnow i, .wishstar { animation: none !important; }
}

/* ---------- 小屏修正：装饰随舞台缩放，禁止溢出 ---------- */
@media (max-width: 420px) {
    .hd { filter: drop-shadow(0 1px 1px rgba(90, 55, 35, 0.16)); }
}