/* =========================================================================
   The page on a phone, section by section (ui/phone-scroll.js)

   Each section's words a screen to themselves, centred; the card rising
   up over them as the page moves on, the words going back under it,
   dimming, blurring and drawn in a little until they are gone (--veil);
   the page settling a stop at a time: the words alone, then the card
   risen over them. Phones only, and only once the script has gathered
   the scenes (.has-phone-scroll).
   ========================================================================= */
@media (max-width: 47.99rem) {
  .has-phone-scroll {
    scroll-snap-type: y mandatory;
  }

  /* free scroll (config.js): the scenes as they are, the stops gone */
  .has-phone-scroll.is-free-scroll {
    scroll-snap-type: none;
  }

  .has-phone-scroll .ps-scene {
    --veil: 0;
    position: relative;
  }

  /* the words: the screen to themselves, held while the card comes up */
  .has-phone-scroll .ps-words {
    position: sticky;
    top: 0;
    z-index: 0;
    display: grid;
    align-content: center;
    min-height: 100svh;
    box-sizing: border-box;
    margin-block: 0;
    padding-block: var(--space-7);
    opacity: calc(var(--arrive, 1) * (1 - var(--veil)));
    filter: blur(calc(var(--veil) * 5px));
    scale: calc(1 - 0.05 * var(--veil));
    transform-origin: 50% 40%;
  }

  .has-phone-scroll .ps-card {
    position: relative;
    z-index: 1;
  }

  .has-phone-scroll .ps-scene > .ps-card,
  .has-phone-scroll .ps-scene + .ps-scene {
    margin-top: 0;
  }

  /* the chooser's section: its own top padding off, the words centred */
  .has-phone-scroll #models.ps-scene {
    padding-top: 0;
  }

  /* the stops, none passed over in one swipe however hard it is flicked:
     each swipe the next */
  .has-phone-scroll :is(.page, .ps-at, .ps-card, .journey, .register, .faq, .site-footer),
  .has-phone-scroll .is-tall > :is(.ps-top, .ps-end) {
    scroll-snap-stop: always;
  }

  .has-phone-scroll :is(.page, .ps-at, .ps-card, .journey, .register, .faq, .site-footer) {
    scroll-snap-align: start;
  }

  /* the words' stop, a marker at the scene's top (ui/phone-scroll.js) */
  .has-phone-scroll .ps-at {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .has-phone-scroll .ps-card {
    scroll-margin-top: 2.5vw;
  }

  /* the chooser's two models: settled with the words over them in view */
  .has-phone-scroll .models__stage {
    scroll-margin-top: 12svh;
  }

  /* A little taller than the screen (ui/phone-scroll.js): two stops, on
     markers at its top and its foot, and none between */
  .has-phone-scroll :is(.ps-card, .journey, .register, .faq) {
    position: relative;
  }

  .has-phone-scroll :is(.ps-top, .ps-end) {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .has-phone-scroll .ps-top {
    top: 0;
  }

  .has-phone-scroll .ps-end {
    bottom: 0;
  }

  .has-phone-scroll .is-tall.is-tall {
    scroll-snap-align: none;
  }

  .has-phone-scroll .is-tall > .ps-top {
    scroll-snap-align: start;
  }

  .has-phone-scroll .is-tall > .ps-end {
    scroll-snap-align: end;
  }

  .has-phone-scroll .ps-card > .ps-top {
    scroll-margin-top: 2.5vw;
  }

  .has-phone-scroll .ps-card > .ps-end {
    scroll-margin-bottom: 2.5vw;
  }

  /* the invitation to read on is the cue now (scene.css) */
  .has-phone-scroll .models__more {
    display: none;
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .has-phone-scroll .ps-words {
    filter: none;
    scale: none;
  }
}