/* SH Visual — scroll-driven hero (line -> space -> form -> light -> life) */

#shv-hero{position:relative;height:640vh;background:#0A0A0A}
#shv-hero *{box-sizing:border-box}

#shv-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0A0A0A}

/* ---- opening ---- */
#shv-open{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
#shv-open .shv-mark{width:34px;height:auto;opacity:.92}
#shv-open .shv-stem{width:1px;height:56px;margin-top:26px;
  background:linear-gradient(180deg,rgba(200,161,74,.5),rgba(200,161,74,0))}
#shv-open .shv-scroll{margin-top:18px;font-family:'Azeret Mono',monospace;font-weight:500;
  font-size:10px;letter-spacing:.42em;color:rgba(141,141,141,.9)}
#shv-open .shv-cue{position:relative;width:1px;height:44px;margin-top:12px;overflow:hidden;
  background:rgba(247,246,242,.09)}
#shv-open .shv-cue i{position:absolute;left:0;top:0;width:1px;height:14px;background:#C8A14A;
  animation:shvCue 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes shvCue{0%{transform:translateY(-100%)}100%{transform:translateY(240%)}}

/* ---- drawing sheet frame ---- */
#shv-sheet{position:absolute;inset:clamp(16px,2.6vw,40px);z-index:12;opacity:0;
  border:1px solid rgba(247,246,242,.14);pointer-events:none}
#shv-sheet b{position:absolute;background:#C8A14A}
#shv-sheet b.tl-h{top:-1px;left:-1px;width:14px;height:1px}
#shv-sheet b.tl-v{top:-1px;left:-1px;width:1px;height:14px}
#shv-sheet b.br-h{bottom:-1px;right:-1px;width:14px;height:1px}
#shv-sheet b.br-v{bottom:-1px;right:-1px;width:1px;height:14px}
#shv-sheet .shv-tag{position:absolute;top:13px;left:16px;display:flex;gap:24px;
  font-family:'Azeret Mono',monospace;font-weight:500;font-size:9px;letter-spacing:.24em;
  color:rgba(141,141,141,.85)}
#shv-sheet .shv-tag em{font-style:normal;color:rgba(200,161,74,.92)}
#shv-sheet .shv-title{position:absolute;bottom:13px;right:16px;text-align:right;display:flex;
  flex-direction:column;gap:5px;font-family:'Azeret Mono',monospace;font-weight:400;font-size:9px;
  letter-spacing:.18em;color:rgba(141,141,141,.85)}
#shv-sheet .shv-title s{text-decoration:none;color:rgba(247,246,242,.82);letter-spacing:.24em}

/* ---- 3D model space ---- */
#shv-camera{position:absolute;inset:0;z-index:16;perspective:1500px;perspective-origin:50% 46%}
#shv-model{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#shv-storeys{position:absolute;inset:0;transform-style:preserve-3d}
.shv-storey{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity}
.shv-storey svg{width:min(58vh,74vw);height:auto;overflow:visible}
.shv-storey .shv-g{vector-effect:non-scaling-stroke}

/* draw-on: dash animation driven by --shv-draw (0..1) */
.shv-storey .shv-g{stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--shv-draw,0)))}

/* ---- final render ---- */
#shv-elev{position:absolute;inset:0;z-index:22;opacity:0;pointer-events:none;overflow:hidden}
#shv-elev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform}
#shv-elev .shv-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 52%,rgba(10,10,10,.86) 100%)}
#shv-elev-cap{position:absolute;left:clamp(24px,4vw,64px);bottom:clamp(74px,9vw,124px);
  display:flex;flex-direction:column;gap:12px;max-width:560px}
#shv-elev-cap .k{font-family:'Azeret Mono',monospace;font-weight:500;font-size:10px;
  letter-spacing:.24em;color:#C8A14A}
#shv-elev-cap .t{font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(26px,3.6vw,52px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  color:#F7F6F2}
#shv-elev-cap .s{font-family:'Azeret Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.14em;color:rgba(247,246,242,.66)}

/* ---- centred payoff ---- */
#shv-tag{position:absolute;left:0;right:0;top:calc(50% + clamp(66px,9.5vw,138px));z-index:64;
  display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;pointer-events:none}
#shv-tag i{width:34px;height:1px;background:rgba(200,161,74,.55);display:block}
#shv-tag span{font-family:'Azeret Mono',monospace;font-weight:500;
  font-size:clamp(10px,1.1vw,13px);letter-spacing:.5em;color:rgba(247,246,242,.8);text-align:center}

/* ---- word cues + rail ---- */
#shv-cues{position:absolute;left:clamp(26px,4vw,54px);bottom:clamp(26px,4vw,54px);z-index:40;
  display:flex;align-items:baseline;gap:14px;pointer-events:none}
#shv-cues .n{font-family:'Azeret Mono',monospace;font-weight:400;font-size:9px;
  letter-spacing:.2em;color:#C8A14A}
#shv-cues .stack{position:relative;height:20px;min-width:120px}
#shv-cues .stack span{position:absolute;left:0;top:0;font-family:'Archivo',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.36em;color:rgba(247,246,242,.9);opacity:0;
  transition:opacity 420ms cubic-bezier(.16,1,.3,1)}
#shv-cues .stack span.on{opacity:1}

#shv-railwrap{position:absolute;right:clamp(20px,3vw,40px);top:50%;transform:translateY(-50%);
  z-index:40;width:1px;height:26vh;background:rgba(247,246,242,.1)}
#shv-rail{width:1px;background:#C8A14A;height:0%}

@media (max-width:767px){
  #shv-hero{height:480vh}
  .shv-storey svg{width:min(46vh,86vw)}
  #shv-cues .stack span{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  #shv-hero{height:100vh}
  #shv-stage{position:relative}
  #shv-open,#shv-camera,#shv-cues,#shv-railwrap,#shv-sheet{display:none}
  #shv-elev{opacity:1}
}