/* ============================================================
   BAD DUDE DESIGN — interface layer
   Black. White. One rule weight. Nothing else.
   ============================================================ */

:root{
  --ink:#000;
  --paper:#fff;
  --hair:rgba(0,0,0,.16);
  --hair-2:rgba(0,0,0,.34);
  --mute:rgba(0,0,0,.46);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(14px, 2.6vw, 30px);
  --micro:clamp(9px, .78vw, 10.5px);
  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── stage ─────────────────────────────────────────────────── */
#stage{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:grab;
}
body.is-dragging #stage{cursor:grabbing}
body.is-over #stage{cursor:pointer}

/* ── film ──────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-120px;z-index:2;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-14px,9px)}
  50%{transform:translate(11px,-11px)}75%{transform:translate(-7px,-6px)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 104% at 50% 46%, transparent 58%, rgba(0,0,0,.05) 86%, rgba(0,0,0,.13) 100%);
}

/* ── boot ──────────────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:grid;place-items:center;padding:var(--pad);
  transition:opacity .9s var(--ease),visibility .9s;
}
.boot.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{width:min(560px,100%);text-align:left}
/* the gap has to be sized off the display type, not the inherited 16px root */
.boot__mark{display:flex;flex-wrap:wrap;gap:0 clamp(11px,2.2vw,23px);line-height:.86}
.boot__word{
  font-size:clamp(38px,8.4vw,84px);font-weight:700;letter-spacing:-.045em;
  opacity:0;transform:translateY(.36em);
  animation:rise .9s var(--ease) forwards;
}
.boot__word:nth-child(2){animation-delay:.09s}
.boot__word:nth-child(3){animation-delay:.18s}
@keyframes rise{to{opacity:1;transform:none}}

.boot__meta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:clamp(26px,5vh,48px);
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.22em;
  opacity:0;animation:fade .7s .5s var(--ease) forwards;
}
@keyframes fade{to{opacity:1}}
.boot__bar{
  margin-top:9px;height:1px;background:var(--hair);position:relative;overflow:hidden;
  opacity:0;animation:fade .7s .5s var(--ease) forwards;
}
.boot__bar i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--ink);transition:width .38s var(--ease-io)}

.boot__enter{
  margin-top:26px;display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--ink);padding:13px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
  opacity:0;animation:rise .6s var(--ease) forwards;
}
.boot__enter::after{content:"";width:26px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.boot__enter:hover{background:var(--ink);color:var(--paper)}
.boot__enter:hover::after{width:40px}
.boot__hint{
  margin:20px 0 0;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.22em;color:var(--mute);
  opacity:0;animation:fade .7s .7s var(--ease) forwards;
}

/* ── HUD shell ─────────────────────────────────────────────── */
.hud{
  position:fixed;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:var(--pad);
  padding:var(--pad);
  pointer-events:none;
  opacity:0;transform:translateY(-6px);
  transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s;
}
/* the room draws right up to the edges, so the chrome carries its own light */
.hud::before{
  content:"";position:absolute;left:0;right:0;height:165%;pointer-events:none;z-index:-1;
}
.hud--top::before{top:0;background:linear-gradient(to bottom,rgba(255,255,255,.97) 26%,rgba(255,255,255,.6) 62%,transparent 100%)}
.hud--bottom::before{bottom:0;background:linear-gradient(to top,rgba(255,255,255,.97) 26%,rgba(255,255,255,.6) 62%,transparent 100%)}
.hud--bottom{transform:translateY(6px)}
body.is-live .hud{opacity:1;transform:none}
body.is-panel .hud--bottom{opacity:0;transform:translateY(6px);transition-delay:0s}
.hud *{pointer-events:auto}
.hud--top{top:0;justify-content:space-between}
.hud--bottom{bottom:0;justify-content:space-between;padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}

/* brand */
.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}
.brand__glyph{display:grid;place-items:center;transition:transform .6s var(--ease)}
.brand:hover .brand__glyph{transform:rotate(-90deg)}
.brand__name{font-family:var(--mono);font-size:11px;letter-spacing:.2em;font-weight:500;white-space:nowrap}

