:root{
  --blue:#4f7392; --blue-d:#2c4a63; --navy:#0b1420; --ink:#05090f; --paper:#f1eee6;
  --orange:#ff6a13; --line:rgba(241,238,230,.22);
  --display:'Anton',Impact,'Arial Narrow',sans-serif; --mono:'Space Mono',ui-monospace,monospace; --hand:'Permanent Marker',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy);color:var(--paper);-webkit-text-size-adjust:100%}
body{font-family:var(--mono);font-size:14px;line-height:1.5;background:var(--navy);overflow-x:clip}
a{color:inherit}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--paper);color:var(--ink);padding:8px 12px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;background:url(img/concrete.png);background-size:300px;mix-blend-mode:overlay;opacity:.1}

/* distressed print */
.distress{-webkit-mask-image:url(img/distress.png);mask-image:url(img/distress.png);-webkit-mask-size:340px;mask-size:340px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;background:linear-gradient(var(--ink),rgba(5,9,15,.85));border-bottom:1px solid rgba(255,255,255,.06)}
.nav-l{display:flex;gap:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav-l a{text-decoration:none;opacity:.85}.nav-l a:hover{opacity:1;text-decoration:underline}
.logo{display:block}.logo img{height:30px;width:auto}
.nav-r{justify-self:end}
.btn-sm{font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--paper);padding:7px 14px;transition:background .2s,color .2s}
.btn-sm:hover{background:var(--paper);color:var(--ink)}

