/* Velvet Stage · concept by Brand Evolution */
:root{
  --night:#120A0C; --night-2:#1C1013; --velvet:#7A0F1E; --velvet-hi:#B3182F; --velvet-deep:#3C060E; --gold:#E0B25A; --gold-deep:#A87A2C;
  --ivory:#F7EEDD; --muted:#CDBCA8; --silver:#9FB4C7; --line:rgba(247,238,221,.14);
  --display:"DM Serif Display", Georgia, serif; --body:"Figtree", system-ui, sans-serif; --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1.05rem/1.6 var(--body); color:var(--ivory); background:var(--night); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.04; margin:0 0 .45em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ivory); color:var(--night); padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative}
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center}
.display{font-size:clamp(2.2rem, 5vw, 4rem); letter-spacing:-.005em}
.kicker{font:700 .78rem/1.3 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem}
.sub{max-width:40em; color:var(--muted); font-size:1.1rem}
.fine{font-size:.88rem; color:var(--muted)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 1rem var(--body); text-decoration:none; color:var(--night); background:var(--gold);
  padding:.8em 1.5em; border:0; border-radius:999px; cursor:pointer; transition:background .2s, transform .2s, color .2s}
.btn:hover{background:#F0C877; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ivory); box-shadow:inset 0 0 0 1.5px rgba(247,238,221,.6)}
.btn-ghost:hover{background:rgba(247,238,221,.1)}
.btn-small{padding:.55em 1.1em; font-size:.92rem}
.btn-line{background:transparent; color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); padding:.6em 1.15em; font-size:.92rem; white-space:nowrap}
.btn-line:hover{background:var(--gold); color:var(--night)}
.btn-wide{width:100%}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.6rem}

/* nav: clear over the stage, frosted once scrolled */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:8px 8px 8px 16px; border-radius:999px; transition:background .35s, box-shadow .35s}
.nav.scrolled{background:rgba(18,10,12,.74); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); box-shadow:0 8px 28px rgba(0,0,0,.4), inset 0 0 0 1px var(--line)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:400 1.45rem var(--display)}
.logo svg{width:30px; height:30px}
.nav nav{display:flex; gap:24px}
.nav nav a{text-decoration:none; font-weight:600; font-size:.95rem}
.nav nav a:hover{color:var(--gold)}

