/* Theme Transition System */

/* Apply smooth transitions to all theme-dependent properties */
body,
.game-area,
.question-card,
.question-content,
.question-metadata,
.options-title,
.option-btn,
.menu-btn,
.menu-btn-title,
.menu-btn-desc,
.menu-title,
.score,
.progress-bar,
.back-btn,
.game-mode-label,
.loading-content,
.loading-text,
.results-content,
.results-title,
.results-score-big,
.results-percentage,
.results-message,
.results-close-btn,
.daily-stats,
.daily-complete,
.daily-progress,
.version-info,
.version-text,
.dropdown-menu,
.dropdown-item,
.about-content,
.about-header,
.about-title,
.about-close,
.about-version,
.about-description,
.about-list li,
.about-section-title,
.about-footer,
.about-credits,
.menu-button,
#skipBtn {
    transition: 
        background-color var(--transition-slow) var(--ease-in-out),
        background var(--transition-slow) var(--ease-in-out),
        border-color var(--transition-slow) var(--ease-in-out),
        color var(--transition-slow) var(--ease-in-out),
        box-shadow var(--transition-slow) var(--ease-in-out);
}

/* Prevent transition on initial page load */
body.no-transitions,
body.no-transitions * {
    transition: none !important;
}

/* Ensure transforms and other animations are not affected */
.option-btn,
.menu-btn {
    transition: 
        background-color var(--transition-slow) var(--ease-in-out),
        background var(--transition-slow) var(--ease-in-out),
        border-color var(--transition-slow) var(--ease-in-out),
        color var(--transition-slow) var(--ease-in-out),
        box-shadow var(--transition-slow) var(--ease-in-out),
        transform var(--transition-base) var(--ease-out),
        opacity var(--transition-base) var(--ease-out);
}

/* Special handling for gradient backgrounds */
.menu-btn::before,
.option-btn::before {
    transition: opacity var(--transition-slow) var(--ease-in-out);
}