/* arrival.css: The Gate, air register (see the pivot notes at the top of DESIGN.md).
   The sky is a token gradient. Clouds are translucent sprites that drift on their own, continuously, at three depths.
   arrival.js writes --p (0 to 1) on .gate__stage as you scroll; the scroll only nudges what is already moving:
   near clouds ease outward and thin, the far layer lifts, the horizon settles, the sign comes to rest. */

.gate{position:relative;height:220vh;height:220svh;background:var(--sky-low)}
.gate__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint;
  background:var(--sky-mid);
  --p:0;
  --e:calc(var(--p) * var(--p) * (3 - 2 * var(--p)));
  --cue-alpha:calc(1 - clamp(0,calc(var(--p) / 0.25),1));
}

/* ---- Sky ---- */
.sky{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--sky-high) 0%,#3F8FD6 34%,var(--sky-mid) 62%,#8CC8F0 86%,var(--sky-low) 100%)}
.sky__glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 48% at 78% 18%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%),radial-gradient(ellipse 90% 40% at 50% 100%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}

/* ---- Horizon: hazy hills, low in the frame, misted at the base ---- */
.horizon{position:absolute;left:0;right:0;bottom:0;z-index:3;height:34%;transform:translate3d(0,calc(2.5% * (1 - var(--e))),0) scale(calc(1.02 - .02 * var(--e)));transform-origin:50% 100%;will-change:transform}
.horizon img{position:absolute;left:50%;bottom:0;width:max(100%,1600px);height:100%;object-fit:cover;object-position:50% 100%;transform:translateX(-50%);opacity:.92}
.horizon::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(169,220,247,0),rgba(169,220,247,.55) 70%,rgba(169,220,247,.75))}

/* ---- Clouds: sprites drift on their own; the wrapper carries the scroll nudge ---- */
.clouds{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.clouds--far{z-index:2;transform:translate3d(0,calc(-4% * var(--e)),0);opacity:calc(1 - .35 * var(--e))}
.clouds--near{z-index:6;opacity:calc(1 - .62 * var(--e))}
.cloud{position:absolute;display:block;max-width:none;height:auto;will-change:transform}
.cloud--f1{left:-8%;top:30%;width:52%;opacity:.5;animation:drift-a 62s ease-in-out -20s infinite alternate}
.cloud--f2{left:58%;top:22%;width:24%;opacity:.5;animation:drift-b 48s ease-in-out -9s infinite alternate}
.cloud--f3{left:62%;top:44%;width:46%;opacity:.45;animation:drift-c 70s ease-in-out -33s infinite alternate}
.cloud--n1{left:-18%;top:48%;width:70%;opacity:.82;animation:drift-c 56s ease-in-out -14s infinite alternate;transform-origin:20% 60%}
.cloud--n2{left:7%;top:5%;width:30%;opacity:.48;animation:drift-b 44s ease-in-out -27s infinite alternate}
.cloud--n3{left:52%;top:56%;width:66%;opacity:.82;animation:drift-a 66s ease-in-out -40s infinite alternate;transform-origin:80% 60%}
/* the near layer also eases outward with scroll, each side its own way */
.cloud--n1{translate:calc(-14% * var(--e)) calc(-6% * var(--e))}
.cloud--n3{translate:calc(14% * var(--e)) calc(-6% * var(--e))}
.cloud--n2{translate:0 calc(-10% * var(--e))}
@keyframes drift-a{from{transform:translate3d(-6%,0,0) scale(1)}to{transform:translate3d(6%,-2.5%,0) scale(1.06)}}
@keyframes drift-b{from{transform:translate3d(5%,2%,0) scale(1.05)}to{transform:translate3d(-5%,-2%,0) scale(1)}}
@keyframes drift-c{from{transform:translate3d(6%,-2%,0) scale(1.04)}to{transform:translate3d(-6%,2%,0) scale(1)}}
@media (max-width:699px){
  .horizon{height:30%}
  .cloud--f1{left:-30%;top:34%;width:120%}
  .cloud--f2{left:55%;top:24%;width:50%}
  .cloud--f3{left:20%;top:48%;width:110%}
  .cloud--n1{left:-45%;top:58%;width:150%;opacity:.72}
  .cloud--n2{left:-10%;top:8%;width:55%;opacity:.42}
  .cloud--n3{left:10%;top:67%;width:140%;opacity:.72}
}

/* ---- Arrival on load: the scene settles in once the sprites have decoded ---- */
html.js:not(.reduce) .gate__stage:not(.is-ready) .sign,html.js:not(.reduce) .gate__stage:not(.is-ready) .clouds,html.js:not(.reduce) .gate__stage:not(.is-ready) .horizon{opacity:0}
.gate__stage.is-ready .clouds--far,.gate__stage.is-ready .clouds--near{transition:opacity 1.6s ease-out}
.gate__stage.is-ready .horizon{transition:opacity 1.4s ease-out}
.gate__stage.is-ready .sign{transition:opacity 1.2s ease-out .35s,transform 1.2s cubic-bezier(.2,.7,.2,1) .35s}

/* ---- The still state: reduced motion, and no JS ---- */
html:not(.js) .gate,html.reduce .gate{height:auto}
html:not(.js) .gate__stage,html.reduce .gate__stage{position:relative;height:88vh;height:88svh;--p:0;--cue-alpha:0}
html:not(.js) .gate__cue,html.reduce .gate__cue{display:none}
@media (prefers-reduced-motion:reduce){
  .gate{height:auto}
  .gate__stage{position:relative;height:88vh;height:88svh;--p:0;--cue-alpha:0}
  .gate__cue{display:none}
}