/* 国庆：气球、中国结、金轴绸卷、卷底金穗 */

.nd-hang {
    position: fixed;
    top: 12px;
    z-index: 9990;
    width: 140px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.nd-hang-left { left: max(8px, 1vw); }
.nd-hang-right { right: max(8px, 1vw); }

.nd-sway {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 8px;
    animation: ndSway 6.2s ease-in-out infinite;
}

.nd-hang-right .nd-sway { animation-delay: -2.4s; }

.nd-balloon {
    display: block;
    width: 112px;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 12px 14px rgba(120, 10, 16, 0.22));
}

.nd-string {
    display: block;
    width: 1.5px;
    height: 6px;
    margin-top: -4px;
    background: linear-gradient(#e7c56a, #b8893a);
}

.nd-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: ndDrop 6.2s ease-in-out infinite;
}

.nd-hang-right .nd-drop { animation-delay: -3.1s; }

.nd-knot {
    width: 58px;
    height: 56px;
    margin-top: -2px;
    overflow: visible;
    filter: drop-shadow(0 3px 2px rgba(90, 10, 12, 0.18));
}

.nd-silkroll {
    position: relative;
    width: 108px;
    margin-top: -2px;
    background: none;
    border: 0;
    overflow: visible;
    filter: drop-shadow(0 8px 8px rgba(90, 16, 16, 0.16));
}

.nd-scroll-svg {
    display: block;
    width: 108px;
    height: auto;
    overflow: visible;
}

.nd-silk-char {
    fill: #fff4c8;
    stroke: #6b3010;
    paint-order: stroke fill;
    font-family: "STXingkai", "华文行楷", "KaiTi", "STKaiti", "楷体", serif;
    font-weight: 700;
}

/* ---------------- ★ 3D 翻滚飘带 (极慢缓飘版) ★ ---------------- */
.nd-confetti {
    position: fixed; z-index: 9995; pointer-events: none; top: -30px;
    width: 12px; height: 32px; border-radius: 2px;
    will-change: transform, opacity;
}

.nd-firework-trail {
    position: fixed; width: 4px; height: 4px; border-radius: 50%; background: #FFF;
    box-shadow: 0 0 15px 4px #FFD700, 0 0 25px 8px #FF0000;
    pointer-events: none; z-index: 9999;
}
.nd-ripple {
    position: fixed; border-radius: 50%; border: 3px solid #FFD700;
    z-index: 9999; pointer-events: none; transform: translate(-50%, -50%) scale(0);
    animation: ndRippleAnim 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), inset 0 0 20px rgba(255, 215, 0, 0.5);
}

@keyframes ndRippleAnim { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
@keyframes ndSway {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}
@keyframes ndDrop {
    0%, 100% { transform: rotate(0.8deg); }
    50% { transform: rotate(-0.8deg); }
}

@media (max-width: 768px) {
    .nd-hang { top: 6px; width: 86px; }
    .nd-hang-left { left: 0; }
    .nd-hang-right { right: 0; }
    .nd-balloon { width: 72px; }
    .nd-knot { width: 40px; height: 38px; }
    .nd-silkroll, .nd-scroll-svg { width: 70px; }
}

@media (max-height: 760px) {
    .nd-hang { transform: scale(0.72); transform-origin: top center; }
}