/* Subtle Snow Effect Styles */
#snow-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    opacity: 0.7;
    mix-blend-mode: screen;
}

/* Ensure snow appears above most content but below modals */
body {
    position: relative;
}

/* Make sure modals and alerts appear above snow */
.modal,
.modal-backdrop,
.alert,
.login-success-overlay,
.toast,
.tooltip,
.popover {
    z-index: 1050 !important;
}

/* Optional: Add winter theme to complement snow effect */
.winter-theme {
    position: relative;
}

.winter-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
        rgba(173, 216, 230, 0.05) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(173, 216, 230, 0.03) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure login form elements remain interactive */
.login-card,
.form-wrappers,
.login-form,
.login-form input,
.login-form button,
.login-form a {
    position: relative;
    z-index: 1;
}

/* Subtle frost effect on glass-like elements */
@supports (backdrop-filter: blur(1px)) {
    .form-wrappers {
        backdrop-filter: blur(1px);
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}

/* Animation for snowfall intensity change */
#snow-canvas {
    transition: opacity 0.5s ease-in-out;
}

/* Reduced snow effect for mobile devices (performance) */
@media (max-width: 768px) {
    #snow-canvas {
        opacity: 0.5;
    }
}

/* Disable snow on very small screens for better performance */
@media (max-width: 480px) and (max-height: 800px) {
    #snow-canvas {
        display: none;
    }
}

/* Print styles - hide snow when printing */
@media print {
    #snow-canvas {
        display: none !important;
    }
}