/* THE SLIDE. Each scene is one screen tall and sticks to the top, so the next page rides up over it.
   JS writes --enter (0 to 1, how far this page has arrived) and --cover (how far the next one has).
   Only when motion is welcome and the screen is tall enough to hold a plate and its text;
   .is-flat is the script's veto when a scene's text would not fit (large text settings). */
@media (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-height:1400px){
  html:not(.is-flat) .anchor{scroll-margin-top:calc(-1 * var(--scroll-pad))}
  /* the shadow a page throws on the one beneath; it fades in with the first tenth of the arrival,
     so a page still waiting below the fold does not smudge the bottom edge of the screen */
  html:not(.is-flat) .scene{position:sticky;top:0;height:clamp(600px,100svh,1100px);
    box-shadow:0 -22px 44px -26px rgba(29,33,48,calc(min(1,var(--enter) * 10) * .42))}
  html:not(.is-flat) .scene::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    background:#1D2130;opacity:calc(var(--cover) * .32)}
  html:not(.is-flat) .scene__inner{height:100%;grid-template-rows:minmax(0,1fr) auto;row-gap:18px;
    padding-block:calc(var(--head) + 16px) calc(var(--dock) + 14px);
    transform-origin:50% 0;transform:scale(calc(1 - var(--cover) * .04));will-change:transform}
  /* the plate takes the room that is left, within the crops the drawings allow (4:5 to 7:5) */
  html:not(.is-flat) .scene__art{container-type:size;display:grid;place-items:center}
  html:not(.is-flat) .plate{width:min(100cqw,140cqh);height:min(100cqh,125cqw);will-change:transform;
    transform:translateX(calc((1 - var(--enter)) * var(--dir) * -1 * min(12vw,150px)))}
  html:not(.is-flat) .plate svg{width:100%;height:100%;aspect-ratio:auto}
  html:not(.is-flat) .scene__title{will-change:transform;
    transform:translateX(calc((1 - var(--enter)) * var(--dir) * min(18vw,240px)))}
  html:not(.is-flat) .scene__lead,html:not(.is-flat) .scene__desc,html:not(.is-flat) .scene__text>.work__link,html:not(.is-flat) .scene__text>.work__get,html:not(.is-flat) .scene__links{
    transform:translateX(calc((1 - var(--enter)) * var(--dir) * min(8vw,100px)))}
  /* SwanReady's text is the longest, so on a short phone its plate may crop wider than the rest (the swan
     holds to about 2:1), but never to a sliver: below 120px the guard in the script lays the stack flat */
  html:not(.is-flat) .scene--swan .plate{width:min(100cqw,205cqh)}
}
@media (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-height:1400px) and (max-width:999px){
  html:not(.is-flat) .scene--swan .scene__inner{grid-template-rows:minmax(120px,1fr) auto}
}
@media (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-height:1400px) and (min-width:720px){
  html:not(.is-flat) .scene__inner{row-gap:24px;padding-block:calc(var(--head) + 28px) calc(var(--dock) + 28px)}
}
@media (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-height:1400px) and (min-width:1000px){
  html:not(.is-flat) .scene__inner{grid-template-rows:minmax(0,1fr);padding-block:calc(var(--head) + 40px) 48px}
  html:not(.is-flat) .scene__art{justify-items:start}
  html:not(.is-flat) .scene--flip .scene__art{justify-items:end}
}