/* Motiv: nativní prvky + jeden snímek přechodu (ne animace každého uzlu). */
html {
    color-scheme: light;
    background: #F4F6F9;
}
html.dark {
    color-scheme: dark;
    background: #0D1117;
}

/* Font Awesome má vlastní display a přebije Tailwind hidden, takže ve světlém režimu zůstanou obě ikony. */
[data-theme-toggle] .fa-sun {
    display: none;
}
html.dark [data-theme-toggle] .fa-sun {
    display: inline-block;
}
html.dark [data-theme-toggle] .fa-moon {
    display: none;
}

/* Po dobu snímku vypnout tisíce barevných transition na prvcích. */
html.pvk-theme-go,
html.pvk-theme-go * {
    transition: none !important;
}

/* Starý snímek zůstane, nový se z místa kliknutí rozroste přes celou stránku. */
::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}
::view-transition-old(root) {
    z-index: 1;
    animation: none;
}
::view-transition-new(root) {
    z-index: 2;
    animation: pvk-theme-reveal 0.68s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

@keyframes pvk-theme-icon {
    from { transform: rotate(-50deg) scale(0.82); }
    to { transform: none; }
}

html.pvk-theme-go [data-theme-toggle] i,
html.pvk-theme-go .theme-toggle i,
html.pvk-theme-go button[onclick*="toggleDarkMode"] i {
    animation: pvk-theme-icon 0.68s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    html.pvk-theme-go [data-theme-toggle] i,
    html.pvk-theme-go .theme-toggle i,
    html.pvk-theme-go button[onclick*="toggleDarkMode"] i {
        animation: none !important;
    }
}