/**
 * CAFÉ NOIR THEME STYLES
 */

/* ============================================
   1. BACKGROUND & LAYOUT
   ============================================ */

body.theme-bistro-lounge {
    background-color: #1e110c !important;
    background-image:
        radial-gradient(circle at 50% 15%, rgba(212, 163, 115, 0.22) 0%, transparent 60%),
        radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.5) 0%, #170d0a 100%) !important;
    --z-particles-back: 25;
    --z-particles-mid: 35;
    --z-particles-front: 55;
}

body.theme-bistro-lounge::before {
    content: none !important;
}

/* Ambient window light shafts overlay */
body.theme-bistro-lounge::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 30%, rgba(250, 237, 205, 0.04) 40%, rgba(212, 163, 115, 0.08) 45%, rgba(250, 237, 205, 0.04) 50%, transparent 60%),
        linear-gradient(125deg, transparent 65%, rgba(212, 163, 115, 0.06) 70%, rgba(250, 237, 205, 0.03) 75%, transparent 80%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    animation: bistro-beams-breath 12s ease-in-out infinite alternate;
}

@keyframes bistro-beams-breath {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 0.95;
    }
}

/* Coffee Stain & Paper Texture Overlay */
body.theme-bistro-lounge .theme-texture {
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Ccircle cx='310' cy='120' r='55' fill='none' stroke='%234a3b32' stroke-width='1.5' filter='blur(2.5px)' stroke-dasharray='50 120 100 20' opacity='0.4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: bottom left, center;
    background-size: 500px 500px, auto;
    opacity: 0.20;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   2. WOOD THEME FRAME
   ============================================ */

body.theme-bistro-lounge .theme-frame {
    opacity: 1;
    border: 14px solid #36221a;
    /* Dark roasted wood */
    border-radius: 8px;
    z-index: 50;
    pointer-events: none;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.85),
        0 15px 35px rgba(0, 0, 0, 0.6);
}

body.theme-bistro-lounge .theme-frame-inner {
    position: absolute;
    inset: 3px;
    border: 2px solid rgba(212, 163, 115, 0.2);
    border-radius: 4px;
}

body.theme-bistro-lounge .frame-rail {
    display: none !important;
}

body.border-hidden.theme-bistro-lounge .theme-frame {
    opacity: 0 !important;
    pointer-events: none;
}

body.border-hidden.theme-bistro-lounge .sway-layer {
    opacity: 0 !important;
    pointer-events: none;
}

/* ============================================
   3. SWAY LAYERS (EDISON BULBS)
   ============================================ */

