/* ==========================================================================
   nav-festival.css  节日主题自动换装（配合 nav-festival.js）
   - .nav-fw             飘落装饰粒子（emoji，JS 按节日随机生成）
   - .nav-festival-badge 右上角节日徽章（含访客关闭按钮）
   - 尊重 prefers-reduced-motion：禁用粒子动画
   ========================================================================== */

.nav-fw {
    position: fixed;
    top: -40px;
    z-index: 9998;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    animation-name: navfw-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes navfw-fall {
    0%   { transform: translateY(0) rotate(0deg); }
    25%  { transform: translateY(28vh) translateX(18px) rotate(90deg); }
    50%  { transform: translateY(55vh) translateX(-14px) rotate(180deg); }
    75%  { transform: translateY(82vh) translateX(16px) rotate(270deg); }
    100% { transform: translateY(112vh) translateX(-10px) rotate(360deg); }
}

/* ---------- 右上角节日徽章 ---------- */

.nav-festival-badge {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 20px;
    background: var(--nav-card, rgba(255, 255, 255, .95));
    border: 1px solid var(--nav-border, #f0f0f0);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    font-size: 13px;
    color: var(--nav-card-text, #333);
    animation: navfb-pop .45s ease;
    max-width: calc(100vw - 28px);
}

@keyframes navfb-pop {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.nav-festival-badge .fb-icon { font-size: 16px; }
.nav-festival-badge .fb-text { font-weight: 600; white-space: nowrap; }

.nav-festival-badge .fb-close {
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--nav-muted, #999);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    font-family: inherit;
    transition: color .2s;
}
.nav-festival-badge .fb-close:hover { color: #e74c3c; }

/* ---------- 触屏 / 动效偏好 ---------- */

@media (max-width: 768px) {
    .nav-fw { font-size: 12px !important; }
    .nav-festival-badge { top: 8px; right: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-fw { display: none; }
    .nav-festival-badge { animation: none; }
}