/* ============================================================
   DJ VOCKA — persistent identity, sound control, mega menu
   ============================================================ */

/* ══════════ THE ROOM (atmosphere layers) ══════════ */
#room{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.room-css{
  position:fixed; inset:0; z-index:0; pointer-events:none; --rc:#E5202B;
  background:
    radial-gradient(90% 60% at 20% 8%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 62%),
    radial-gradient(70% 55% at 82% 78%, color-mix(in srgb, var(--rc) 10%, transparent), transparent 60%),
    linear-gradient(180deg,#0A0A11,#06060A 60%,#08080E);
}
.grain{
  position:fixed; inset:-120%; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite; will-change:transform;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-2%,-3%)} 33%{transform:translate(-4%,2%)}
  50%{transform:translate(2%,-4%)} 66%{transform:translate(-1%,3%)} 83%{transform:translate(3%,1%)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }
/* everything the reader reads floats above the room */
#main, .foot, #hud, #menu, #threshold{ position:relative; z-index:2; }

/* ══════════ HUD ══════════ */
#hud{ position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:0; transition:opacity .9s var(--e-out) .3s; }
body.entered #hud{ opacity:1; }
#hud > *{ pointer-events:auto; }
/* soft floors so the persistent controls always read over live media */
#hud::before, #hud::after{ content:''; position:absolute; left:0; right:0; pointer-events:none; z-index:-1; }
#hud::before{ top:0; height:clamp(96px,13vh,152px);
  background:linear-gradient(180deg, rgba(6,6,10,.78), rgba(6,6,10,.34) 46%, transparent); }
#hud::after{ bottom:0; height:clamp(86px,12vh,138px);
  background:linear-gradient(0deg, rgba(6,6,10,.82), rgba(6,6,10,.32) 52%, transparent); }

/* ── the mark: never leaves, changes state with the room ── */
.mark{ position:absolute; top:var(--gut); left:var(--gut); display:block; }
.mark .wmk{
  width:clamp(132px,12.4vw,196px); height:auto;
  filter:drop-shadow(0 2px 14px rgba(6,6,10,.85));
  transition:filter .4s var(--e-out);
}
.mark:hover .wmk{ filter:drop-shadow(0 2px 18px var(--glow)); }
/* ── top-right cluster ── */
.hud-tr{
  position:absolute; top:var(--gut); right:var(--gut);
  display:flex; align-items:center; gap:clamp(8px,1.1vw,14px);
}
.hud-tr .cta{ padding:.72rem 1.15rem; font-size:10.5px; }
@media(max-width:900px){ .hud-tr .cta, .hud-tr .lang{ display:none; } }

/* language toggle */
.lang{
  position:relative; display:flex; align-items:stretch; padding:3px; width:104px; flex:none;
  background:rgba(10,10,15,.5); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--ink-3);
}
.lang button{
  position:relative; flex:1 1 50%; min-width:0; background:none; border:0; cursor:pointer;
  padding:.48rem .2rem; text-align:center;
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.12em;
  color:var(--bone-mute); transition:color .3s var(--e-out);
}
.lang button:last-child{ letter-spacing:.12em; }
.lang button[aria-pressed="true"]{ color:var(--accent-ink); }
.lang .pill{
  position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  background:var(--accent); transition:transform .5s var(--e-both), background .4s;
}
.lang[data-active="km"] .pill{ transform:translateX(100%); }

