/**
 * ART DECO / ART DECO GALA THEME STYLES
 * Color palette: Rich Roaring Black · Radiant Metallic Gold · Champagne Gold
 */

/* ============================================================
   1. Background – Deep Night Art Deco Sky & Rotating Sunburst
   ============================================================ */
body.theme-art-deco-gala {
    position: relative;
    background:
        radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.15) 0%, transparent 65%),
        radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.75) 100%),
        linear-gradient(180deg,
            #030304 0%,
            var(--color-primary) 50%,
            #000000 100%) !important;

    /* Dynamic gold linear gradient utilizing swatch secondary/accent and specular highlights */
    --gold-metallic: linear-gradient(135deg,
            var(--color-secondary) 0%,
            var(--color-accent) 35%,
            #fffdeb 50%,
            var(--color-accent) 65%,
            var(--color-secondary) 100%);
}

/* Repeating geometric double-diamond and line grid */
body.theme-art-deco-gala .theme-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg stroke='%23D4AF37' stroke-width='0.6' fill='none' opacity='0.28'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' /%3E%3Cpath d='M30 5 L55 30 L30 55 L5 30 Z' /%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30 Z' /%3E%3Cpath d='M30 15 L45 30 L30 45 L15 30 Z' /%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60' /%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
    opacity: calc(0.4 + 0.6 * var(--frame-intensity));
    animation: art-deco-pattern-drift calc(120s / var(--gust-speed, 1)) linear infinite;
    z-index: 1;
    pointer-events: none;
    will-change: background-position;
}

/* Slow-rotating background sunburst rays (Art Deco theatrical rays) */
body.theme-art-deco-gala .theme-texture::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 3deg,
            rgba(212, 175, 55, 0.035) 3deg 6deg,
            transparent 6deg 12deg);
    animation: art-deco-sunburst-rotate 240s linear infinite;
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

@keyframes art-deco-pattern-drift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 150px 150px;
    }
}

@keyframes art-deco-sunburst-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================
   2. Theme Frame – Stepped Pinstripe Gold Border & Geometric Corners
   ============================================================ */
body.theme-art-deco-gala .theme-frame {
    opacity: 1;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: none !important;
    outline: none !important;
    border-image: none !important;
    border-radius: 0 !important;
    z-index: 50;
    pointer-events: none;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.75),
        inset 0 0 15px rgba(var(--color-accent-rgb), 0.05) !important;
}

/* Style and position the four decorative horizontal/vertical rails */
body.theme-art-deco-gala .frame-rail {
    display: block !important;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 52;
    pointer-events: none;
}

body.theme-art-deco-gala .rail-top {
    top: -2px;
    left: 110px;
    right: 110px;
    height: 16px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='2' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='5' width='100' height='6' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='14' width='100' height='2' fill='url(%23gold-metal)' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='2' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='5' width='100' height='6' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='14' width='100' height='2' fill='url(%23gold-metal)' /%3E%3C/svg%3E");
    background-position: left center, right center;
    background-size: calc(50% - 80px) 100%, calc(50% - 80px) 100%;
    background-repeat: no-repeat, no-repeat;
}

body.theme-art-deco-gala .rail-bottom {
    bottom: -2px;
    left: 110px;
    right: 110px;
    height: 16px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='2' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='5' width='100' height='6' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='14' width='100' height='2' fill='url(%23gold-metal)' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='2' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='5' width='100' height='6' fill='url(%23gold-metal)' /%3E%3Crect x='0' y='14' width='100' height='2' fill='url(%23gold-metal)' /%3E%3C/svg%3E");
    background-position: left center, right center;
    background-size: calc(50% - 80px) 100%, calc(50% - 80px) 100%;
    background-repeat: no-repeat, no-repeat;
}

body.theme-art-deco-gala .rail-left {
    left: -2px;
    top: 110px;
    bottom: 110px;
    width: 16px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='100' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='5' y='0' width='6' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='14' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='100' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='5' y='0' width='6' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='14' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3C/svg%3E");
    background-position: center top, center bottom;
    background-size: 100% calc(50% - 60px), 100% calc(50% - 60px);
    background-repeat: no-repeat, no-repeat;
}

