/* ── Theme toggle icons ─────────────────────────────────────────── */

.theme-icon-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-icon-wrap--lg {
    width: 26px;
    height: 26px;
}

.theme-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition:
        opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.42s cubic-bezier(0.34, 1.35, 0.64, 1);
    transform-origin: center;
    overflow: visible;
}

.theme-icon--sun .sun-core {
    fill: #f5b942;
}

.theme-icon--sun .sun-rays {
    stroke: #f5b942;
}

/* Moon — solid crescent (Lucide-style), always explicit fill */
.theme-icon--moon .moon-body {
    fill: #111111 !important;
    stroke: none;
}

html[data-theme='dark'] .theme-icon--sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 6px rgba(245, 185, 66, 0.55));
}

html[data-theme='dark'] .theme-icon--moon {
    opacity: 0;
    transform: rotate(-70deg) scale(0.45);
    filter: none;
    pointer-events: none;
}

html[data-theme='light'] .theme-icon--sun {
    opacity: 0;
    transform: rotate(70deg) scale(0.45);
    filter: none;
    pointer-events: none;
}

html[data-theme='light'] .theme-icon--moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

html[data-theme='light'] .theme-icon--moon .moon-body {
    fill: #111111;
}

html[data-theme='light'] .theme-toggle-btn .theme-icon-wrap {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

.bottom-bar-item .theme-icon-wrap,
.btn-theme .theme-icon-wrap,
.btn-icon .theme-icon-wrap {
    width: 26px;
    height: 26px;
}

html[data-theme='light'] .bottom-bar-item.theme-toggle-btn,
html[data-theme='light'] .btn-theme.theme-toggle-btn,
html[data-theme='light'] .btn-icon.theme-toggle-btn {
    color: #111111;
}

.theme-toggle-btn.is-animating .theme-icon-wrap {
    animation: themeIconPulse 0.45s cubic-bezier(0.34, 1.35, 0.64, 1);
}

@keyframes themeIconPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.18) rotate(-8deg); }
    100% { transform: scale(1); }
}

/* ── Theme switch overlay ───────────────────────────────────────── */

.theme-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

.theme-transition__burst {
    position: absolute;
    left: var(--theme-x, 50%);
    top: var(--theme-y, 50%);
    width: 260vmax;
    height: 260vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform, opacity;
}

.theme-transition[data-target-theme='light'] .theme-transition__burst {
    background: radial-gradient(circle at 35% 35%, #fffef8 0%, #f4f4ef 42%, #e8e8e0 100%);
}

.theme-transition[data-target-theme='dark'] .theme-transition__burst {
    background: radial-gradient(circle at 35% 35%, #2a2a30 0%, #121214 45%, #080808 100%);
}

.theme-transition.is-expanding .theme-transition__burst {
    animation: themeBurstExpand 520ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.theme-transition.is-fading .theme-transition__burst {
    animation: themeBurstFade 380ms ease forwards;
}

@keyframes themeBurstExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    72% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes themeBurstFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-icon {
        transition-duration: 0.12s;
    }

    .theme-transition.is-expanding .theme-transition__burst,
    .theme-transition.is-fading .theme-transition__burst {
        animation-duration: 0.12s;
    }
}