/* ── sound: a floating platter in the bottom-right corner, out of the header ── */
.sound{
  position:fixed; z-index:70;
  right:max(var(--gut), env(safe-area-inset-right));
  bottom:max(var(--gut), calc(env(safe-area-inset-bottom) + 12px));
  display:flex; align-items:center; gap:.62rem; cursor:pointer; border:0;
  padding:.5rem .5rem; border-radius:999px;
  background:rgba(10,10,15,.58); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--ink-3), 0 14px 40px -18px rgba(0,0,0,.9);
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none;
  transition:color .3s var(--e-out), box-shadow .35s var(--e-out),
             opacity .7s var(--e-out) .5s, transform .7s var(--e-out) .5s;
}
body.entered .sound{ opacity:1; transform:none; pointer-events:auto; }
body.lang-km .sound{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.sound:hover{ color:var(--bone); box-shadow:inset 0 0 0 1px var(--ink-4), 0 16px 44px -16px rgba(0,0,0,.9); }
.sound[aria-pressed="true"]{
  color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%, transparent),
             0 0 34px -8px var(--glow), 0 14px 40px -18px rgba(0,0,0,.9);
}
/* the label is a tag that slides out of the platter */
.sound .lbl{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .5s var(--e-out), opacity .35s var(--e-out), padding .5s var(--e-out);
}
.sound:hover .lbl, .sound:focus-visible .lbl, .sound[aria-pressed="true"] .lbl{
  max-width:120px; opacity:1; padding-right:.55rem;
}
body.menu-open .sound{ opacity:0; pointer-events:none; transition-delay:0s; }
.meter{ width:30px; height:30px; flex:none; }
.meter .ring{ fill:none; stroke:var(--ink-4); stroke-width:1.6; transition:stroke .4s var(--e-out); }
.meter .arc{
  fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:0 100; transform-origin:50% 50%; transform:rotate(-90deg);
  transition:stroke-dasharray .12s linear, opacity .3s;
  opacity:0;
}
.sound[aria-pressed="true"] .meter .ring{ stroke:color-mix(in srgb,var(--accent) 30%, var(--ink-3)); }
.sound[aria-pressed="true"] .meter .arc{ opacity:1; }
.meter .bar{ fill:var(--bone-dim); transition:fill .4s var(--e-out); }
.sound[aria-pressed="true"] .meter .bar{ fill:var(--accent); }
.sound .lbl{ white-space:nowrap; }
@media(max-width:700px){
  .sound{ padding:.44rem; }
  .sound .lbl{ display:none; }
  .meter{ width:27px; height:27px; }
}

/* menu button — three bars that become an X */
.burger{
  position:relative; width:44px; height:38px; cursor:pointer; border:0;
  background:rgba(10,10,15,.5); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--ink-3);
  display:grid; place-items:center; transition:box-shadow .3s var(--e-out);
}
.burger:hover{ box-shadow:inset 0 0 0 1px var(--ink-4); }
.burger i{
  display:block; position:absolute; left:13px; width:18px; height:1.5px; background:var(--bone);
  transition:transform .5s var(--e-both), opacity .3s, width .4s var(--e-out), background .4s;
}
.burger i:nth-child(1){ transform:translateY(-5px); }
.burger i:nth-child(2){ width:12px; }
.burger i:nth-child(3){ transform:translateY(5px); }
.burger:hover i:nth-child(2){ width:18px; }
body.menu-open .burger i{ background:var(--accent-ink); }
body.menu-open .burger{ background:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
body.menu-open .burger i:nth-child(1){ transform:rotate(45deg); }
body.menu-open .burger i:nth-child(2){ opacity:0; width:0; }
body.menu-open .burger i:nth-child(3){ transform:rotate(-45deg); }

/* ── bottom-left chapter readout / bottom-right CTA ── */
.hud-chapter{
  position:absolute; bottom:var(--gut); left:var(--gut);
  display:flex; align-items:baseline; gap:.6rem;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-mute);
}
body.lang-km .hud-chapter{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.hud-chapter .n{ color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600; }
.hud-chapter .nm{ color:var(--bone-dim); }
.hud-chapter{ padding-block:.3rem; }
@media(max-width:900px){
  .hud-chapter{ display:none; }
}
@media(max-width:700px){
  .mark .wmk{ width:124px; }
  .burger{ width:42px; height:38px; }
}
@media(max-width:400px){
  .mark{ gap:.55rem; }
  .mark .wmk{ width:112px; }
  .burger{ width:40px; height:36px; }
}

/* ══════════ MEGA MENU ══════════ */
#menu{
  position:fixed; inset:0; z-index:80; display:grid; visibility:hidden;
  grid-template-rows:auto 1fr auto;
}
.menu-top{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:var(--gut) var(--gut) 0;
  opacity:0; transition:opacity .4s var(--e-out) .3s;
}
body.menu-open .menu-top{ opacity:1; }
.menu-top .wmk{ width:clamp(112px,10.5vw,168px); height:auto; fill:var(--bone); }
.menu-close{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  background:none; border:0; cursor:pointer; padding:.7rem .2rem .7rem 1rem;
  font-family:var(--f-ui); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); transition:color .3s var(--e-out);
}
body.lang-km .menu-close{ letter-spacing:0; text-transform:none; font-size:12px; }
.menu-close:hover{ color:var(--accent); }
.menu-close i{
  position:relative; display:block; width:42px; height:42px; flex:none; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ink-4); transition:box-shadow .35s var(--e-out), transform .5s var(--e-out);
}
.menu-close i::before, .menu-close i::after{
  content:''; position:absolute; left:50%; top:50%; width:15px; height:1.5px; background:currentColor;
  transform-origin:50% 50%;
}
.menu-close i::before{ transform:translate(-50%,-50%) rotate(45deg); }
.menu-close i::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.menu-close:hover i{ box-shadow:inset 0 0 0 1px var(--accent); transform:rotate(90deg); }
body.menu-open #menu{ visibility:visible; }
.menu-bg{ position:absolute; inset:0; overflow:hidden; background:#06060A;
  clip-path:inset(0 0 100% 0); transition:clip-path .82s var(--e-both); }