body.theme-bistro-lounge .sway-layer {
    position: absolute;
    z-index: 30;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

body.theme-bistro-lounge:not(.is-loading) .sway-layer {
    opacity: 0.85;
}

/* bistro Noir Custom Lights Container */
body.theme-bistro-lounge .bistro-lights-container {
    position: absolute;
    top: 14px;
    /* Hangs below top wooden frame border */
    left: -40px;
    right: -40px;
    height: 120px;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
}

body.border-hidden.theme-bistro-lounge .bistro-lights-container {
    opacity: 0 !important;
}

body.theme-bistro-lounge .bistro-wire {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-repeat: repeat-x;
    background-size: 120px 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' width='120' height='40'><path d='M0,15 Q60,35 120,15' fill='none' stroke='%232b1b17' stroke-width='2' stroke-linecap='round'/></svg>") !important;
}

body.theme-bistro-lounge .bistro-bulb-loop {
    position: absolute;
    top: 23px;
    /* Attachment at loop bottom */
    width: 40px;
    height: 80px;
    margin-left: -20px;
    /* Center horizontally */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80' width='40' height='80'><defs><radialGradient id='glowGrad' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23ffffff' stop-opacity='1'/><stop offset='25%25' stop-color='%23ffca28' stop-opacity='0.9'/><stop offset='60%25' stop-color='%23ff8f00' stop-opacity='0.35'/><stop offset='100%25' stop-color='%23ff8f00' stop-opacity='0'/></radialGradient></defs><line x1='20' y1='0' x2='20' y2='15' stroke='%232b1b17' stroke-width='1.5'/><rect x='16' y='15' width='8' height='10' fill='%234a3b32' rx='1'/><circle cx='20' cy='38' r='20' fill='url(%23glowGrad)'/><ellipse cx='20' cy='38' rx='9' ry='12' fill='none' stroke='%23ffb300' stroke-width='1' opacity='0.85'/><path d='M18,33 L18,42 Q20,45 22,42 L22,33' fill='none' stroke='%23ff8f00' stroke-width='1'/></svg>") !important;
}

body.theme-bistro-lounge .bistro-bulb-peak {
    position: absolute;
    top: 15px;
    /* Attachment at peak */
    width: 20px;
    height: 40px;
    margin-left: -10px;
    /* Center horizontally */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' width='20' height='40'><defs><radialGradient id='glowGrad' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23ffffff' stop-opacity='1'/><stop offset='25%25' stop-color='%23ffca28' stop-opacity='0.9'/><stop offset='60%25' stop-color='%23ff8f00' stop-opacity='0.35'/><stop offset='100%25' stop-color='%23ff8f00' stop-opacity='0'/></radialGradient></defs><line x1='10' y1='0' x2='10' y2='8' stroke='%232b1b17' stroke-width='1.5'/><rect x='7' y='8' width='6' height='6' fill='%234a3b32' rx='1'/><circle cx='10' cy='22' r='14' fill='url(%23glowGrad)'/></svg>") !important;
}

/* Pause State mapping */
body.theme-bistro-lounge.paused .bistro-bulb-loop,
body.theme-bistro-lounge.paused .bistro-bulb-peak,
body.theme-bistro-lounge .bistro-bulb-loop.paused,
body.theme-bistro-lounge .bistro-bulb-peak.paused {
    animation-play-state: paused !important;
}

/* Individual glimmer keyframes and mapping using the Draft slider variables */
@keyframes bistro-bulb-glimmer {
    0% {
        opacity: calc(0.35 + 0.15 * var(--frame-intensity, 0.5));
        filter: drop-shadow(0 0 calc(2px + 6px * var(--frame-intensity, 0.5)) rgba(255, 202, 40, 0.45));
    }

    100% {
        opacity: calc(0.7 + 0.3 * var(--frame-intensity, 0.5));
        filter: drop-shadow(0 0 calc(8px + 22px * var(--frame-intensity, 0.5)) rgba(255, 202, 40, 0.95)) drop-shadow(0 0 calc(12px + 30px * var(--frame-intensity, 0.5)) rgba(255, 143, 0, 0.7));
    }
}

body.theme-bistro-lounge .bistro-bulb-loop:nth-child(4n+2) {
    animation: bistro-bulb-glimmer calc(3.5s / var(--gust-speed, 1)) infinite alternate ease-in-out;
}

body.theme-bistro-lounge .bistro-bulb-loop:nth-child(4n) {
    animation: bistro-bulb-glimmer calc(4.2s / var(--gust-speed, 1)) infinite alternate ease-in-out;
    animation-delay: -1.8s;
}

body.theme-bistro-lounge .bistro-bulb-peak:nth-child(4n+1) {
    animation: bistro-bulb-glimmer calc(3.0s / var(--gust-speed, 1)) infinite alternate ease-in-out;
    animation-delay: -0.9s;
}

body.theme-bistro-lounge .bistro-bulb-peak:nth-child(4n+3) {
    animation: bistro-bulb-glimmer calc(2.6s / var(--gust-speed, 1)) infinite alternate ease-in-out;
    animation-delay: -1.3s;
}

/* Hide other default engine-generated sway layers to prevent styling bleed */
body.theme-bistro-lounge .sway-layer:not(.bistro-bulb-loop):not(.bistro-bulb-peak) {
    display: none !important;
}

/* ============================================
   4. LOGO BANNER (CHALKBOARD STYLE)
   ============================================ */

body.theme-bistro-lounge .logo-banner {
    position: relative !important;
    margin: 2rem 0 -1rem 0 !important;
    background: #1e1e21;
    /* slate chalkboard black */
    border: 8px solid #4a3327;
    /* wood frame border */
    outline: 2px dashed rgba(255, 255, 255, 0.35);
    /* dashed chalky line inside */
    border-radius: 4px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.65),
        inset 0 0 15px rgba(0, 0, 0, 0.85);
    padding: 14px 44px;
    z-index: 60;
    width: 100%;
    max-width: 420px;
    transform: rotate(-0.5deg) !important;
}

