/**
 * minimal ELEGANCE THEME STYLES
 * Gallery white · Gold accents · Architectural precision
 */

/* ============================================================
   THEME FRAME & BASE
   ============================================================ */

body.theme-minimal-elegance .theme-frame {
    opacity: 1;
    border: none;
    background: transparent;
    z-index: 0 !important;
}

/* Hide unused rail elements */
body.theme-minimal-elegance .rail-top,
body.theme-minimal-elegance .rail-bottom,
body.theme-minimal-elegance .rail-left,
body.theme-minimal-elegance .rail-right,
body.theme-minimal-elegance .floral-bg {
    display: none !important;
}

/* Light gallery background */
body.theme-minimal-elegance {
    background-color: var(--color-primary);
    --z-particles-back: 1;
    --z-particles-mid: 2;
    --z-content: 200;
    --z-particles-front: 250;
    --elegance-dark-text: rgba(var(--color-dark-text-rgb, 17, 17, 17), 0.95);
    --elegance-light-text: rgba(var(--color-text-rgb, 255, 255, 255), 0.95);
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 12;
}

body.theme-minimal-elegance #bg-swatch-grid {
    max-width: 240px !important;
}

body.theme-minimal-elegance.is-light-bg #fullscreen-countdown,
body.theme-minimal-elegance.is-light-bg #recovery-hint,
body.theme-minimal-elegance.is-light-bg .countdown-label,
body.theme-minimal-elegance.is-light-bg .countdown-number {
    color: var(--elegance-dark-text) !important;
    opacity: 1 !important;
}

body.theme-minimal-elegance.is-light-bg #btn-cancel-fullscreen {
    background-color: var(--elegance-dark-text) !important;
}

/* ============================================================
   TEXTURE LAYER — Matte Watercolor Paper & Fine Linen
   ============================================================ */

body.theme-minimal-elegance .theme-texture {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;

    /* Organic vertical/horizontal linen grain texture */
    background-image:
        linear-gradient(90deg, rgba(var(--color-dark-text-rgb, 17, 17, 17), 0.03) 50%, transparent 50%),
        linear-gradient(rgba(var(--color-dark-text-rgb, 17, 17, 17), 0.02) 50%, transparent 50%);
    background-size: 3px 100%, 100% 3px;
    opacity: calc(0.5 + 0.5 * var(--frame-intensity, 0.5));
}

/* Switch texture colors for dark background swatches */
body.theme-minimal-elegance:not(.is-light-bg) .theme-texture {
    background-image:
        linear-gradient(90deg, rgba(var(--color-text-rgb, 255, 255, 255), 0.03) 50%, transparent 50%),
        linear-gradient(rgba(var(--color-text-rgb, 255, 255, 255), 0.02) 50%, transparent 50%);
}

/* Hide frame/texture when border is hidden */
body.border-hidden.theme-minimal-elegance .theme-frame,
body.border-hidden.theme-minimal-elegance .theme-texture,
body.border-hidden.theme-minimal-elegance .theme-frame-inner {
    opacity: 0 !important;
    pointer-events: none;
}

/* ============================================================
   GEOMETRIC BACKGROUND SHAPES — Architectural Floating Mats
   ============================================================ */

/* Shared base for sway layers */
body.theme-minimal-elegance .sway-layer {
    display: none !important;
    position: fixed;
    pointer-events: none;
    will-change: transform, opacity;
    --motion-scale: calc(0.1 + 0.9 * var(--frame-intensity, 0.5));
}

/* Mat 1: Large soft panel — lower right, warm tint */
body.theme-minimal-elegance .sway-bottom-right {
    display: block !important;
    bottom: -15vh;
    right: -15vw;
    width: 55vw;
    height: 55vh;
    background: linear-gradient(135deg, rgba(var(--color-secondary-rgb), 0.10), rgba(var(--color-secondary-rgb), 0.03));
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    box-shadow: -15px -15px 40px rgba(0, 0, 0, 0.02);
    animation: elegance-drift-large calc(60s / var(--gust-speed, 1)) infinite ease-in-out;
}

body.theme-minimal-elegance.is-light-bg .sway-bottom-right {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.15));
}

/* Mat 2: Subtle dark accent — upper left - Reuses the existing sway-top-right layer name for compatibility.*/
body.theme-minimal-elegance .sway-top-right {
    display: block !important;
    top: -10vh;
    left: -10vw;
    width: 40vw;
    height: 40vh;
    background: linear-gradient(to bottom right, rgba(var(--color-secondary-rgb), 0.08), rgba(var(--color-secondary-rgb), 0.03));
    border: 1px solid rgba(var(--color-accent-rgb), 0.20);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.01);
    animation: elegance-drift-sub calc(45s / var(--gust-speed, 1)) infinite ease-in-out reverse;
}

