/* Little Pathway — cinematic scroll story */

/* progress var --p (0..1) is set by JS; sky opacity vars too */
.story{position:relative;height:460vh;background:var(--night)}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;display:grid;place-items:center;
}

/* --- sky --- */
.sky{position:absolute;inset:0}
.sky i{position:absolute;inset:0;display:block}
.sky .s-night{background:linear-gradient(180deg,#061024 0%,#0A1730 45%,#132B52 100%);opacity:var(--n,1)}
.sky .s-dawn{background:linear-gradient(180deg,#22335E 0%,#8A5B7E 38%,#FF9A6B 74%,#FFC26B 100%);opacity:var(--d,0)}
.sky .s-day{background:linear-gradient(180deg,#4FA8EE 0%,#8FD8F8 55%,#D9F1FB 100%);opacity:var(--y,0)}

/* --- stars, only at night --- */
.stars{position:absolute;inset:0;opacity:var(--n,1)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.75}

/* --- landscape --- */
.scene{position:absolute;left:50%;bottom:0;width:170%;max-width:none;transform:translateX(-50%);height:auto}
@media(min-width:900px){.scene{width:120%}}
.far{transform:translate3d(calc(var(--p,0) * -90px),0,0)}
.mid{transform:translate3d(calc(var(--p,0) * -150px),0,0)}
.near{transform:translate3d(calc(var(--p,0) * -210px),0,0)}
.clouds{transform:translate3d(calc(var(--p,0) * -320px),0,0)}
.plane{transform:translate3d(calc(var(--p,0) * -520px),calc(var(--p,0) * -70px),0)}

/* --- beats --- */
.beat{
  position:absolute;z-index:3;width:min(92vw,940px);
  text-align:center;padding-inline:var(--pad);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .55s var(--ease-soft),transform .75s var(--ease-out);
  pointer-events:none;
}
.beat b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  color:#fff;text-shadow:0 2px 30px rgba(6,16,36,.35);
}
.beat i{
  display:block;margin-top:1rem;font-family:var(--font-mono);font-style:normal;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.stage[data-beat="1"] .b1,
.stage[data-beat="2"] .b2,
.stage[data-beat="3"] .b3,
.stage[data-beat="4"] .b4,
.stage[data-beat="5"] .b5{opacity:1;transform:none}

.b5 .brand{
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
}
.b5 img{width:min(280px,62vw);height:auto}
.b5 .brandline{
  font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(1.05rem,2.5vw,1.6rem);letter-spacing:-.01em;max-width:24ch;
}

/* day beats need dark type */
.stage[data-beat="4"] .beat b,
.stage[data-beat="5"] .beat b{color:#0F1A2E;text-shadow:none}
.stage[data-beat="5"] .brandline{color:#123A63}

/* --- scroll cue --- */
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:var(--cue,1);transition:opacity .4s var(--ease);
}
.cue span{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent);animation:drip 1.9s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}

/* --- transition out of the story into paper --- */
.paper-start{position:relative}
.paper-start::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:120px;
  background:linear-gradient(180deg,transparent,var(--paper));pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .story{height:auto}
  .stage{position:relative;height:auto;padding-block:80px 120px;display:block}
  .beat{position:relative;opacity:1;transform:none;margin-inline:auto;margin-bottom:56px;width:min(92vw,820px)}
  .scene,.far,.mid,.near,.clouds,.plane{transform:none}
  .sky .s-night{opacity:1}
  .sky .s-dawn,.sky .s-day{opacity:0}
  .cue{display:none}
}