/* ==========================================================================
   Theme switcher — colour and motion
   --------------------------------------------------------------------------
   Layers on top of toggles.css, which already gives the three icons their
   shapes and a slow ambient motion when active (rays turning, stars
   twinkling, the orbit dot going round). Two things it does not do: the icons
   are monochrome via currentColor, and hover only nudges them.

   This file adds the colour for the active choice and a livelier hover.

   ON CONTRAST
   The active icon sits on --surface inside the switcher's pill. A mid gold
   (#f2a93c) measures about 2:1 there, under the 3:1 WCAG asks of a meaningful
   graphic — so the *icon* is not the only thing carrying the state. The
   active choice already has a raised surface and shadow from shell.css, and
   this file adds a tinted background behind it. The colour is a reinforcement
   of an already-legible state, which is where a low-contrast accent is
   reasonable; it is never the sole signal.
   ========================================================================== */

/* --- Active: a warm or cool wash behind the chosen icon ------------------ */

.theme-choice[aria-pressed="true"] {
  /* Overrides shell.css's flat --surface with a tint matching the icon, so
     the state reads even before the icon's colour registers. */
  transition: background .28s var(--ease), color .28s var(--ease);
}

.theme-choice[data-theme-choice="day"][aria-pressed="true"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--sun) 26%, var(--surface)),
    var(--surface));
}

.theme-choice[data-theme-choice="night"][aria-pressed="true"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--blue) 24%, var(--surface)),
    var(--surface));
}

.theme-choice[data-theme-choice="auto"][aria-pressed="true"] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--sun) 18%, var(--surface)),
    color-mix(in srgb, var(--blue) 18%, var(--surface)));
}

/* --- Sun: gold when chosen ----------------------------------------------- */

.theme-choice[aria-pressed="true"] .icon-day {
  color: var(--sun);
  /* A warm bloom, not a hard shadow — the sun should look lit rather than
     dropped onto the surface. */
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sun) 70%, transparent));
}

/* The core runs a touch deeper than the rays so the disc reads as a body with
   light coming off it, rather than one flat gold shape. */
.theme-choice[aria-pressed="true"] .icon-day .sun-core {
  fill: var(--sun);
}

.theme-choice[aria-pressed="true"] .icon-day .sun-rays {
  stroke: var(--sun);
}

/* --- Moon: cool silver-blue when chosen ---------------------------------- */

.theme-choice[aria-pressed="true"] .icon-night {
  color: var(--blue);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blue) 60%, transparent));
}

.theme-choice[aria-pressed="true"] .icon-night .moon-body {
  fill: var(--blue);
}

/* Stars stay pale rather than taking the crescent's blue — they read as
   points of light, and toggles.css is already twinkling them. */
.theme-choice[aria-pressed="true"] .icon-night .star {
  fill: color-mix(in srgb, var(--blue) 45%, var(--ink-soft));
}

/* --- Auto: half warm, half cool ------------------------------------------ */

.theme-choice[data-theme-choice="auto"][aria-pressed="true"] .auto-half-sun {
  stroke: var(--sun);
}

.theme-choice[data-theme-choice="auto"][aria-pressed="true"] .auto-half-moon {
  fill: var(--blue);
}

.theme-choice[data-theme-choice="auto"][aria-pressed="true"] .auto-orbit circle {
  fill: var(--sun);
}

/* ==========================================================================
   Hover motion
   --------------------------------------------------------------------------
   These run on hover regardless of whether the choice is active, so the
   control always answers the pointer. They are short and finite — the
   ambient loops in toggles.css are the resting state, and these are a
   reaction, so nothing here repeats forever.
   ========================================================================== */

/* --- Sun: the rays flare out and spin up --------------------------------- */

.theme-choice:hover .icon-day .sun-rays {
  animation: sun-flare .55s var(--ease);
}

.theme-choice:hover .icon-day .sun-core {
  animation: sun-swell .55s var(--ease);
}

@keyframes sun-flare {
  0%   { transform: rotate(0deg)  scale(1); }
  45%  { transform: rotate(38deg) scale(1.26); }
  100% { transform: rotate(45deg) scale(1.12); }
}

@keyframes sun-swell {
  0%   { transform: scale(1); }
  50%  { transform: scale(.82); }
  100% { transform: scale(1); }
}

.theme-choice .icon-day .sun-core {
  transform-origin: 12px 12px;
}

/* --- Moon: rocks in its cradle, stars pop in sequence -------------------- */

.theme-choice:hover .icon-night .moon-body {
  animation: moon-rock .7s var(--ease);
}

.theme-choice .icon-night .moon-body {
  transform-origin: 12px 12px;
}

@keyframes moon-rock {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-13deg); }
  62%  { transform: rotate(9deg); }
  100% { transform: rotate(0deg); }
}

/* Each star pops a beat after the one before, so the group reads as a small
   cascade rather than three things flashing together. */
.theme-choice:hover .icon-night .star-1 { animation: star-pop .5s var(--ease) 0s; }
.theme-choice:hover .icon-night .star-2 { animation: star-pop .5s var(--ease) .09s; }
.theme-choice:hover .icon-night .star-3 { animation: star-pop .5s var(--ease) .18s; }

.theme-choice .icon-night .star {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes star-pop {
  0%   { transform: scale(1);   opacity: .4; }
  45%  { transform: scale(1.9); opacity: 1; }
  100% { transform: scale(1);   opacity: .9; }
}

/* --- Auto: the orbit dot takes a quick lap -------------------------------- */

.theme-choice:hover .icon-auto .auto-orbit {
  animation: auto-lap .8s var(--ease);
}

@keyframes auto-lap {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* The dial underneath leans into the turn, which makes the lap feel driven
   rather than like a dot sliding around a static ring. */
.theme-choice:hover .icon-auto .auto-half-moon {
  animation: auto-tip .8s var(--ease);
}

.theme-choice .icon-auto .auto-half-moon {
  transform-origin: 12px 12px;
}

@keyframes auto-tip {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   The colour stays — it carries state and is not motion. Only the movement
   stops, including the ambient loops toggles.css starts on the active icon,
   which otherwise run indefinitely for someone who asked for stillness.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .theme-choice:hover .icon-day .sun-rays,
  .theme-choice:hover .icon-day .sun-core,
  .theme-choice:hover .icon-night .moon-body,
  .theme-choice:hover .icon-night .star,
  .theme-choice:hover .icon-auto .auto-orbit,
  .theme-choice:hover .icon-auto .auto-half-moon,
  .theme-choice[aria-pressed="true"] .icon-day .sun-rays,
  .theme-choice[aria-pressed="true"] .icon-day .sun-core,
  .theme-choice[aria-pressed="true"] .icon-night .star,
  .theme-choice[aria-pressed="true"] .icon-auto .auto-orbit {
    animation: none !important;
  }
}