:root{--bg:#050407;--neon:'Tilt Neon','Brush Script MT',cursive,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{overflow-x:hidden;font-family:var(--neon);-webkit-font-smoothing:antialiased}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:default}
::selection{background:transparent}

.scene{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;place-items:center;padding:3vh 3vw 14vh;isolation:isolate}

/* wall: lit only near the sign */
.wall{position:absolute;inset:0;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.03) 100%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000 0,rgba(0,0,0,.35) 55%,rgba(0,0,0,.03) 100%);
  animation:wallflick 7s infinite}
.wall svg{display:block;position:absolute;left:50%;top:50%;width:1920px;height:1200px;margin:-600px 0 0 -960px}

.stack{position:relative;z-index:2;width:min(94vw,128vh);max-width:1100px;font-family:var(--neon)}
.art,.refl{display:block;width:100%;height:auto;overflow:visible}
.art{font-family:var(--neon);animation:sway 11s ease-in-out infinite;transform-origin:50% -20%;will-change:transform}
.refl [filter]{filter:none}
.art text,.refl text{font-family:var(--neon);font-weight:400}

.pole{position:absolute;bottom:96.4%;width:.8%;min-width:5px;height:110vh;background:linear-gradient(90deg,#000,#312a2f 60%,#000);z-index:-1}
.pole.l{left:17%}.pole.r{right:17%}

/* wet pavement + reflection */
.reflwrap{position:relative;width:100%;height:0;padding-top:30%;overflow:hidden;margin-top:-1%;opacity:.5;filter:blur(7px);
  -webkit-mask-image:linear-gradient(#000,transparent 92%);mask-image:linear-gradient(#000,transparent 92%)}
.refl{position:absolute;left:0;top:0;transform:scaleY(-1);transform-origin:50% 50%;height:auto;top:0}
.ground{position:absolute;left:-60vw;right:-60vw;top:61%;bottom:-60vh;z-index:-1;
  background:
    radial-gradient(ellipse 36% 22% at 50% 0,rgba(255,60,70,.34),transparent 75%),
    radial-gradient(ellipse 30% 14% at 50% 0,rgba(255,200,150,.22),transparent 80%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px),
    linear-gradient(#0d0b0e,#030204 70%);
  border-top:2px solid #231c21;box-shadow:0 -1px 0 rgba(255,150,120,.12)}

.haze{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(0,0,0,.78) 100%),radial-gradient(ellipse 50% 35% at 50% 38%,rgba(255,70,80,.07),transparent 100%)}
.haze::after{content:'';position:absolute;inset:0;opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* flicker: the "NO" tube stutters, one letter is weak, the cream tubes hum */
.no{animation:ion 7s infinite}
.weak{fill-opacity:.62}
.hum{animation:hum 6s linear infinite}
@keyframes ion{
  0%,18%,22%,62%,64%,100%{fill-opacity:1}
  19%{fill-opacity:.15}20%{fill-opacity:.9}21%{fill-opacity:.3}
  63%{fill-opacity:.4}80%{fill-opacity:1}81%{fill-opacity:.5}82%{fill-opacity:1}}
@keyframes wallflick{
  0%,18%,22%,62%,64%,100%{opacity:1}
  19%{opacity:.86}20%{opacity:.97}21%{opacity:.9}63%{opacity:.92}81%{opacity:.95}}
@keyframes hum{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.9}49%{opacity:1}}
@keyframes sway{50%{transform:rotate(.35deg)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}