/* The light seam, orbit and statement form one reversible scroll sequence. */
.orbit{--orbit-light:0;position:relative;z-index:4;color:var(--cream)}
.orbit__stage{position:relative;min-height:100svh;isolation:isolate;overflow:clip}
.orbit__shade{position:absolute;inset:0;background-color:#030b20;
  background-image:radial-gradient(ellipse at 50% 42%,rgba(5,16,42,.78),rgba(1,5,16,.89) 78%),var(--blue-suede);
  background-size:100% 100%,var(--suede) var(--suede);background-repeat:no-repeat,repeat;
  isolation:isolate;opacity:0;pointer-events:none;will-change:opacity}
.orbit__shade::before{content:"";position:absolute;inset:0;
  background:var(--blue-suede) 0 0/var(--suede) var(--suede) repeat;
  filter:grayscale(1) brightness(3) contrast(2);mix-blend-mode:soft-light;opacity:.65}
.orbit__heading{position:relative;z-index:2;margin:12px var(--m) 0;text-align:center;color:var(--cream);font:400 clamp(32px,3.4vw,54px)/1.08 "Bookish",Georgia,serif;letter-spacing:-.012em;pointer-events:none}
.orbit__heading span{display:block}
.orbit__divider{position:absolute;z-index:3;left:4%;right:4%;top:1px;height:1px;background:none;pointer-events:none}
.orbit__divider::after{content:"";position:absolute;top:-1px;left:35%;right:35%;height:3px;border-radius:50%;background:linear-gradient(90deg,transparent,#f5f0e6 30%,#f5f0e6 70%,transparent);box-shadow:0 1px 14px 1px #bbcfff,0 6px 35px #709aff88;opacity:var(--orbit-light)}
.orbit__beam{position:absolute;inset:0 29% 46%;filter:blur(20px);opacity:var(--orbit-light);pointer-events:none}
.orbit__beam::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(214,223,245,.13),rgba(160,184,233,.045) 60%,transparent);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent)}
.orbit__pool{position:absolute;inset:25% 11% 22%;background:radial-gradient(ellipse,rgba(54,94,173,.10),transparent 67%);opacity:var(--orbit-light);pointer-events:none}
.orbit__scene{position:relative;width:100%;height:74svh;min-height:380px;pointer-events:none}
.orbit__scene canvas{display:block;width:100%;height:100%}
.orbit__still{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px}
.orbit__still span{position:relative;z-index:1;font:400 clamp(30px,7vw,120px)/1 "Bookish",Georgia,serif;color:var(--blue);letter-spacing:-.025em;transform:rotateX(-5deg)}
.orbit__object{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:55%;max-width:680px;height:auto;object-fit:contain}
.orbit.has-webgl .orbit__still{display:none}
.orbit__copy{position:relative;padding:50px var(--m) 110px;text-align:center;max-width:1100px;margin:auto}
.orbit__copy .say__lede{font-size:clamp(36px,4.8vw,76px);line-height:1.08;max-width:16em;margin:0 auto;text-wrap:balance}
.orbit__copy .say__sub{margin:28px auto 0;max-width:none}
.orbit__copy .say__btn{margin-top:32px}
.orbit.is-animated{height:500svh}
.orbit.is-animated .orbit__stage{position:sticky;top:0;height:100svh;min-height:520px}
.orbit.is-animated .orbit__scene{position:absolute;inset:0;height:100%;min-height:0}
.orbit.is-animated .orbit__heading{position:absolute;top:69%;left:var(--m);right:var(--m);margin:0}
.orbit.is-animated .orbit__copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--hdr) + 24px) var(--m) 60px;visibility:visible}
.orbit.is-animated .orbit__copy .say__sub{flex:none}
/* The next sculptures enter after the pinned statement, without crossing its type. */
.orbit + .brk--one{padding-top:clamp(90px,16vw,260px)}
@media(max-width:767px){
  .orbit__scene{height:58svh;min-height:340px}
  .orbit__heading{font-size:clamp(28px,7.5vw,36px);margin-inline:20px}
  .orbit__copy{padding:16px 24px 100px}
  .orbit__copy .say__lede{font-size:clamp(32px,7.9vw,52px)}
  .orbit__copy .say__sub{max-width:21em;font-size:17px;margin-top:22px}
  .orbit.is-animated{height:480svh}
  .orbit.is-animated .orbit__heading{top:64%;left:20px;right:20px}
  .orbit.is-animated .orbit__copy{padding:145px 24px 65px}
  .orbit__beam{inset:0 18% 46%;filter:blur(14px)}
  .orbit + .brk--one{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .orbit.is-animated{height:auto}
  .orbit.is-animated .orbit__stage{position:relative;height:auto}
  .orbit.is-animated .orbit__scene{position:relative;height:60svh}
  .orbit.is-animated .orbit__heading{position:relative;top:auto;left:auto;right:auto;margin:12px 20px 0}
  .orbit.is-animated .orbit__copy{position:relative;visibility:visible;padding:30px 24px 100px}
}

/* Each word emerges from transparent blue into the site's cream, directly tied to scroll. */
.orbit__word{--reveal:1;display:inline-block;opacity:var(--reveal);filter:blur(calc((1 - var(--reveal))*5px));transform:translate3d(0,calc((1 - var(--reveal))*10px),0)}
@media(prefers-reduced-motion:reduce){.orbit__word{opacity:1;filter:none;transform:none}}

/* The original WYRD macro curl lives behind the third-section statement.
   Feather the artwork itself so the existing cream suede shows through;
   there is no coloured panel or hard rectangular edge to scroll past. */
.orbit__copy{isolation:isolate}
.orbit__statement-world{position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);overflow:clip;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(transparent,#000 19%,#000 76%,transparent);
  mask-image:linear-gradient(transparent,#000 19%,#000 76%,transparent)}
.orbit__statement-art{position:absolute;left:-10%;top:-10%;width:120%;height:120%;max-width:none;display:block;object-fit:cover;object-position:60% 50%;opacity:.47;mix-blend-mode:multiply;transform-origin:74% 55%;
  -webkit-mask-image:linear-gradient(90deg,#00000040,#00000022 25%,#0000000d 42%,#00000033 60%,#000000b3 78%,#000);
  mask-image:linear-gradient(90deg,#00000040,#00000022 25%,#0000000d 42%,#00000033 60%,#000000b3 78%,#000)}
.orbit.is-animated .orbit__statement-world{opacity:0;will-change:opacity}
.orbit.is-animated .orbit__statement-art{will-change:transform}
@media(max-width:767px){
  /* Keep the curl recognisable on a portrait screen instead of enlarging a
     narrow strip of the landscape image to cover the entire viewport. */
  .orbit__statement-art{left:-78%;top:14%;width:210%;height:auto;object-fit:contain;opacity:.44;
    -webkit-mask-image:linear-gradient(90deg,#00000022,#00000022 42%,#00000080 68%,#000),linear-gradient(transparent,#000 20%,#000 67%,transparent);
    mask-image:linear-gradient(90deg,#00000022,#00000022 42%,#00000080 68%,#000),linear-gradient(transparent,#000 20%,#000 67%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media(prefers-reduced-motion:reduce){
  .orbit__statement-world,.orbit__statement-art{will-change:auto!important}
}