/* Motion: hero entrance, scroll reveals, the viewer, catalog filters and page changes.
   Animations only move, fade or clip, and fill backwards so hover effects keep working afterwards.
   Reduced motion turns all of it off (see the last rule in styles.css). */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--rise:clamp(16px,1.4vw,44px)}

@keyframes rise{from{opacity:0;translate:0 var(--rise)}}
@keyframes fade{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes wipe-up{from{clip-path:inset(100% -6vw -6vw)}to{clip-path:inset(-6vw)}}
@keyframes settle{from{scale:1.14}}
@keyframes slot-rise{from{translate:0 104%}}
@keyframes draw-x{from{scale:0 1}}
@keyframes draw-y{from{scale:1 0}}
@keyframes drift-in-left{from{opacity:0;translate:10vw 0}}
@keyframes drift-in-right{from{opacity:0;translate:-10vw 0}}
@keyframes drift-down{to{translate:0 var(--drift)}}
@keyframes viewer-enter{from{opacity:0;translate:0 16px;scale:.985}}
@keyframes view-in{from{opacity:0;translate:calc(var(--shift,0) * 3%) 0}}
@keyframes view-out{to{opacity:0;translate:calc(var(--shift,0) * -3%) 0}}
@keyframes tile-in{from{opacity:0;scale:.94}}
@keyframes tile-out{to{opacity:0;scale:.94}}

/* Hero: the wordmark rises out of its own line, then the character, copy, render and views follow. */
.brand{overflow:clip}
.brand-mark{animation:slot-rise 1.1s .05s var(--ease-out) backwards}
.hero-character img{--rise:3cqw;animation:rise 1.2s .3s var(--ease-out) backwards}
.character-tag{animation:fade .6s 1.05s ease backwards}
.hero-tagline,.hero-index li,.feature-hospital .feature-copy>*,.feature-hospital .feature-views>button{animation:rise .9s var(--ease-out) backwards}
.hero-tagline{animation-delay:.4s}
.hero-index li:nth-child(1){animation-delay:.48s}
.hero-index li:nth-child(2){animation-delay:.54s}
.hero-index li:nth-child(3){animation-delay:.6s}
.hero-index li:nth-child(4){animation-delay:.66s}
.feature-hospital .feature-copy>:nth-child(1){animation-delay:.35s}
.feature-hospital .feature-copy>:nth-child(2){animation-delay:.42s}
.feature-hospital .feature-copy>:nth-child(3){animation-delay:.49s}
.feature-hospital .feature-copy>:nth-child(4){animation-delay:.56s}
.feature-hospital .feature-image{animation:wipe-up 1.1s .45s var(--ease-out) backwards}
.feature-hospital .feature-image img{animation:settle 1.6s .45s var(--ease-out) backwards}
.feature-hospital .feature-views>:nth-child(1){animation-delay:.72s}
.feature-hospital .feature-views>:nth-child(2){animation-delay:.78s}
.feature-hospital .feature-views>:nth-child(3){animation-delay:.84s}
.feature-hospital .feature-views>:nth-child(4){animation-delay:.9s}
.feature-hospital::before{transform-origin:top;animation:draw-y 1.2s .2s var(--ease-out) backwards}

/* Depth on desktop: while the hero scrolls away, the lettering lags behind the character. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
  @supports(animation-timeline:scroll()){
    .brand,.hero-character{animation:drift-down linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .brand{--drift:6cqw}
    .hero-character{--drift:2.5cqw}
  }
}

/* Sections below the hero wait, hidden, until app.js marks them revealed. */
@media(prefers-reduced-motion:no-preference){
  .reveal-ready .feature-row:not(.is-revealed) :is(.feature-row-copy>*),
  .reveal-ready .more-products:not(.is-revealed) .more-products-heading>*,
  .reveal-ready .development-product:not(.is-revealed) .development-info,
  .reveal-ready .work:not(.is-revealed) :is(.work-heading>*,.film-row),
  .reveal-ready .studio-note:not(.is-revealed) p{opacity:0}
  .reveal-ready .feature-row:not(.is-revealed) :is(.feature-promo,.feature-wide),
  .reveal-ready .development-product:not(.is-revealed) .development-image{clip-path:inset(100% 0 0)}
  .reveal-ready .feature-row:not(.is-revealed) .feature-row-inner::before{scale:0 1}
}
.feature-row-inner::before{transform-origin:left}
.feature-row.is-revealed .feature-row-inner::before{animation:draw-x 1.2s var(--ease-out) backwards}
.feature-row.is-revealed .feature-row-copy>*,
.more-products.is-revealed .more-products-heading>*,
.development-product.is-revealed .development-info,
.work.is-revealed .work-heading>*,
.studio-note.is-revealed p{animation:rise .9s var(--ease-out) backwards}
.feature-row.is-revealed .feature-row-copy>:nth-child(1){animation-delay:.1s}
.feature-row.is-revealed .feature-row-copy>:nth-child(2){animation-delay:.17s}
.feature-row.is-revealed .feature-row-copy>:nth-child(3){animation-delay:.24s}
.feature-row.is-revealed .feature-row-copy>:nth-child(4){animation-delay:.31s}
.feature-row.is-revealed .feature-row-copy>:nth-child(5){animation-delay:.38s}
.feature-row.is-revealed :is(.feature-promo,.feature-wide),
.development-product.is-revealed .development-image{animation:wipe-up 1.2s var(--ease-out) backwards}
.feature-row.is-revealed :is(.feature-promo,.feature-wide) img,
.development-product.is-revealed .development-image img{animation:settle 1.6s var(--ease-out) backwards}
.feature-row.is-revealed .feature-promo,.feature-row.is-revealed .feature-promo img{animation-delay:.15s}
.feature-row.is-revealed .feature-wide,.feature-row.is-revealed .feature-wide img{animation-delay:.3s}
.more-products.is-revealed .more-products-heading>:nth-child(2){animation-delay:.1s}
/* Each tile reveals as it scrolls in; the second tile in a row follows the first. */
.development-product.is-revealed :is(.development-image,.development-image img){animation-delay:.15s}
.development-product.is-revealed:nth-child(even) :is(.development-image,.development-image img){animation-delay:.3s}
.development-product.is-revealed .development-info{animation-delay:.45s}
.development-product.is-revealed:nth-child(even) .development-info{animation-delay:.6s}
.work.is-revealed .work-heading>:nth-child(2){animation-delay:.1s}
/* Each strip drifts in from the side it travels away from. */
.work.is-revealed .film-row{animation:drift-in-left 1.6s .15s var(--ease-out) backwards}
.work.is-revealed .film-row+.film-row{animation-name:drift-in-right;animation-delay:.28s}

/* Catalog: heading first, then the groups and cards in reading order (--i is set in products.js).
   The first filter click settles them for good, so hidden cards do not replay their entrance. */
.browse-heading h1,.browse-intro,.category-filters,.browse-group-title,.browse-tile-info,.browse-tile-action{animation:rise .9s var(--ease-out) backwards}
.browse-intro{animation-delay:.08s}
.category-filters{animation-delay:.16s}
.browse-group-title{animation-delay:calc(.2s + var(--i,0) * .08s)}
.browse-tile-media{animation:wipe-up 1.1s calc(.25s + var(--i,0) * .08s) var(--ease-out) backwards}
.browse-tile-media img{animation:settle 1.5s calc(.25s + var(--i,0) * .08s) var(--ease-out) backwards}
.browse-tile :is(.browse-tile-info,.browse-tile-action){animation-delay:calc(.45s + var(--i,0) * .08s)}
.browse-note{animation:fade 1s .9s ease backwards}
#catalog.is-settled :is(.browse-group-title,.browse-tile-media,.browse-tile-media img,.browse-tile-info,.browse-tile-action){animation:none}

/* Viewer. A morph from the clicked image replaces the usual entrance. */
.viewer[open]{animation:viewer-enter .45s var(--ease-out)}
.viewer[open]::backdrop{animation:fade .35s ease}
.viewer.is-morphing[open],.viewer.is-morphing[open]::backdrop{animation:none}
.viewer-media>img.is-entering{opacity:0}
.viewer-media>img.is-arriving{animation:view-in .55s var(--ease-out) backwards}
.viewer-media>img.is-leaving{animation:view-out .3s ease forwards;pointer-events:none}

/* View transitions. Between pages the old page fades to paper and the new one fades in. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition{background:#dfd9d1}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:fade-out .2s ease both}
::view-transition-new(root){animation:fade .35s .12s ease both}
html:not(.local-transition) .masthead{view-transition-name:masthead}
/* Within a page the old state stays underneath while the new one fades in over it. */
html.local-transition::view-transition-old(root){animation:none}
html.local-transition::view-transition-new(root){animation:fade .3s ease both}
::view-transition-group(viewer-image){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(viewer-image),::view-transition-new(viewer-image){height:100%;object-fit:cover;animation-duration:.3s}
html.filter-transition::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html.filter-transition::view-transition-new(*):only-child{animation:tile-in .45s cubic-bezier(.2,.8,.2,1) both}
html.filter-transition::view-transition-old(*):only-child{animation:tile-out .25s ease both}