/* ============================================================================
   assets/zen-motion.css — s190 · DEPTH
   Zach: "need more WOW layered parallax motion and insane modern webdesign in the galaxy and when you get to the
   website". His picks: the galaxy, the jump into a page and the pages themselves; the galaxy and the jump loud, the pages
   refined with a little spectacle; a phone the same feel, lighter. This is the pages' part, linked last in the head of
   every page outside the galaxy that is the site's own writing: the seven case studies (inlined in One File, which is one
   file), the museum, the Mission Kit, the accessibility statement and the 404. The galaxy's part is its own (THE DIVE,
   section 10f of its script); the script for this one is the kit's (zen-page.js, DEPTH).
   1 · ARRIVING. The view you left rushes past and away, and the page's opening rises into place a part at a time (the
      eyebrow, the title, the lede, the rest), out of focus to sharp at a desk. Where the browser carries an element from one
      page to the next (a view transition), the moon or planet the galaxy dived into flies on to become this page's planet.
   2 · THE OPENING PARTS AS YOU SCROLL, where the browser can tie an animation to the scroll: the eyebrow, the title and
      the lede lift away a little faster than the page, and the planet drifts back slower, so the opening comes apart into
      its layers as you leave it.
   3 · WHAT COMES INTO VIEW rises into place as it arrives, once, a card at a time along a row of cards (a strip of tiles on
      its line color rises whole), and a heading is uncovered from below. Once you are reading, the words hold still.
   4 · PICTURES SETTLE into place as they arrive, from a little smaller, tied to the scroll.
   5 · THE PAGE'S DEPTH: a line of the page's color across the top says how far down you are; the stars behind lie in three
      depths (zen-page.js); and at a desk a soft light follows the cursor across a card.
   None of it under reduced motion: the page is the page as it was. A browser that cannot tie animation to the scroll
   (Firefox today) has the arrival and the blocks rising in, not 2, 4 or the line. Nothing here prints.
   ========================================================================= */
