/* ═══════════════════════════════════════════════════════════════════════════
   GilGamez Platform — Theme Transition & Color Morphing Engine (GGZ-THEME-SPEC v1.0)
   Provides seamless, smooth color transitions across all DOM elements and UI surfaces.
   Enforces Rule #1 (Separation), Rule #2 (Centralized Engine), and Rule #15 (Vanilla CSS).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --theme-transition-duration: 400ms;
    --theme-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Global Smooth Transition State (Applied during active theme morphing) */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning #app,
html.theme-transitioning #main-content,
html.theme-transitioning .site-header,
html.theme-transitioning .site-footer,
html.theme-transitioning .hp-hero-section,
html.theme-transitioning .profile-page-wrapper,
html.theme-transitioning .profile-card,
html.theme-transitioning .profile-input-field,
html.theme-transitioning .profile-tab-btn,
html.theme-transitioning .profile-action-card,
html.theme-transitioning .dash-card,
html.theme-transitioning .auth-card,
html.theme-transitioning .auth-input-field,
html.theme-transitioning .store-card,
html.theme-transitioning .goods-card,
html.theme-transitioning .modal-container,
html.theme-transitioning .modal-content,
html.theme-transitioning .toast-notification,
html.theme-transitioning .nav-pill-item,
html.theme-transitioning .nav-pill-link,
html.theme-transitioning .badge,
html.theme-transitioning .btn,
html.theme-transitioning .btn-primary,
html.theme-transitioning .btn-secondary,
html.theme-transitioning button,
html.theme-transitioning input,
html.theme-transitioning select,
html.theme-transitioning textarea,
html.theme-transitioning a,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning label,
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning h3,
html.theme-transitioning h4,
html.theme-transitioning h5,
html.theme-transitioning h6,
html.theme-transitioning hr,
html.theme-transitioning div,
html.theme-transitioning svg,
html.theme-transitioning svg path,
html.theme-transitioning svg circle,
html.theme-transitioning svg rect,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: 
        background-color var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        background var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        color var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        border-color var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        outline-color var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        box-shadow var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        fill var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        stroke var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        backdrop-filter var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out),
        opacity var(--theme-transition-duration, 400ms) var(--theme-transition-easing, ease-in-out) !important;
    transition-delay: 0s !important;
}

/* 2. Modern View Transitions API Smooth Cross-Fade Enhancement */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--theme-transition-duration, 400ms);
    animation-timing-function: var(--theme-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

::view-transition-old(root) {
    animation-name: ggz-theme-fade-out;
}

::view-transition-new(root) {
    animation-name: ggz-theme-fade-in;
    mix-blend-mode: normal;
}

@keyframes ggz-theme-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ggz-theme-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}