body.menu-open .menu-bg{ clip-path:inset(0 0 0 0); }
.menu-bg .shot{
  position:absolute; inset:0; opacity:0; transform:scale(1.08);
  transition:opacity .8s var(--e-out), transform 1.4s var(--e-out);
}
.menu-bg .shot img{ width:100%; height:100%; object-fit:cover; }
.menu-bg .shot.on{ opacity:.34; transform:scale(1); }
.menu-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 22% 30%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 66%),
    linear-gradient(120deg, rgba(6,6,10,.94) 20%, rgba(6,6,10,.55) 62%, rgba(6,6,10,.9));
}
.menu-inner{
  position:relative; display:grid; align-content:center; gap:clamp(4px,.9vh,10px);
  padding:calc(var(--gut) + 4.2rem) var(--gut) var(--gut);
  opacity:0; transition:opacity .3s;
}
body.menu-open .menu-inner{ opacity:1; transition-delay:.24s; }
.menu-list{ display:grid; gap:clamp(2px,.6vh,8px); }
.menu-item{
  display:flex; align-items:baseline; gap:clamp(10px,2vw,26px);
  padding:clamp(4px,.8vh,10px) 0; width:max-content; max-width:100%;
}
.menu-item .ix{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--bone-mute);
  transition:color .4s var(--e-out); flex:none;
}
.menu-item .tx{
  font-family:var(--f-display); font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(34px,7.4vw,96px); line-height:.92; text-transform:uppercase; letter-spacing:-.028em;
  color:var(--bone); position:relative; overflow:hidden; display:inline-block;
  transition:color .4s var(--e-out), transform .55s var(--e-out);
}
body.lang-km .menu-item .tx{
  font-family:var(--f-khmer); font-weight:700; text-transform:none; letter-spacing:0;
  font-size:clamp(26px,5.2vw,62px); line-height:1.35;
}
.menu-item .tx > span{ display:block; transform:translateY(110%); transition:transform .8s var(--e-out); }
body.menu-open .menu-item .tx > span{ transform:none; }
body.menu-open .menu-item:nth-child(1) .tx > span{ transition-delay:.26s }
body.menu-open .menu-item:nth-child(2) .tx > span{ transition-delay:.32s }
body.menu-open .menu-item:nth-child(3) .tx > span{ transition-delay:.38s }
body.menu-open .menu-item:nth-child(4) .tx > span{ transition-delay:.44s }
body.menu-open .menu-item:nth-child(5) .tx > span{ transition-delay:.50s }
body.menu-open .menu-item:nth-child(6) .tx > span{ transition-delay:.56s }
.menu-item:hover .tx, .menu-item:focus-visible .tx{ color:var(--accent); transform:translateX(clamp(8px,1.4vw,22px)); }
.menu-item:hover .ix{ color:var(--accent); }
.menu-item[aria-current="true"] .ix{ color:var(--accent); }
.menu-item[aria-current="true"] .tx::after{
  content:''; position:absolute; left:0; right:0; bottom:.12em; height:2px; background:var(--accent);
}
.menu-thumb{ display:none; }

.menu-foot{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2vw,28px);
  justify-content:space-between; padding:clamp(16px,2.6vh,28px) var(--gut) calc(var(--gut) + .4rem);
  border-top:1px solid rgba(244,241,235,.10);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--e-out) .42s, transform .6s var(--e-out) .42s;
}
body.menu-open .menu-foot{ opacity:1; transform:none; }
.menu-links{ display:flex; flex-wrap:wrap; gap:clamp(12px,2vw,26px); }
.menu-links a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .3s;
}
body.lang-km .menu-links a{ letter-spacing:0; text-transform:none; font-size:12.5px; }
.menu-links a:hover{ color:var(--accent); }

