/*
 * theme.css — circular view-transition for the theme toggle.
 *
 * Mirrors storeadmin's theme-toggle-circular pattern: when the toggle
 * fires document.startViewTransition(), the browser snapshots the old
 * frame, the JS swaps the data-theme attribute, the browser snapshots
 * the new frame, and these rules animate one over the other with a
 * clip-path circle expanding (going to dark) or contracting (going to
 * light) from the click point.
 *
 * --x and --y are set inline by static/js/theme.js to the click
 * coordinates so the circle radiates from the button itself.
 */
:root {
  --transition-speed: 0.5s;
  --transition-blur: 0px;
  --x: 50%;
  --y: 50%;
}

::view-transition-group(root) {
  animation: none;
  isolation: isolate;
  overflow: hidden;
}
::view-transition-image-pair(root) {
  isolation: isolate;
  overflow: hidden;
}
::view-transition-old(root),
::view-transition-new(root) {
  filter: blur(var(--transition-blur));
  overflow: hidden;
  backface-visibility: hidden;
  contain: paint;
}

[data-theme-transition="to-dark"]::view-transition-old(root) {
  animation: none;
  z-index: -1;
  mix-blend-mode: normal;
}
[data-theme-transition="to-dark"]::view-transition-new(root) {
  animation: theme-circle-in var(--transition-speed) ease-in-out;
  will-change: clip-path;
  mix-blend-mode: normal;
  z-index: 1;
  transform: translateZ(0);
}

[data-theme-transition="to-light"]::view-transition-old(root) {
  animation: theme-circle-out var(--transition-speed) ease-in-out;
  will-change: clip-path;
  z-index: 1;
  transform: translateZ(0);
}
[data-theme-transition="to-light"]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  z-index: -1;
}

@keyframes theme-circle-in {
  from { clip-path: circle(0% at var(--x) var(--y)); }
  to   { clip-path: circle(150% at var(--x) var(--y)); }
}
@keyframes theme-circle-out {
  from { clip-path: circle(150% at var(--x) var(--y)); }
  to   { clip-path: circle(0% at var(--x) var(--y)); }
}

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

/* ---- Toggle button ----
   Lives in the header right cluster. Two icons stacked; we show the
   one that represents the OPPOSITE of the current theme (sun in dark
   mode = "click for light", moon in light mode = "click for dark"). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}
.theme-toggle svg {
  width: 1rem;
  height: 1rem;
}

/* Show sun in dark mode (click → switch to light), moon in light mode. */
.theme-toggle .theme-toggle-icon-sun  { display: inline-flex; }
.theme-toggle .theme-toggle-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle-icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle-icon-moon { display: inline-flex; }