/* nav */
.nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:center}
.nav button{
  position:relative;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.2em;padding:8px 11px;color:var(--mute);
  transition:color .35s var(--ease);white-space:nowrap;
}
.nav button::after{
  content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav button:hover{color:var(--ink)}
.nav button:hover::after,.nav button.is-on::after{transform:scaleX(1)}
.nav button.is-on{color:var(--ink)}

/* right cluster */
.hud__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ghost{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--hair-2);padding:9px 14px;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.2em;white-space:nowrap;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.ghost:hover{border-color:var(--ink)}
.ghost--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ghost--solid:hover{background:var(--paper);color:var(--ink)}
.eq{display:flex;align-items:flex-end;gap:2px;height:9px}
.eq i{width:2px;height:3px;background:currentColor;transition:height .3s var(--ease)}
.ghost[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite alternate}
.ghost[aria-pressed="true"] .eq i:nth-child(2){animation-delay:.15s}
.ghost[aria-pressed="true"] .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{from{height:2px}to{height:9px}}

/* bottom readouts */
.readout{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:var(--micro);letter-spacing:.2em}
.readout__k{color:var(--mute)}
.readout__v{min-width:2ch}
.readout--r{justify-content:flex-end}
.controls{display:flex;gap:18px;font-family:var(--mono);font-size:var(--micro);letter-spacing:.18em;color:var(--mute)}
.controls span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
kbd{
  font:inherit;border:1px solid var(--hair);padding:3px 5px;line-height:1;
  color:var(--ink);border-radius:2px;
}

/* ── hotspots ──────────────────────────────────────────────── */
.spots{position:fixed;inset:0;z-index:10;pointer-events:none}
.spot{
  position:absolute;top:0;left:0;pointer-events:auto;cursor:pointer;
  transform:translate3d(-50%,-50%,0);
  opacity:0;transition:opacity .5s var(--ease);
  will-change:transform,opacity;
}
body.is-live .spot{opacity:1}
body.is-panel .spot,body.is-contact .spot{opacity:0;pointer-events:none}
.spot__dot{
  position:relative;display:block;width:34px;height:34px;
}
.spot__dot::before{
  content:"";position:absolute;inset:0;border:1px solid var(--ink);border-radius:50%;
  transform:scale(.34);transition:transform .5s var(--ease),background .4s var(--ease);
}
.spot__dot::after{
  content:"";position:absolute;inset:0;border:1px solid var(--ink);border-radius:50%;
  opacity:0;transform:scale(.34);
  transition:transform .8s var(--ease),opacity .8s var(--ease);
}
.spot:hover .spot__dot::before,.spot.is-near .spot__dot::before{transform:scale(.5);background:var(--ink)}
.spot:hover .spot__dot::after{opacity:1;transform:scale(1)}
.spot__tag{
  position:absolute;left:30px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.2em;
  opacity:0;transform-origin:left;
  transition:opacity .4s var(--ease);
}
.spot__tag::before{content:"";width:0;height:1px;background:var(--ink);transition:width .45s var(--ease)}
.spot:hover .spot__tag,.spot.is-near .spot__tag{opacity:1}
.spot:hover .spot__tag::before,.spot.is-near .spot__tag::before{width:16px}
.spot__n{color:var(--mute)}

/* ── panel ─────────────────────────────────────────────────── */
.panel{
  position:fixed;inset:0;z-index:30;pointer-events:none;
  display:flex;justify-content:flex-end;
}
/* the room does its own fading in 3D — this only catches stray clicks */
.panel::before{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.06);
  opacity:0;transition:opacity .6s var(--ease);
}
.panel.is-open{pointer-events:auto}
.panel.is-open::before{opacity:1}
.panel__sheet{
  position:relative;width:min(486px,100%);height:100%;
  background:var(--paper);border-left:1px solid var(--ink);
  transform:translateX(101%);
  transition:transform .78s var(--ease);
  display:flex;flex-direction:column;
}
.panel.is-open .panel__sheet{transform:none}
.panel__scroll{
  padding:clamp(28px,4.4vw,54px);
  padding-top:clamp(64px,8vh,86px);
  overflow-y:auto;overscroll-behavior:contain;flex:1;
}
.panel__close{
  position:absolute;top:22px;right:22px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--hair);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.panel__close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.panel__idx{
  margin:0 0 18px;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.24em;color:var(--mute);
}
.panel__title{
  margin:0;font-size:clamp(31px,4.3vw,46px);line-height:1.02;
  letter-spacing:-.035em;font-weight:700;
}
.panel__lede{
  margin:18px 0 0;font-size:15px;line-height:1.62;max-width:36ch;
  color:rgba(0,0,0,.72);
}
.rule{height:1px;background:var(--hair);margin:30px 0 26px}
.panel__list{list-style:none;margin:0;padding:0}
.panel__list li{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--hair);
}
.panel__list li:first-child{border-top:1px solid var(--hair)}
.panel__list .n{font-family:var(--mono);font-size:var(--micro);letter-spacing:.18em;color:var(--mute);flex:0 0 2ch}
.panel__list .t{font-size:14px;letter-spacing:-.005em}
.panel__list .d{margin-left:auto;font-family:var(--mono);font-size:var(--micro);letter-spacing:.16em;color:var(--mute);text-align:right}
.panel__foot{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.panel__cta{
  display:inline-flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--ink);padding-bottom:5px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
}
.panel__cta::after{content:"→";transition:transform .4s var(--ease)}
.panel__cta:hover::after{transform:translateX(6px)}
/* secondary outbound link — quieter than the CTA, still unmistakable */
.panel__link{
  display:inline-flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--hair);padding-bottom:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mute);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.panel__link::after{content:"↗";font-size:12px;transition:transform .4s var(--ease)}
