/* ===== PERFORMANCE OPTIMIZATION CSS ===== */

/* Base animation speed variable */
:root {
    --perf-anim-speed: 1;
    --perf-trans-dur: calc(0.22s * var(--perf-anim-speed));
    --perf-trans-dur-slow: calc(0.35s * var(--perf-anim-speed));
}

/* ─── FPS SAVER ─────────────────────────────────────
   Disables background animations, continuous effects
*/
html.perf-fps-saver {
    --perf-anim-speed: 0;
}

/* Disable background particle animations */
html.perf-fps-saver body::before,
html.perf-fps-saver body::after,
html.perf-fps-saver .theme-particles,
html.perf-fps-saver [data-particles] {
    animation: none !important;
}

/* ─── REDUCED MOTION ────────────────────────────────
   Removes easing, transforms, exit animations
*/
html.perf-reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Keep essential interactions readable */
html.perf-reduced-motion button:hover,
html.perf-reduced-motion a:hover,
html.perf-reduced-motion input:focus {
    transition-duration: 0 !important;
}

/* ─── BLUR EFFECTS OFF ──────────────────────────────
   Removes backdrop filters and blur effects
*/
html.perf-blur-off *[style*="backdrop-filter"],
html.perf-blur-off .mafia-popup-overlay,
html.perf-blur-off .panel,
html.perf-blur-off [class*="modal"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ─── HOVER EFFECTS OFF ─────────────────────────────
   Removes hover transforms and shadows
*/
html.perf-hover-off *:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

/* ─── BG EFFECTS OFF ────────────────────────────────
   Removes theme background particles and effects
*/
html.perf-bg-off body::before,
html.perf-bg-off body::after,
html.perf-bg-off .theme-background,
html.perf-bg-off [data-bg-effect] {
    display: none !important;
}

/* ===== THEME-SPECIFIC PERFORMANCE OVERRIDES ===== */

/* Synthwave: Disable gradient animation when FPS saver on */
html.perf-fps-saver .theme-synthwave .shiny-title {
    animation: none !important;
    background: linear-gradient(90deg, #ff00aa, #00ccff, #ff00aa) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Reduce glow effects in performance mode */
html.perf-fps-saver [class*="glow"],
html.perf-fps-saver [style*="box-shadow"],
html.perf-fps-saver [style*="filter: drop-shadow"] {
    filter: none !important;
    box-shadow: none !important;
}

/* Lightweight transitions when FPS saver is on */
html.perf-fps-saver button,
html.perf-fps-saver a,
html.perf-fps-saver .btn {
    transition: none !important;
}

/* Pause expensive decorative animations while tab is hidden */
html.perf-page-hidden body::before,
html.perf-page-hidden body::after,
html.perf-page-hidden [class*="particle"],
html.perf-page-hidden [class*="glow"],
html.perf-page-hidden .slot-grid.spinning .slot-cell {
    animation-play-state: paused !important;
}

/* Heavy theme backgrounds: keep the visuals but remove the moving particle layers. */
body[class*="theme-"] .content,
body[class*="theme-"] .content::before,
body[class*="theme-"] .content::after {
    background-image: none !important;
    background-size: auto !important;
    will-change: auto !important;
    animation: none !important;
}

/* Mobile-friendly defaults: keep look, reduce heavy blur/shadow pressure */
@media (max-width: 700px) {
    .mafia-popup-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    [class*="glow"],
    .slot-cell.win,
    .slot-cabinet.win-flash,
    .slot-cabinet.big-win-flash {
        box-shadow: none !important;
    }
}

/* ===== PRINT & ACCESSIBILITY ===== */
@media print {
    html,
    html.perf-fps-saver,
    html.perf-reduced-motion {
        --perf-anim-speed: 0;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
