/* =========================================================================
   Tonzmark Universal Theme Transition & Toggle Styles
   - View Transition API (Circular Reveal with Root Clip-Path)
   - Fallback Cross-Fade Transition (Legacy & Unsupported Browsers)
   - Animated SVG Sun / Moon Icons (Spring Rotation & Scale)
   - Prefers-Reduced-Motion Accessibility Support
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. View Transition API Setup
   ------------------------------------------------------------------------- */

/* Ensure the view-transition overlay sits above ALL page content including
   sticky/fixed headers, modals, and any element with high z-index */
::view-transition {
  z-index: 2147483647;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

/*
  The new theme snapshot sits above the old theme snapshot.
  The circular clip-path is animated dynamically via Web Animations API.
*/
::view-transition-new(root) {
  z-index: 9999;
}

::view-transition-old(root) {
  z-index: 1;
}

/* Ensure html canvas is solid and opaque during View Transition circular reveal */
html {
  background-color: var(--bg-canvas, #0b0d13);
  color: var(--text-primary, #f8fafc);
}

/* -------------------------------------------------------------------------
   2. Fallback Smooth Transition (for browsers without View Transition API)
   ------------------------------------------------------------------------- */
html.theme-transition,
html.theme-transition body,
html.theme-transition .app-header,
html.theme-transition .app-sidebar,
html.theme-transition .bookmark-card,
html.theme-transition .modal-card,
html.theme-transition .btn,
html.theme-transition .btn-icon,
html.theme-transition .btn-icon-only,
html.theme-transition .search-input-wrapper,
html.theme-transition .radio-card-label,
html.theme-transition header,
html.theme-transition .card,
html.theme-transition .domain-chip,
html.theme-transition select,
html.theme-transition input {
  transition:
    background-color 450ms cubic-bezier(0.4, 0, 0.2, 1),
    color 450ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 450ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 450ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* -------------------------------------------------------------------------
   3. Theme Toggle Button
   ------------------------------------------------------------------------- */
.theme-toggle-btn,
#btnThemeToggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition:
    transform 180ms ease,
    border-color 300ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease,
    color 300ms ease;
}

.theme-toggle-btn:hover,
#btnThemeToggle:hover {
  transform: scale(1.08);
}

.theme-toggle-btn:active,
#btnThemeToggle:active {
  transform: scale(0.92);
}
/* -------------------------------------------------------------------------
   4. Animated Sun / Moon Icons
   ------------------------------------------------------------------------- */
.theme-toggle-btn svg,
#btnThemeToggle svg {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 250ms ease;
}

/* Light Theme: Sun visible (warm amber), Moon rotated out & hidden */
html[data-theme="light"] .theme-toggle-btn .sun,
html[data-theme="light"] .theme-toggle-btn .theme-icon-sun,
html[data-theme="light"] #btnThemeToggle .sun,
html[data-theme="light"] #btnThemeToggle .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: var(--color-amber, #f59e0b);
}

html[data-theme="light"] .theme-toggle-btn .moon,
html[data-theme="light"] .theme-toggle-btn .theme-icon-moon,
html[data-theme="light"] #btnThemeToggle .moon,
html[data-theme="light"] #btnThemeToggle .theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.35);
}

/* Dark Theme: Moon visible (electric blue), Sun rotated out & hidden */
html[data-theme="dark"] .theme-toggle-btn .sun,
html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun,
html[data-theme="dark"] #btnThemeToggle .sun,
html[data-theme="dark"] #btnThemeToggle .theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.35);
}

html[data-theme="dark"] .theme-toggle-btn .moon,
html[data-theme="dark"] .theme-toggle-btn .theme-icon-moon,
html[data-theme="dark"] #btnThemeToggle .moon,
html[data-theme="dark"] #btnThemeToggle .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: var(--primary-500, #3b82f6);
}

/* -------------------------------------------------------------------------
   5. Accessibility: Prefers-Reduced-Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition body,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after,
  .theme-toggle-btn,
  #btnThemeToggle,
  .theme-toggle-btn svg,
  #btnThemeToggle svg {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}