.panel__link:hover{color:var(--ink);border-color:var(--ink)}
.panel__link:hover::after{transform:translate(3px,-3px)}
.panel__note{margin:0;font-family:var(--mono);font-size:var(--micro);letter-spacing:.16em;color:var(--mute);line-height:2}

/* stagger children in */
.panel.is-open .panel__scroll > *{animation:panelIn .7s var(--ease) backwards}
.panel.is-open .panel__scroll > *:nth-child(1){animation-delay:.16s}
.panel.is-open .panel__scroll > *:nth-child(2){animation-delay:.21s}
.panel.is-open .panel__scroll > *:nth-child(3){animation-delay:.26s}
.panel.is-open .panel__scroll > *:nth-child(4){animation-delay:.31s}
.panel.is-open .panel__scroll > *:nth-child(5){animation-delay:.34s}
.panel.is-open .panel__scroll > *:nth-child(6){animation-delay:.38s}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── contact ───────────────────────────────────────────────── */
.contact{
  position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;padding:var(--pad);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility .6s;
}
.contact.is-open{opacity:1;visibility:visible}
.contact__inner{width:min(720px,100%);position:relative}
.contact__close{position:fixed;top:22px;right:22px;border-color:rgba(255,255,255,.3)}
.contact__close:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.contact.is-open .contact__inner > *{animation:panelIn .8s var(--ease) backwards}
.contact.is-open .contact__inner > *:nth-child(2){animation-delay:.1s}
.contact.is-open .contact__inner > *:nth-child(3){animation-delay:.16s}
.contact.is-open .contact__inner > *:nth-child(4){animation-delay:.22s}
.contact.is-open .contact__inner > *:nth-child(5){animation-delay:.28s}
.contact.is-open .contact__inner > *:nth-child(6){animation-delay:.34s}
.contact__kicker{margin:0 0 20px;font-family:var(--mono);font-size:var(--micro);letter-spacing:.26em;opacity:.6}
.contact__h{margin:0;font-size:clamp(38px,7vw,74px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.contact__mail{
  display:inline-block;margin:34px 0 0;
  font-size:clamp(17px,2.6vw,26px);letter-spacing:-.02em;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:6px;
  transition:border-color .4s var(--ease),opacity .4s var(--ease);
}
.contact__mail:hover{border-color:var(--paper)}
.contact__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:22px;margin-top:clamp(38px,6vh,60px);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
}
.contact__grid div{display:flex;flex-direction:column;gap:8px}
.contact__k{font-family:var(--mono);font-size:var(--micro);letter-spacing:.22em;opacity:.5}
.contact__v{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.contact__v--link{
  align-self:flex-start;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px;
  transition:border-color .35s var(--ease),opacity .35s var(--ease);
}
.contact__v--link:hover{border-color:var(--paper)}
.contact__fine{margin:26px 0 0;font-size:13px;line-height:1.7;opacity:.62;max-width:44ch}

/* ── noscript ──────────────────────────────────────────────── */
.noscript{position:fixed;inset:0;z-index:70;background:var(--paper);padding:8vw;display:grid;align-content:center;gap:14px}
.noscript h1{font-size:clamp(34px,7vw,68px);letter-spacing:-.04em;margin:0}
.noscript p{max-width:52ch;line-height:1.65;margin:0}
.noscript a{border-bottom:1px solid var(--ink)}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  /* the nav drops out of the top bar and becomes a scrollable strip
     above the readout — otherwise small screens have no way in */
  .nav{
    position:fixed;left:0;right:0;bottom:calc(var(--pad) + max(env(safe-area-inset-bottom),0px) + 20px);
    justify-content:flex-start;flex-wrap:nowrap;gap:0;
    padding:0 calc(var(--pad) - 11px);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:#fff;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{padding:10px 11px;font-size:10px}
  .hud--bottom::before{height:380%}          /* reach up behind the nav strip */
  .controls span:nth-child(n+3){display:none}
  .brand__name{display:none}
  .ghost__t{font-size:9px}
  #btn-sound .ghost__t{display:none}
  #btn-sound{padding:9px 11px}
}
@media (max-width:560px){
  /* a sheet that rises from the floor, leaving a sliver of the room
     visible so you never forget you are standing in one */
  .panel{align-items:flex-end;justify-content:center}
  .panel__sheet{
    width:100%;height:91%;border-left:0;border-top:1px solid var(--ink);
    transform:translateY(102%);
  }
  .panel__scroll{padding-top:60px}
  .panel__close{top:13px;right:13px}
  .spot__tag{display:none}
  .controls{display:none}
  .hud--bottom{justify-content:space-between}
}
@media (hover:none){
  .spot__tag{opacity:1}
  .spot__tag::before{width:16px}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none;opacity:.24}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.12s!important}
}