body.theme-minimal-elegance.is-light-bg .sway-top-right {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.15));
}

/* Mat 3: Right-side thin vertical architectural accent stripe */
/* Reuses existing sway-left-side layer name for compatibility.
   Positioned on the right side for this theme. */
body.theme-minimal-elegance .sway-left-side {
    display: block !important;
    top: 10vh;
    right: -5vw;
    width: 15vw;
    height: 80vh;
    background: linear-gradient(to bottom, rgba(var(--color-accent-rgb), 0.12), rgba(var(--color-accent-rgb), 0.03));
    border-left: 1px solid rgba(var(--color-accent-rgb), 0.35);
    box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.01);
    animation: elegance-drift-right calc(55s / var(--gust-speed, 1)) infinite ease-in-out;
}

/* Mat 4: Bottom horizontal breath */
body.theme-minimal-elegance .sway-bottom-left {
    display: block !important;
    bottom: -5vh;
    left: 5vw;
    width: 80vw;
    height: 12vh;
    background: linear-gradient(to top, rgba(var(--color-secondary-rgb), 0.10), transparent);
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.20);
    animation: elegance-drift-bottom calc(50s / var(--gust-speed, 1)) infinite ease-in-out reverse;
}

body.theme-minimal-elegance.is-light-bg .sway-bottom-left {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.50), transparent);
}

/* Animations */
@keyframes elegance-drift-large {
    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(calc(3% * var(--motion-scale)), calc(-1.5% * var(--motion-scale))) scale(calc(1 + 0.015 * var(--motion-scale)));
    }

    50% {
        transform: translate(calc(-1% * var(--motion-scale)), calc(3% * var(--motion-scale))) scale(calc(1 + 0.03 * var(--motion-scale)));
    }

    75% {
        transform: translate(calc(-3% * var(--motion-scale)), calc(-2% * var(--motion-scale))) scale(calc(1 + 0.01 * var(--motion-scale)));
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes elegance-drift-sub {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(calc(-2% * var(--motion-scale)), calc(2% * var(--motion-scale))) scale(calc(1 + 0.02 * var(--motion-scale)));
    }

    66% {
        transform: translate(calc(1.5% * var(--motion-scale)), calc(-2% * var(--motion-scale))) scale(1);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes elegance-drift-right {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(2% * var(--motion-scale)));
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes elegance-drift-bottom {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-2.5% * var(--motion-scale)));
    }

    100% {
        transform: translateY(0);
    }
}

/* ============================================================
   ARCHITECTURAL INNER FRAME — Gold Hairline Borders
   ============================================================ */

body.theme-minimal-elegance .theme-frame-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1.5px solid rgba(var(--color-accent-rgb), calc(0.35 + 0.55 * var(--frame-intensity, 0.5)));
    pointer-events: none;
    z-index: 10;
}

/* Gold hairline corner accents — precise L-brackets */
body.theme-minimal-elegance .theme-frame-inner::before,
body.theme-minimal-elegance .theme-frame-inner::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-color: rgba(var(--color-accent-rgb), calc(0.6 + 0.4 * var(--frame-intensity, 0.5)));
    border-style: solid;
    opacity: calc(0.5 + 0.5 * var(--frame-intensity, 0.5));
    animation: elegance-corner-breathe 12s ease-in-out infinite;
}

/* Top-left corner */
body.theme-minimal-elegance .theme-frame-inner::before {
    top: 24px;
    left: 24px;
    border-width: 2px 0 0 2px;
}

/* Bottom-right corner */
body.theme-minimal-elegance .theme-frame-inner::after {
    bottom: 24px;
    right: 24px;
    border-width: 0 2px 2px 0;
}

/* Outer frame for top-right & bottom-left corners */
body.theme-minimal-elegance .theme-frame::before,
body.theme-minimal-elegance .theme-frame::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-color: rgba(var(--color-accent-rgb), calc(0.6 + 0.4 * var(--frame-intensity, 0.5)));
    border-style: solid;
    opacity: calc(0.5 + 0.5 * var(--frame-intensity, 0.5));
    animation: elegance-corner-breathe 12s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 10;
}

/* Top-right corner */
body.theme-minimal-elegance .theme-frame::before {
    top: 24px;
    right: 24px;
    border-width: 2px 2px 0 0;
}

