:root{
  --bg:#07080a;
  --ink:#0b0c0e;
  --gold:#e6b45c;
  --gold-hi:#f4cd7e;
  --gold-dim:rgba(230,180,92,.32);
  --text:#ece5d8;
  --dim:#a89e8d;
  --dimmer:#6f675b;
  --rose:#c96f4a;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Lato','Helvetica Neue',Helvetica,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--gold);color:var(--ink)}

/* ---------- layers ---------- */

#scene{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;
  opacity:0;transition:opacity 1.6s ease .1s;
}
body.is-live #scene{opacity:1}

#poster{
  position:fixed;inset:0;z-index:0;display:none;background:var(--bg);
}
#poster svg{width:100%;height:100%;display:block}
body.no-webgl #poster{display:block}
body.no-webgl #scene{display:none}

#scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.08) 16%,rgba(7,8,10,0) 34%,rgba(7,8,10,0) 52%,rgba(7,8,10,.34) 78%,rgba(7,8,10,.82) 100%),
    linear-gradient(102deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,.12) 30%,rgba(7,8,10,0) 52%),
    linear-gradient(258deg,rgba(7,8,10,.52) 0%,rgba(7,8,10,.12) 26%,rgba(7,8,10,0) 46%);
}

#page{position:relative;z-index:2}

/* ---------- loader ---------- */

#loader{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:7vh 7vw;gap:1.1rem;
  transition:opacity .9s ease,visibility .9s;
}
body.is-live #loader{opacity:0;visibility:hidden}
.loader-kicker{color:var(--gold);letter-spacing:.52em;font-size:.8rem}
.loader-line{width:min(300px,42vw);height:1px;background:rgba(230,180,92,.18);overflow:hidden}
.loader-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width .5s var(--ease)}
.loader-sub{font-family:var(--serif);font-style:italic;color:var(--dimmer);font-size:.95rem}

/* ---------- shared type ---------- */

.kicker{
  font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.34em;font-size:.72rem;color:var(--gold);
}
.kicker--dim{color:var(--dimmer);letter-spacing:.3em}

.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none}

/* ---------- header frame ---------- */

#frame{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:2.4rem 3.2rem;pointer-events:none;
  transition:opacity .7s ease,transform .7s var(--ease);
}
body.is-scrolled #frame{opacity:0;transform:translateY(-10px)}
.frame-brand{font-weight:600;letter-spacing:.46em}
.frame-coords{text-align:right;display:grid;gap:.35rem}
.frame-coords .kicker{letter-spacing:.28em}

/* ---------- title act ---------- */

.act{position:relative}
.act--title{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 7vw 9vh;
}
.act-kicker{margin-bottom:2.2rem}

.display{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.9rem,9.2vw,8.2rem);
  line-height:.99;letter-spacing:-.012em;color:var(--text);
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.5),0 1px 6px rgba(0,0,0,.35);
}
.display .line{display:block}
.display em{
  font-style:italic;font-weight:600;color:var(--gold);
  text-shadow:0 0 42px rgba(230,180,92,.35);
}

.echo{
  margin-top:2.4rem;max-width:34rem;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,1.7vw,1.3rem);color:var(--dim);
}
.echo .tr{position:relative;cursor:help;border-bottom:1px solid rgba(230,180,92,.22);padding-bottom:2px}
.echo .tr::after{
  content:attr(data-en);
  position:absolute;left:0;top:calc(100% + 10px);
  font-family:var(--sans);font-style:normal;font-size:.78rem;letter-spacing:.04em;
  color:var(--gold-hi);background:rgba(7,8,10,.82);border:1px solid rgba(230,180,92,.22);
  padding:.5rem .8rem;white-space:nowrap;max-width:78vw;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-4px);transition:opacity .45s ease,transform .45s var(--ease);
  pointer-events:none;
}
.echo .tr:hover::after,.echo .tr:focus-visible::after{opacity:1;transform:none}

.vertical{
  position:absolute;right:2.4rem;top:50%;
  writing-mode:vertical-rl;transform:translateY(-50%);
  color:var(--dimmer);letter-spacing:.3em;font-size:.6rem;
  max-height:46vh;overflow:hidden;white-space:nowrap;
}

