:root { --rave-black: #030507; --rave-bone: #e7e2d8; --rave-cyan: #45d9e6; --rave-magenta: #dd2f75; --rave-yellow: #d6b661; --rave-mono: "JetBrains Mono", ui-monospace, monospace; --rave-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; }
.city-hero { isolation: isolate; }
.rave-district { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.rave-district::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 50% 34%, rgba(69,217,230,.18), transparent 16%), radial-gradient(circle at 71% 61%, rgba(221,47,117,.25), transparent 22%), linear-gradient(115deg, transparent 0 30%, rgba(69,217,230,.11) 30.2%, transparent 30.6% 100%); animation: rave-bloom 6s ease-in-out infinite alternate; }
.led-rig { position: absolute; z-index: 1; display: grid; align-items: center; gap: clamp(.35rem, 1.2vw, 1rem); width: 110%; height: 20px; opacity: .9; transform-origin: center; }
.led-rig span { display: block; height: 5px; border-radius: 99px; background: var(--rave-cyan); box-shadow: 0 0 5px var(--rave-cyan), 0 0 18px var(--rave-cyan); animation: led-throb 1.9s steps(3, end) infinite; }
.led-rig span:nth-child(3n) { background: var(--rave-magenta); box-shadow: 0 0 5px var(--rave-magenta), 0 0 18px var(--rave-magenta); animation-delay: -.7s; }
.led-rig span:nth-child(4n) { background: var(--rave-yellow); box-shadow: 0 0 5px var(--rave-yellow), 0 0 18px var(--rave-yellow); animation-delay: -1.25s; }
.led-rig-upper { top: 11%; left: -4%; grid-template-columns: repeat(18, 1fr); transform: rotate(-5deg); }
.led-rig-lower { bottom: 15%; left: -3%; grid-template-columns: repeat(12, 1fr); transform: rotate(3deg); animation: led-rig-slide 9s ease-in-out infinite alternate; }
.rave-skywalk { position: absolute; z-index: 1; display: flex; align-items: center; height: 54px; border: 1px solid rgba(69,217,230,.7); background: linear-gradient(90deg, rgba(2,13,17,.05), rgba(69,217,230,.22), rgba(221,47,117,.12), rgba(2,13,17,.05)); box-shadow: 0 0 16px rgba(69,217,230,.22), inset 0 0 22px rgba(69,217,230,.12); color: rgba(182,239,241,.86); font-family: var(--rave-mono); font-size: .58rem; letter-spacing: .13em; white-space: nowrap; text-shadow: 0 0 8px currentColor; }
.rave-skywalk::before, .rave-skywalk::after { content: ""; position: absolute; top: -11px; bottom: -11px; width: 1px; background: rgba(69,217,230,.72); box-shadow: 0 0 10px var(--rave-cyan); }
.rave-skywalk::before { left: 17%; transform: skewX(-19deg); }
.rave-skywalk::after { right: 21%; transform: skewX(19deg); }
.rave-skywalk span { padding: 0 1rem; animation: sign-pulse 4s ease-in-out infinite; }
.rave-skywalk-upper { top: 31%; left: -10%; width: 76%; transform: perspective(360px) rotateY(18deg) rotate(-7deg); animation: skywalk-glide 12s ease-in-out infinite alternate; }
.rave-skywalk-lower { top: 57%; right: -16%; width: 68%; color: rgba(255,188,205,.82); border-color: rgba(221,47,117,.7); background: linear-gradient(90deg, rgba(221,47,117,.04), rgba(221,47,117,.25), rgba(69,217,230,.1), rgba(221,47,117,.04)); box-shadow: 0 0 16px rgba(221,47,117,.2), inset 0 0 22px rgba(221,47,117,.12); transform: perspective(360px) rotateY(-19deg) rotate(5deg); animation: skywalk-glide-reverse 10s ease-in-out infinite alternate; }
.rave-skywalk-lower::before, .rave-skywalk-lower::after { background: rgba(221,47,117,.76); box-shadow: 0 0 10px var(--rave-magenta); }
.holo-ad { position: absolute; z-index: 2; display: grid; gap: .2rem; min-width: 178px; padding: .75rem .85rem .7rem; border: 1px solid rgba(69,217,230,.75); background: linear-gradient(135deg, rgba(5,27,32,.48), rgba(69,217,230,.11) 55%, rgba(221,47,117,.15)); color: var(--rave-cyan); font-family: var(--rave-mono); text-shadow: 0 0 9px currentColor; box-shadow: 0 0 14px rgba(69,217,230,.2), inset 0 0 22px rgba(69,217,230,.14); transform: perspective(260px) rotateY(12deg) skewY(-3deg); animation: holo-ad-drift 7s ease-in-out infinite, holo-flicker 4.2s steps(2, end) infinite; }
.holo-ad::before { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; opacity: .22; }
.holo-ad::after { content: ""; position: absolute; right: -1px; bottom: 7px; left: -1px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; animation: holo-scanline 2.6s linear infinite; }
.holo-ad small, .holo-ad span { position: relative; z-index: 1; font-size: .55rem; letter-spacing: .08em; }
.holo-ad strong { position: relative; z-index: 1; color: #efffff; font-family: var(--rave-display); font-size: 1.35rem; letter-spacing: .05em; line-height: .9; text-transform: uppercase; }
.holo-ad-ash { top: 19%; left: 5%; animation-delay: -1.1s, -.6s; }
.holo-ad-memory { top: 38%; left: 19%; color: var(--rave-magenta); border-color: rgba(221,47,117,.78); background: linear-gradient(135deg, rgba(38,5,19,.5), rgba(221,47,117,.13), rgba(69,217,230,.1)); box-shadow: 0 0 14px rgba(221,47,117,.2), inset 0 0 22px rgba(221,47,117,.14); transform: perspective(260px) rotateY(18deg) skewY(4deg); animation-delay: -3.2s, -1.8s; }
.holo-ad-blood { top: 51%; right: 5%; min-width: 206px; color: #ff6f91; border-color: rgba(255,111,145,.72); background: linear-gradient(135deg, rgba(42,5,17,.52), rgba(221,47,117,.18), rgba(157,25,49,.14)); box-shadow: 0 0 16px rgba(221,47,117,.25), inset 0 0 24px rgba(221,47,117,.13); transform: perspective(280px) rotateY(-18deg) skewY(-4deg); animation-delay: -4.5s, -2.2s; }
.holo-ad-ember { right: 26%; bottom: 22%; color: var(--rave-yellow); border-color: rgba(214,182,97,.7); background: linear-gradient(135deg, rgba(34,22,7,.48), rgba(214,182,97,.12), rgba(176,76,50,.14)); box-shadow: 0 0 15px rgba(214,182,97,.2), inset 0 0 22px rgba(214,182,97,.12); transform: perspective(270px) rotateY(-12deg) skewY(3deg); animation-delay: -2.4s, -3s; }
.laser-orb { position: absolute; z-index: 4; top: 20%; left: 54%; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; animation: orb-drift 11s ease-in-out infinite; }
.orb-glow, .orb-core, .orb-ring, .orb-beam { position: absolute; display: block; }
.orb-glow { inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,248,217,.98) 0 5%, rgba(69,217,230,.9) 17%, rgba(221,47,117,.48) 42%, transparent 71%); filter: blur(7px); box-shadow: 0 0 28px var(--rave-cyan), 0 0 70px rgba(221,47,117,.75); animation: orb-glow-pulse 2.8s ease-in-out infinite alternate; }
.orb-core { inset: 31%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fffbe2 0 4%, #a9ffff 12%, #45d9e6 29%, #dd2f75 70%, #300613 100%); box-shadow: inset -8px -9px 18px rgba(8,3,17,.6), 0 0 15px #fff, 0 0 34px var(--rave-magenta); animation: orb-core-pulse 1.5s steps(2, end) infinite; }
.orb-ring { inset: 8%; border: 1px solid rgba(69,217,230,.74); border-radius: 50%; box-shadow: 0 0 10px rgba(69,217,230,.5); }
.orb-ring-one { transform: rotate(26deg) scaleY(.32); animation: orb-spin 4.5s linear infinite; }
.orb-ring-two { inset: 0; border-color: rgba(221,47,117,.76); transform: rotate(-37deg) scaleX(.32); animation: orb-spin-reverse 6.3s linear infinite; }
.orb-beam { top: 50%; left: 47%; width: 56vw; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(255,255,255,.98), var(--rave-cyan) 8%, rgba(69,217,230,.25) 36%, transparent 80%); box-shadow: 0 0 7px var(--rave-cyan); opacity: .68; }
.orb-beam-one { transform: rotate(19deg); animation: beam-sweep 6s ease-in-out infinite alternate; }
.orb-beam-two { background: linear-gradient(90deg, rgba(255,255,255,.9), var(--rave-magenta) 8%, rgba(221,47,117,.22) 36%, transparent 80%); transform: rotate(146deg); animation: beam-sweep-reverse 7.4s ease-in-out infinite alternate; }
.rave-floor { position: absolute; z-index: 1; right: 2%; bottom: 4%; left: 2%; height: 18%; opacity: .5; transform: perspective(240px) rotateX(58deg); transform-origin: bottom; background: repeating-linear-gradient(90deg, rgba(69,217,230,.42) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(221,47,117,.38) 0 1px, transparent 1px 25px); mask-image: linear-gradient(to top, black, transparent 82%); animation: floor-pulse 3.2s ease-in-out infinite alternate; }
.rave-floor-pulse { position: absolute; bottom: 5%; width: 8px; height: 70%; background: var(--rave-cyan); box-shadow: 0 0 9px var(--rave-cyan), 0 0 25px var(--rave-cyan); transform-origin: bottom; animation: floor-beat 1.2s ease-in-out infinite; }
.rave-floor-pulse:nth-child(1) { left: 24%; animation-delay: -.2s; }
.rave-floor-pulse:nth-child(2) { left: 52%; background: var(--rave-magenta); box-shadow: 0 0 9px var(--rave-magenta), 0 0 25px var(--rave-magenta); animation-delay: -.66s; }
.rave-floor-pulse:nth-child(3) { left: 78%; background: var(--rave-yellow); box-shadow: 0 0 9px var(--rave-yellow), 0 0 25px var(--rave-yellow); animation-delay: -.94s; }
.rave-caption { position: absolute; z-index: 4; right: 7%; bottom: 13%; display: flex; gap: .65rem; color: rgba(69,217,230,.78); font-family: var(--rave-mono); font-size: .58rem; letter-spacing: .1em; text-shadow: 0 0 8px currentColor; animation: caption-flicker 3.8s steps(2, end) infinite; }
.rave-caption b { color: var(--rave-magenta); font-weight: 500; }
@keyframes rave-bloom { from { opacity: .32; transform: scale(.98); } to { opacity: .78; transform: scale(1.04); } }
@keyframes led-throb { 0%, 100% { opacity: .42; transform: scaleY(.65); } 45% { opacity: 1; transform: scaleY(1.35); } 55% { opacity: .56; transform: scaleY(.9); } }
@keyframes led-rig-slide { from { transform: translateX(-1.5rem) rotate(3deg); } to { transform: translateX(1.7rem) rotate(3deg); } }
@keyframes sign-pulse { 0%, 100% { opacity: .45; } 48%, 56% { opacity: 1; } 52% { opacity: .28; } }
@keyframes skywalk-glide { from { translate: -1rem 0; } to { translate: 2.5rem .7rem; } }
@keyframes skywalk-glide-reverse { from { translate: 1.5rem -.4rem; } to { translate: -2rem .8rem; } }
@keyframes holo-ad-drift { 0%, 100% { translate: 0 0; } 50% { translate: .7rem -.8rem; } }
@keyframes holo-scanline { from { translate: 0 -3.2rem; } to { translate: 0 3.2rem; } }
@keyframes orb-drift { 0%, 100% { translate: -1rem 1.2rem; } 24% { translate: 8rem 3.8rem; } 51% { translate: 1rem 11rem; } 77% { translate: -10rem 6rem; } }
@keyframes orb-glow-pulse { from { opacity: .65; scale: .86; } to { opacity: 1; scale: 1.12; } }
@keyframes orb-core-pulse { 0%, 100% { filter: hue-rotate(0deg) brightness(.9); } 50% { filter: hue-rotate(35deg) brightness(1.45); } }
@keyframes orb-spin { to { rotate: 360deg; } }
@keyframes orb-spin-reverse { to { rotate: -360deg; } }
@keyframes beam-sweep { from { rotate: -10deg; opacity: .24; } to { rotate: 15deg; opacity: .75; } }
@keyframes beam-sweep-reverse { from { rotate: 10deg; opacity: .2; } to { rotate: -17deg; opacity: .66; } }
@keyframes floor-pulse { from { opacity: .28; } to { opacity: .78; } }
@keyframes floor-beat { 0%, 100% { scale: 1 .22; opacity: .28; } 42% { scale: 1 .95; opacity: .85; } 57% { scale: 1 .52; opacity: .55; } }
@keyframes caption-flicker { 0%, 16%, 18%, 100% { opacity: .75; } 17% { opacity: .2; } }
@media (max-width: 760px) {
  .rave-district { opacity: .78; }
  .led-rig-upper { top: 17%; left: -32%; width: 164%; }
  .led-rig-lower { bottom: 18%; left: -27%; width: 154%; }
  .rave-skywalk { height: 42px; font-size: .5rem; }
  .rave-skywalk-upper { top: 27%; left: -32%; width: 128%; }
  .rave-skywalk-lower { top: 49%; right: -38%; width: 128%; }
  .holo-ad { min-width: 142px; padding: .55rem .62rem; }
  .holo-ad strong { font-size: 1rem; }
  .holo-ad small, .holo-ad span { font-size: .46rem; }
  .holo-ad-ash { top: 18%; left: 2%; }
  .holo-ad-memory { top: 35%; left: 4%; }
  .holo-ad-blood { top: 55%; right: 2%; min-width: 162px; }
  .holo-ad-ember { right: 8%; bottom: 21%; }
  .laser-orb { top: 22%; left: 43%; width: 110px; }
  .orb-beam { width: 78vw; }
  .rave-floor { right: -15%; left: -15%; bottom: 7%; height: 16%; }
  .rave-caption { right: 5%; bottom: 13%; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .rave-district *, .rave-district::before { animation: none !important; } }