/* =============================================================
   theme.css — dark-mode toggle
   The peeking sphere (top-right), the custom cursor ring, and the
   circular "bleed" reveal powered by the View Transitions API.
   Loaded on EVERY page via _includes/base.njk, after main.css.
   ============================================================= */

/* ── The peeking sphere ────────────────────────────────────── */
.theme-toggle {
    /* Sphere diameter scales with the viewport so it stays prominent on
       large (e.g. 1440p) desktop displays; narrow/touch rules override. */
    --theme-sphere: clamp(88px, 5.5vw, 132px);
    --theme-tuck: calc(var(--theme-sphere) * 0.42);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 950;
    width: calc(var(--theme-sphere) + 10px);
    height: calc(var(--theme-sphere) + 10px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: none;                     /* custom ring takes over */
    -webkit-tap-highlight-color: transparent;
    appearance: none;
}

.theme-toggle__sphere {
    position: absolute;
    top: calc(-1 * var(--theme-tuck));  /* tucked into the corner... */
    right: calc(-1 * var(--theme-tuck));
    width: var(--theme-sphere);
    height: var(--theme-sphere);
    border-radius: 50%;
    background: var(--ink);           /* black on light, white on dark */
    box-shadow: 0 6px 22px var(--shadow);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
                background-color .4s ease;
    will-change: transform;
}

/* ...slides out when the pointer is over the toggle / keyboard focus */
.theme-toggle.is-expanded .theme-toggle__sphere,
.theme-toggle:focus-visible .theme-toggle__sphere {
    transform: translate(calc(var(--theme-tuck) * -0.9),
                         calc(var(--theme-tuck) * 0.9));
}

.theme-toggle:focus-visible {
    outline: none;
}

.theme-toggle:focus-visible .theme-toggle__sphere {
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
}

/* ── Custom cursor ring (pointer devices only) ─────────────── */
/* Single, un-nested element on purpose: `mix-blend-mode` must not sit
   inside a stacking context (a fixed/transformed parent), or it has no
   backdrop to blend with and stays white-on-white. */
.theme-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    mix-blend-mode: difference;       /* always visible, any backdrop */
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.theme-cursor.is-visible {
    opacity: 1;
}

/* ── Narrow screens: shrink the toggle so its hit area clears the nav ─ */
@media (max-width: 1024px) {
    .theme-toggle {
        --theme-sphere: 56px;
    }
}

/* ── Touch devices: no peek, no ring — sphere is fully visible ─ */
@media (hover: none) {
    .theme-cursor { display: none; }

    .theme-toggle {
        --theme-sphere: 48px;
    }

    /* Touch devices get the sphere fully visible in the corner (no peek). */
    .theme-toggle__sphere {
        top: 8px;
        right: 8px;
    }
}

/* Pop feedback on tap */
@keyframes theme-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(.8); }
    65%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.theme-toggle.is-popping .theme-toggle__sphere {
    animation: theme-pop .34s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── The "bleed" — View Transitions ────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;                  /* JS drives the clip circle */
    mix-blend-mode: normal;
}

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

/* Let the sphere morph on its own rather than being clipped */
.theme-toggle__sphere {
    view-transition-name: theme-toggle;
}

/* ── Monochrome artwork follows the theme ──────────────────── */
html[data-theme="dark"] .logo-header,
html[data-theme="dark"] .refresh-icon {
    filter: invert(1);                /* black art -> white */
}

/* ── Respect reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle__sphere,
    .theme-cursor {
        transition: none;
    }

    .theme-toggle.is-popping .theme-toggle__sphere {
        animation: none;
    }

    .theme-cursor { display: none; }
}