/* 春节氛围（墨梅吊灯 · 落梅）—— 宿主在填槽的页面自动加载这份 css */

#cny-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147482000;
    overflow: hidden;
}

/* 整套装饰的基准宽度：一枚灯笼 = 枝宽的 0.235，改一个数两边一起变 */
#cny-root {
    --cny-scale: 1;
    /* 枝宽跟着两侧留白走：留白越宽，枝能伸得越长 */
    --cny-w: clamp(260px, calc((100vw - 1500px) / 2 + 150px), 540px);
}

.cny-scene {
    position: absolute;
    top: calc(var(--cny-w) * var(--cny-scale) * 0.11);
    width: calc(var(--cny-w) * var(--cny-scale));
    height: auto;
}

.cny-scene.is-l { left: 0; }
.cny-scene.is-r { right: 0; }

.cny-branch {
    display: block;
    width: 100%;
    aspect-ratio: 733 / 487;
    background: url(branch.png) no-repeat 0 0 / 100% 100%;
    /* 墨色压在浅底上，降一点透明度会更像画在纸上，而不是贴上去的 */
    opacity: .94;
    /* 越往画面里越淡，枝梢像化在纸上，不压住正文 */
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 33%, rgba(0, 0, 0, .44) 52%, rgba(0, 0, 0, .1) 68%, rgba(0, 0, 0, 0) 82%);
    mask-image: linear-gradient(to left, #000 0, #000 33%, rgba(0, 0, 0, .44) 52%, rgba(0, 0, 0, .1) 68%, rgba(0, 0, 0, 0) 82%);
}

.cny-scene.is-l .cny-branch { transform: scaleX(-1); }

.cny-lantern {
    position: absolute;
    top: 55%;
    width: calc(var(--cny-w) * var(--cny-scale) * 0.235);
    transform-origin: 50% 1.6%;
    animation: cny-swing 7.6s ease-in-out infinite;
}

.cny-scene.is-l .cny-lantern { left: 15.2%; }
.cny-scene.is-r .cny-lantern { right: 15.2%; }

.cny-scene.is-r .cny-lantern { animation-duration: 9.4s; animation-delay: -3.1s; }

.cny-lantern svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(120, 40, 32, .26)) drop-shadow(0 0 26px rgba(255, 150, 120, .22));
}

.cny-halo { animation: cny-breathe 7s ease-in-out infinite; }

.cny-tassel {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: cny-tassel 5.2s ease-in-out infinite;
}

@keyframes cny-swing {
    0%, 100% { transform: rotate(-2.6deg); }
    50% { transform: rotate(2.6deg); }
}

@keyframes cny-breathe {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes cny-tassel {
    0%, 100% { transform: rotate(-3.4deg); }
    50% { transform: rotate(3.4deg); }
}

.cny-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 屏幕窄到两侧没有留白时，整组收起，只留飘落的梅花 */
@media (max-width: 1649px) {
    .cny-scene { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cny-scene,
    .cny-halo,
    .cny-tassel { animation: none; }
}

@media print {
    #cny-root { display: none; }
}