ThemeToggle.css

/* ═══════════════════════════════════════════════════════════════════════════

   ThemeToggle.css — QUANTUM MORPHIC v5.0

   PASTE THIS → src/components/ThemeToggle.css



   • Track morphs shape + color on toggle

   • Thumb does a liquid squish spring jump

   • Glow aura pulses on toggle

   • Cursor scan line fires (via JS)

   • Full dark/light cursor color propagation via CSS vars

═══════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  background: none;
  border: none;
  cursor: none;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

/* ── Aura ring that pulses on toggle ── */
.theme-toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 40px;
  background: var(--grad-aurora);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.theme-toggle:hover::before {
  opacity: 0.18;
}
.theme-toggle.just-toggled::before {
  animation: toggleAuraPulse 0.65s cubic-bezier(0.19,1,0.22,1) forwards;
}
@keyframes toggleAuraPulse {
  0%   { opacity: 0;    transform: scale(0.8); }
  30%  { opacity: 0.45; transform: scale(1.2); }
  100% { opacity: 0;    transform: scale(1.5); }
}

/* ── Track ── */
.toggle-track {
  position: relative;
  width: 64px;
  height: 32px;
  background: var(--toggle-bg, rgba(124,58,237,0.14));
  border: 1.5px solid var(--toggle-border, rgba(124,58,237,0.4));
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  overflow: hidden;
  cursor: none;
  transition:
    background      0.55s cubic-bezier(0.4,0,0.2,1),
    border-color    0.55s cubic-bezier(0.4,0,0.2,1),
    box-shadow      0.55s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 14px rgba(124,58,237,0.22);
}

/* Track inner shimmer */
.toggle-track::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
  pointer-events: none;
  border-radius: inherit;
}
.theme-toggle:hover .toggle-track::after { left: 100%; }

/* Light mode track */
[data-theme='light'] .toggle-track {
  background: var(--toggle-bg, rgba(253,230,138,0.2));
  border-color: var(--toggle-border, rgba(217,119,6,0.5));
  box-shadow: 0 0 14px rgba(217,119,6,0.22);
}

/* ── Icons ── */
.toggle-icon {
  font-size: 14px;
  line-height: 1;
  z-index: 1;
  position: relative;
  transition:
    opacity   0.35s ease,
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    filter    0.35s ease;
}

/* Dark mode: moon active, sun dim */
.toggle-icon.moon { opacity: 1; filter: drop-shadow(0 0 5px rgba(0,255,238,0.8)); }
.toggle-icon.sun  { opacity: 0.32; transform: scale(0.75) rotate(-30deg); filter: none; }

/* Light mode: sun active, moon dim */
[data-theme='light'] .toggle-icon.moon {
  opacity: 0.32;
  transform: scale(0.75) rotate(30deg);
  filter: none;
}
[data-theme='light'] .toggle-icon.sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: drop-shadow(0 0 6px rgba(217,119,6,0.9));
}

/* ── Thumb — the liquid slider ── */
.toggle-thumb {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;

  /* Dark: cyan→purple gradient */
  background: linear-gradient(135deg, #7c3aed, #00ffee);
  box-shadow:
    0 0 14px rgba(0,255,238,0.75),
    0 0 28px rgba(124,58,237,0.35),
    0 2px 6px rgba(0,0,0,0.4);

  transition:
    left         0.45s cubic-bezier(0.34,1.56,0.64,1),
    background   0.55s cubic-bezier(0.4,0,0.2,1),
    box-shadow   0.55s cubic-bezier(0.4,0,0.2,1),
    border-radius 0.3s ease;

  will-change: left, background;
}

/* Thumb squish on mid-animation */
.toggle-thumb.squish {
  animation: thumbSquish 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes thumbSquish {
  0%   { border-radius: 50%; transform: translateY(-50%) scaleX(1); }
  30%  { border-radius: 40% 60% 60% 40%; transform: translateY(-50%) scaleX(1.35); }
  60%  { border-radius: 60% 40% 40% 60%; transform: translateY(-50%) scaleX(0.8); }
  100% { border-radius: 50%; transform: translateY(-50%) scaleX(1); }
}

/* Light mode thumb: gold→amber */
.toggle-thumb.light {
  left: calc(100% - 28px);
  background: linear-gradient(135deg, #d97706, #fbbf24);
  box-shadow:
    0 0 14px rgba(251,191,36,0.9),
    0 0 28px rgba(217,119,6,0.5),
    0 2px 6px rgba(0,0,0,0.2);
}

/* Thumb inner sparkle */
.toggle-thumb::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  filter: blur(2px);
  transition: background 0.55s ease;
}
.toggle-thumb.light::before {
  background: rgba(255,255,255,0.7);
}

/* ── State label (screen-reader) ── */
.toggle-label-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}