/* rex-chain.css: the whole site on one scroll. Each page ends in a runway where scroll scrubs the
   daydream film to the next page; scrolling up past the top goes back and plays it in reverse. */
.chain{position:relative;height:280vh;background:#000}
.chain__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;clip-path:inset(var(--in,6%) var(--in,6%) 0 var(--in,6%))}
.chain__stage img,.chain__stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chain__end{z-index:1;opacity:0}
.chain.is-end .chain__end{opacity:1}
.chain__grade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--handover,0);
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.18) 9%,transparent 18%,transparent 55%,rgba(0,0,0,.5) 76%,#000 100%)}
.chain__label{position:absolute;z-index:3;left:var(--v-datum,88px);bottom:clamp(28px,6vh,56px);margin:0;color:#fff;opacity:calc(1 - var(--handover,0));text-shadow:0 0 14px rgba(0,0,0,.55)}
.chain__label b{display:block;font:500 clamp(40px,6vw,96px)/.9 var(--v-sans,Helvetica);letter-spacing:-.05em;text-transform:none;margin-top:10px}
.chain__prog{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;opacity:calc(1 - var(--handover,0));background:rgba(255,255,255,.18)}
.chain__prog i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--q,0))}
.chain__skip{position:absolute;z-index:4;right:var(--v-gutter,40px);bottom:clamp(28px,6vh,56px);color:#fff;opacity:calc(1 - var(--handover,0));text-decoration:none;border-bottom:1px solid transparent}
.chain__skip:hover,.chain__skip:focus-visible{border-color:currentColor}
/* pulling up at the top of a page: the previous page, waiting */
.chain-up{position:fixed;z-index:60;left:50%;top:14px;transform:translate(-50%,calc(-120% + var(--pull,0) * 120%));opacity:var(--pull,0);
  padding:9px 12px;background:#000;color:#fff;pointer-events:none}
/* arriving from the page below: hold the paint until we are at the end of the runway */
html.chain-end{background-color:#000;background-image:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.18) 9%,transparent 18%,transparent 55%,rgba(0,0,0,.5) 76%,#000 100%),var(--chain-arrival-image);background-position:center;background-size:cover;background-repeat:no-repeat}
html.chain-end[data-route="home"]{--chain-arrival-image:url("/media/daydream/work.jpg")}
html.chain-end[data-route="work"]{--chain-arrival-image:url("/media/daydream/services.jpg")}
html.chain-end[data-route="services"]{--chain-arrival-image:url("/media/daydream/about.jpg")}
html.chain-end[data-route="about"]{--chain-arrival-image:url("/media/daydream/contact.jpg")}
html.chain-end[data-route="contact"]{--chain-arrival-image:url("/media/daydream/lost.jpg")}
html.chain-end body{opacity:0;visibility:hidden}
html.chain-sending .v2-still,html.chain-arrive-back .v2-still{view-transition-name:none}
html.chain-sending .chain__stage,html.chain-arrive-back .chain__stage{view-transition-name:hero-plate}
/* a hop with no film (contact -> 404 -> home): the next still grows from a card */
.chain--hop{height:200vh}
.chain--hop .chain__start{display:none}
.chain--hop .chain__end{opacity:1;transition:none}
.chain--hop .chain__label{left:calc(var(--in,0%) + clamp(20px,3vw,40px))}
.chain--hop .chain__skip{right:calc(var(--in,0%) + clamp(20px,3vw,40px))}
/* reduced motion: a plain doorway to the next page */
.chain--still{height:auto}
.chain--still .chain__stage{position:relative;height:70vh;clip-path:none}
/* The grade travels as its own layer, above the plate, so the dissolve never shows an ungraded frame. */
html.chain-sending .chain__grade,html.chain-arrive .v2-hero__grade,
html.chain-sending-back .v2-hero__grade,html.chain-arrive-back .chain__grade{view-transition-name:hero-grade}
html.chain-arrive::view-transition-group(hero-grade),html.chain-arrive-back::view-transition-group(hero-grade){animation-duration:400ms;animation-timing-function:ease-in-out}