body.theme-bistro-lounge .logo-banner::after {
    content: none !important;
}

body.theme-bistro-lounge .logo-text-custom {
    font-family: var(--font-primary) !important;
    color: rgba(250, 237, 205, 0.95) !important;
    /* warm chalk color */
    text-shadow: 0 0 3px rgba(250, 237, 205, 0.45) !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
}

/* ============================================
   5. TYPOGRAPHY & TEXT STYLING
   ============================================ */

body.theme-bistro-lounge .event-title {
    font-family: var(--font-display) !important;
    /* Abril Fatface */
    color: var(--color-accent) !important;
    /* D4A373 */
    font-weight: normal;
    font-size: 5.2rem;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    text-transform: none;
}

body.theme-bistro-lounge .event-title::after {
    display: none !important;
}

body.theme-bistro-lounge .event-top-label {
    font-family: var(--font-primary) !important;
    /* Cabin */
    font-size: 1.8rem;
    color: var(--color-secondary) !important;
    /* FAEDCD */
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    margin-bottom: -2px;
}

body.theme-bistro-lounge .event-subtitle {
    font-family: var(--font-primary) !important;
    /* Cabin */
    font-size: 2rem;
    color: var(--color-secondary) !important;
    /* FAEDCD */
    letter-spacing: 6px;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    margin-top: 6px;
}

body.theme-bistro-lounge .event-date {
    font-family: var(--font-heading) !important;
    /* Abril Fatface */
    font-size: 1.4rem;
    color: var(--color-accent) !important;
    letter-spacing: 2px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
}

