/**
 * ALPINE WINTER THEME STYLES
 */

/* Main Theme Frame - The Ski Lodge Window */
body.theme-alpine-winter .theme-frame {
    opacity: 1;
    border: none;
    padding: 28px;
    
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    /* PERFORMANCE: Use outline instead of a massive spread shadow for the 'wall' */
    outline: 100vmax solid var(--color-primary);

    background: transparent;
    z-index: 5; /* Move in front of global vignette (z:1) but behind content (z:50) */
}

/* Reinforce the "Wall" at the bottom edge to eliminate the 1px rounding gap/leak */
body.theme-alpine-winter .theme-frame::before {
    content: '';
    position: absolute;
    bottom: -26px;
    left: -10vw; /* Reduced from -100vw to minimize overfill */
    right: -10vw;
    height: 30px;
    background: var(--color-primary);
    z-index: -1;
    pointer-events: none;
}

/* Base style for all frame rails - Rustic Alpine Cabin Feel */
body.theme-alpine-winter .frame-rail {
    position: absolute;
    background-color: #90765a; /* Restored the warm timber brown */
    background-image: url('assets/images/wood-grain-rustic.png');
    background-blend-mode: multiply; /* Blends the rustic texture into the warm brown */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
    /* Warm up the look and remove the cold sepia/desaturation */
    filter: contrast(1.1) brightness(1.1) saturate(1.2);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

/* Horizontal Rails */
body.theme-alpine-winter .rail-top,
body.theme-alpine-winter .rail-bottom {
    height: 25px; /* Slightly chunkier for that cabin feel */
    left: 0; right: 0;
}

body.theme-alpine-winter .rail-top { 
    top: 0; 
    background-position: top center;
    clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 25px 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Top highlight */
}
body.theme-alpine-winter .rail-bottom { 
    bottom: 0; 
    clip-path: polygon(25px 0, calc(100% - 25px) 0, 100% 100%, 0 100%);
    border-top: 1px solid rgba(0,0,0,0.4);
}

/* Vertical Rails */
body.theme-alpine-winter .rail-left,
body.theme-alpine-winter .rail-right {
    width: 25px;
    top: 0; bottom: 0;
}

body.theme-alpine-winter .rail-left { 
    left: 0; 
    background-position: center left;
    clip-path: polygon(0 0, 100% 25px, 100% calc(100% - 25px), 0 100%);
    border-right: 1px solid rgba(0,0,0,0.3);
}
body.theme-alpine-winter .rail-right { 
    right: 0; 
    background-position: center right;
    clip-path: polygon(0 25px, 100% 0, 100% 100%, 0 calc(100% - 25px));
    border-left: 1px solid rgba(0,0,0,0.3);
}

/* Re-adjust the padding of the frame to match the chunkier 25px rails */
body.theme-alpine-winter .theme-frame {
    padding: 25px;
}

/* Inner frame shadow to bridge the gap to the glass */
body.theme-alpine-winter .theme-frame-inner {
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9),
                0 0 10px rgba(0,0,0,0.6);
}

/* Restore global particle layering (10, 20, 40) for better depth */
body.theme-alpine-winter .particle-layer {
    z-index: unset;
}

/* Inner glass edge */
body.theme-alpine-winter .theme-frame-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 15px rgba(255,255,255,0.15);
    z-index: 4;
    pointer-events: none;
}

/* The ::before and ::after are now used for wood frame beveling and highlights */

/* Ensure text is clearly in front of all window elements and particles */
body.theme-alpine-winter .main-content,
body.theme-alpine-winter .logo-banner,
body.theme-alpine-winter .event-footer {
    z-index: 50;
}

/* Texture Layer: Container for the Snow Squalls */
body.theme-alpine-winter .theme-texture {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2; /* In front of vignette (1) but behind frame (5) */
    pointer-events: none;
    contain: strict; /* Isolate this layer for better performance */
}

/* Hide Frame Logic */
body.border-hidden.theme-alpine-winter .theme-frame,
body.border-hidden.theme-alpine-winter .theme-texture {
    opacity: 0 !important;
    pointer-events: none;
}

/* Dual-layer Frost Breathing (Attached to the frame inner glass) */
body.theme-alpine-winter .theme-frame-inner::before,
body.theme-alpine-winter .theme-frame-inner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Frosted corners: multiple gradients focusing on the edges and corners */
    /* Frosted corners: multiple gradients focusing on the edges and corners */
    background: 
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 50%, rgba(255,255,255,0.2) 100%);
    pointer-events: none;
    z-index: 1; /* Relative to parent z-index: 4 */
}

/* Layer 1: Slow frost breathing (low intensity) */
body.theme-alpine-winter .theme-frame-inner::before {
    animation: window-frost-slow 25s infinite alternate ease-in-out;
}

/* Layer 2: Fast frost breathing (high intensity) */
body.theme-alpine-winter .theme-frame-inner::after {
    animation: window-frost-fast 10s infinite alternate ease-in-out;
}

@keyframes window-frost-slow {
    0%, 40% { opacity: calc(0.2 * (1 - var(--frame-intensity))); }
    80%, 100% { opacity: calc(1.0 * (1 - var(--frame-intensity))); }
}

@keyframes window-frost-fast {
    0%, 40% { opacity: calc(0.2 * var(--frame-intensity)); }
    80%, 100% { opacity: calc(1.0 * var(--frame-intensity)); }
}