body.theme-art-deco-gala .rail-right {
    right: -2px;
    top: 110px;
    bottom: 110px;
    width: 16px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='100' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='5' y='0' width='6' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='14' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='100' viewBox='0 0 16 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%238C6F2D' /%3E%3Cstop offset='30%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%23FFECA0' /%3E%3Cstop offset='70%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='5' y='0' width='6' height='100' fill='url(%23gold-metal)' /%3E%3Crect x='14' y='0' width='2' height='100' fill='url(%23gold-metal)' /%3E%3C/svg%3E");
    background-position: center top, center bottom;
    background-size: 100% calc(50% - 60px), 100% calc(50% - 60px);
    background-repeat: no-repeat, no-repeat;
}

/* Radiating seashell/fan ornaments inside the rail gaps */
body.theme-art-deco-gala .rail-top::before,
body.theme-art-deco-gala .rail-bottom::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30' viewBox='0 0 160 30'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFECA0' /%3E%3Cstop offset='40%25' stop-color='%23D4AF37' /%3E%3Cstop offset='70%25' stop-color='%238C6F2D' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23gold-metal)' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 70,26 L 70,20 L 74,20 L 74,13 L 77,13 L 77,6 L 83,6 L 83,13 L 86,13 L 86,20 L 90,20 L 90,26' stroke-width='1.5' /%3E%3Cpath d='M 66,26 L 66,22 L 71,22 L 71,15 L 75,15 L 75,9 L 85,9 L 85,15 L 89,15 L 89,22 L 94,22 L 94,26' opacity='0.5' stroke-width='0.75' /%3E%3Cline x1='80' y1='26' x2='80' y2='6' stroke-width='2' /%3E%3Cline x1='80' y1='26' x2='73' y2='9' stroke-width='1.5' /%3E%3Cline x1='80' y1='26' x2='87' y2='9' stroke-width='1.5' /%3E%3Cline x1='80' y1='26' x2='68' y2='17' stroke-width='1.25' /%3E%3Cline x1='80' y1='26' x2='92' y2='17' stroke-width='1.25' /%3E%3Cpolygon points='80,21 84,25 80,29 76,25' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpath d='M 66,22 L 59,15' stroke-width='1.5' /%3E%3Cline x1='59' y1='15' x2='30' y2='15' stroke-width='1.5' /%3E%3Cline x1='66' y1='22' x2='12' y2='22' stroke-width='2' /%3E%3Cline x1='59' y1='29' x2='30' y2='29' stroke-width='1.5' /%3E%3Cpath d='M 66,22 L 59,29' stroke-width='1.5' /%3E%3Cpolygon points='30,15 33,12 30,9 27,12' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='12,22 16,18 12,14 8,18' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='30,29 33,26 30,23 27,26' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpath d='M 94,22 L 101,15' stroke-width='1.5' /%3E%3Cline x1='101' y1='15' x2='130' y2='15' stroke-width='1.5' /%3E%3Cline x1='94' y1='22' x2='148' y2='22' stroke-width='2' /%3E%3Cline x1='101' y1='29' x2='130' y2='29' stroke-width='1.5' /%3E%3Cpath d='M 94,22 L 101,29' stroke-width='1.5' /%3E%3Cpolygon points='130,15 133,12 130,9 127,12' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='148,22 152,18 148,14 144,18' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='130,29 133,26 130,23 127,26' fill='url(%23gold-metal)' stroke='none' /%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 56;
}

