/* =====================================================
   PERSONAL / WORK SWITCHER — shared by every page header.
   Markup is rendered by /website/scripts/switcher.js into
   <div data-site-switcher></div>. Each page sets the --sw-*
   colours for its own look; the defaults are the personal
   pages' (navy and indigo). /work overrides them in work.css.
   Decision D54 / D62 in .claude/context/raid.md.
   ===================================================== */

:where(:root){
  --sw-bg:#111828; --sw-line:#232A3D; --sw-text:#AEB4C4;
  --sw-thumb:#515CF6; --sw-thumb-text:#FFFFFF; --sw-font:'Lexend',system-ui,sans-serif;
}

.site-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; padding:3px;
  border-radius:999px; border:1px solid var(--sw-line); background:var(--sw-bg);
  font-family:var(--sw-font); flex-shrink:0; view-transition-name:site-switch}
.site-switch a{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:.8rem; font-weight:600; line-height:1;
  letter-spacing:.01em; color:var(--sw-text); text-decoration:none; white-space:nowrap;
  transition:color .25s ease}
.site-switch a:hover{color:var(--sw-thumb-text)}
.site-switch a[aria-current="page"]{color:var(--sw-thumb-text)}
.site-switch a:not([aria-current="page"]):hover{color:#fff}
.site-switch a:focus-visible{outline:2px solid var(--sw-thumb); outline-offset:2px}
.site-switch-ic{width:14px; height:14px; flex-shrink:0}
.site-switch-thumb{position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  border-radius:999px; background:var(--sw-thumb); transition:transform .22s cubic-bezier(0.65,0,0.35,1)}
.site-switch[data-active="work"] .site-switch-thumb{transform:translateX(100%)}
/* While the thumb slides toward the other side, both labels read as plain. */
.site-switch.leaving a{color:var(--sw-text)}
.site-switch.leaving a[data-to-active]{color:var(--sw-thumb-text)}

@media (max-width:420px){
  .site-switch a{padding:7px 10px; font-size:.74rem; gap:5px}
  .site-switch-ic{width:13px; height:13px}
}

/* ---------- The page-to-page reveal ----------
   Cross-document view transitions between pages that load this file.
   switcher.js skips every navigation that didn't come from the switcher,
   so ordinary links still load the plain way. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation:none; mix-blend-mode:normal}
/* Going home, the old (/work) snapshot sits on top and closes into the switcher. */
html.sw-reverse::view-transition-old(root){z-index:2}
html.sw-reverse::view-transition-new(root){z-index:1}
::view-transition-group(site-switch){animation-duration:.5s; animation-timing-function:cubic-bezier(0.22,1,0.36,1)}

@media (prefers-reduced-motion:reduce){
  .site-switch-thumb{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}