/* MONOLITH EXTRAS — luxury interaction layer
   grain · selection · scrollbar · roll buttons · venue gallery ·
   chapter index · sound toggle · concierge · ripple canvas */

/* selection + scrollbar */
::selection{background:var(--bone);color:var(--bg);}
html{scrollbar-width:thin;scrollbar-color:var(--edge) var(--bg);}
body::-webkit-scrollbar{width:8px;}
body::-webkit-scrollbar-track{background:var(--bg);}
body::-webkit-scrollbar-thumb{background:var(--edge);}

/* film grain — tile is generated and cycled by JS (monolith-extras.js);
   screen blend lifts shadows with light specks — visible on pure black */
.grain{
  position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.09;
  mix-blend-mode:screen;background-size:224px 224px;
}
html.grain-off .grain{display:none;}

/* roll-label buttons */
.btn .roll{position:relative;display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;}
.btn .roll span{display:block;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.btn .roll span + span{position:absolute;left:0;top:100%;width:100%;}
.btn:hover .roll span{transform:translateY(-100%);}

/* sound toggle */
.sound-toggle{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .15s ease;
  display:inline-flex;align-items:flex-end;gap:8px;
}
.sound-toggle:hover{color:var(--bone);}
.sound-toggle.on{color:var(--bone);}
.sound-toggle .eqm{height:11px;}
.sound-toggle:not(.on) .eqm i{animation:none;transform:scaleY(.25);}

/* chapter index */
.chapter{
  position:fixed;left:48px;bottom:28px;z-index:45;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease;
}
.chapter.show{opacity:1;transform:none;}
@media (max-width:900px){.chapter{display:none;}}

/* venue gallery (pinned horizontal) */
.vgal{position:relative;height:280vh;}
.vgal::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line);}
.vgal-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;}
.vgal-head{padding:96px 48px 40px;}
.vgal-track{display:flex;gap:40px;align-items:flex-start;padding:0 48px;will-change:transform;}
.vcard{flex:0 0 540px;}
.vcard .ph{aspect-ratio:16/10;width:100%;}
.vcard-n{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--disp-track);font-size:calc(56px * var(--disp-scale));line-height:1;margin-top:20px;}
.vcard .mono{margin-top:8px;}
@media (max-width:900px){
  .vgal{height:auto;}
  .vgal-pin{position:static;height:auto;overflow:visible;}
  .vgal-head{padding:56px 18px 24px;}
  .vgal-track{overflow-x:auto;padding:0 18px 40px;gap:18px;-webkit-overflow-scrolling:touch;}
  .vcard{flex:0 0 76vw;}
  .vcard-n{font-size:calc(30px * var(--disp-scale));}
}

/* booking concierge */
.concierge{
  position:fixed;inset:0;z-index:95;background:var(--bg);
  visibility:hidden;opacity:0;transition:opacity .35s ease,visibility .35s;
  display:flex;flex-direction:column;
}
.concierge.open{visibility:visible;opacity:1;}
.conc-top{display:flex;justify-content:space-between;align-items:center;padding:28px 48px;border-bottom:1px solid var(--line);}
.conc-close{background:none;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .15s ease;}
.conc-close:hover{color:var(--bone);}
.conc-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 48px;max-width:1100px;}
.conc-q{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:28px;}
.conc-opts{display:flex;flex-direction:column;align-items:flex-start;}
.conc-opt{
  background:none;border:none;cursor:pointer;text-align:left;padding:14px 0;
  border-bottom:1px solid var(--line);width:100%;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--disp-track);
  font-size:calc(54px * var(--disp-scale));line-height:1.05;color:var(--dim);
  transition:color .2s ease,padding-left .25s ease;
}
.conc-opt:hover{color:var(--bone);padding-left:20px;}
.conc-input{
  background:none;border:none;outline:none;width:100%;
  border-bottom:1px solid var(--line);padding:8px 0 16px;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--disp-track);
  font-size:calc(54px * var(--disp-scale));line-height:1.1;color:var(--bone);caret-color:var(--bone);
}
.conc-input::placeholder{color:var(--edge);}
.conc-hint{margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.conc-hint b{color:var(--bone);font-weight:400;}
.conc-next{
  margin-top:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bone);color:var(--bone);background:transparent;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:0 30px;height:52px;transition:background .18s ease,color .18s ease;
}
.conc-next:hover{background:var(--bone);color:var(--bg);}
.conc-review{font-size:17px;line-height:1.7;color:var(--grey);max-width:60ch;}
.conc-review b{color:var(--bone);font-weight:600;}
@media (max-width:900px){
  .conc-top{padding:18px;}
  .conc-body{padding:0 18px;}
  .conc-opt,.conc-input{font-size:calc(30px * var(--disp-scale));}
}

/* partners logo marquee — JS-driven, moves left to right */
.lmq{border-bottom:1px solid var(--line);padding:88px 0 96px;overflow:hidden;}
.lmq .lmq-head{padding:0 48px;margin-bottom:64px;display:flex;justify-content:space-between;}
.lmq-track{display:flex;align-items:center;gap:88px;width:max-content;will-change:transform;}
.lmq-track img{zoom:.42;width:auto;height:auto;filter:invert(1);mix-blend-mode:screen;opacity:.8;transition:opacity .2s ease;-webkit-user-drag:none;user-select:none;pointer-events:none;}
/* taller marks read louder — pull them down a notch */
.lmq-track img[src$="t1.png"],.lmq-track img[src$="t2.png"],.lmq-track img[src$="t3.png"]{zoom:.32;}
.lmq-track img:hover{opacity:1;}
@media (max-width:900px){
  .lmq{padding:52px 0 60px;}
  .lmq .lmq-head{padding:0 18px;margin-bottom:40px;}
  .lmq-track{gap:44px;}
  .lmq-track img{zoom:.3;}
  .lmq-track img[src$="t1.png"],.lmq-track img[src$="t2.png"],.lmq-track img[src$="t3.png"]{zoom:.23;}
}