/* Full-screen hero; the page glides up over it (comparison copy).
   The hero stays pinned for one screen of scrolling. The photo drifts up slowly,
   the title moves with the page, and the cream section slides over the top. */
:root{--h:100svh}
.hero-stage{position:relative;height:calc(var(--h) * 2)}
.hero-stage .ref-hero{position:sticky;top:0;height:var(--h);min-height:0;max-height:none;overflow:hidden}
.hero-stage .ref-hero>img{animation:hero-frame-in 1.4s cubic-bezier(.2,.7,.2,1) both;will-change:transform}
.hero-stage .hero-copy,.hero-stage .hero-location{will-change:transform}
.hero-stage + #portfolio{position:relative;z-index:2;margin-top:calc(var(--h) * -1);background:var(--paper,#f5f4f1);box-shadow:0 -18px 40px rgba(7,12,20,.22)}
/* Everything after the hero rides above the pinned photo, even when a section is shorter than the screen */
.hero-stage ~ section,.hero-stage ~ footer,main:has(.hero-stage) ~ footer{position:relative;z-index:2}
.hero-stage ~ section:not(.about-dark){background:var(--paper,#f5f4f1)}
.hero-stage .ref-hero.is-covered{visibility:hidden}
@keyframes hero-frame-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero-stage{height:auto}
  .hero-stage .ref-hero{position:relative;height:clamp(600px,72svh,760px)}
  .hero-stage .ref-hero>img{animation:none}
  .hero-stage + #portfolio{margin-top:0;box-shadow:none}
}
/* Rotating hero: slides stack over the first photo and crossfade (hero-rotate.js) */
.ref-hero>img.hero-slide,.hero-stage .ref-hero>img.hero-slide{animation:none;opacity:0;transition:opacity 1.8s ease-in-out}
.ref-hero>img.hero-slide.is-on,.hero-stage .ref-hero>img.hero-slide.is-on{opacity:1}
.hero-loc-text{transition:opacity .5s ease}.hero-loc-text.is-fading{opacity:0}
.hero-dots{position:absolute;left:50%;bottom:40px;z-index:3;display:flex;align-items:center;gap:8px;translate:-50% 0;opacity:0;transition:opacity .8s ease}
.hero-dots.is-ready{opacity:1}
.hero-dot{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.45);cursor:pointer;overflow:hidden;transition:width .45s cubic-bezier(.2,.7,.2,1),background-color .3s ease;box-shadow:0 0 6px rgba(7,12,20,.35)}
.hero-dot::before{content:"";position:absolute;inset:-10px -4px}
.hero-dot:hover,.hero-dot:focus-visible{background:rgba(255,255,255,.8)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-dot.is-on{width:28px;background:rgba(255,255,255,.35)}
.hero-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-dot.is-on::after{animation:hero-dot-fill var(--fill,8.3s) linear forwards}
@keyframes hero-dot-fill{to{transform:scaleX(1)}}
@media (max-width:700px){.hero-dots{left:auto;right:6%;bottom:39px;translate:none}}