/*
 * Cross-document View Transitions.
 *
 * The @view-transition rule must be at the top level of the stylesheet — Chrome
 * ignores it when nested inside @media. So the opt-in lives at the root, and
 * the reduced-motion handling is done by killing the animation explicitly for
 * users who request reduced motion.
 *
 * Browsers without the API (older Firefox etc.) silently skip the at-rule and
 * navigate normally. No JS fallback, no polyfill.
 */

@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 250ms;
        animation-timing-function: ease-out;
    }

    /*
     * Isolated fade groups for the site chrome. Each page's nav/footer markup
     * is different, so we give them UNIQUE names — that way the browser never
     * pairs them and never tries to morph one layout into another. Each side
     * just fades in/out independently while the body crossfades.
     */
    nav#nav            { view-transition-name: home-nav; }
    nav.year-timeline  { view-transition-name: now-nav; }
    body > header      { view-transition-name: project-header; }

    footer             { view-transition-name: home-footer; }
    .notebook-footer   { view-transition-name: notebook-footer; }

    ::view-transition-old(home-nav),
    ::view-transition-new(home-nav),
    ::view-transition-old(now-nav),
    ::view-transition-new(now-nav),
    ::view-transition-old(project-header),
    ::view-transition-new(project-header),
    ::view-transition-old(home-footer),
    ::view-transition-new(home-footer),
    ::view-transition-old(notebook-footer),
    ::view-transition-new(notebook-footer) {
        animation-duration: 250ms;
        animation-timing-function: ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/*
 * Theme toggle: radial clip-path wipe.
 *
 * Scoped to html.theme-transitioning so this never fires during page
 * navigation — only when theme.js explicitly toggles the theme. The old
 * snapshot is held static while the new snapshot is revealed via a circular
 * clip that grows from the click origin (--theme-x, --theme-y) outward.
 *
 * The class selector gives these rules higher specificity than the unscoped
 * ::view-transition-* timing above, so the wipe's animation shorthand wins
 * during a toggle.
 */
@media (prefers-reduced-motion: no-preference) {
    html.theme-transitioning::view-transition-old(root) {
        animation: none;
        z-index: 1;
    }

    html.theme-transitioning::view-transition-new(root) {
        animation: theme-clip-reveal 600ms ease-in forwards;
        z-index: 999;
    }

    @keyframes theme-clip-reveal {
        from {
            clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 50%));
        }
        to {
            clip-path: circle(150vmax at var(--theme-x, 50%) var(--theme-y, 50%));
        }
    }
}

/*
 * Theme toggle button. Uses currentColor throughout so it inherits whatever
 * text color the page has (homepage's --text, /now's --ink, etc.) without
 * needing to know per-page token names. No view-transition-name on the
 * button itself — that way it rides the root snapshot and the wipe animates
 * the color change as part of the reveal.
 */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9000;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.45;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font: inherit;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    opacity: 1;
    transform: scale(1.05);
}

.theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.theme-toggle .icon-moon { display: none; }

[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 640px) {
    .theme-toggle {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
    }
    .theme-toggle svg {
        width: 16px;
        height: 16px;
    }
}