.live-show-hero {
    background-image: url('/public/assets/mv/tarima.webp');
    background-position: center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.live-show-animation {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.live-show-smoke {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 10%;
    height: 44%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(218, 226, 236, 0.36) 0%, rgba(190, 198, 208, 0.16) 36%, rgba(160, 170, 180, 0) 74%);
    filter: blur(15px);
    mix-blend-mode: screen;
    animation: live-smoke-main 10s ease-in-out 1 forwards;
}

.live-show-smoke::before,
.live-show-smoke::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.live-show-smoke::before {
    left: -2%;
    right: 10%;
    bottom: -8%;
    height: 86%;
    background: radial-gradient(ellipse at center, rgba(230, 238, 246, 0.26) 0%, rgba(210, 218, 226, 0.12) 34%, rgba(170, 180, 190, 0) 72%);
    filter: blur(18px);
    animation: live-smoke-b 10s ease-in-out 1 forwards;
}

.live-show-smoke::after {
    left: 16%;
    right: -2%;
    bottom: -12%;
    height: 92%;
    background: radial-gradient(ellipse at center, rgba(215, 224, 234, 0.24) 0%, rgba(196, 205, 214, 0.11) 32%, rgba(170, 180, 190, 0) 70%);
    filter: blur(20px);
    animation: live-smoke-c 10s ease-in-out 1 forwards;
}

.live-show-lights {
    position: absolute;
    inset: 0;
    animation: live-strobe 10s linear 1 forwards;
}

.live-show-lights::before,
.live-show-lights::after {
    content: '';
    position: absolute;
    inset: -8% 0 0;
}

.live-show-lights::before {
    background:
        radial-gradient(circle at 12% 26%, rgba(56, 189, 248, 0.42) 0%, rgba(56, 189, 248, 0) 36%),
        radial-gradient(circle at 34% 20%, rgba(250, 204, 21, 0.34) 0%, rgba(250, 204, 21, 0) 38%),
        radial-gradient(circle at 52% 22%, rgba(168, 85, 247, 0.38) 0%, rgba(168, 85, 247, 0) 40%),
        radial-gradient(circle at 72% 24%, rgba(236, 72, 153, 0.30) 0%, rgba(236, 72, 153, 0) 38%),
        radial-gradient(circle at 90% 28%, rgba(59, 130, 246, 0.36) 0%, rgba(59, 130, 246, 0) 36%);
    mix-blend-mode: screen;
    animation: live-ambient 10s ease-in-out 1 forwards;
}

.live-show-lights::after {
    width: 120%;
    height: 170%;
    top: -62%;
    left: -8%;
    right: auto;
    bottom: auto;
    background:
        conic-gradient(from 192deg at 26% 2%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.30) 11deg, rgba(255, 255, 255, 0) 24deg),
        conic-gradient(from 174deg at 50% 2%, rgba(255, 255, 255, 0) 0deg, rgba(56, 189, 248, 0.36) 11deg, rgba(255, 255, 255, 0) 22deg),
        conic-gradient(from 160deg at 74% 2%, rgba(255, 255, 255, 0) 0deg, rgba(250, 204, 21, 0.30) 10deg, rgba(255, 255, 255, 0) 22deg);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: live-beams 10s ease-in-out 1 forwards;
}

.live-show-crowd {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.96;
    transform-origin: center bottom;
    filter: drop-shadow(0 -3px 10px rgba(0, 0, 0, 0.7));
    animation: live-crowd 10s ease-in-out 1 forwards;
}

.live-show-hero .gradient-overlay {
    z-index: 2;
}

.live-show-hero .hero-content {
    z-index: 3;
}

@keyframes live-ambient {
    0% { opacity: 0.72; filter: saturate(1.08) hue-rotate(-8deg); }
    35% { opacity: 1; filter: saturate(1.32) hue-rotate(10deg); }
    70% { opacity: 0.78; filter: saturate(1.2) hue-rotate(22deg); }
    100% { opacity: 0.86; filter: saturate(1.12) hue-rotate(-10deg); }
}

@keyframes live-beams {
    0% { transform: rotate(-12deg) translateX(-4%); opacity: 0.65; }
    25% { transform: rotate(-4deg) translateX(0%); opacity: 0.95; }
    52% { transform: rotate(7deg) translateX(2%); opacity: 0.72; }
    76% { transform: rotate(-8deg) translateX(-2%); opacity: 0.92; }
    100% { transform: rotate(2deg) translateX(0%); opacity: 0.78; }
}

@keyframes live-smoke-main {
    0% { transform: translate3d(-14px, 12px, 0) scale(0.98); opacity: 0.28; }
    50% { transform: translate3d(8px, -10px, 0) scale(1.12); opacity: 0.52; }
    100% { transform: translate3d(8px, -10px, 0) scale(1.12); opacity: 0.42; }
}

@keyframes live-smoke-b {
    0% { transform: translate3d(8px, 10px, 0) scale(0.98); opacity: 0.18; }
    50% { transform: translate3d(-6px, -8px, 0) scale(1.08); opacity: 0.34; }
    100% { transform: translate3d(-6px, -8px, 0) scale(1.08); opacity: 0.28; }
}

@keyframes live-smoke-c {
    0% { transform: translate3d(-4px, 12px, 0) scale(1); opacity: 0.16; }
    50% { transform: translate3d(10px, -6px, 0) scale(1.1); opacity: 0.3; }
    100% { transform: translate3d(10px, -6px, 0) scale(1.1); opacity: 0.24; }
}

@keyframes live-crowd {
    0% { transform: translateX(0) scaleY(1); }
    25% { transform: translateX(-2px) scaleY(1.016); }
    50% { transform: translateX(2px) scaleY(0.99); }
    75% { transform: translateX(-1px) scaleY(1.01); }
    100% { transform: translateX(-1px) scaleY(1.01); }
}

@keyframes live-strobe {
    0%, 16%, 34%, 57%, 100% { filter: brightness(1) saturate(1); }
    18% { filter: brightness(1.12) saturate(1.15); }
    20% { filter: brightness(0.98) saturate(0.96); }
    36% { filter: brightness(1.14) saturate(1.2); }
    38% { filter: brightness(1); }
    59% { filter: brightness(1.1) saturate(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .live-show-smoke,
    .live-show-smoke::before,
    .live-show-smoke::after,
    .live-show-lights,
    .live-show-lights::before,
    .live-show-lights::after,
    .live-show-crowd {
        animation: none !important;
    }
}