/* Téma váltás animáció (View Transition API + fallback) */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 0.58s;
    animation-timing-function: cubic-bezier(0.33, 1, 0.52, 1);
  }

  ::view-transition-old(root) {
    z-index: 1;
    animation: theme-vt-fade-out 0.5s cubic-bezier(0.4, 0, 0.65, 1) forwards;
  }

  ::view-transition-new(root) {
    z-index: 2;
    animation: theme-vt-reveal 0.58s cubic-bezier(0.22, 0.95, 0.42, 1) forwards;
  }

  @keyframes theme-vt-fade-out {
    0% {
      opacity: 1;
      filter: blur(0) brightness(1);
    }
    55% {
      opacity: 0.55;
      filter: blur(1px) brightness(0.98);
    }
    100% {
      opacity: 0;
      filter: blur(4px) brightness(1.02);
    }
  }

  @keyframes theme-vt-reveal {
    0% {
      clip-path: circle(0 at var(--theme-tx, 50%) var(--theme-ty, 50%));
    }
    18% {
      clip-path: circle(28px at var(--theme-tx, 50%) var(--theme-ty, 50%));
    }
    100% {
      clip-path: circle(var(--theme-tr, 150vmax) at var(--theme-tx, 50%) var(--theme-ty, 50%));
    }
  }

  html.is-theme-transitioning .header-theme-btn,
  html.is-theme-transitioning .auth-theme-toggle {
    animation: theme-btn-glow 0.58s cubic-bezier(0.33, 1, 0.52, 1);
  }

  @keyframes theme-btn-glow {
    0%,
    100% {
      transform: scale(1);
      box-shadow: none;
    }
    45% {
      transform: scale(1.05);
      box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.25),
        0 0 18px rgba(59, 130, 246, 0.22);
    }
  }

  html[data-theme="light"].is-theme-transitioning .header-theme-btn,
  html[data-theme="light"].is-theme-transitioning .auth-theme-toggle {
    animation-name: theme-btn-glow-light;
  }

  @keyframes theme-btn-glow-light {
    0%,
    100% {
      transform: scale(1);
      box-shadow: none;
    }
    45% {
      transform: scale(1.05);
      box-shadow:
        0 0 0 1px rgba(124, 58, 237, 0.22),
        0 0 18px rgba(124, 58, 237, 0.18);
    }
  }

  html.is-theme-transitioning .header-theme-btn .theme-icon,
  html.is-theme-transitioning .auth-theme-toggle .theme-icon {
    transition: opacity 0.45s cubic-bezier(0.33, 1, 0.52, 1);
  }
}

/* Böngészők View Transition API nélkül */
@media (prefers-reduced-motion: no-preference) {
  html.theme-transition--fallback body {
    transition: background-color 0.55s cubic-bezier(0.33, 1, 0.52, 1);
  }

  html.theme-transition--fallback .bg-glow,
  html.theme-transition--fallback .bg-grid,
  html.theme-transition--fallback .app-header,
  html.theme-transition--fallback .panel,
  html.theme-transition--fallback .canvas-panel,
  html.theme-transition--fallback .canvas-panel__chrome,
  html.theme-transition--fallback .statusbar,
  html.theme-transition--fallback .tool,
  html.theme-transition--fallback .auth-card,
  html.theme-transition--fallback .auth-card__chrome {
    transition:
      background 0.55s cubic-bezier(0.33, 1, 0.52, 1),
      background-color 0.55s cubic-bezier(0.33, 1, 0.52, 1),
      color 0.5s cubic-bezier(0.33, 1, 0.52, 1),
      border-color 0.5s cubic-bezier(0.33, 1, 0.52, 1),
      box-shadow 0.55s cubic-bezier(0.33, 1, 0.52, 1);
  }

  html.theme-transition--fallback #canvasContainer,
  html.theme-transition--fallback .canvas {
    transition: background-color 0.55s cubic-bezier(0.33, 1, 0.52, 1);
  }
}