body.theme-art-deco-gala .rail-left::before,
body.theme-art-deco-gala .rail-right::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='120' viewBox='0 0 30 120'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23FFECA0' /%3E%3Cstop offset='40%25' stop-color='%23D4AF37' /%3E%3Cstop offset='70%25' stop-color='%238C6F2D' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23gold-metal)' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 4,50 L 10,50 L 10,54 L 17,54 L 17,57 L 24,57 L 24,63 L 17,63 L 17,66 L 10,66 L 10,70 L 4,70' stroke-width='1.5' /%3E%3Cpath d='M 8,46 L 14,46 L 14,50 L 21,50 L 21,55 L 26,55 L 26,65 L 21,65 L 21,70 L 14,70 L 14,74 L 8,74' opacity='0.5' stroke-width='0.75' /%3E%3Cline x1='4' y1='60' x2='24' y2='60' stroke-width='2' /%3E%3Cline x1='4' y1='60' x2='21' y2='53' stroke-width='1.5' /%3E%3Cline x1='4' y1='60' x2='21' y2='67' stroke-width='1.5' /%3E%3Cline x1='4' y1='60' x2='14' y2='48' stroke-width='1.25' /%3E%3Cline x1='4' y1='60' x2='14' y2='72' stroke-width='1.25' /%3E%3Cpolygon points='9,60 13,56 17,60 13,64' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpath d='M 8,46 L 15,39' stroke-width='1.5' /%3E%3Cline x1='15' y1='39' x2='15' y2='10' stroke-width='1.5' /%3E%3Cline x1='8' y1='46' x2='8' y2='22' stroke-width='2' /%3E%3Cline x1='22' y1='39' x2='22' y2='30' stroke-width='1.5' /%3E%3Cpath d='M 8,46 L 22,39' stroke-width='1.5' /%3E%3Cpolygon points='15,10 18,13 15,16 12,13' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='8,22 11,25 8,28 5,25' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='22,30 25,33 22,36 19,33' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpath d='M 8,74 L 15,81' stroke-width='1.5' /%3E%3Cline x1='15' y1='81' x2='15' y2='110' stroke-width='1.5' /%3E%3Cline x1='8' y1='74' x2='8' y2='98' stroke-width='2' /%3E%3Cline x1='22' y1='81' x2='22' y2='90' stroke-width='1.5' /%3E%3Cpath d='M 8,74 L 22,81' stroke-width='1.5' /%3E%3Cpolygon points='15,110 18,107 15,104 12,107' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='8,98 11,95 8,92 5,95' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='22,90 25,87 22,84 19,87' fill='url(%23gold-metal)' stroke='none' /%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 56;
}

/* Luxurious Geometric Art Deco Corners with diagonal metallic gradients */
body.theme-art-deco-gala .theme-frame::before,
body.theme-art-deco-gala .theme-frame::after,
body.theme-art-deco-gala .theme-frame-inner::before,
body.theme-art-deco-gala .theme-frame-inner::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='gold-metal' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23FFECA0' /%3E%3Cstop offset='25%25' stop-color='%23D4AF37' /%3E%3Cstop offset='50%25' stop-color='%238C6F2D' /%3E%3Cstop offset='75%25' stop-color='%23D4AF37' /%3E%3Cstop offset='100%25' stop-color='%23594418' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23gold-metal)' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 2 120 L 2 2 L 120 2' stroke-width='4.5' /%3E%3Cpath d='M 10 120 L 10 10 L 120 10' stroke-width='2' /%3E%3Cpath d='M 16 120 L 16 16 L 120 16' stroke-width='1.5' /%3E%3Cpath d='M 22 120 L 22 22 L 120 22' stroke-width='0.75' opacity='0.7' /%3E%3Cpolygon points='28,28 65,28 65,37 37,37 37,65 28,65' fill='url(%23gold-metal)' fill-opacity='0.18' stroke='none' /%3E%3Cpolygon points='28,28 48,28 48,37 37,37 37,48 28,48' fill='url(%23gold-metal)' fill-opacity='0.4' stroke='none' /%3E%3Cline x1='2' y1='2' x2='56' y2='56' stroke-width='2.5' /%3E%3Cpolygon points='64,52 76,64 64,76 52,64' fill='url(%23gold-metal)' stroke='none' /%3E%3Cpolygon points='64,46 82,64 64,82 46,64' stroke-width='1.5' /%3E%3Cpolygon points='64,40 88,64 64,88 40,64' stroke-width='0.75' opacity='0.6' /%3E%3Cpolygon points='16,10 22,16 16,22 10,16' fill='url(%23gold-metal)' stroke='none' /%3E%3Cline x1='16' y1='16' x2='50' y2='22' stroke-width='1' /%3E%3Cline x1='16' y1='16' x2='44' y2='30' stroke-width='1.25' /%3E%3Cline x1='16' y1='16' x2='30' y2='44' stroke-width='1.25' /%3E%3Cline x1='16' y1='16' x2='22' y2='50' stroke-width='1' /%3E%3Cpath d='M 42,16 A 26,26 0 0,1 16,42' stroke-width='1.25' /%3E%3Cpath d='M 48,16 A 32,32 0 0,1 16,48' stroke-width='0.75' stroke-dasharray='3,3' /%3E%3Cline x1='76' y1='10' x2='76' y2='22' stroke-width='1.5' /%3E%3Cline x1='86' y1='10' x2='86' y2='22' stroke-width='1.5' /%3E%3Cline x1='96' y1='16' x2='96' y2='22' stroke-width='1' /%3E%3Cline x1='10' y1='76' x2='22' y2='76' stroke-width='1.5' /%3E%3Cline x1='10' y1='86' x2='22' y2='86' stroke-width='1.5' /%3E%3Cline x1='16' y1='96' x2='22' y2='96' stroke-width='1' /%3E%3C/g%3E%3C/svg%3E");
}