body[data-station]{ --zm-c:var(--c, #F4A565) }
body[data-station="BAY"]{ --zm-c:#78B8EC } body[data-station="ABOUT"]{ --zm-c:#968EFC } body[data-station="LOG"]{ --zm-c:#D3A9F9 }
body[data-station="CAMERAS"]{ --zm-c:#DCE2EA } body[data-station="WORKSHOP"]{ --zm-c:#72DCCF } body[data-station="PORTFOLIO"]{ --zm-c:#F4A565 }
:root{ --zm-out:cubic-bezier(.16,1,.3,1) }
.zplanet{view-transition-name:zt-planet}   /* the planet the galaxy dived into lands here (the galaxy's .zdive has the same name) */
.zm-line{display:none}   /* (shown below, where the browser ties it to the scroll) */

@media screen and (prefers-reduced-motion: no-preference){
  /* ---- 1 · ARRIVING ---- */
  @view-transition{ navigation: auto }
  ::view-transition-old(root){ animation:460ms cubic-bezier(.55,0,.8,.3) both zm-past }   /* what you left rushes past you */
  ::view-transition-new(root){ animation:760ms var(--zm-out) 40ms both zm-up }   /* and the page comes up out of the depth */
  ::view-transition-group(zt-planet){ animation-duration:900ms; animation-timing-function:cubic-bezier(.2,.8,.2,1) }
  ::view-transition-old(zt-planet),::view-transition-new(zt-planet){ animation-duration:900ms }
  /* the opening, a part at a time: the first ten parts of the page's opening, a beat apart (the sixth on together) */
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(-n+10 of :not(.zplanet, script, style)){
    animation:zm-rise 820ms var(--zm-out) both; animation-delay:calc(var(--zi, 0)*85ms + 140ms)}
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(2 of :not(.zplanet, script, style)){ --zi:1 }
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(3 of :not(.zplanet, script, style)){ --zi:2 }
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(4 of :not(.zplanet, script, style)){ --zi:3 }
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(5 of :not(.zplanet, script, style)){ --zi:4 }
  :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(n+6 of :not(.zplanet, script, style)){ --zi:5 }
  .backbar, nav.pills, a.home, a.back{animation:zm-drop 620ms var(--zm-out) 60ms both}
  .zplanet{animation:zm-planet 1100ms var(--zm-out) 100ms both}
  html.zm-vt .zplanet{animation:none}   /* (it came from the galaxy, carried) */
  /* at a desk the parts come into focus as they rise */
  @media (pointer: fine) and (min-width: 900px){
    :is(header.mast, header.open .beat.in, main > header:not(.mast, .cover, .open), body[data-station="NONE"] main.wrap, main#main, body:not([data-station]) > main) > :nth-child(-n+10 of :not(.zplanet, script, style)){ animation-name:zm-rise-focus }
  }

  /* ---- 2 · THE OPENING PARTS AS YOU SCROLL ---- */
  @supports (animation-timeline: scroll()){
    /* (:not(#zm-x): an id's weight, so these lists win over the arrival's single one, above) */
    :is(header.mast, main > header:not(.mast, .cover, .open), main#main) > :is(.eyebrow, h1, .lede):not(#zm-x){
      animation:zm-rise 820ms var(--zm-out) both, zm-lift linear both; animation-delay:calc(var(--zi, 0)*85ms + 140ms), 0s;
      animation-timeline:auto, scroll(root); animation-range:normal, 0 90vh}
    :is(header.mast, main > header:not(.mast, .cover, .open), main#main) > .eyebrow{ --zl:-18 } :is(header.mast, main > header:not(.mast, .cover, .open), main#main) > h1{ --zl:-14 } :is(header.mast, main > header:not(.mast, .cover, .open), main#main) > .lede{ --zl:-9 }
    @media (pointer: fine) and (min-width: 900px){ :is(header.mast, main > header:not(.mast, .cover, .open), main#main) > :is(.eyebrow, h1, .lede):not(#zm-x){ animation-name:zm-rise-focus, zm-lift } }
    header .zplanet{animation:zm-planet 1100ms var(--zm-out) 100ms both, zm-drift linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0 100vh}
    html.zm-vt header .zplanet{animation:zm-drift linear both; animation-timeline:scroll(root); animation-range:0 100vh}
  }

  /* ---- 3 · WHAT COMES INTO VIEW (zen-page.js puts .zm-r on what is below the opening, and .zm-in as it arrives) ---- */
  .zm-r{opacity:0; translate:0 34px}
  .zm-r.zm-in{opacity:1; translate:none; transition:opacity 700ms var(--zm-out), translate 1000ms var(--zm-out); transition-delay:calc(var(--zd, 0)*75ms)}
  h2.zm-r{clip-path:inset(0 0 100% 0); translate:0 20px; opacity:1}
  h2.zm-r.zm-in{clip-path:inset(-10% -10% -30% -10%); transition:clip-path 820ms var(--zm-out), translate 820ms var(--zm-out)}

  /* ---- 4 · PICTURES SETTLE ---- */
  @supports (animation-timeline: view()){
    :is(.wrap, main) figure:not(.beat, .zm-r, header figure, .beat figure){animation:zm-settle linear both; animation-timeline:view(); animation-range:entry 0% entry 80%}
  }

  /* ---- 5 · THE PAGE'S DEPTH ---- */
  @supports (animation-timeline: scroll()){
    .zm-line{display:block; position:fixed; left:0; top:0; z-index:60; width:100%; height:2px; pointer-events:none; transform-origin:0 50%;
      background:linear-gradient(90deg, color-mix(in srgb, var(--zm-c, #F4A565) 70%, transparent), var(--zm-c, #F4A565));
      box-shadow:0 0 10px color-mix(in srgb, var(--zm-c, #F4A565) 60%, transparent); scale:0 1; animation:zm-read linear both; animation-timeline:scroll(root)}   /* (scale 0: a page too short to scroll has no timeline, and no line) */
  }
  /* leaving for the galaxy by the way home: the page lifts away and goes out of focus as the stars fall past (zen-page.js) */
  html.zm-leave body > :not(canvas, script, .zm-line){animation:zm-leave 380ms cubic-bezier(.55,0,.8,.3) both}
}
@media (pointer: fine){
  :is(.fact, .met, .out, .play, .note, .dl a, .csf > *, .team > *, figure.slide):not(#zm-x){   /* (:not(#zm-x): an id's weight, so a card's own :hover background does not take its light away) */
    background-image:radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--zm-c, #F4A565) 9%, transparent), transparent 70%) !important}
}
@keyframes zm-past{ to{ opacity:0; transform:scale(1.32) } }
@keyframes zm-up{ from{ opacity:0; transform:scale(.95) translateY(20px) } }
@keyframes zm-rise{ from{ opacity:0; translate:0 30px } }
@keyframes zm-rise-focus{ from{ opacity:0; translate:0 30px; filter:blur(10px) } }
@keyframes zm-drop{ from{ opacity:0; translate:0 -14px } }
@keyframes zm-planet{ from{ opacity:0; scale:1.9; filter:blur(8px) } }
@keyframes zm-lift{ to{ transform:translateY(calc(var(--zl, -14)*1vh)) } }
@keyframes zm-drift{ to{ transform:translateY(16vh) scale(.88) } }
@keyframes zm-settle{ from{ scale:.93; opacity:.35 } }
@keyframes zm-read{ from{ scale:0 1 } to{ scale:1 1 } }
@keyframes zm-leave{ to{ opacity:0; translate:0 -36px; filter:blur(6px) } }
@media print{ .zm-line{display:none !important} .zm-r{opacity:1 !important; translate:none !important; clip-path:none !important} }