/* ---------- hero stage ---------- */
.hero{position:relative; height:100vh; height:100svh; min-height:600px; overflow:hidden; background:var(--night); isolation:isolate}
.stage-bg{position:absolute; inset:0; z-index:0; background:radial-gradient(70% 60% at 50% 42%, #3A1A1C 0%, #1A0C0E 55%, #0B0607 100%)}
.stage-bg.photo{background:linear-gradient(rgba(11,6,7,.25), rgba(11,6,7,0) 40%, rgba(11,6,7,.35)), url(img/stage-bg.webp) 50% 100%/cover no-repeat, #0B0607}
.stage-bg.photo .floor{display:none}
.floor{position:absolute; left:-20%; right:-20%; bottom:0; height:26%; transform-origin:50% 100%; transform:perspective(500px) rotateX(58deg);
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 9%), linear-gradient(#5A3520, #2A170E)}
.hero-copy{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:2; width:min(58vw, 760px); text-align:center}
.hero-copy > *{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.hero-copy > :nth-child(1){animation-delay:.15s} .hero-copy > :nth-child(2){animation-delay:.22s}
.hero-copy > :nth-child(3){animation-delay:.32s} .hero-copy > :nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
.title{font-size:clamp(3.4rem, 11vw, 9.5rem); line-height:.95; margin:0 0 .2em; color:var(--ivory); text-shadow:0 0 40px rgba(224,178,90,.35), 0 2px 0 rgba(0,0,0,.4)}
.tag{font-size:clamp(1.05rem,1.6vw,1.3rem); color:#EADBC4; max-width:30em; margin:0 auto}
.spot{position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,46%), rgba(255,228,170,.34) 0, rgba(255,214,150,.12) 13vmax, rgba(255,214,150,0) 30vmax)}
.spot::before{content:""; position:absolute; left:var(--mx,50%); top:-10%; width:34vmax; height:70%; transform:translateX(-50%);
  background:linear-gradient(rgba(255,236,190,.12), rgba(255,236,190,0)); clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter:blur(6px)}
.curtains{position:absolute; inset:0; z-index:4; pointer-events:none; transition:opacity .5s}
.cur{position:absolute; top:0; bottom:0; width:50.5%; --rest:.4;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 80%, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, #3C060E 0, #7A0F1E 2.4%, #B3182F 3.8%, #8A1222 5.4%, #3C060E 7%);
  animation:part 1s cubic-bezier(.6,0,.25,1) .05s forwards}
.cur-l{left:0; transform-origin:0 50%; box-shadow:inset -10px 0 0 -4px var(--gold-deep)}
.cur-r{right:0; transform-origin:100% 50%; box-shadow:inset 10px 0 0 -4px var(--gold-deep)}
@keyframes part{to{transform:scaleX(var(--rest))}}
html.closing .cur{animation:close 1.6s cubic-bezier(.65,0,.25,1) forwards}
@keyframes close{0%{transform:scaleX(var(--rest))} 45%,55%{transform:scaleX(1)} 100%{transform:scaleX(var(--rest))}}
#curtain{position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; opacity:0; transition:opacity .5s}
html.gl #curtain{opacity:1}
/* photo curtains (app.js initPC); the drawn ones above stay as the fallback */
.pcur{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden}
.pc{position:absolute; inset:0; transform-origin:50% 0}
.pc img{position:absolute; top:0; height:100%; max-width:none; pointer-events:none; user-select:none; filter:brightness(.9) saturate(1.05); will-change:transform,opacity}
.pc-c{left:0; transform-origin:0 0}
.pc-o{opacity:0}
.pc-r{scale:-1 1}  /* the right drape is the left one mirrored */
html.pc-on .curtains, html.pc-on #curtain{display:none}
.valance.photo{background:url(img/valance-cut.webp) 0 0/auto 100% repeat-x; box-shadow:none; height:clamp(78px,14vh,132px); filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) brightness(.95)}
.valance.photo::before,.valance.photo::after{display:none}
html.gl .curtains{opacity:0}
.valance{position:absolute; left:0; right:0; top:0; height:clamp(56px,9vh,92px); z-index:6; pointer-events:none;
  background:linear-gradient(#4A0711, #8A1222 60%, #5E0A16); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.valance::before{content:""; position:absolute; left:0; right:0; bottom:8px; height:3px; background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep))}
.valance::after{content:""; position:absolute; left:0; right:0; top:100%; height:22px;
  background:radial-gradient(circle at 50% 0, #7A0F1E 0 13px, var(--gold) 13px 15px, transparent 15.5px) 0 -6px/34px 28px repeat-x}
.call{position:absolute; right:clamp(16px,3vw,32px); bottom:22px; z-index:7; font:600 .9rem var(--body); color:var(--gold); background:rgba(18,10,12,.6);
  border:1.5px solid rgba(224,178,90,.6); border-radius:999px; padding:8px 16px; cursor:pointer; backdrop-filter:blur(4px)}
.call:hover{background:rgba(224,178,90,.15)}

/* ---------- marquee sign ---------- */
.sign{background:var(--night); padding:64px 16px 24px; display:flex; justify-content:center}
.sign-board{position:relative; width:min(860px, 100%); text-align:center; padding:34px 28px 30px; border-radius:20px; background:linear-gradient(#24151A,#170D10);
  box-shadow:inset 0 0 0 2px rgba(224,178,90,.4), 0 24px 50px rgba(0,0,0,.45)}
.sign-k{font:700 .78rem var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 .4em}
.sign-t{font:400 clamp(1.8rem,4.6vw,3.4rem)/1.05 var(--display); margin:0; color:var(--ivory); transition:text-shadow .4s}
.sign-board.full .sign-t{text-shadow:0 0 24px rgba(255,214,140,.55)}
.bulbs{position:absolute; left:16px; right:16px; display:flex; justify-content:space-between; pointer-events:none}
.bulbs.top{top:-7px} .bulbs.bot{bottom:-7px}
.bulb{width:12px; height:12px; border-radius:50%; background:#4A3A2A; box-shadow:inset 0 -2px 0 rgba(0,0,0,.4); transition:background .25s, box-shadow .25s}
.bulb.on{background:#FFE6A8; box-shadow:0 0 10px 3px rgba(255,210,120,.65), 0 0 2px #fff inset}
.sign-board.full .bulb.on:nth-child(odd){animation:chase 1.2s steps(1) infinite}
.sign-board.full .bulb.on:nth-child(even){animation:chase 1.2s steps(1) .6s infinite}
@keyframes chase{50%{background:#7A5A30; box-shadow:none}}

/* ---------- sections ---------- */
.sec{position:relative; padding:clamp(80px,10vw,140px) 0; scroll-margin-top:70px}
.shows{background:var(--night)}
.seats{background:linear-gradient(#170D10, #120A0C)}
.spaces{background:var(--velvet-deep)}
.hire{background:var(--night-2)}
.head-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px}
.head-row .display{margin:0}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:600 .92rem var(--body); color:var(--ivory); background:transparent; border:1.5px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:.2s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:var(--night)}

.shows-grid{display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start}
.show-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.show{display:grid; grid-template-columns:78px 1fr auto auto auto; gap:20px; align-items:center; padding:20px 12px; border-bottom:1px solid var(--line);
  border-radius:14px; transition:background .3s, opacity .35s, transform .35s}
.show:hover,.show.active{background:rgba(247,238,221,.05)}
.show.hide{display:none}
.date{display:grid; place-items:center; width:72px; height:84px; border-radius:14px; background:var(--night-2); box-shadow:inset 0 0 0 1.5px rgba(224,178,90,.45); line-height:1; transition:background .3s, color .3s}
.date b{font:400 2rem var(--display); color:var(--ivory)}
.date span{font:700 .78rem var(--body); text-transform:uppercase; letter-spacing:.14em; color:var(--gold)}
.date em{font-style:normal; font-size:.78rem; color:var(--muted)}
.show:hover .date,.show.active .date{background:var(--gold)}
.show:hover .date *,.show.active .date *{color:var(--night)}
.info h3{font-size:clamp(1.35rem,2.2vw,1.8rem); margin:0 0 .15em}
.info p{margin:0; color:var(--muted); font-size:.95rem}
.info .blurb{color:#E3D4BF; margin-top:.3em}
.genre{font:700 .74rem var(--body); letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(224,178,90,.12); color:var(--gold)}
.from{font-size:.9rem; color:var(--muted); white-space:nowrap}
.from b{font:400 1.35rem var(--display); color:var(--ivory)}
.empty{padding:20px 0; color:var(--muted)}
.poster-col{position:sticky; top:96px}
.poster{position:relative; aspect-ratio:2/3; border-radius:16px; overflow:hidden; --c1:#7A0F1E; --c2:#E0B25A; background:var(--c1);
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); transition:background .5s, transform .5s cubic-bezier(.3,1.4,.5,1); display:flex; flex-direction:column; justify-content:flex-end; padding:20px}
.poster.flip{transform:rotateY(8deg) scale(.97)}
.poster-art{position:absolute; inset:0; overflow:hidden}
.poster-art i{position:absolute; display:block; transition:background .5s, transform .8s cubic-bezier(.3,1.2,.4,1)}
.p-sun{width:62%; aspect-ratio:1; left:19%; top:12%; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff8, transparent 60%), var(--c2)}
.p-arch{left:12%; right:12%; bottom:-8%; height:58%; border-radius:999px 999px 0 0; background:repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 8px, transparent 8px 16px), color-mix(in srgb, var(--c1) 70%, #000)}
.p-fig{width:16%; height:30%; left:42%; bottom:20%; border-radius:999px 999px 6px 6px; background:#0008}
.poster:hover .p-sun{transform:translateY(-6%) scale(1.04)}
.poster-k,.poster-t,.poster-d{position:relative; z-index:1}
.poster-k{font:700 .66rem var(--body); letter-spacing:.2em; text-transform:uppercase; color:#fffc}
.poster-t{font:400 1.7rem/1.05 var(--display); color:#fff; margin:6px 0; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.poster-d{font-size:.85rem; color:#fffd}

/* ---------- seat map ---------- */
.seat-tools{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin:8px 0 26px}
.sel{display:flex; align-items:center; gap:10px; font-weight:600}
.sel select{font:600 1rem var(--body); color:var(--ivory); background:var(--night-2); border:1.5px solid rgba(224,178,90,.5); border-radius:12px; padding:9px 12px; max-width:min(78vw, 360px)}
.legend{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; font-size:.9rem; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:7px}
.legend b{color:var(--ivory); font-weight:700}
.lg{display:inline-block; width:16px; height:15px; border-radius:4px}
.lg.t-p{background:var(--velvet-hi)} .lg.t-g{background:var(--gold)} .lg.t-s{background:var(--silver)}
.lg.booked{background:#3A3033} .lg.mine{background:var(--ivory); box-shadow:0 0 0 2px var(--gold)}
.seat-grid{display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start}
.seat-map{position:relative; background:radial-gradient(90% 60% at 50% 0%, rgba(224,178,90,.1), transparent 70%), var(--night-2); border-radius:22px; padding:18px 14px 10px; box-shadow:inset 0 0 0 1px var(--line); overflow-x:auto}
.swipe{display:none; font-size:.85rem; color:var(--muted); margin:0 0 8px}
#seatSvg{width:100%; height:auto; min-width:0; touch-action:manipulation}
#seatSvg:focus{outline:none}
.stage{fill:url(#stageG)}
.stage-t{font:700 15px var(--body); letter-spacing:.5em; fill:#2A1708}
.row-t{font:700 14px var(--body); fill:var(--muted)}
.exit-t{font:700 11px var(--body); letter-spacing:.2em; fill:#6FBF73}
.seat{cursor:pointer; stroke:rgba(0,0,0,.35); stroke-width:1; transition:fill .2s, stroke .2s}
.seat.t-p{fill:var(--velvet-hi)} .seat.t-g{fill:var(--gold)} .seat.t-s{fill:var(--silver)}
.seat:hover{stroke:#fff; stroke-width:2.5}
.seat.booked{fill:#3A3033; cursor:not-allowed; stroke:none}
.seat.mine{fill:var(--ivory); stroke:var(--gold); stroke-width:3.5}
.seat.focus{stroke:#fff; stroke-width:3; stroke-dasharray:4 3}
.seat.pop{animation:seatpop .35s ease-out}
@keyframes seatpop{50%{stroke:#fff; stroke-width:8}}
.seat-tip{position:absolute; left:0; top:0; z-index:3; pointer-events:none; background:var(--ivory); color:var(--night); font:600 .82rem/1.3 var(--body); padding:6px 10px; border-radius:9px;
  white-space:nowrap; opacity:0; transform:translate(-50%, -130%); transition:opacity .15s; box-shadow:0 8px 20px rgba(0,0,0,.4)}
.seat-tip.show{opacity:1}
.summary{position:sticky; top:96px; background:var(--night-2); border-radius:22px; padding:22px; box-shadow:inset 0 0 0 1px var(--line)}
.summary h3{font-size:1.6rem; margin:0}
.sum-show{color:var(--muted); font-size:.92rem; margin:2px 0 14px}
.picked{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:6px; min-height:34px}
.picked li{font:700 .85rem var(--body); background:rgba(224,178,90,.14); color:var(--ivory); border-radius:999px; padding:5px 10px; display:flex; align-items:center; gap:6px}
.picked li.none{background:none; padding:0; font-weight:500; color:var(--muted)}
.picked button{border:0; background:none; color:var(--gold); cursor:pointer; font:700 1rem var(--body); padding:0 2px; line-height:1}
.lines{margin:0 0 10px; border-top:1px solid var(--line); padding-top:10px}
.lines div{display:flex; justify-content:space-between; font-size:.95rem; padding:3px 0}
.lines dt{color:var(--muted)} .lines dd{margin:0; font-weight:600}
.total{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; border-top:1px solid var(--line); padding-top:12px; margin-bottom:16px}
.total b{font:400 2.2rem var(--display); font-variant-numeric:tabular-nums}
.link{display:block; margin:10px auto 0; background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; font:500 .9rem var(--body)}
.concept{margin:12px 0 6px; font-weight:700; font-size:.9rem; color:var(--gold); text-align:center; border-radius:10px; padding:6px}
.concept.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:rgba(224,178,90,.35)} 100%{background:transparent}}

/* ---------- spaces + hire ---------- */
.space-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
.space{position:relative; overflow:hidden; border-radius:var(--r); padding:26px 24px 22px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(247,238,221,.12); transition:transform .3s ease-out}
.space::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px circle at var(--lx,50%) var(--ly,0%), rgba(255,220,150,.22), transparent 70%)}
.space:hover::before{opacity:1}
.space > *{position:relative}
.space .num{font:400 2.6rem var(--display); color:var(--gold)}
.space h3{font-size:1.8rem; margin:.2em 0 .3em}
.space p{color:#E8D9C4}
.space .meta{font-weight:700; color:var(--gold); margin:0; font-size:.9rem; letter-spacing:.04em}
.rates{list-style:none; margin:0; padding:0}
.rates li{display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:16px 4px; border-bottom:1px solid var(--line)}
.rates b{font:400 1.7rem var(--display); color:var(--gold); white-space:nowrap}
.rates li.small{font-size:.88rem; color:var(--muted); border:0}

.foot{background:#0B0607; padding:80px 0 90px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center}
.foot .display{font-size:clamp(1.9rem,3.8vw,3rem)}
.foot-meta{color:var(--muted)}
.foot-meta b{color:var(--ivory)}
.copy{text-align:center; font-size:.85rem; color:var(--muted); margin:48px 0 0}
.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:700 .78rem var(--body); text-decoration:none; color:var(--night); background:rgba(247,238,221,.94); padding:7px 12px; border-radius:999px}
.badge:hover{background:var(--gold)}

/* reveal (only when JS is running) */
.rv{opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}

@media (max-width:1000px){
  .shows-grid,.seat-grid{grid-template-columns:1fr}
  .poster-col{display:none}
  .summary{position:static}
}
@media (max-width:760px){
  .nav nav{display:none}
  .two,.foot-grid,.space-cards{grid-template-columns:1fr}
  .hero-copy{width:calc(100% - 96px); top:54%}
  .cur{--rest:.2}
  .cta-row .btn{padding:.75em 1.2em}
  .show{grid-template-columns:64px 1fr; gap:10px 14px; padding:16px 6px}
  .date{width:62px; height:74px}
  .date b{font-size:1.7rem}
  .genre{grid-column:2; justify-self:start}
  .from{grid-column:2}
  .show .btn-line{grid-column:2; justify-self:start}
  .swipe{display:block; position:sticky; left:0; width:max-content; max-width:calc(100vw - 72px)}
  #seatSvg{min-width:720px}
  .seat-map{padding:14px 10px 6px}
}
@media (max-width:420px){
  .hero-copy{width:calc(100% - 64px)}
  .btn-small{font-size:.85rem; padding:.5em .9em}
  .logo{font-size:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .cur{transform:scaleX(var(--rest))}
  .rv{opacity:1; transform:none}
}

/* real photos of the three spaces (img/spec.json) */
.space .ph{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:8/5;object-fit:cover;margin:-26px -24px 16px;transition:transform .5s ease-out}
.space:hover .ph{transform:scale(1.03)}