/* Shared by all three posters. Print and reduced-motion stay static. */
body { background: #fff; }

@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --motion-speed: 1;
    --second-image-duration: calc(1.4s / 1.3 / 1.3 / 1.5);
    --second-arrow-duration: calc(1.12s / 1.3 / 1.3 / 1.5);
    --second-arrow-delay: 2.14s;
  }
  body { --second-label-delay: calc(var(--second-arrow-delay) + .17s / 1.3 / 1.5); }
  .motion-enabled:not(.motion-ready) .artwork { visibility: hidden; }

  .motion-ready .chips,
  .motion-ready .donut,
  .motion-ready .cards,
  .motion-ready .tickets,
  .motion-ready .roulette,
  .motion-ready .pizza,
  .motion-ready .same-money,
  .motion-ready .top-rule,
  .motion-ready .different-story,
  .motion-ready .bottom-rule,
  .motion-ready .logo,
  .motion-ready .learn-more {
    animation: slide-in calc(var(--duration, 1.4s) / var(--motion-speed)) cubic-bezier(.22, 1, .36, 1) calc(var(--delay) / var(--motion-speed)) both;
  }
  .chips, .cards, .roulette { --enter-x: 900; --enter-y: 0; --delay: .15s; --duration: .75s; }
  .donut, .tickets, .pizza { --enter-x: -900; --enter-y: 0; --delay: var(--second-arrow-delay); --duration: var(--second-image-duration); }

  .motion-ready .try-arrow,
  .motion-ready .try-label,
  .motion-ready .bite-arrow,
  .motion-ready .bite-label {
    animation: arrow-arrive calc(var(--duration, 1.12s) / var(--motion-speed)) linear calc(var(--delay) / var(--motion-speed)) both;
  }
  .try-arrow, .try-label {
    --enter-x: -1100; --enter-y: -635.085;
    --bounce-x: 24; --bounce-y: 13.856;
    --delay: .61s; --duration: calc(1.12s / 1.3);
  }
  .try-label { --delay: .74s; --bounce-x: 34; --bounce-y: 19.63; }
  .bite-arrow, .bite-label {
    --duration: var(--second-arrow-duration);
    --enter-x: 1100; --enter-y: 635.085;
    --bounce-x: -24; --bounce-y: -13.856;
    --delay: var(--second-arrow-delay);
  }
  .bite-label { --delay: var(--second-label-delay); --bounce-x: -34; --bounce-y: -19.63; }
  .motion-ready .or { animation: reveal .16s ease-out 1.96s both; }

  .same-money, .top-rule { --enter-x: -900; --enter-y: 0; --duration: calc(1.05s / 1.3); --delay: 5.62s; }
  .different-story, .bottom-rule { --enter-x: 900; --enter-y: 0; --duration: calc(1.05s / 1.3); --delay: 6.66s; }
  .logo, .learn-more { --enter-x: 0; --enter-y: 350; --duration: .7s; --delay: 7.4s; }

  /* Float the image inside its entrance wrapper; keep the shadow on the background. */
  .chips, .cards, .roulette {
    --float-delay: calc((var(--second-label-delay) + var(--second-arrow-duration)) / var(--motion-speed) + .2s);
    --float-period: calc(5.6s / 1.5); --lift: 10; --float-scale: 1.018;
  }
  .donut, .tickets, .pizza {
    --float-delay: calc((var(--second-label-delay) + var(--second-arrow-duration)) / var(--motion-speed) + 1s);
    --float-period: calc(6.4s / 1.5); --lift: 8; --float-scale: 1.014;
  }
  /* Perspective photographs lift gently, without rotating their baked-in lighting. */
  .roulette { --float-period: 4.5s; --lift: 5; --float-scale: 1.005; }
  .pizza { --float-period: 5.2s; --lift: 6; --float-scale: 1.008; }
  .pizza-poster .object {
    --shadow-drift-x: 3; --shadow-drift-y: 4;
    --shadow-spread: 1.06; --shadow-softening: 3;
  }
  /* Voiceovers end at 10s: blue starts at .64s, orange at .50s, green at .78s. */
  .music-poster { --second-arrow-delay: 1.78s; }
  .music-poster .cards { --delay: .1s; --duration: .55s; }
  .music-poster .try-arrow { --delay: .44s; }
  .music-poster .try-label { --delay: .57s; }
  .motion-ready .music-poster .or { animation-delay: 1.6s; }
  .pizza-poster { --second-arrow-delay: 2.08s; }
  .pizza-poster .try-arrow { --delay: .75s; }
  .pizza-poster .try-label { --delay: .88s; }
  .motion-ready .pizza-poster .or { animation-delay: 1.9s; animation-duration: .16s; }
  .music-poster .same-money, .music-poster .top-rule,
  .pizza-poster .same-money, .pizza-poster .top-rule { --delay: 5.6s; }
  .music-poster .different-story, .music-poster .bottom-rule,
  .pizza-poster .different-story, .pizza-poster .bottom-rule { --delay: 6.64s; }
  .motion-ready .object > .crop,
  .motion-ready .object > .cast-shadow,
  .motion-ready .object > .contact-shadow {
    animation: hover-object var(--float-period) ease-in-out var(--float-delay) infinite both;
  }
  .motion-ready .object > .cast-shadow { animation-name: hover-cast; }
  .motion-ready .object > .contact-shadow { animation-name: hover-contact; }

  @keyframes hover-object {
    0%, 100% { translate: 0 0; scale: 1; }
    50% { translate: 0 calc(-1 * var(--lift) * var(--u)); scale: var(--float-scale); }
  }
  @keyframes hover-cast {
    0%, 100% { translate: 0 0; scale: 1; opacity: var(--cast-opacity, .4); filter: blur(calc(var(--cast-blur, 7.5) * var(--u))); }
    50% { translate: calc(var(--shadow-drift-x, 4) * var(--u)) calc(var(--shadow-drift-y, 6) * var(--u)); scale: var(--shadow-spread, 1.1); opacity: calc(var(--cast-opacity, .4) * .65); filter: blur(calc((var(--cast-blur, 7.5) + var(--shadow-softening, 4.5)) * var(--u))); }
  }
  @keyframes hover-contact {
    0%, 100% { scale: 1; opacity: var(--contact-opacity); filter: blur(calc(var(--contact-blur) * var(--u))); }
    50% { scale: 1.04; opacity: calc(var(--contact-opacity) * .4); filter: blur(calc((var(--contact-blur) + 3) * var(--u))); }
  }

  @keyframes slide-in {
    from { translate: calc(var(--enter-x) * var(--u)) calc(var(--enter-y) * var(--u)); }
    to { translate: 0 0; }
  }
  @keyframes arrow-arrive {
    0% {
      translate: calc(var(--enter-x) * var(--u)) calc(var(--enter-y) * var(--u));
      animation-timing-function: cubic-bezier(.22, .55, .35, .85);
    }
    /* Cross the resting position with speed, then turn back immediately after overshoot. */
    52% {
      translate: 0 0;
      animation-timing-function: cubic-bezier(.25, .5, .5, 1);
    }
    62% {
      translate: calc(var(--bounce-x) * var(--u)) calc(var(--bounce-y) * var(--u));
      animation-timing-function: ease-out;
    }
    80% {
      translate: calc(var(--bounce-x) * -.35 * var(--u)) calc(var(--bounce-y) * -.35 * var(--u));
      animation-timing-function: ease-out;
    }
    92% {
      translate: calc(var(--bounce-x) * .1 * var(--u)) calc(var(--bounce-y) * .1 * var(--u));
      animation-timing-function: ease-out;
    }
    100% { translate: 0 0; }
  }
  @keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
}