/*========Theme switch curtain========*/
/*
 * Full-screen wipe shown by triggerThemeTransition() in assets/js/api/theme.js, on both main.html
 * and auth.html. The overlay's base layer shows the CURRENT theme; .theme-curtain (the NEW theme)
 * widens from the left when going to dark and from the right when going to light. Both layers hold an identical .theme-curtain-content pinned to the
 * viewport (width: 100vw), so the logo and text stay still and are "wiped" from one look to the
 * other.
 *
 * The light background differs per page; pages may set --theme-light-bg (auth.css does).
 */

#theme-transition-overlay {
    --theme-dark-bg: #18181b;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

#theme-transition-overlay.is-visible {
    opacity: 1;
}

#theme-transition-overlay.is-leaving {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* While the curtain covers the page the real theme is swapped underneath. The page's own colour
   transitions (theme.css) are switched off for that moment, so the page is already fully in the
   new theme when the overlay fades out (no blink of the old colours). The overlay keeps its own. */
html.theme-swapping *:not(#theme-transition-overlay):not(#theme-transition-overlay *),
html.theme-swapping *:not(#theme-transition-overlay):not(#theme-transition-overlay *)::before,
html.theme-swapping *:not(#theme-transition-overlay):not(#theme-transition-overlay *)::after {
    transition: none !important;
}

/* Base layer = current theme */
#theme-transition-overlay.from-light {
    background-color: var(--theme-light-bg, #f1f4f6);
}

#theme-transition-overlay.from-dark {
    background-color: var(--theme-dark-bg);
}

/* The curtain = new theme. Its direction comes from a modifier class set by the JS:
   .sweep-ltr (to dark) grows from the left edge, .sweep-rtl (to light) from the right edge. */
#theme-transition-overlay .theme-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#theme-transition-overlay .theme-curtain.sweep-ltr {
    left: 0;
    right: auto;
}

#theme-transition-overlay .theme-curtain.sweep-rtl {
    right: 0;
    left: auto;
}

#theme-transition-overlay.is-sweeping .theme-curtain {
    width: 100%;
}

#theme-transition-overlay.to-dark .theme-curtain {
    background-color: var(--theme-dark-bg);
}

#theme-transition-overlay.to-light .theme-curtain {
    background-color: var(--theme-light-bg, #f1f4f6);
}

/* The shadow sits on the leading edge of the curtain */
#theme-transition-overlay .theme-curtain.sweep-ltr {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
}

#theme-transition-overlay .theme-curtain.sweep-rtl {
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

/* Content: pinned to the viewport in both layers so it never moves while the curtain grows */
#theme-transition-overlay .theme-curtain-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A right-anchored curtain's left edge moves, so its content is pinned to the right edge instead
   (which stays at the viewport's right edge) to keep the logo perfectly still */
#theme-transition-overlay .theme-curtain.sweep-rtl .theme-curtain-content {
    left: auto;
    right: 0;
}

#theme-transition-overlay .theme-curtain-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    animation: theme-curtain-breathe 1.6s ease-in-out infinite alternate;
}

#theme-transition-overlay .theme-curtain-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

#theme-transition-overlay .theme-curtain-content--light .theme-curtain-text {
    color: #3a3d46;
}

#theme-transition-overlay .theme-curtain-content--dark .theme-curtain-text {
    color: #d4d4d8;
}

@keyframes theme-curtain-breathe {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.04);
    }
}
/*========Theme switch curtain========*/