/* Theme switch motion (2026-09-18). The knob keeps its original round, solid look, now in the brand
   gradient. A Liquid Glass knob was tried the same day and reverted (see z_archive/liquid-glass-switch/). */
/* Gummy stretch (owner's pick): the leading edge shoots toward the other side while the trailing
   edge holds, so the knob becomes a long thin pill; then the trailing edge catches up, the knob
   overshoots with a squash and wobbles round. Keyframes set position and size directly (one set per
   direction; theme-switch.js picks it). Every frame stays inside the track: 3px padding, 62px inside. */
.theme-switch .knob { border-radius: 999px; transition: none; }
.theme-switch.lg-to-dark .knob  { animation: lg-to-dark 300ms ease-in-out; }
.theme-switch.lg-to-light .knob { animation: lg-to-light 300ms ease-in-out; }
@keyframes lg-to-dark {
  0%   { transform: translateX(0);    width: 26px; height: 26px; top: 3px; }
  40%  { transform: translateX(0);    width: 52px; height: 20px; top: 6px; }   /* stretched toward the moon */
  70%  { transform: translateX(32px); width: 24px; height: 28px; top: 2px; }   /* caught up, a little past, squashed */
  85%  { transform: translateX(29px); width: 27px; height: 25px; top: 3.5px; }
  100% { transform: translateX(30px); width: 26px; height: 26px; top: 3px; }
}
@keyframes lg-to-light {
  0%   { transform: translateX(30px); width: 26px; height: 26px; top: 3px; }
  40%  { transform: translateX(4px);  width: 52px; height: 20px; top: 6px; }   /* stretched toward the sun */
  70%  { transform: translateX(-2px); width: 24px; height: 28px; top: 2px; }
  85%  { transform: translateX(1px);  width: 27px; height: 25px; top: 3.5px; }
  100% { transform: translateX(0);    width: 26px; height: 26px; top: 3px; }
}

/* The knob carries the brand's violet-to-blue, like the logo and the primary buttons. */
.theme-switch .knob { background: linear-gradient(135deg, var(--accent), var(--accent-blue, #2f70d9)); }
:root[data-theme="dark"] .theme-switch .knob { background: linear-gradient(135deg, #9b8cff, #5b9dff); }

/* Icon colours follow the knob, not the click: the icon being left changes at once, the one being
   reached only as the knob lands. Switching both instantly turned the destination icon white on the
   bare track (invisible) and darkened the other too early. Transition delays come from the new
   state's rule, which is why each theme sets them for its own arrival. */
.theme-switch .i-sun  { transition: color 100ms ease 190ms; }
.theme-switch .i-moon { transition: color 90ms ease 0ms; }
:root[data-theme="dark"] .theme-switch .i-moon { transition: color 100ms ease 190ms; }
:root[data-theme="dark"] .theme-switch .i-sun  { transition: color 90ms ease 0ms; }