.scrollcue{
  position:absolute;left:7vw;bottom:2.6rem;display:none;
  align-items:center;gap:1rem;
}
body.is-live .scrollcue{display:flex}
.scrollcue i{
  width:1px;height:52px;background:linear-gradient(var(--gold),transparent);
  animation:cue 3.2s var(--ease) infinite;transform-origin:top;
}
@keyframes cue{
  0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}
}

/* ---------- whispers ---------- */

.act--whispers{padding:26vh 7vw 12vh}
.frag{max-width:36rem;margin-bottom:34vh}
.frag--left{margin-right:auto}
.frag--right{margin-left:auto;text-align:right}
.frag--right .frag-tr{direction:ltr}
.frag-kicker{margin-bottom:1.4rem}
.frag-line{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.22;
  letter-spacing:-.008em;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.frag-tr{
  margin-top:1.3rem;font-family:var(--serif);font-style:italic;
  color:#bdb29c;font-size:1.02rem;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.5);
}
.frag-en{
  display:block;margin-top:.45rem;font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:.8rem;letter-spacing:.06em;color:#b3a890;
  text-shadow:0 0 2px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6);
}
.frag--date{margin:38vh auto 8vh;text-align:center;max-width:none}
.frag--date .frag-kicker{margin-bottom:2rem}
.frag-line--date{
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.12;font-weight:500;
}
.frag-line--date em{font-style:italic;color:var(--gold)}
.frag--date .frag-tr{margin-top:1.8rem}
.frag-when{margin-top:2.6rem;color:var(--dim);letter-spacing:.4em}

/* ---------- footer ---------- */

.act--foot{
  padding:16vh 7vw 12vh;text-align:left;
  border-top:1px solid rgba(230,180,92,.12);
  display:grid;gap:1.1rem;
}
.foot-greet{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--text);margin-bottom:.6rem;
}
.foot-credits{font-size:.72rem;color:var(--dimmer);letter-spacing:.06em}

/* ---------- sound ---------- */

#soundBtn{
  position:fixed;right:3.2rem;bottom:2.4rem;z-index:6;
  display:flex;align-items:center;gap:.8rem;
  background:rgba(7,8,10,.55);border:1px solid rgba(230,180,92,.25);
  color:var(--gold);padding:.7rem 1.1rem;cursor:pointer;
  backdrop-filter:blur(6px);
  transition:border-color .45s ease,background .45s ease,opacity .8s ease;
  opacity:0;pointer-events:none;
}
body.is-live #soundBtn{opacity:1;pointer-events:auto}
#soundBtn:hover,#soundBtn:focus-visible{border-color:var(--gold);background:rgba(230,180,92,.08)}
#soundBtn:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.sb-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.sb-bars i{width:2px;height:4px;background:var(--gold);transition:height .3s ease}
#soundBtn[aria-pressed="true"] .sb-bars i{animation:sb 1.1s ease-in-out infinite}
#soundBtn[aria-pressed="true"] .sb-bars i:nth-child(2){animation-delay:.2s}
#soundBtn[aria-pressed="true"] .sb-bars i:nth-child(3){animation-delay:.45s}
@keyframes sb{0%,100%{height:4px}50%{height:12px}}
.sb-label{letter-spacing:.3em;font-size:.66rem}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .vertical{display:none}
  #frame{padding:1.8rem 1.6rem}
  .act--title{padding:0 6vw 12vh}
  .act--whispers{padding:20vh 6vw 8vh}
  .frag{margin-bottom:24vh;max-width:30rem}
  #soundBtn{right:1.4rem;bottom:1.4rem}
}
@media (max-width:600px){
  .frame-coords .kicker--dim{display:none}
  .frame-brand{letter-spacing:.34em}
  .echo{font-size:1rem}
  .frag--right{text-align:left;margin-left:0}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  .reveal{transition:opacity .3s linear;transform:none}
  .scrollcue i{animation:none;transform:scaleY(1)}
  #soundBtn[aria-pressed="true"] .sb-bars i{animation:none;height:10px}
  html{scroll-behavior:auto}
}