/**
 * ELECTRIC PULSE (MUSIC FESTIVAL) THEME STYLES
 */

/* Main Background Sky Gradient */
body.theme-electric-pulse {
    background: linear-gradient(to bottom, var(--color-primary) 0%, rgba(var(--color-primary-rgb), 0.92) 40%, rgba(var(--color-accent-rgb), 0.15) 75%, rgba(var(--color-accent-rgb), 0.35) 100%) !important;
}

/* 1. Unified Stage Rigging Truss (replaces traditional borders) */
body.theme-electric-pulse .theme-frame {
    opacity: 1;
    border: none !important;
    /* Remove thin borders */
    border-radius: 0;
    background: transparent;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Entire stage structure vibrates with bass intensity */
    animation: electric-stage-vibe calc(1.1s - 0.6s * var(--frame-intensity)) linear infinite;
}

/* Hide Frame Logic */
body.border-hidden.theme-electric-pulse .theme-frame,
body.border-hidden.theme-electric-pulse .frame-rail,
body.border-hidden.theme-electric-pulse .sway-layer {
    opacity: 0 !important;
    pointer-events: none;
    animation-play-state: paused !important;
}

@keyframes electric-stage-vibe {
    0% {
        transform: translateX(0);
    }

    4% {
        transform: translateX(calc(-0.6px * var(--frame-intensity)));
    }

    8% {
        transform: translateX(calc(1.2px * var(--frame-intensity)));
    }

    12% {
        transform: translateX(calc(-1.2px * var(--frame-intensity)));
    }

    16% {
        transform: translateX(calc(1.2px * var(--frame-intensity)));
    }

    20% {
        transform: translateX(calc(-1.2px * var(--frame-intensity)));
    }

    24% {
        transform: translateX(calc(1.2px * var(--frame-intensity)));
    }

    28% {
        transform: translateX(calc(-1.2px * var(--frame-intensity)));
    }

    32% {
        transform: translateX(calc(1.2px * var(--frame-intensity)));
    }

    36% {
        transform: translateX(calc(-1.2px * var(--frame-intensity)));
    }

    40% {
        transform: translateX(calc(1.2px * var(--frame-intensity)));
    }

    44% {
        transform: translateX(calc(-0.6px * var(--frame-intensity)));
    }

    48% {
        transform: translateX(0);
    }

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

/* Scaffolding Cross-bracing inside the stage rails */
body.theme-electric-pulse .frame-rail {
    position: absolute;
    /* CRITICAL: Enables absolute positioning of rails inside the frame */
    background-color: #12101a;
    border: 2px solid rgba(var(--color-accent-rgb), calc(0.25 + 0.55 * var(--frame-intensity)));
    box-shadow:
        0 0 calc(10px * var(--frame-intensity)) rgba(var(--color-accent-rgb), 0.25),
        inset 0 0 8px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    z-index: 5;
    pointer-events: none;
}

/* Bottom rail is hidden to leave stage floor open */
body.theme-electric-pulse .rail-bottom {
    display: none !important;
}

/* Top rail - horizontal stage truss */
body.theme-electric-pulse .rail-top {
    height: 36px;
    top: 0;
    left: 0;
    right: 0;
    background:
        /* Main metallic pipes running horizontally */
        linear-gradient(to bottom, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 0 0/100% 5px no-repeat,
        linear-gradient(to bottom, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 0 100%/100% 5px no-repeat,
        /* Diagonal structural truss braces */
        repeating-linear-gradient(45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px),
        repeating-linear-gradient(-45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px);
}

/* Side rails - vertical structural truss rigging (extended to screen bottom) */
body.theme-electric-pulse .rail-left,
body.theme-electric-pulse .rail-right {
    width: 44px;
    top: 0;
    bottom: -25px;
    /* Extend past bottom theme-frame inset to screen edge for grounding */
}

body.theme-electric-pulse .rail-left {
    left: 0;
    background:
        /* Main metallic pipes running vertically */
        linear-gradient(to right, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 0 0/5px 100% no-repeat,
        linear-gradient(to right, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 100% 0/5px 100% no-repeat,
        /* Diagonal structural truss braces */
        repeating-linear-gradient(45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px),
        repeating-linear-gradient(-45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px);
}

body.theme-electric-pulse .rail-right {
    right: 0;
    background:
        /* Main metallic pipes running vertically */
        linear-gradient(to right, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 0 0/5px 100% no-repeat,
        linear-gradient(to right, #3a3845 0%, #767385 20%, #1e1b24 50%, #767385 80%, #3a3845 100%) 100% 0/5px 100% no-repeat,
        /* Diagonal structural truss braces */
        repeating-linear-gradient(-45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px),
        repeating-linear-gradient(45deg, transparent, transparent 18px, #585566 18px, #7b788c 20px, #363440 22px, transparent 22px, transparent 40px);
}

/* Hide redundant thin column layers to prevent screen clutter */
body.theme-electric-pulse .sway-left-side,
body.theme-electric-pulse .sway-right-side,
body.theme-electric-pulse .sway-top-2,
body.theme-electric-pulse .sway-top-3 {
    display: none !important;
}

/* 2. Sweeping Conic Stage Spotlights */
body.theme-electric-pulse .sway-bottom-left,
body.theme-electric-pulse .sway-bottom-right {
    display: block !important;
    position: absolute;
    bottom: 0;
    width: 50vw;
    height: 95vh;
    z-index: 1;
    /* Underneath text banner, above primary bg */
    pointer-events: none;
    opacity: calc(0.18 + 0.18 * var(--frame-intensity));
    mix-blend-mode: screen;
    will-change: transform;
    transition: opacity 0.5s ease;
}

body.theme-electric-pulse .sway-bottom-left {
    left: 0;
    transform-origin: bottom left;
    background: radial-gradient(circle at bottom left, rgba(var(--color-secondary-rgb), 0.45) 0%, transparent 65%);
    animation: electric-spotlight-left calc(11s / var(--gust-speed, 1)) ease-in-out infinite alternate;
}

body.theme-electric-pulse .sway-bottom-left::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg at 0% 100%, transparent 38deg, rgba(var(--color-secondary-rgb), 0.5) 43deg, rgba(var(--color-secondary-rgb), 0.5) 53deg, transparent 58deg);
    -webkit-mask-image: linear-gradient(to top right, white 15%, transparent 75%);
    mask-image: linear-gradient(to top right, white 15%, transparent 75%);
}

body.theme-electric-pulse .sway-bottom-right {
    right: 0;
    transform-origin: bottom right;
    background: radial-gradient(circle at bottom right, rgba(var(--color-accent-rgb), 0.45) 0%, transparent 65%);
    animation: electric-spotlight-right calc(13s / var(--gust-speed, 1)) ease-in-out infinite alternate-reverse;
}

body.theme-electric-pulse .sway-bottom-right::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 270deg at 100% 100%, transparent 32deg, rgba(var(--color-accent-rgb), 0.5) 37deg, rgba(var(--color-accent-rgb), 0.5) 47deg, transparent 52deg);
    -webkit-mask-image: linear-gradient(to top left, white 15%, transparent 75%);
    mask-image: linear-gradient(to top left, white 15%, transparent 75%);
}

@keyframes electric-spotlight-left {
    0% {
        transform: rotate(-8deg) scale(0.95);
    }

    100% {
        transform: rotate(28deg) scale(1.05);
    }
}

@keyframes electric-spotlight-right {
    0% {
        transform: rotate(8deg) scale(0.95);
    }

    100% {
        transform: rotate(-28deg) scale(1.05);
    }
}

/* 3. Continuous Seamless Bunting (Hung directly beneath top truss) */
body.theme-electric-pulse .sway-top-1 {
    display: block !important;
    position: absolute;
    top: 34px;
    /* Sits flush under top truss (36px high) */
    left: 42px;
    /* Inset from left vertical scaffold */
    right: 42px;
    /* Inset from right vertical scaffold */
    width: auto;
    height: 35px;
    z-index: 4;
    pointer-events: none;
    opacity: 0.9;
    will-change: transform;
    background-repeat: repeat-x;
    background-size: 50px auto;
    background-image: var(--bunting-image, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 35' width='50' height='35'><path d='M0,0 Q25,8 50,0 L50,2 L25,32 L0,2 Z' fill='%23FF1A75' opacity='0.85'/><path d='M0,0 Q25,8 50,0 L42,0 L25,24 L8,0 Z' fill='%2300F2FE' opacity='0.95'/></svg>"));
    transform-origin: center top;
    animation: electric-bunting-sway calc(6s / var(--gust-speed, 1)) ease-in-out infinite alternate;
    transition: opacity 0.5s ease;
}

@keyframes electric-bunting-sway {
    0% {
        transform: skewX(-2deg) scaleY(0.98);
    }

    100% {
        transform: skewX(2deg) scaleY(1.02);
    }
}

/* 4. Glassmorphic Stage Banner (Clean and Centered) */
body.theme-electric-pulse .logo-banner {
    background: rgba(9, 7, 20, 0.82);
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    padding: 16px 48px;
    box-shadow:
        0 0 20px rgba(var(--color-accent-rgb), 0.4),
        inset 0 0 10px rgba(var(--color-accent-rgb), 0.2);
    margin: 0;
    position: relative;
    overflow: hidden;
}

body.theme-electric-pulse .logo-text-custom {
    font-family: var(--font-primary);
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(var(--color-accent-rgb), 0.8) !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}

/* 5. Glowing Neon Typography & Shadows */
body.theme-electric-pulse .event-title {
    color: #ffffff;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 900;
    position: relative;
    text-shadow:
        0 0 4px #fff,
        0 0 10px var(--color-accent),
        0 0 20px var(--color-accent);
    animation: electric-title-glow 3.5s ease-in-out infinite alternate;
}

@keyframes electric-title-glow {

    0%,
    100% {
        text-shadow: 0 0 4px #fff, 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
    }

    50% {
        text-shadow: 0 0 6px #fff, 0 0 16px var(--color-accent), 0 0 28px var(--color-accent), 0 0 35px var(--color-secondary);
    }
}

body.theme-electric-pulse .event-top-label {
    font-family: var(--font-heading) !important;
    font-weight: 900;
    font-size: 1.7rem;
    color: var(--color-secondary);
    text-shadow: 0 0 4px rgba(var(--color-secondary-rgb), 0.55);
    letter-spacing: 6px;
    margin-bottom: 0px;
    text-transform: uppercase;
}

body.theme-electric-pulse .event-subtitle {
    font-family: var(--font-heading) !important;
    font-weight: 900;
    font-size: 1.9rem;
    color: var(--color-secondary);
    text-shadow: 0 0 4px rgba(var(--color-secondary-rgb), 0.55);
    letter-spacing: 6px;
    margin-top: 6px;
    text-transform: uppercase;
}

body.theme-electric-pulse .event-date {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    color: #ffffff;
    opacity: 0.95;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(var(--color-secondary-rgb), 0.25);
}

body.theme-electric-pulse .hosts-title {
    font-family: var(--font-heading);
    color: var(--color-secondary);
    font-size: calc(2.8rem * var(--host-text-size) * var(--host-scale-base) * var(--dynamic-scale));
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.7);
}

body.theme-electric-pulse .hosts-list span {
    font-family: var(--font-primary);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(var(--color-accent-rgb), 0.6);
}

/* Readability backdrop behind host list */
body.theme-electric-pulse .hosts-container {
    position: relative;
    z-index: 100;
}

/* 6. Custom Vector Particle Shapes */

/* Falling Bouncing Confetti pieces */
body.theme-electric-pulse .petal--confetti {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 1px !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
}

/* Neon Lasers shooting across the stage */
body.theme-electric-pulse .petal--laser {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 9999px !important;
    height: 3px !important;
    opacity: 0.9 !important;
    box-shadow:
        0 0 8px rgba(var(--color-secondary-rgb), 0.9),
        0 0 16px rgba(var(--color-secondary-rgb), 0.5);
}

/* Ambient Dust Flares */
body.theme-electric-pulse .petal--dust {
    opacity: 0.75;
    filter: blur(0.5px);
}

/* Fullscreen Countdown Overlay Override */
body.theme-electric-pulse .fullscreen-countdown .countdown-content {
    background: rgba(9, 7, 20, 0.95) !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.25) !important;
    border-radius: 10px !important;
}

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

body.theme-electric-pulse .fullscreen-countdown #countdown-number {
    color: var(--color-secondary) !important;
    text-shadow: 0 0 12px rgba(var(--color-secondary-rgb), 0.85) !important;
}

/* Screen Scaling Constraints */
body.theme-electric-pulse .main-content {
    max-width: 1720px;
}

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

    body.theme-electric-pulse .hosts-container {
        margin: 2.5vh 0 -2.5vh 0;
    }

    body.theme-electric-pulse .event-footer {
        /* margin-bottom: 1.5vh; */
        transform-origin: bottom center;
    }
}

@media (min-width: 1801px) {
    body.theme-electric-pulse .logo-banner {
        scale: 1.12;
        margin-top: 2.2rem;
        transform-origin: top center;
    }

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

    body.theme-electric-pulse .hosts-container {
        margin-top: 2vh;
        margin-bottom: -1.5vh;
    }

    body.theme-electric-pulse .event-footer {
        scale: 1.12;
        margin-bottom: 2vh;
        transform-origin: bottom center;
    }
}

/* Light Mode Swatch Adaptations */
body.theme-electric-pulse.is-light-bg .event-title {
    color: var(--color-accent) !important;
    text-shadow: 2px 2px 0px rgba(9, 7, 20, 0.15) !important;
}

body.theme-electric-pulse.is-light-bg .event-title::after {
    display: none !important;
}

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

body.theme-electric-pulse.is-light-bg .logo-banner {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--color-dark-text);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

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

/* Play state control integration */
body.theme-electric-pulse .sway-bottom-left,
body.theme-electric-pulse .sway-bottom-left::before,
body.theme-electric-pulse .sway-bottom-right,
body.theme-electric-pulse .sway-bottom-right::before,
body.theme-electric-pulse .sway-top-1,
body.theme-electric-pulse .theme-frame,
body.theme-electric-pulse .frame-rail,
body.theme-electric-pulse .event-title {
    animation-play-state: var(--grid-play-state, running) !important;
}