/* Bottom-left corner */
body.theme-minimal-elegance .theme-frame::after {
    bottom: 24px;
    left: 24px;
    border-width: 0 0 2px 2px;
}

@keyframes elegance-corner-breathe {

    0%,
    100% {
        opacity: calc(0.5 + 0.5 * var(--frame-intensity, 0.5));
        width: 50px;
        height: 50px;
    }

    50% {
        opacity: calc(0.7 + 0.3 * var(--frame-intensity, 0.5));
        width: 58px;
        height: 58px;
    }
}

/* ============================================================
   LOGO BANNER — Gallery Placard
   ============================================================ */

body.theme-minimal-elegance .logo-banner {
    background: rgba(var(--color-primary-rgb), 0.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.35) !important;
    border-radius: 0 !important;
    max-width: 800px;
    padding: 10px 44px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.5s ease;
}

body.theme-minimal-elegance:not(.is-light-bg) .logo-banner {
    background: rgba(var(--color-primary-rgb), 0.8) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Hide unused border line below banner */
body.theme-minimal-elegance .logo-banner::after {
    display: none !important;
}

body.theme-minimal-elegance .logo-text-custom {
    font-family: var(--font-primary);
    font-weight: 300;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--elegance-dark-text) !important;
    text-shadow: none !important;
    font-size: 0.85em;
}

body.theme-minimal-elegance:not(.is-light-bg) .logo-text-custom {
    color: var(--color-text) !important;
}

/* ============================================================
   HOST COMMITTEE SECTION
   ============================================================ */

body.theme-minimal-elegance .hosts-container {
    position: relative;
    padding: 20px 40px;
    z-index: 100;
}

/* Dynamic legibility scrim matching background color */
body.theme-minimal-elegance .hosts-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
            rgba(var(--color-primary-rgb), var(--backdrop-opacity)) 40%,
            transparent 75%);
    opacity: var(--backdrop-opacity, 0);
    z-index: -1;
    pointer-events: none;
    filter: blur(20px);
}

body.theme-minimal-elegance .hosts-title {
    font-family: var(--font-primary);
    font-weight: 300;
    letter-spacing: 0.6em;
    text-transform: uppercase;
    font-size: 0.75em;
    color: rgba(var(--color-dark-text-rgb, 17, 17, 17), 0.90);
    margin-bottom: 24px;
}

body.theme-minimal-elegance.is-light-bg .hosts-title {
    text-shadow: 0px 0px 10px rgba(116, 116, 116, 0.5);
}

body.theme-minimal-elegance:not(.is-light-bg) .hosts-title {
    color: var(--elegance-light-text);
}

body.theme-minimal-elegance .hosts-list span {
    font-weight: 300;
    color: var(--elegance-dark-text);
    margin: 5px 14px;
    letter-spacing: 0.05em;
}

body.theme-minimal-elegance:not(.is-light-bg) .hosts-list span {
    color: var(--color-text);
}

/* ============================================================
   EVENT FOOTER
   ============================================================ */

body.theme-minimal-elegance .event-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 100;
}

body.theme-minimal-elegance .event-top-label {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--elegance-dark-text);
}

body.theme-minimal-elegance:not(.is-light-bg) .event-top-label {
    color: var(--elegance-light-text);
}

body.theme-minimal-elegance .event-title {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 400;
    color: var(--elegance-dark-text);
    margin: 0.1em 0 0.15em 0;
    letter-spacing: 0.75rem;
    line-height: 1.05;
}

body.theme-minimal-elegance:not(.is-light-bg) .event-title {
    color: var(--color-text);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

body.theme-minimal-elegance .event-subtitle {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--elegance-dark-text);
    margin-bottom: 0;
    margin-top: 6px;
}

body.theme-minimal-elegance:not(.is-light-bg) .event-subtitle {
    color: var(--elegance-light-text);
}

body.theme-minimal-elegance .event-date {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(var(--color-dark-text-rgb, 17, 17, 17), 0.9);
    margin-top: 8px;
}

body.theme-minimal-elegance:not(.is-light-bg) .event-date {
    color: var(--elegance-light-text);
}

/* ============================================================
   PARTICLE STYLING
   ============================================================ */

body.theme-minimal-elegance .petal {
    border-radius: 50% !important;
}

/* Elegant glowing dust */
body.theme-minimal-elegance .petal--dust {
    opacity: 0.65;
    filter: blur(0.5px);
    box-shadow: 0 0 4px rgba(var(--color-accent-rgb), 0.2);
}

/* ============================================================
   FULLSCREEN COUNTDOWN OVERLAY
   ============================================================ */