/* Position top corners relative to outer frame */
body.theme-art-deco-gala .theme-frame::before {
    top: -2px;
    left: -2px;
}

body.theme-art-deco-gala .theme-frame::after {
    top: -2px;
    right: -2px;
    transform: rotate(90deg);
}

/* Position bottom corners relative to outer frame size (inner frame overlays 1:1) */
body.theme-art-deco-gala .theme-frame-inner::before {
    bottom: -2px;
    left: -2px;
    transform: rotate(270deg);
}

body.theme-art-deco-gala .theme-frame-inner::after {
    bottom: -2px;
    right: -2px;
    transform: rotate(180deg);
}

/* Inner frame container for bottom corners - matched 1:1 with outer bounds (no clipping) */
body.theme-art-deco-gala .theme-frame-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================
   3. Spotlight Beams (Swing slowly from the top of viewport)
   ============================================================ */
body.theme-art-deco-gala .content-wrapper::before,
body.theme-art-deco-gala .content-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    width: 60%;
    height: 200%;
    transform-origin: top center;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
    transition: opacity 1.2s ease;
}

body.theme-art-deco-gala .content-wrapper::before {
    left: 5%;
    background: radial-gradient(ellipse at top,
            rgba(var(--color-accent-rgb), 0.28) 0%,
            rgba(var(--color-accent-rgb), 0.05) 50%,
            transparent 80%);
    animation: art-deco-spot-left calc(20s / var(--gust-speed, 1)) ease-in-out infinite alternate;
}

body.theme-art-deco-gala .content-wrapper::after {
    right: 5%;
    background: radial-gradient(ellipse at top,
            rgba(var(--color-secondary-rgb), 0.28) 0%,
            rgba(var(--color-secondary-rgb), 0.05) 50%,
            transparent 80%);
    animation: art-deco-spot-right calc(16s / var(--gust-speed, 1)) ease-in-out infinite alternate;
}

@keyframes art-deco-spot-left {
    0% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes art-deco-spot-right {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(15deg);
    }
}

/* ============================================================
   4. Disable / Hide Unused Sway Layers (No Cartoon Elements)
   ============================================================ */
body.theme-art-deco-gala .floral-bg {
    display: none !important;
}

body.theme-art-deco-gala .sway-layer {
    display: none !important;
}

/* ============================================================
   5. Logo Banner – Double Gold Plaque Frame
   ============================================================ */
body.theme-art-deco-gala .logo-banner {
    position: relative;
    margin-top: 65px !important;
    margin-bottom: -10px !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    max-width: 440px !important;
}

