/* PT Events: how things arrive.
   Opening a page: the headline, its lines and the buttons ease up a short way from below and fade in, one after another.
   Scrolling: apple.js marks each block as it comes on screen; the rise itself is played here as a keyframe animation, which iPhones play smoothly
   (the transition in apple.css stuttered on them). All of it steps aside for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
  @keyframes rv-up { from { opacity: 0; transform: translate3d(0, var(--rv-y, 32px), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

  /* ---------- Opening a page ---------- */
  .tile.hero:not(.split) > h1 .ln,
  .tile.hero:not(.split) > h1:not(:has(.ln)),
  .tile.hero:not(.split) > .sub,
  .tile.hero:not(.split) > .btns,
  .phead > *,
  .tile.hero.split .tx > *,
  .tile.hero.split .art { animation: rise-in .7s cubic-bezier(.32, .94, .6, 1) backwards; }

  /* Home: line one, line two, the sub-line, the buttons */
  .tile.hero:not(.split) > h1 .ln:nth-child(2) { animation-delay: .08s; }
  .tile.hero:not(.split) > .sub { animation-delay: .16s; }
  .tile.hero:not(.split) > .btns { animation-delay: .24s; }

  /* Other pages: headline, sub-line, text, buttons */
  .phead > :nth-child(2) { animation-delay: .08s; }
  .phead > :nth-child(3) { animation-delay: .16s; }
  .phead > :nth-child(n+4) { animation-delay: .24s; }

  /* Lunch pages: the details one line at a time, with the guest alongside */
  .tile.hero.split .tx > :nth-child(2) { animation-delay: .05s; }
  .tile.hero.split .tx > :nth-child(3) { animation-delay: .1s; }
  .tile.hero.split .tx > :nth-child(4) { animation-delay: .15s; }
  .tile.hero.split .tx > :nth-child(5) { animation-delay: .2s; }
  .tile.hero.split .tx > :nth-child(6) { animation-delay: .25s; }
  .tile.hero.split .tx > :nth-child(n+7) { animation-delay: .3s; }
  .tile.hero.split .art { animation-delay: .1s; }

  /* Tablets and up: the block straight under a page's headline follows it in (on phones it sits below the first screen and comes in as it is scrolled to) */
  @media (min-width: 761px) { main > .phead + * { animation: rise-in .7s cubic-bezier(.32, .94, .6, 1) .3s backwards; } }

  /* ---------- Scrolling: each block rises and fades in as it comes on screen ---------- */
  .rv-on .rv { transition: none; }
  .rv-on .rv.in { animation: rv-up var(--rv-t, .9s) cubic-bezier(.32, .94, .6, 1) var(--d, 0ms) both; }

  /* Phones: a slightly shorter, quicker rise; lunch cards sit one under another, so each comes in as soon as it is reached instead of waiting its turn */
  @media (max-width: 760px) {
    .rv-on .rv { --rv-y: 24px; --rv-t: .7s; }
    .rv-on .grid2 > .rv.in, .rv-on .grid4 > .rv.in { animation-delay: 0s; }
  }
}