/* scrolly.css - the scroll showcase stage (shared by every scene). Colours follow the Maison: near-black, warm gold. */
.scrolly{position:relative;height:var(--run,560vh);background:radial-gradient(120% 80% at 50% 40%,#17140f 0%,#0a0a0b 62%)}
.scrolly .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.scrolly .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.scrolly.is-live .gl{opacity:1}
.scrolly .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.scrolly.is-still .still{opacity:1}
.scrolly .stage::after{content:"";position:absolute;left:50%;top:46%;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid rgba(232,192,102,.18);
  border-top-color:#e8c066;animation:bcspin 1s linear infinite;transition:opacity .4s}   /* loading ring until the scene is live */
.scrolly.is-live .stage::after,.scrolly.is-still .stage::after{opacity:0;animation:none}
@keyframes bcspin{to{transform:rotate(360deg)}}
.scrolly .glow{position:absolute;left:50%;top:46%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,192,102,.10),rgba(232,192,102,0) 65%);pointer-events:none}
.scrolly .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 78% at 50% 48%,rgba(10,10,11,0) 55%,rgba(10,10,11,.85) 82%,#0a0a0b 100%)}
.scrolly .cap{position:absolute;left:0;right:0;bottom:9vh;padding:0 16px;text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.scrolly .cap.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s ease .16s,transform .45s ease .16s}   /* the old line leaves before the new one arrives */
.scrolly .cap .eyebrow{display:block;margin-bottom:6px}
.scrolly .cap h2{margin:0 auto;max-width:18ch;font-size:clamp(26px,4.4vw,48px);line-height:1.08}
.scrolly .cap p{margin:10px auto 0;max-width:40ch;color:#c9c4b8}
.scrolly .cap.top{top:12vh;bottom:auto}
.scrolly .bar{position:absolute;left:0;top:0;height:2px;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#8a6a2a,#e8c066)}
.scrolly .hint{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8d877a;
  opacity:calc(1 - var(--p,0)*25)}
/* still mode (reduced motion, low-end, no WebGL): the finished piece, the steps as a short list */
.scrolly.is-still{height:auto}
.scrolly.is-still .stage{position:relative;height:auto;min-height:70vh}
.scrolly.is-still .still{position:relative;height:70vh}
.scrolly.is-still .cap{position:relative;opacity:1;transform:none;bottom:auto;top:auto;padding:14px 16px}
.scrolly.is-still .cap:not(.final){display:none}
.scrolly.is-still .hint,.scrolly.is-still .bar{display:none}
@media (max-width:760px){.scrolly .cap{bottom:7vh}.scrolly .cap.top{top:9vh}}