@media(min-width:900px){
  .menu-inner{ grid-template-columns:minmax(0,1fr) minmax(0,.46fr); align-items:center; gap:clamp(24px,4vw,60px); }
  .menu-thumb{
    display:block; position:relative; aspect-ratio:4/5; overflow:hidden; justify-self:end;
    width:min(100%, 420px); box-shadow:0 40px 90px rgba(0,0,0,.6);
    clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--e-both) .2s;
  }
  body.menu-open .menu-thumb{ clip-path:inset(0 0 0 0); }
  .menu-thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transform:scale(1.06); transition:opacity .55s var(--e-out), transform 1s var(--e-out);
  }
  .menu-thumb img.on{ opacity:1; transform:scale(1); }
  .menu-thumb::after{ content:''; position:absolute; inset:0;
    box-shadow:inset 0 0 0 1px rgba(244,241,235,.14);
    background:linear-gradient(180deg,transparent 55%,rgba(6,6,10,.5)); }
}
@media(max-width:899px){
  .menu-inner{ align-content:start; padding-top:calc(var(--gut) + 4.6rem); }
  .menu-item{ width:100%; justify-content:flex-end; align-items:baseline; gap:clamp(14px,4vw,28px);
    border-bottom:1px solid rgba(244,241,235,.08); padding:clamp(9px,1.6vh,16px) 0; }
  .menu-item .ix{ margin-right:auto; }
  .menu-item .tx{ font-size:clamp(30px,9vw,52px); }
  .menu-foot{ gap:14px; }
  .menu-foot .cta{ width:100%; justify-content:center; }
}
.menu-item .mth{ display:none; }
/* on touch there is no hover, so the item under the cycling backdrop marks itself */
.menu-item.previewing .tx{ color:var(--accent); }
.menu-item.previewing .ix{ color:var(--accent); }

/* ── touch targets: nothing tappable falls below 44px on a coarse pointer ── */
@media (pointer: coarse){
  .mark{ padding-block:.7rem; margin-block:-.7rem; }
  .lang button{ padding-block:.85rem; }
  .lang{ align-items:center; }
  .menu-links a{ padding-block:.7rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Direct call — a control, not a billboard. It lives in the same cluster
   as everything else in the header, and on small screens it moves into
   the menu instead of covering the mark.
   ══════════════════════════════════════════════════════════════════════ */
.hud-call{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  padding:.62rem .9rem; color:var(--bone-dim);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px var(--ink-3);
  background:rgba(10,10,16,.5);
  transition:color .3s var(--e-out), box-shadow .3s var(--e-out), background .3s var(--e-out);
}
.hud-call svg{ width:14px; height:14px; flex:none; }
.hud-call:hover{ color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);
  background:rgba(14,14,22,.8); }
body.lang-km .hud-call{ letter-spacing:0; }
@media(max-width:900px){ .hud-call{ display:none; } }

/* ── language stays reachable on small screens: the first thing in the menu ── */
.menu-top{ flex-wrap:wrap; }
.menu-utils{
  display:none; align-items:center; gap:.7rem; flex-wrap:wrap;
  width:100%; order:3; margin-top:clamp(14px,2.4vh,22px);
  opacity:0; transition:opacity .4s var(--e-out) .34s;
}
body.menu-open .menu-utils{ opacity:1; }
@media(max-width:900px){ .menu-utils{ display:flex; } }
.menu-utils .lang{ flex:none; }
.menu-utils .m-call{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  padding:.66rem 1rem; color:var(--bone);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px var(--ink-4); background:rgba(10,10,16,.55);
}
.menu-utils .m-call svg{ width:14px; height:14px; }
.menu-utils .m-call:hover{ color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 62%,transparent); }

/* the utilities row already carries language on small screens */
@media(max-width:900px){ .menu-foot .lang{ display:none; } }

/* ══════════════ FINAL MICRO-POLISH — header hierarchy ══════════════ */
/* On desktop language is a utility, not a competing CTA. Mobile keeps the stronger pill treatment. */
@media(min-width:901px){
  .hud-tr .lang{
    background:rgba(10,10,15,.42);
    box-shadow:inset 0 0 0 1px rgba(244,241,235,.13);
  }
  .hud-tr .lang .pill{
    top:auto; bottom:4px; height:2px;
    background:var(--accent);
  }
  .hud-tr .lang button[aria-pressed="true"]{ color:var(--accent); }
  .hud-tr .lang button:not([aria-pressed="true"]){ color:var(--bone-mute); }
}

/* Keep the work CTA unmistakable inside the mobile mega menu. */
@media(max-width:899px){
  .menu-foot .cta{
    min-height:48px;
    background:var(--accent);
    color:var(--accent-ink);
    box-shadow:0 0 30px -14px var(--glow);
  }
}