body.theme-minimal-elegance .fullscreen-countdown .countdown-content {
    background: rgba(var(--color-primary-rgb), 0.96) !important;
    border: 1px solid rgba(var(--color-accent-rgb), 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
}

body.theme-minimal-elegance .fullscreen-countdown .countdown-text {
    font-family: var(--font-primary) !important;
    color: var(--elegance-dark-text) !important;
    letter-spacing: 0.2em;
    font-weight: 300;
}

body.theme-minimal-elegance:not(.is-light-bg) .fullscreen-countdown .countdown-text {
    color: var(--color-text) !important;
}

body.theme-minimal-elegance .fullscreen-countdown #countdown-number {
    color: var(--color-accent) !important;
}

/* ============================================================
   LAYOUT / RESPONSIVE
   ============================================================ */

body.theme-minimal-elegance .main-content {
    max-width: 1800px;
}

body.theme-minimal-elegance .hosts-list {
    max-width: calc(var(--host-max-width) * var(--host-width-base)) !important;
}

/* Split optimized for poster compositions. Large-format layouts begin above 1800px render width. */
@media (max-width: 1800px) {

    body.theme-minimal-elegance .logo-banner {
        transform: unset !important;
        margin-top: 1.5rem;
    }

    body.theme-minimal-elegance .event-footer {
        margin-bottom: 3vh;
    }

    body.theme-minimal-elegance .hosts-container {
        margin: -3rem 0 3rem 0;
    }

    body.theme-minimal-elegance .hosts-title,
    body.theme-minimal-elegance .event-top-label,
    body.theme-minimal-elegance .event-subtitle,
    body.theme-minimal-elegance .event-date {
        font-size: 1.2rem;
    }

    body.theme-minimal-elegance .logo-text-custom {
        font-size: 1.2rem;
    }

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

    body.theme-minimal-elegance .event-title {
        font-size: 5rem;
    }

    body.theme-minimal-elegance.host-hidden .event-footer {
        transform: translateY(-6.5rem) scale(1.45);
    }

    body.theme-minimal-elegance.host-hidden .logo-banner {
        transform: translateY(3.5rem) scale(1.7);
    }
}

@media (min-width: 1801px) {
    body.theme-minimal-elegance .logo-banner {
        margin-bottom: -2rem;
    }

    body.theme-minimal-elegance .hosts-title,
    body.theme-minimal-elegance .event-top-label,
    body.theme-minimal-elegance .event-subtitle,
    body.theme-minimal-elegance .event-date {
        font-size: 1.6em;
    }

    body.theme-minimal-elegance .logo-text-custom {
        font-size: 1.6em;
    }

    body.theme-minimal-elegance .hosts-container {
        margin-top: 2vh;
        margin-bottom: -3vh;
    }

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

    body.theme-minimal-elegance .hosts-list {
        margin-left: auto;
        margin-right: auto;
    }

    body.theme-minimal-elegance .event-footer {
        margin-bottom: 4vh;
        margin-top: -7vh;
    }

    body.theme-minimal-elegance.date-hidden .event-footer {
        margin-bottom: 7vh;
        margin-top: -17vh;
    }

    body.theme-minimal-elegance.title-hidden .hosts-container {
        margin-top: 7vh;
    }



    body.theme-minimal-elegance.host-hidden .event-footer {
        margin-bottom: unset !important;
        transform: translateY(-10.5rem) scale(1.8);
    }

    body.theme-minimal-elegance.host-hidden .logo-banner {
        transform: translateY(8.5rem) scale(2);
    }
}


/* When logo and host sections are hidden, the event title becomes the sole focal element and is centered independently
   of document flow. Works whether the date is visible or hidden. */
body.theme-minimal-elegance.logo-hidden.host-hidden .event-footer {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.8) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.theme-minimal-elegance.logo-hidden.host-hidden .event-title {
    margin: 4.5rem !important;
    line-height: 1 !important;
    letter-spacing: 0.85rem !important;
}

body.theme-minimal-elegance.logo-hidden.host-hidden .event-top-label {
    position: absolute !important;
    bottom: 100% !important;
    white-space: nowrap !important;
    letter-spacing: 1rem !important;
}

body.theme-minimal-elegance.logo-hidden.host-hidden .event-subtitle {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.1rem !important;
    white-space: nowrap !important;
    letter-spacing: 1rem !important;
}

body.theme-minimal-elegance.logo-hidden.host-hidden .event-date {
    position: absolute !important;
    top: 100% !important;
    margin-top: 2.8rem !important;
    white-space: nowrap !important;
}