/* =========================================================
   THE STORY — 3D opening (scene in assets/js/story3d.js)
   ========================================================= */
.st{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#070d22;color:#fff;isolation:isolate}
.st__stage{position:absolute;inset:0;z-index:0}
.st__gl{display:block;width:100%!important;height:100%!important}
/* fallback when WebGL isn't available: a still dawn over Golgotha */
.st__flat{display:none;position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,#070d22 0%,#1d3566 45%,#d9643a 80%,#f2c46d 100%)}
.st__flat svg{position:absolute;left:0;bottom:0;width:100%;height:60%}
.st--flat .st__flat{display:block}
.st__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(4,8,20,.55) 0,rgba(4,8,20,.15) 26%,transparent 46%),radial-gradient(130% 90% at 50% 40%,transparent 55%,rgba(3,6,16,.5) 100%)}

/* scripture captions */
.st__caps{position:absolute;left:0;right:0;bottom:clamp(84px,15vh,150px);z-index:2;display:grid;place-items:center;pointer-events:none;padding:0 var(--gutter)}
.st__cap{grid-area:1/1;margin:0;max-width:min(920px,92vw);text-align:center;opacity:0}
.st__cap blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(1.7rem,4.2vw,3.6rem);line-height:1.08;letter-spacing:-.02em;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.st__cap figcaption{margin-top:clamp(12px,1.8vh,20px);font-family:var(--f-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#FFC23D}
.st__cap .w{display:inline-block;will-change:transform,opacity,filter}
.st__cap--big blockquote{font-size:clamp(3.6rem,12vw,11rem);line-height:.86;letter-spacing:-.04em;color:#fff}
.st__cap--big b{display:block;font-family:var(--f-display);font-style:normal;font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.035em}
.st__cap--big em{font-style:italic}
.st__cap--big figcaption{color:#0B0710}

/* act markers */
.st__acts{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;z-index:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.st__acts li{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-direction:row-reverse;transition:color .5s}
.st__acts i{width:22px;height:1.5px;background:currentColor;transition:width .5s var(--ease),background .5s}
.st__acts li.is-on{color:#fff}
.st__acts li.is-on i{width:44px;background:#FFC23D}

/* scroll cue */
.st__cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);opacity:0}
.st__cue i{position:relative;width:1.5px;height:42px;background:rgba(255,255,255,.18);overflow:hidden}
.st__cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#FFC23D;animation:stCue 2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes stCue{to{top:100%}}

/* the final flood of light */
.st__flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(80% 70% at 50% 45%,#FFF6DC 0%,#FFD27A 45%,#FFC23D 100%)}

@media (max-width:760px){
  .st__acts{display:none}
  .st__caps{bottom:clamp(90px,16svh,140px)}
  .st__cap blockquote{font-size:clamp(1.6rem,7.4vw,2.4rem)}
  .st__cap--big blockquote{font-size:clamp(3.6rem,22vw,6.5rem)}
}