/* Login Background Images Styles */

/*
 * ANIMATION CONFIGURATION GUIDE:
 * 
 * To change animation speeds:
 * - Modify --base-animation-duration-up and --base-animation-duration-down in :root
 * - Higher values = slower animations (e.g., 300s = very slow, 120s = faster)
 * 
 * To change animation directions:
 * - In login-background.js, modify the generateBackgroundHTML() method
 * - Change: const scrollDirection = i % 2 === 0 ? 'up' : 'down';
 * - Example: const scrollDirection = 'up'; (all columns scroll up)
 * 
 * To adjust per-column speed variation:
 * - In login-background.js, modify the speedMultiplier calculation
 * - Current pattern creates speeds: 0.7x, 1.0x, 1.3x, repeating
 * 
 * Responsive column counts:
 * - Large screens (>768px): 6 columns
 * - Medium screens (481-768px): 4 columns  
 * - Small screens (≤480px): 2 columns
 */

.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade-in */
}

.login-background.loaded {
    opacity: 0.40; /* Show when loaded */
}

.image-column {
    position: absolute;
    width: 16.666%; /* Default for 6 columns on large screens */
    height: 200vh; /* Double height for seamless scrolling */
    overflow: hidden;
}

.column-images {
    display: flex;
    flex-direction: column;
    height: 200%;
}

.background-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    margin-bottom: 4px;
    border-radius: 2px;
}

/* Animation Configuration Variables */
:root {
    --base-animation-duration-up: 500s;    /* Base duration for up scroll - easily configurable */
    --base-animation-duration-down: 400s;  /* Base duration for down scroll - easily configurable */
}

.scroll-up .column-images {
    animation: scrollUp calc(var(--base-animation-duration-up) / var(--animation-speed-multiplier, 1)) linear infinite;
}

.scroll-down .column-images {
    animation: scrollDown calc(var(--base-animation-duration-down) / var(--animation-speed-multiplier, 1)) linear infinite;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-background.loaded {
        opacity: 0.15;
    }
    
    .image-column {
        width: 25%; /* 100% / 4 columns on medium screens */
    }
}

@media (max-width: 480px) {
    .login-background.loaded {
        opacity: 0.10;
    }
    
    .image-column {
        width: 50%; /* 100% / 2 columns on small screens */
    }
}