/* ==========================================================================
   THE MURNANS · home page motion (index.html only)
   The page answers the reader: the hero parts in depth as it is scrolled
   away, the drawings lean towards the pointer, the ticker runs with the
   scroll, and the tally rolls round like the year pages' milometer. The
   photographs' lean and the drifting section marks are site-wide now, in
   assets/css/motion.css.

   One motion language with the rest of the site: expo-out landings, no
   bounce, the photographs as the subject. Everything here moves transform
   or opacity only, and the scroll-linked parts run on the browser's own
   scroll timeline, so none of it waits on the main thread. A browser
   without scroll timelines simply keeps the page still.

   ?motion=off on the address turns all of it off, for comparing.
   The script half is assets/js/home-motion.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. The hero parts as it leaves ─────────────────────────────────────
     Measured against the hero itself: nothing moves until the page starts
     to scroll, and everything has finished by the time the hero is gone.
     Nearer things travel further, so the title lifts away quickest, the
     drawings drift apart and the ampersand between them opens up. Opacity
     only on elements that have no reveal of their own to fight with. */
  @supports (animation-timeline: view()) {
    html:not([data-motion="off"]) .hero { view-timeline: --hero block; }

    html:not([data-motion="off"]) :is(.hero__title, .hero__sub, .hero__words > .eyebrow, .pour, .hero__wash, .stage__amp, .fig__layer) {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    html:not([data-motion="off"]) .hero__words > .eyebrow { animation-name: hm-rise-1; }
    html:not([data-motion="off"]) .hero__title { animation-name: hm-title; }
    html:not([data-motion="off"]) .hero__sub   { animation-name: hm-rise-2; }
    html:not([data-motion="off"]) .pour        { animation-name: hm-pour; }
    html:not([data-motion="off"]) .hero__wash  { animation-name: hm-wash; }
    html:not([data-motion="off"]) .stage__amp  { animation-name: hm-amp; }
    html:not([data-motion="off"]) .fig--bear  .fig__layer { animation-name: hm-bear; }
    html:not([data-motion="off"]) .fig--tiger .fig__layer { animation-name: hm-tiger; }
  }

  /* ── 3. The ticker, once the script has it ─────────────────────────────── */
  html:not([data-motion="off"]) .ticker.hm-live .ticker__row { animation: none; will-change: transform; }

  /* ── 4. Photographs that catch the light: now site-wide, in motion.css ── */

  /* ── 5. The tally rolls round ─────────────────────────────────────────────
     Each figure is a set of wheels. The right-hand wheel turns furthest, as
     on a milometer, and they all stop together. The strip only ever moves
     by translate, so the number never changes width on its way up. */
  .hm-odo { display: inline-flex; }
  .hm-odo__d {
    position: relative;
    display: inline-block;
    height: 1.04em; line-height: 1.04;
    margin-block: -.02em;
    overflow: hidden;
    /* the wheel is lit from the front: digits passing the top and bottom go soft */
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  }
  .hm-odo__w { visibility: hidden; }
  .hm-odo__s {
    position: absolute; left: 50%; top: 0;
    display: block;
    text-align: center;
    translate: -50% 0;
  }
  .hm-odo__s > span { display: block; height: 1.04em; }
  .tally__card.is-in .hm-odo__s {
    translate: -50% calc(var(--to) * -1.04em);
    transition: translate 1.9s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 70ms);
  }
}

.hm-said { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes hm-title  { to { translate: 0 -16vh; opacity: .1; } }
@keyframes hm-rise-1 { to { translate: 0 -20vh; } }
@keyframes hm-rise-2 { to { translate: 0 -11vh; opacity: 0; } }
@keyframes hm-pour   { 0% { opacity: 1; } 45% { opacity: 0; } 100% { translate: 0 -6vh; opacity: 0; } }
@keyframes hm-wash   { to { translate: 0 22vh; } }
@keyframes hm-amp    { to { scale: 1.6; opacity: 0; } }
@keyframes hm-bear   { to { translate: -9vw 7vh; rotate: -4deg; scale: .94; } }
@keyframes hm-tiger  { to { translate: 9vw 7vh;  rotate: 4deg;  scale: .94; } }