/* RELENTIX — scroll stops (see /scroll-stops.js)

   Everything here is scoped to `html.ss`, which the script sets only when it
   runs and motion is allowed, so without JS every statement is simply there.
   Only opacity, transform and a short entry blur move. */

/* the scrollbar is hidden while a stop holds the page; keep its gutter so
   nothing shifts sideways */
html.ss{scrollbar-gutter:stable}

/* word masks — the same rise the home headings use, defined here too so
   every page that loads stops has it */
.w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.w-in{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 55ms)}
.split-in .w-in{transform:none}

/* ink marks travel whole */
.w-solo{display:inline-block;opacity:0;transform:translate3d(0,.45em,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 55ms + 80ms)}
.split-in .w-solo{opacity:1;transform:none}

/* a stop that has not opened yet holds its words down — even if another
   observer on the page has already marked the heading as revealed */
html.ss [data-stop]:not(.ss-on) .w-in,
html.ss [data-stop]:not(.ss-on).split-in .w-in{transform:translateY(112%) rotate(4deg)}
html.ss [data-stop]:not(.ss-on) .w-solo{opacity:0;transform:translate3d(0,.45em,0)}

/* blocks inside a stop: a heavy fade-up out of a blur, in sequence */
html.ss [data-stop] .ss-u{
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1.1s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--ui,0) * 120ms + 160ms);
}
html.ss [data-stop]:not(.ss-on) .ss-u{
  opacity:0!important;
  transform:translate3d(0,44px,0)!important;
  filter:blur(10px);
}
html.ss [data-stop].ss-on .ss-u{opacity:1;transform:none;filter:none}

/* reading pages: a lighter arrival, no blur on long paragraphs */
html.ss [data-stop="soft"] .ss-u{transition-delay:calc(var(--ui,0) * 70ms)}
html.ss [data-stop="soft"]:not(.ss-on) .ss-u{transform:translate3d(0,22px,0)!important;filter:none}

/* the manifesto: unlit words wait a touch lower and settle as they light */
html.ss .manifesto .w{display:inline-block;transform:translate3d(0,.12em,0);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.16,1,.3,1)}
html.ss .manifesto .w.on{transform:none}

/* two stops rest off the optical centre (the services statement is taller
   than the screen; the team heading sits at the top of its band), so the
   cinematic focus in /cinematic.css would leave them blurred at rest. Once
   they open they are pin-sharp, wherever they rest. */
html.ss #services .cine-stage--full.ss-on,
html.ss .intro-band.ss-on .cine{
  filter:none;opacity:1;transform:none;
  transition:filter .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.16,1,.3,1);
}

/* phones: each statement owns most of a screen, so one arrives at a time
   and the next is never half-visible while the current one plays */
html.ss-touch .cine-stage[data-stop]{min-height:86svh}

@media (prefers-reduced-motion:reduce){
  .w-in,.w-solo{transform:none;opacity:1;transition:none}
}