/* Organic Snow Squall Overlays (Dual-layer to prevent duration-change flickering) */
body.theme-alpine-winter .theme-texture::before,
body.theme-alpine-winter .theme-texture::after {
    content: '';
    position: absolute;
    /* Larger than viewport to allow for transform-based movement without gaps */
    width: 200vw;
    height: 200vh;
    top: 0;
    left: 0;
    /* Soft clouds of snow using native gradients. rgba(0) prevents the dark-grey interpolation bug. */
    background-image: 
        radial-gradient(closest-side, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 90%),
        radial-gradient(closest-side, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 90%),
        radial-gradient(closest-side, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 90%);
    /* Keep the tile size relative to viewport for seamless integer multiples */
    background-size: 100vw 100vh, 50vw 50vh, 50vw 100vh;
    background-repeat: repeat;
    pointer-events: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force GPU acceleration layer */
}

/* Layer 1: Slow, calm mist (Fades out as intensity increases) */
body.theme-alpine-winter .theme-texture::before {
    opacity: calc(0.15 * (1 - var(--frame-intensity)));
    animation: squall-blow-slow 32s linear infinite;
}

/* Layer 2: Fast, heavy blizzard (Fades in as intensity increases) */
body.theme-alpine-winter .theme-texture::after {
    opacity: calc(0.9 * var(--frame-intensity));
    animation: squall-blow-fast 8s linear infinite;
}

/* 
   PERFORMANCE OPTIMIZATION:
   Animating 'transform' is significantly cheaper than 'background-position' 
   as it stays on the GPU/Compositor thread. We shift by exactly -100vw/-100vh
   to ensure the repeat pattern snaps perfectly.
*/
@keyframes squall-blow-slow {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100vw, -100vh, 0); }
}

@keyframes squall-blow-fast {
    /* Offset the start slightly so they don't look synchronized */
    0%   { transform: translate3d(-20vw, -20vh, 0); }
    100% { transform: translate3d(-120vw, -120vh, 0); }
}

/* Typography & Layout Overrides */
body.theme-alpine-winter .hosts-list span {
    font-size: calc(1.7rem * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-shadow: 0 3px 8px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
}

body.theme-alpine-winter .event-title {
    margin-top: -12px;
    margin-bottom: 2px;
    font-style: normal;
    font-weight: bold;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    color: #ffffff;
}

/* Readability Backdrop for Names - Centered behind the host list */
body.theme-alpine-winter .hosts-container {
    position: relative;
    z-index: 100;
}

body.theme-alpine-winter .hosts-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 120%;
    transform: translate(-50%, -50%);
    /* Lighter, more subtle radial gradient */
    background: radial-gradient(ellipse at center, rgba(44, 44, 44, 0.71), rgba(58, 58, 58, 0.03) 65.97%, transparent 85%);
    opacity: var(--backdrop-opacity, 0);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

/* Unify the surrounding labels to use the same font (Georgia) and style */
body.theme-alpine-winter .event-top-label,
body.theme-alpine-winter .event-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.8rem;
    letter-spacing: 0;

}

body.theme-alpine-winter .event-date {
    margin-top: -4px;
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0;
}

body.theme-alpine-winter .logo-banner {
    background: rgba(var(--color-primary-rgb), 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    padding: 16px 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin: 1rem 0 0 0;
    will-change: transform; /* Stabilize on its own compositor layer */
}

body.theme-alpine-winter .logo-text-custom {
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Light Mode Support */
body.theme-alpine-winter.is-light-bg .logo-banner {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

body.theme-alpine-winter.is-light-bg .logo-text-custom {
    color: #1B3B57 !important;
    text-shadow: none !important;
}

body.theme-alpine-winter.is-light-bg .hosts-list span,
body.theme-alpine-winter.is-light-bg .event-title,
body.theme-alpine-winter.is-light-bg .event-subtitle,
body.theme-alpine-winter.is-light-bg .event-date,
body.theme-alpine-winter.is-light-bg .event-top-label {
    text-shadow: 0 2px 4px rgba(255,255,255,0.8);
    color: #1B3B57;
}

/* Fullscreen Countdown Overlay */
body.theme-alpine-winter .fullscreen-countdown .countdown-content {
    background: rgba(var(--color-primary-rgb), 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

body.theme-alpine-winter .fullscreen-countdown .countdown-text {
    font-family: var(--font-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
}

body.theme-alpine-winter .fullscreen-countdown #countdown-number {
    color: #A9CCE3 !important;
}

/* Layout customizations */

/* Expand horizontal space for names */
body.theme-alpine-winter .main-content {
    max-width: 1800px;
}
@media (max-width:1800px) {
    body.theme-alpine-winter .event-footer {
        margin-bottom: 3vh;
    }
    body.theme-alpine-winter .hosts-container {
        margin:4vh 0 -4vh 0;
    }
    body.theme-alpine-winter .hosts-list span {
        font-size: calc(1.5rem * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    }
}

/* 1920x1080 / Large Screen Optimizations */
@media (min-width: 1801px) {
    body.theme-alpine-winter .logo-banner {
        scale: 1.2;
        transform-origin: top center;
        margin-top: 3rem;
    }

    body.theme-alpine-winter .hosts-list span {
        font-size: calc(1.9em * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    }

    body.theme-alpine-winter .hosts-list {
        margin-left: auto;
        margin-right: auto;

    }
    body.theme-alpine-winter .hosts-container{
        margin-top: 2.5vh;
        margin-bottom: -3vh;
    }

    body.theme-alpine-winter .event-footer {
        scale: 1.2;
        transform-origin: bottom center;
        margin-bottom: 2vh;
    }
    body.theme-alpine-winter.host-hidden .event-footer {
        margin-bottom: unset !important;
        transform: translateY(-4rem) scale(1.8);
    }

    body.theme-alpine-winter.host-hidden .logo-banner {
        transform: translateY(-0.5rem) scale(2);
    }
}