/* ── Anniversary Mode ─────────────────────────────────────────────
   Pink / red / gold theme — active only on body.anniversary-active
   Banner styles apply on countdown days too.
   ──────────────────────────────────────────────────────────────── */

/* ── Countdown / celebration banner ── */
.anniversary-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 1001;
    animation: bannerSlideDown 0.6s ease-out;
}

.anniversary-banner--countdown {
    background: linear-gradient(90deg, #fff0f5 0%, #fff8e7 50%, #fff0f5 100%);
    color: #c2185b;
    border-bottom: 2px solid #ffd700;
}

.anniversary-banner--celebrate {
    background: linear-gradient(90deg, #e91e63 0%, #ff6f00 40%, #ffd700 70%, #e91e63 100%);
    background-size: 200% auto;
    color: #fff;
    border-bottom: none;
    animation: bannerSlideDown 0.6s ease-out, bannerShimmer 4s linear infinite;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
}

.anniversary-banner__emoji {
    font-size: 1.3rem;
    line-height: 1;
}

.anniversary-banner__sparkle {
    animation: sparklePulse 1.2s ease-in-out infinite;
}

@keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes bannerShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes sparklePulse {
    0%, 100% { transform: scale(1) rotate(0deg);   opacity: 1; }
    50%      { transform: scale(1.3) rotate(15deg); opacity: 0.7; }
}

/* ── Floating particles container ── */
#anniversary-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.anniversary-particle {
    position: absolute;
    top: -40px;
    pointer-events: none;
    user-select: none;
    animation: particleFall linear forwards;
    opacity: 0.55;
    will-change: transform, opacity;
}

@keyframes particleFall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 0.6; }
    80%  { opacity: 0.5; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ── Music toggle button ── */
.anniversary-music-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1002;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    background: linear-gradient(135deg, #e91e63, #ff6f00);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(233, 30, 99, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anniversary-music-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(233, 30, 99, 0.55);
}

.anniversary-music-toggle.is-playing {
    animation: musicPulse 1.5s ease-in-out infinite;
}

.anniversary-music-toggle.is-playing i {
    animation: musicBounce 0.6s ease-in-out infinite alternate;
}

@keyframes musicPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(233, 30, 99, 0.4); }
    50%      { box-shadow: 0 4px 28px rgba(255, 215, 0, 0.6); }
}

@keyframes musicBounce {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
}

/* ════════════════════════════════════════════════════════════════
   FULL THEME — only when body.anniversary-active (day 16)
   ════════════════════════════════════════════════════════════════ */
body.anniversary-active {
    background: linear-gradient(180deg, #fff5f8 0%, #fff9f0 100%);
    color: #4a2030;
}

body.anniversary-active .header {
    background: linear-gradient(90deg, #fce4ec 0%, #fff8e1 100%);
    border-bottom-color: #f48fb1;
}

body.anniversary-active .logo-text {
    background: linear-gradient(90deg, #e91e63, #ff6f00, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.anniversary-active .nav-link:hover {
    color: #e91e63;
}

body.anniversary-active .hero {
    background: radial-gradient(circle at center, #fce4ec 0%, #fff8e1 60%, #ffffff 100%);
}

body.anniversary-active .hero-title {
    background: linear-gradient(0deg, #ffd700 -17.91%, #e91e63 30%, #ff6f00 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.anniversary-active .hero-subtitle {
    color: #ad1457;
}

body.anniversary-active .search-input {
    border-color: #f48fb1;
}

body.anniversary-active .search-input:focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
}

body.anniversary-active .search-bar > i,
body.anniversary-active .search-bar .search-submit:hover {
    color: #e91e63;
}

body.anniversary-active .sidebar {
    background: #fff5f8;
    box-shadow: 0 2px 12px rgba(233, 30, 99, 0.1);
    border: 1px solid #fce4ec;
}

body.anniversary-active .sidebar-title i {
    color: #e91e63;
}

body.anniversary-active .sidebar-title .fa-heart {
    color: #ff6f00;
}

body.anniversary-active .category-item.active .category-link {
    background-color: #fce4ec;
    color: #c2185b;
}

body.anniversary-active .category-item .category-link:hover,
body.anniversary-active .category-item .category-link:focus {
    background-color: #fff0f5;
}

body.anniversary-active .favourite-item:hover,
body.anniversary-active .favourite-item:focus {
    background-color: #fff0f5;
}

body.anniversary-active .post-card {
    background: #fff;
    box-shadow: 0 2px 12px rgba(233, 30, 99, 0.08);
    border: 1px solid #fce4ec;
}

body.anniversary-active .post-card:hover {
    box-shadow: 0 8px 32px rgba(233, 30, 99, 0.18),
                0 12px 24px rgba(255, 111, 0, 0.08);
}

body.anniversary-active .post-title {
    color: #880e4f;
}

body.anniversary-active .pagination-number.active {
    background: linear-gradient(135deg, #e91e63, #ff6f00);
    border-color: #e91e63;
    color: #fff;
}

body.anniversary-active .pagination-btn:hover,
body.anniversary-active .pagination-number:hover {
    border-color: #e91e63;
    color: #e91e63;
}

body.anniversary-active .footer {
    background: linear-gradient(90deg, #fce4ec 0%, #fff8e1 100%);
    border-top-color: #f48fb1;
    color: #ad1457;
}

body.anniversary-active .footer p {
    color: #c2185b;
}

body.anniversary-active .mobile-category details {
    border-color: #f48fb1;
    background: #fff5f8;
}

body.anniversary-active .feat-card {
    border-color: #fce4ec;
    background: #fff5f8;
}

@media (max-width: 768px) {
    .anniversary-banner {
        font-size: 0.85rem;
        padding: 0.65rem 1rem;
    }

    .anniversary-music-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}