/* ============================================================
   DJ VOCKA — core
   One venue, many rooms. Every accent below was sampled from
   her own photographs.
   ============================================================ */

:root{
  /* ground — never flat black. The room always has a floor colour. */
  --ink:        #06060A;
  --ink-1:      #0C0C12;
  --ink-2:      #14141C;
  --ink-3:      #212029;
  --ink-4:      #34323F;
  --bone:       #F4F1EB;
  --bone-dim:   #B0ACA4;
  --bone-mute:  #77746E;

  /* personas / chapter accents. --acid is the opening colour, sampled from the
     supplied reference swatch (#D5E054). The journey runs acid → identities → red. */
  --acid:       #D5E054;
  --acid-hot:   #E4F25E;
  --violet:     #8A4FD8;
  --flare:      #E5202B;
  --volt:       #1E8FD6;
  --orchid:     #C85E9E;
  --ember:      #E8721E;
  --gold:       #C9A468;
  --cobalt:     #2FA3B8;
  --rose:       #D98CA6;

  /* live, JS-driven */
  --accent:      #D5E054;
  --accent-2:    #8A4FD8;
  --accent-ink:  #07070B;
  --glow:        color-mix(in srgb, var(--accent) 60%, transparent);

  --f-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --f-edit:    'Syne', 'Futura', 'Trebuchet MS', sans-serif;
  --f-ui:      'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-khmer:   'Kantumruy Pro', 'Noto Sans Khmer', 'Khmer OS Battambang', 'Khmer OS', sans-serif;

  --gut: clamp(18px, 4.2vw, 68px);
  --hud-h: clamp(58px, 7vw, 84px);

  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-in:   cubic-bezier(.7,0,.84,0);
  --e-both: cubic-bezier(.76,0,.24,1);
  --e-back: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul[role='list'],ul.plain{ list-style:none; padding:0; }
img,video,svg,canvas{ display:block; max-width:100%; }
/* a display: value on the element itself otherwise beats the UA [hidden] rule */
[hidden]{ display:none !important; }
button,input,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

html,body{
  background:var(--ink); color:var(--bone);
  font-family:var(--f-ui); font-weight:300; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* clip, never hidden — overflow-x:hidden on html/body breaks position:sticky */
  overflow-x:clip;
}
@supports not (overflow-x: clip){ body{ overflow-x:hidden; } }
body.is-locked{ overflow:hidden; height:100%; }

/* ---------- a11y ---------- */
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip{
  position:fixed; top:0; left:0; z-index:9999;
  background:var(--accent); color:var(--accent-ink);
  padding:.9rem 1.3rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(-140%); transition:transform .28s var(--e-out);
}
.skip:focus{ transform:translateY(0); }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* ---------- type ---------- */
.eyebrow{
  font-size:clamp(9.5px,1.02vw,11.5px); font-weight:500;
  letter-spacing:.30em; text-transform:uppercase; color:var(--bone-dim);
}
.eyebrow .n{ color:var(--accent); }
.display{
  font-family:var(--f-display); font-weight:900;
  font-variation-settings:'wdth' 120,'wght' 900;
  line-height:.80; letter-spacing:-.028em; text-transform:uppercase;
}
.statement{
  font-family:var(--f-edit); font-weight:700;
  font-size:clamp(22px,3vw,48px); line-height:1.12; letter-spacing:-.02em;
  text-wrap:balance; max-width:28ch;
}
.body{
  font-size:clamp(14px,1.15vw,16.5px); line-height:1.62; color:var(--bone-dim);
  max-width:44ch; font-weight:300;
}
.body strong{ color:var(--bone); font-weight:500; }

/* ---------- Khmer: its own typography, not English squeezed ---------- */
.kh{ font-family:var(--f-khmer); font-weight:400; line-height:1.85; letter-spacing:0; }
body.lang-km{ font-family:var(--f-khmer); line-height:1.8; }
body.lang-km .eyebrow{ letter-spacing:.06em; text-transform:none; font-size:clamp(11px,1.15vw,13px); line-height:1.7; }
body.lang-km .statement{ font-family:var(--f-khmer); font-weight:700; line-height:1.55;
  letter-spacing:0; font-size:clamp(19px,2.5vw,38px); max-width:26ch; }
body.lang-km .body{ font-family:var(--f-khmer); line-height:1.9; max-width:40ch; }
body.lang-km .display,
body.lang-km [data-latin]{ font-family:var(--f-display); } /* the name stays the name */
body.lang-km .kh-tight{ letter-spacing:0; text-transform:none; }

/* ---------- CTA: never in doubt that it is a button ---------- */
.cta{
  --cta-bg: var(--accent);
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.6rem; border:0; cursor:pointer; overflow:hidden; isolation:isolate;
  background:var(--cta-bg); color:var(--accent-ink);
  font-family:var(--f-ui); font-size:clamp(11px,1.05vw,13px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 0 0 1px var(--cta-bg), 0 12px 34px -12px var(--glow);
  transition:box-shadow .45s var(--e-out), transform .35s var(--e-out), filter .3s;
  will-change:transform;
}
body.lang-km .cta{ letter-spacing:0; text-transform:none; font-family:var(--f-khmer); font-weight:700; }
.cta::before{                                     /* light travelling across the face */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);
  transform:translateX(-120%); transition:transform .85s var(--e-out);
}
.cta:hover::before, .cta:focus-visible::before{ transform:translateX(120%); }
.cta:hover, .cta:focus-visible{ box-shadow:0 0 0 1px var(--cta-bg), 0 18px 46px -12px var(--glow); }
.cta:active{ transform:scale(.975); }
.cta .arrow{ display:block; width:16px; height:9px; flex:none; overflow:hidden; }
.cta .arrow svg{ width:32px; height:9px; transform:translateX(0); transition:transform .5s var(--e-out); }
.cta:hover .arrow svg, .cta:focus-visible .arrow svg{ transform:translateX(-16px); }

/* outline variant — same clarity, less weight */
.cta.ghost{
  background:transparent; color:var(--bone);
  box-shadow:inset 0 0 0 1px var(--ink-4);
}
.cta.ghost::before{ background:linear-gradient(105deg,transparent 20%,color-mix(in srgb,var(--accent) 26%,transparent) 48%,transparent 76%); }
.cta.ghost:hover, .cta.ghost:focus-visible{
  color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), 0 14px 40px -18px var(--glow);
}
.cta.sm{ padding:.78rem 1.15rem; font-size:10.5px; gap:.6rem; }
.cta.lg{ padding:1.35rem 2.2rem; font-size:clamp(12px,1.3vw,15px); }

/* ---------- reveal ---------- */
.rv{ display:block; overflow:hidden; }
.rv > span{ display:block; transform:translateY(108%); transition:transform 1s var(--e-out); }
.is-in .rv > span{ transform:none; }
.is-in .rv:nth-child(2) > span{ transition-delay:.075s; }
.is-in .rv:nth-child(3) > span{ transition-delay:.15s; }
.is-in .rv:nth-child(4) > span{ transition-delay:.225s; }
.fade{ opacity:0; transform:translateY(18px); transition:opacity 1s var(--e-out) .18s, transform 1s var(--e-out) .18s; }
.is-in .fade{ opacity:1; transform:none; }
.fade.d1{ transition-delay:.3s } .fade.d2{ transition-delay:.42s }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .rv > span{ transform:none; } .fade{ opacity:1; transform:none; }
}