/*
 * Glance — header theme toggle.
 *
 * Kept separate from the original footer stylesheet: the header uses a single
 * sun/moon button, while the footer uses the original segmented theme switch.
 */

.header-theme-toggle {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 16px -12px color-mix(in oklab, var(--ink) 55%, transparent);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), border-color 0.2s ease, background-color 0.2s ease;
}

.header-theme-toggle:hover,
.header-theme-toggle:focus-visible {
    border-color: var(--accent);
}

.header-theme-toggle:active {
    transform: scale(0.92);
}

.header-theme-icon {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    transition: opacity 0.25s ease, transform 0.5s var(--ease-out);
}

.header-theme-icon .gi {
    width: 100%;
    height: 100%;
}

.header-theme-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.header-theme-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.55);
}

.header-theme-toggle[aria-pressed="true"] .header-theme-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.55);
}

.header-theme-toggle[aria-pressed="true"] .header-theme-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .header-theme-toggle,
    .header-theme-icon {
        transition: none;
    }
}

/* The header is intentionally part of the root theme snapshot: the circular
   reveal then starts at the header toggle on phones and paints the header
   first, instead of switching the header separately while the page expands. */