/* ---------- pinned tour stage ---------- */
.tour{position:relative;height:960svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(120% 90% at 50% 60%,#14273a 0,var(--navy) 60%,#05090f 100%);perspective:1100px}
.wall{position:absolute;inset:0;background:#3d5f7c url(img/wall.webp) center 70%/cover no-repeat;will-change:opacity,transform;transform-origin:50% 100%}
.wall::before{content:none}
.wall::after{content:none}

.fog{position:absolute;inset:auto 0 0;height:45%;pointer-events:none;z-index:4}
.fog i{position:absolute;bottom:-20%;width:70%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(220,232,245,.35),transparent);filter:blur(30px);animation:drift 18s ease-in-out infinite alternate}
.fog i:first-child{left:-10%}.fog i:last-child{right:-12%;animation-duration:24s;animation-delay:-6s}
@keyframes drift{to{transform:translateX(18%) scale(1.15)}}

/* hero columns */
.col{position:absolute;top:calc(60px + 3svh);bottom:4svh;z-index:5;display:flex;flex-direction:column;justify-content:space-between;will-change:transform,opacity}
.col-l{left:5vw;width:clamp(150px,19vw,300px);border-right:1px solid var(--line);padding-right:clamp(10px,1.4vw,24px)}
.col-r{right:5vw;width:clamp(150px,19vw,300px);border-left:1px solid var(--line);padding-left:clamp(10px,1.4vw,24px)}
.words{display:flex;flex-direction:column;height:100%;font-weight:400}
.slot{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:.5svh 0;position:relative}
.slot img{max-width:100%;max-height:100%;width:auto;height:auto}
.w{opacity:0;transform:scale(1.35);filter:blur(6px);transform-origin:50% 60%}
.w.in{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(1.35);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.rule{display:block;width:100%;height:auto;flex:none;opacity:.9}
.col-r .slot{padding:0}
.code-btn{position:absolute;inset:.4svh 0;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.code{display:block;max-width:100%;max-height:100%;transform-origin:50% 50%;will-change:transform}
.code-btn:hover .code{filter:drop-shadow(0 0 14px rgba(255,255,255,.35))}
.when{display:block;width:100%;height:auto;flex:none;margin:.4svh 0 .8svh;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.when.in{opacity:1;transform:none}

.belly{position:absolute;left:50%;bottom:-1svh;z-index:4;height:calc(100svh - 60px - 1svh);width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 100%;will-change:transform,opacity;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));animation:rise 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{translate:0 60px}to{translate:0 0}}

/* map */
.mapwrap{position:absolute;inset:0;z-index:2;opacity:0;transform-style:preserve-3d;perspective:1100px;pointer-events:none}
.plane{position:absolute;left:0;top:0;width:975px;height:610px;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
#map{width:100%;height:100%;overflow:visible}
#slab path{fill:#050b13;stroke:#081321;stroke-width:1}
#nation path.fill{fill:#12283f}
#nation path.edge{fill:none;stroke:#dff0ff;stroke-width:1.6;filter:url(#glow);opacity:.85}
#hl g{opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1.2)}
#hl g.on{opacity:1;transform:translateY(-7px)}
#hl .st{fill:rgba(8,14,22,.18);filter:url(#lift)}
#hl .st-edge{fill:none;stroke:#fff;stroke-width:2.2;filter:url(#glow)}
#states path{fill:none;stroke:rgba(190,215,240,.22);stroke-width:.6}
#route .base{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
#route .ink{fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 8}
#route .head{fill:var(--paper)}
#heatmap circle{mix-blend-mode:screen;transition:r .6s}
.pins{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.pin{position:absolute;width:0;height:0;transform-style:preserve-3d}
.pin .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,106,19,.25),0 0 22px 6px rgba(255,106,19,.6)}
.pin .dot::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:ping 2s infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.pin .lab{position:absolute;left:0;bottom:12px;transform-origin:50% 100%;transform:translateX(-50%) rotateX(calc(-1 * var(--tilt,0deg))) scale(var(--ls,1));text-align:center;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.pin .lab b{display:block;margin:0 auto 4px;height:44px;width:auto}
.pin .lab span{display:block;font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.pin.on .dot{background:#fff;box-shadow:0 0 0 5px var(--orange),0 0 36px 12px rgba(255,106,19,.8)}
.pin.dim{opacity:.55}

/* flying area codes */
.fly{position:absolute;left:0;top:0;z-index:6;pointer-events:none;font-family:var(--display);line-height:.9;transform-origin:0 0;will-change:transform,opacity;display:none}

/* HUD */
.hud{position:absolute;inset:60px 0 0;z-index:8;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-tag,.hud-meta{position:absolute;top:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .4s}
.hud-tag{left:5vw}.hud-meta{right:5vw;border-bottom:1px solid var(--line);padding-bottom:4px}
.star{color:var(--orange)}
.show-map .hud-tag,.show-map .hud-meta{opacity:.9}
.rail{position:absolute;left:5vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.show-map .rail{opacity:1;visibility:visible}
.rail button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:26px;line-height:1;opacity:.4;transition:opacity .25s,color .25s;padding:4px 0}
.rail button::before{content:'';width:18px;height:2px;background:currentColor;transition:width .25s}
.rail button.on{opacity:1;color:var(--orange)}.rail button.on::before{width:34px}
.rail button:hover{opacity:1}
.rail button small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;opacity:.8}

.card{position:absolute;right:5vw;top:50%;width:min(400px,36vw);transform:translate(30px,-50%);opacity:0;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s;background:rgba(5,9,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:18px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.card.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-code{font-family:var(--display);font-size:64px;line-height:.85}
.card-place{font-family:var(--display);font-size:20px;line-height:1.05;text-transform:uppercase;margin-top:6px}
.card-place small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.7;margin-top:4px}
.tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:3px;white-space:nowrap;background:rgba(255,255,255,.12)}
.tag.low{background:var(--orange);color:#140600}
.tag.sold-out{background:#6b1010;text-decoration:line-through}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.count div{border:1px solid rgba(255,255,255,.14);border-radius:4px;text-align:center;padding:6px 0 4px}
.count b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.count span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.times{display:flex;gap:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:12px;flex-wrap:wrap}
.card-row{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:stretch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:13px 18px;border:1px solid var(--paper);transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:transparent;color:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper)}.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.drop{background:#1a2532;border-radius:4px;text-align:center;padding:6px 6px 8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.drop .flip{aspect-ratio:1}
.card-btns{display:flex;flex-direction:column;gap:8px}
.share{background:none;border:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;cursor:pointer;opacity:.8;text-align:left}

.ask{position:absolute;right:5vw;top:50%;width:min(320px,32vw);transform:translate(30px,-50%);opacity:0;visibility:hidden;transition:opacity .35s,transform .45s,visibility .35s;background:rgba(5,9,15,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:18px}
.ask.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
.ask h2{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase}
.ask form{display:flex;margin:14px 0 6px;border:1px solid rgba(255,255,255,.3)}
.ask input{flex:1;min-width:0;background:transparent;border:0;padding:10px;font-size:13px;outline:none}
.ask form button{width:44px;background:var(--paper);color:var(--ink);border:0;cursor:pointer;font-size:16px}
.ask-msg{font-size:11px;min-height:1.5em;color:#ffb27f}
.ask h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin:8px 0 6px;font-weight:400}
.ask ol{list-style:none;counter-reset:r}
.ask li{counter-increment:r;display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}
.ask li::before{content:counter(r);width:20px;height:20px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;font-size:10px}
.ask li span{flex:1}.ask li b{font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
.ask li.you{color:var(--orange)}
.ask li.bump{animation:bump .6s}
@keyframes bump{30%{background:rgba(255,106,19,.25)}}

.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;transition:opacity .3s;z-index:9;background:rgba(5,9,15,.55);padding:8px 14px;border-radius:30px}
.cue i{width:1px;height:26px;background:linear-gradient(var(--paper),transparent);animation:cue 1.6s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sections ---------- */
.sec-head{text-align:center;margin-bottom:40px}
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.sec-head h2,.stream h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,120px);line-height:.9;text-transform:uppercase;margin:8px 0}
.sub{opacity:.75}
.dates{position:relative;z-index:20;margin-top:-100svh;padding:120px 5vw 100px;background:linear-gradient(#0d1824,#0e1b2a 40%);border-radius:28px 28px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.12)}
.dates::before{content:'';position:absolute;left:50%;top:14px;width:56px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);transform:translateX(-50%)}
.shop,.stream,.foot{position:relative;z-index:21}
.stream{z-index:22;border-radius:28px 28px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.12)}
.foot{z-index:23}
.line-mask{display:block;overflow:hidden;padding-bottom:.04em}
.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1240px;margin:0 auto}
.stop{background:#0f1d2c;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.stop::before{content:attr(data-code);position:absolute;right:-10px;top:-24px;font-family:var(--display);font-size:150px;line-height:1;opacity:.06}
.stop .card-code{font-size:84px}
.stop .count{margin:0}
.stop .drop-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.stop .drop-row p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.stop .drop-row p b{display:block;font-size:13px}

.shop{padding:100px 5vw;text-align:center;background:#0e1b2a}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1240px;margin:0 auto 36px;text-align:left}
.item{background:#132435;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:16px;text-decoration:none;transition:transform .3s,border-color .3s}
.item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.item .flip{aspect-ratio:1;background:radial-gradient(circle at 50% 42%,#2b4660,#132435 70%);border-radius:4px;margin-bottom:12px;padding:8%}
.item b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.item span{font-size:12px;opacity:.7}

.stream{min-height:100svh;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding:110px 8vw;background:radial-gradient(70% 90% at 20% 50%,#22405c,var(--navy) 70%)}
.hand{font-family:var(--hand);font-size:clamp(40px,6vw,84px);line-height:1;transform:rotate(-6deg)}
.stream .btn{margin-top:20px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 5vw;background:var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}

/* ---------- phone ---------- */
@media (max-width:760px){
  .nav{padding:0 14px;height:54px}
  .nav-l{display:none}
  .nav{grid-template-columns:auto 1fr}
  .logo img{height:22px}
  /* the hero is laid out as the flyer: a 3:4 box centred under the nav,
     lettering columns ~25% wide each side, Belly ~84% of the box tall in the middle */
  .stage{--pw:min(100vw - 12px, (100svh - 54px - 16px) * .75);--ph:calc(var(--pw) * 1.331);--px:calc((100vw - var(--pw)) / 2);--py:calc(54px + (100svh - 54px - var(--ph)) / 2)}
  .col{top:calc(var(--py) + var(--ph) * .035);bottom:auto;height:calc(var(--ph) * .855)}
  .col-l{left:calc(var(--px) + var(--pw) * .01);width:calc(var(--pw) * .255);padding-right:calc(var(--pw) * .012)}
  .col-r{right:calc(var(--px) + var(--pw) * .01);width:calc(var(--pw) * .255);padding-left:calc(var(--pw) * .012)}
  .col-r .slot{padding:0}
  .belly{height:calc(var(--ph) * .83);bottom:calc(100svh - var(--py) - var(--ph) * .9)}
  .stage::after{content:'BELLYGANGKUSHINGTON.COM';position:absolute;z-index:5;left:0;right:0;top:calc(var(--py) + var(--ph) * .925);text-align:center;font:400 calc(var(--pw) * .052)/1 Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.02em;color:#f1eee6;opacity:var(--url,1);transition:opacity .4s;pointer-events:none}
  .stage.show-map::after{opacity:0}
  .hud{inset:54px 0 0}
  .hud-tag,.hud-meta{top:14px}
  .hud-tag{left:16px}.hud-meta{right:16px}
  .rail{left:auto;right:16px;top:44px;transform:none;flex-direction:row;gap:14px}
  .rail button{font-size:20px;gap:4px}.rail button::before{display:none}.rail button small{display:none}
  .card,.ask{left:12px;right:12px;width:auto;top:auto;bottom:12px;transform:translateY(30px)}
  .card.on,.ask.on{transform:none}
  .card{padding:14px}
  .card-code{font-size:46px}
  .count b{font-size:22px}
  .card-row{grid-template-columns:1fr 88px}
  .ask{padding:14px}.ask h2{font-size:22px}.ask h2 br{display:none}
  .ask li:nth-child(n+4){display:none}
  .cue{bottom:14px}
  .dates,.shop{padding:80px 16px 60px}
  .stops{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr 1fr}
  .stream{grid-template-columns:1fr;padding:80px 16px;text-align:center}
  .reup{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  .w{animation:none;opacity:1;transform:none;filter:none}.belly{animation:none}
  .fog i,.pin .dot::after,.cue i{animation:none}
}

/* merch that turns around */
.flip{perspective:900px;display:block}
.flip .spin,.flip .fi{width:100%;height:100%;transform-style:preserve-3d}
.flip .fi{position:relative;transition:transform .9s cubic-bezier(.3,1.3,.4,1)}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.flip .bk{transform:rotateY(180deg)}
.item:hover .fi,.drop:hover .fi{transform:rotateY(180deg)}

.reup{width:100%;max-width:640px;height:auto;justify-self:center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.stream .sub{font-size:18px;margin-top:6px}
.reup.hand{transform:none}

/* phones: same look, far less GPU work per scroll frame */
.lite body::after,.lite .fog{display:none}
.lite #nation path.edge{filter:none;stroke-width:2.2;opacity:.95}
.lite #hl .st{filter:none}
.lite #hl .st-edge{filter:none;stroke-width:3.2}
.lite #route{filter:none}
.lite #heatmap circle{mix-blend-mode:normal;opacity:.7}
.lite .belly,.lite .reup{filter:none}
.lite .flip img{filter:none}
.lite .w{filter:none}
.lite .plane{will-change:transform}

/* keep pins just above the map surface so they don't flicker against it in Safari */
.pins{transform:translateZ(2px);transform-style:preserve-3d}
.pin .dot{transform:translateZ(1px)}