/* Hosts List Styles */
body.theme-bistro-lounge .hosts-title {
    font-family: var(--font-heading) !important;
    /* Abril Fatface */
    color: var(--color-accent) !important;
    font-size: calc(2.4rem * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

body.theme-bistro-lounge .hosts-list span {
    font-family: var(--font-primary) !important;
    /* Cabin */
    color: var(--color-secondary) !important;
    /* FAEDCD */
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

body.theme-bistro-lounge .hosts-list {
    padding: 0;
}

body.theme-bistro-lounge .hosts-container {
    position: relative;
    z-index: 60;
}

body.theme-bistro-lounge .hosts-container::before {
    content: '';
    position: absolute;
    inset: -10px -30px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, transparent 80%);
    opacity: var(--backdrop-opacity, 1);
    z-index: -1;
    pointer-events: none;
    filter: blur(8px);
}

/* ============================================
   6. CUSTOM STEAM & DUST PARTICLES
   ============================================ */

/* Steam rising */
body.theme-bistro-lounge .petal--bistro-steam {
    border-radius: 40% 60% 30% 70% / 50% 60% 40% 50% !important;
    filter: blur(9px) !important;
    box-shadow:
        0 0 15px rgba(250, 237, 205, 0.25),
        0 0 30px rgba(212, 163, 115, 0.15);
    opacity: 0.18 !important;
    background: linear-gradient(135deg, rgba(250, 237, 205, 0.22) 0%, rgba(212, 163, 115, 0.04) 100%) !important;
    animation: bistro-steam-wobble calc(6s + 3s * var(--windiness, 1)) ease-in-out infinite alternate;
}

@keyframes bistro-steam-wobble {
    0% {
        border-radius: 40% 60% 30% 70% / 50% 60% 40% 50% !important;
        opacity: 0.12;
        filter: blur(8px);
    }

    100% {
        border-radius: 60% 40% 70% 30% / 60% 40% 60% 40% !important;
        opacity: 0.24;
        filter: blur(10px);
    }
}

/* Dust motes */
body.theme-bistro-lounge .petal--bistro-dust {
    border-radius: 50% !important;
    filter: blur(1.2px) !important;
    box-shadow:
        0 0 8px rgba(250, 237, 205, 0.7),
        0 0 15px rgba(212, 163, 115, 0.3);
    opacity: 0.55 !important;
    animation: bistro-dust-glow 3.5s ease-in-out infinite alternate;
}

@keyframes bistro-dust-glow {
    0% {
        opacity: 0.3;
        filter: blur(1px);
    }

    100% {
        opacity: 0.75;
        filter: blur(1.4px);
    }
}

body.theme-bistro-lounge .event-footer,
body.theme-bistro-lounge .main-content {
    position: relative;
    z-index: 60 !important;
}

/* Balance adjustments for combo layout states */
body.theme-bistro-lounge.host-hidden .logo-banner {
    transform: translateY(10vh) scale(1.4) rotate(-0.5deg) !important;
}

body.theme-bistro-lounge.host-hidden .event-footer {
    transform: translateY(-5vh) scale(1.2) !important;
}

body.theme-bistro-lounge.host-hidden.date-hidden .logo-banner {
    transform: translateY(12vh) scale(1.5) rotate(-0.5deg) !important;
}

body.theme-bistro-lounge.host-hidden.date-hidden .event-footer {
    transform: translateY(-3vh) scale(1.3) !important;
}

/* 1600px and smaller screens */
@media (max-width: 1600px) {
    body.theme-bistro-lounge .logo-banner {
        scale: 0.8 !important;
        margin-top: 1rem !important;
    }

    body.theme-bistro-lounge .event-footer {
        scale: 0.9 !important;
    }

    body.theme-bistro-lounge .event-title {
        font-size: 4.2rem;
    }

    body.theme-bistro-lounge .hosts-list span {
        font-size: calc(1.4rem * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    }
}

/* 1601px and larger screens */
@media (min-width: 1601px) {
    body.theme-bistro-lounge .logo-banner {
        scale: 1.0 !important;
    }

    body.theme-bistro-lounge .event-footer {
        scale: 1.05 !important;
        margin-bottom: 2vh;
    }
}

/* Light mode overrides for high-contrast visibility */
body.theme-bistro-lounge.is-light-bg {
    background-color: var(--color-primary) !important;
    background-image:
        radial-gradient(circle at 50% 15%, rgba(var(--color-accent-rgb), 0.2) 0%, transparent 65%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.65) 0%, rgba(var(--color-primary-rgb), 0.9) 60%, var(--color-primary) 100%) !important;
}

body.theme-bistro-lounge.is-light-bg .theme-frame {
    border-color: #5c4033 !important;
    /* Lighter warm walnut wood */
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.35),
        0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

body.theme-bistro-lounge.is-light-bg .event-title,
body.theme-bistro-lounge.is-light-bg .hosts-title,
body.theme-bistro-lounge.is-light-bg .event-date {
    color: var(--color-dark-text) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

body.theme-bistro-lounge.is-light-bg .hosts-list span,
body.theme-bistro-lounge.is-light-bg .event-subtitle,
body.theme-bistro-lounge.is-light-bg .event-top-label {
    color: var(--color-dark-text) !important;
    text-shadow: none !important;
}

body.theme-bistro-lounge.is-light-bg .logo-banner {
    background: #202022 !important;
    /* Keep the classic dark slate chalkboard */
    border: 8px solid #5c4033 !important;
    /* Match warm walnut frame */
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(0, 0, 0, 0.8) !important;
}

body.theme-bistro-lounge.is-light-bg .logo-text-custom {
    color: rgba(250, 237, 205, 0.95) !important;
    text-shadow: 0 0 3px rgba(250, 237, 205, 0.4) !important;
}

body.theme-bistro-lounge.is-light-bg .theme-texture {
    opacity: 0.68 !important;
    /* Increase opacity of paper/leather grain on light backgrounds */
}