body.theme-art-deco-gala:not(.is-light-bg) .logo-banner {
    background: rgba(11, 11, 12, var(--backdrop-opacity, 0.70)) !important;
    border: 1px solid rgba(var(--color-accent-rgb), calc(0.9 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, calc(0.7 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        0 0 25px rgba(var(--color-accent-rgb), calc(0.12 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 3px rgba(11, 11, 12, calc(0.95 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 4px rgba(var(--color-accent-rgb), calc(0.3 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
}



body.theme-art-deco-gala .logo-banner::before {
    display: none !important;
}

body.theme-art-deco-gala .logo-text-custom,
body.theme-art-deco-gala #logo-img {
    position: relative;
    z-index: 2;
}

body.theme-art-deco-gala .logo-text-custom {
    font-family: var(--font-display);
    color: var(--color-accent) !important;
    font-size: 1.85rem !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 2px;
    font-weight: normal;
}

/* ============================================================
   6. Hosts Container – Double Gold Plaque Frame with Compact Spacing
   ============================================================ */
body.theme-art-deco-gala .hosts-container {
    position: relative;
    padding: 20px 24px !important;
    margin: 2vh auto 0 auto !important;
    max-width: calc(var(--host-max-width) - 200px) !important;
    border-radius: 4px !important;
    z-index: 100;
}

body.theme-art-deco-gala:not(.is-light-bg) .hosts-container {
    background: rgba(11, 11, 12, var(--backdrop-opacity, 0.70)) !important;
    border: 1px solid rgba(var(--color-accent-rgb), calc(0.9 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, calc(0.85 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        0 0 40px rgba(var(--color-accent-rgb), calc(0.16 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 3px rgba(11, 11, 12, calc(0.95 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 4.5px rgba(var(--color-accent-rgb), calc(0.3 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 20px rgba(var(--color-accent-rgb), calc(0.08 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
}



/* ============================================================
   7. Typography & Dividers
   ============================================================ */
body.theme-art-deco-gala .event-title {
    font-family: var(--font-display) !important;
    color: var(--color-accent) !important;
    font-weight: normal;
    font-size: 5rem;
    letter-spacing: 1px;
    text-shadow:
        0 0 20px rgba(var(--color-accent-rgb), 0.25),
        2px 2px 5px rgba(0, 0, 0, 0.9) !important;
}

body.theme-art-deco-gala .event-top-label {
    font-family: var(--font-heading) !important;
    font-size: 1.6rem;
    color: var(--color-secondary) !important;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

body.theme-art-deco-gala .event-subtitle {
    font-family: var(--font-heading) !important;
    font-size: 1.8rem;
    color: var(--color-secondary) !important;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
    margin-top: 10px;
}

body.theme-art-deco-gala .event-date {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem;
    color: #ffffff !important;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
    margin-top: 5px;
}

/* Art Deco Stepped Dividers */
body.theme-art-deco-gala .hosts-title::after {
    content: '';
    display: block;
    width: 200px;
    height: 20px;
    margin: 15px auto 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20'%3E%3Cg stroke='%23D4AF37' stroke-width='1.5' fill='none'%3E%3Cpolygon points='100,2 105,10 100,18 95,10' fill='%23D4AF37'/%3E%3Cpath d='M 85,10 L 40,10 M 115,10 L 160,10'/%3E%3Cpath d='M 75,6 L 50,6 M 125,6 L 150,6'/%3E%3Cpath d='M 75,14 L 50,14 M 125,14 L 150,14'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23D4AF37'/%3E%3Ccircle cx='170' cy='10' r='2' fill='%23D4AF37'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.95;
}

body.theme-art-deco-gala .event-subtitle::after {
    content: '';
    display: block;
    width: 300px;
    height: 10px;
    margin: 12px auto 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='10' viewBox='0 0 300 10'%3E%3Cg stroke='%23D4AF37' stroke-width='1.5' fill='none'%3E%3Cpolygon points='150,1 154,5 150,9 146,5' fill='%23D4AF37'/%3E%3Cline x1='135' y1='5' x2='30' y2='5' stroke-width='1'/%3E%3Cline x1='165' y1='5' x2='270' y2='5' stroke-width='1'/%3E%3Cpath d='M 125,2 L 125,5' stroke-width='1.5'/%3E%3Cpath d='M 175,2 L 175,5' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.95;
}

body.theme-art-deco-gala .hosts-title {
    font-family: var(--font-heading) !important;
    color: var(--color-accent) !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

body.theme-art-deco-gala .hosts-list span {
    font-family: var(--font-primary) !important;
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}

body.theme-art-deco-gala .hosts-list {
    padding: 0;
}

/* ============================================================
   8. Particles – Gold Diamonds, Sparkles & Champagne Bubbles
   ============================================================ */

/* Gold Diamonds (Art Deco geometry) */
body.theme-art-deco-gala .petal--art-deco-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: art-deco-diamond-shimmer 2.4s ease-in-out infinite alternate;
}

@keyframes art-deco-diamond-shimmer {
    0% {
        opacity: 0.3;
        filter: brightness(0.8);
    }

    100% {
        opacity: 0.95;
        filter: brightness(1.4);
    }
}

/* Sparkles – Geometric 4-Point Star */
body.theme-art-deco-gala .petal--art-deco-sparkle {
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: art-deco-sparkle-shimmer 1.8s ease-in-out infinite alternate;
}

@keyframes art-deco-sparkle-shimmer {
    0% {
        opacity: 0.15;
        filter: brightness(0.65);
    }

    100% {
        opacity: 1.0;
        filter: brightness(1.6);
    }
}

/* Champagne Bubbles (rising circles with 3D highlight) */
body.theme-art-deco-gala .petal--art-deco-bubble {
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.55) !important;
    box-shadow:
        inset 0 0 6px rgba(var(--color-accent-rgb), 0.3),
        0 2px 5px rgba(0, 0, 0, 0.2);
    animation: art-deco-bubble-glow 2.5s ease-in-out infinite alternate;
}

body.theme-art-deco-gala .petal--art-deco-bubble::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 2.5px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
}

@keyframes art-deco-bubble-glow {
    0% {
        opacity: 0.35;
        filter: brightness(0.8);
    }

    100% {
        opacity: 0.9;
        filter: brightness(1.3);
    }
}

/* ============================================================
   9. Border-hidden Override
   ============================================================ */
body.border-hidden.theme-art-deco-gala .theme-frame,
body.border-hidden.theme-art-deco-gala .theme-texture,
body.border-hidden.theme-art-deco-gala .theme-frame-inner,
body.border-hidden.theme-art-deco-gala .hosts-container {
    opacity: 0 !important;
    pointer-events: none;
    animation-play-state: paused !important;
}

/* ============================================================
   10. Countdown Overlay Override
   ============================================================ */
body.theme-art-deco-gala .fullscreen-countdown .countdown-content {
    background: rgba(11, 11, 12, 0.98) !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow:
        0 0 25px rgba(var(--color-accent-rgb), 0.45),
        inset 0 0 15px rgba(var(--color-accent-rgb), 0.2) !important;
    border-radius: 4px !important;
}

body.theme-art-deco-gala .fullscreen-countdown .countdown-text {
    font-family: var(--font-primary) !important;
    color: #ffffff !important;
}

body.theme-art-deco-gala .fullscreen-countdown #countdown-number {
    color: var(--color-accent) !important;
    text-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.8) !important;
}

/* ============================================================
   11. Layout / Responsive Scaling Rules
   ============================================================ */
body.theme-art-deco-gala .main-content {
    max-width: 1700px;
    z-index: 60;
}

/* Remove default translation offsets that break vertical spacing on widescreen */
body.theme-art-deco-gala:not(.date-hidden):not(.title-hidden):not(.logo-hidden):not(.host-hidden) .logo-banner,
body.theme-art-deco-gala:not(.date-hidden):not(.title-hidden):not(.logo-hidden):not(.host-hidden) .hosts-container {
    transform: none !important;
}

@media (max-width: 1800px) {
    body.theme-art-deco-gala .hosts-list span {
        font-size: calc(1.4em * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    }

    body.theme-art-deco-gala .hosts-container {
        margin: 1.5vh auto 0 auto !important;
        padding: 16px 20px !important;
        max-width: calc(var(--host-max-width) - 100px) !important;
    }

    body.theme-art-deco-gala .event-footer {
        margin-bottom: 0.5vh;
    }
}

/* ============================================================
   14-inch MacBook Pro (1512 × 945) — Tightened spacing
   ============================================================ */
@media (max-width: 1600px) and (max-height: 1000px) {

    /* Pull the logo banner much closer to the top edge */
    body.theme-art-deco-gala .logo-banner {
        margin-top: 28px !important;
        margin-bottom: -6px !important;
        padding: 8px 20px !important;
    }

    /* Compact the patrons plaque */
    body.theme-art-deco-gala .hosts-container {
        margin: 3vh auto 0 auto !important;
        padding: 12px 20px !important;
        max-width: 78vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Tighten the ornamental divider below the hosts title */
    body.theme-art-deco-gala .hosts-title::after {
        margin: 8px auto 0 auto;
        height: 16px;
    }

    /* Slightly smaller footer text so it breathes */
    body.theme-art-deco-gala .event-top-label {
        font-size: 1.35rem;
    }

    body.theme-art-deco-gala .event-title {
        font-size: 4.2rem;
    }

    body.theme-art-deco-gala .event-subtitle {
        font-size: 1.5rem;
        margin-top: 4px;
    }

    body.theme-art-deco-gala .event-date {
        font-size: 1.1rem;
        margin-top: 2px;
    }

    /* Nudge footer slightly inward so date line clears the frame rail */
    body.theme-art-deco-gala .event-footer {
        margin-bottom: 2px;
    }
}

@media (min-width: 1801px) {
    body.theme-art-deco-gala .logo-banner {
        scale: 1.15;
        margin-top: 1.5vh !important;
    }

    body.theme-art-deco-gala .hosts-list span {
        font-size: calc(1.62em * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    }

    body.theme-art-deco-gala .hosts-container {
        margin: 6.5vh auto 0 auto !important;
    }

    body.theme-art-deco-gala .event-footer {
        scale: 1.15;
        margin-bottom: 1.5vh;
    }
}

/* Play/Pause Animation State Bindings */
body.theme-art-deco-gala .theme-texture,
body.theme-art-deco-gala .theme-texture::after,
body.theme-art-deco-gala .content-wrapper::before,
body.theme-art-deco-gala .content-wrapper::after {
    animation-play-state: var(--grid-play-state, running);
}

/* ============================================================
   12. Light Background Adaptations (Inverted / Ivory Swatch)
   ============================================================ */
body.theme-art-deco-gala.is-light-bg {
    background:
        radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.15) 0%, transparent 65%),
        radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.08) 100%),
        linear-gradient(180deg,
            var(--color-primary) 0%,
            var(--color-primary) 100%) !important;
}

body.theme-art-deco-gala.is-light-bg .event-title {
    color: var(--color-dark-text) !important;
    text-shadow: none !important;
}

body.theme-art-deco-gala.is-light-bg .theme-frame {
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.08),
        inset 0 0 15px rgba(var(--color-accent-rgb), 0.03) !important;
}

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

body.theme-art-deco-gala.is-light-bg .logo-banner {
    background: rgba(255, 255, 255, var(--backdrop-opacity, 0.70)) !important;
    border: 1px solid rgba(var(--color-accent-rgb), calc(0.35 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, calc(0.08 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 3px rgba(var(--color-accent-rgb), calc(0.15 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
}

body.theme-art-deco-gala.is-light-bg .logo-banner::before {
    background: #FAF5EC;
}

body.theme-art-deco-gala.is-light-bg .hosts-container {
    background: rgba(255, 255, 255, var(--backdrop-opacity, 0.70)) !important;
    border: 1px solid rgba(var(--color-accent-rgb), calc(0.35 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, calc(0.07 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)),
        inset 0 0 0 3px rgba(var(--color-accent-rgb), calc(0.15 * var(--backdrop-opacity, 0.70) * var(--backdrop-opacity, 0.70) / 0.49)) !important;
}

body.theme-art-deco-gala.is-light-bg .logo-text-custom {
    color: var(--color-dark-text) !important;
    text-shadow: none !important;
}