/* One quiet brand opening; every layer settles into the original artwork. */
.site-header { position:relative; z-index:4 }
@media (prefers-reduced-motion:no-preference) {
  .intro-playing .hero-origin { animation:title-arrive .8s var(--ease) both }
  .intro-playing .hero-destination { animation:title-arrive .8s .09s var(--ease) both }
  .intro-playing .hero-aside { animation:soft-arrive .75s .18s ease-out both }
  .intro-playing .landscape-ridge { animation:ridge-arrive .95s .04s var(--ease) both }
  .intro-playing .landscape-foreground { animation:foreground-arrive 1s .14s var(--ease) both }
  .intro-playing .landscape-sun { animation:sun-arrive .95s .12s var(--ease) both }
  .intro-playing .hero-orbit ellipse { stroke-dasharray:1; animation:orbit-draw .75s .35s var(--ease) both }
  @keyframes title-arrive { from { opacity:0; translate:0 12px } to { opacity:1; translate:0 0 } }
  @keyframes soft-arrive { from { opacity:0 } to { opacity:1 } }
  @keyframes ridge-arrive { from { opacity:0; translate:0 24px } to { opacity:1; translate:0 0 } }
  @keyframes foreground-arrive { from { opacity:.3; translate:0 38px } to { opacity:1; translate:0 0 } }
  @keyframes sun-arrive { from { opacity:0; translate:0 40px } to { opacity:1; translate:0 0 } }
  @keyframes orbit-draw { from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }

  /* The stationary outer bounds prevent scroll-boundary oscillation. */
  [data-reveal].reveal-ready { opacity:0; transition:opacity .16s ease-out }
  [data-reveal].reveal-ready.is-visible { opacity:1; transition-duration:.45s; transition-timing-function:var(--ease) }
  [data-reveal].reveal-ready :is(h2,h3) { translate:0 8px; transition:translate .16s ease-out }
  [data-reveal].reveal-ready.is-visible :is(h2,h3) { translate:0 0; transition:translate .6s var(--ease) }
  [data-reveal].reveal-ready .image-placeholder { clip-path:inset(0 0 5%); transition:clip-path .16s ease-out }
  [data-reveal].reveal-ready.is-visible .image-placeholder { clip-path:inset(0); transition:clip-path .65s var(--ease) }
  [data-reveal].reveal-ready:focus-within { opacity:1; transition:none }
  [data-reveal].reveal-ready:focus-within :is(h2,h3) { translate:none; transition:none }
  [data-reveal].reveal-ready:focus-within .image-placeholder { clip-path:none; transition:none }
  @media (min-width:701px) {
    .film:nth-child(2).is-visible { transition-delay:60ms }
    .film:nth-child(3).is-visible { transition-delay:120ms }
  }

  /* Native cross-document transitions, with a small JS fallback for other browsers. */
  @view-transition { navigation:auto }
  .site-header { view-transition-name:site-header }
  ::view-transition { pointer-events:none }
  ::view-transition-group(*) { animation-duration:.34s; animation-timing-function:var(--ease) }
  ::view-transition-group(site-header) { animation:none }
  ::view-transition-old(root) { animation:page-out .16s ease-out both }
  ::view-transition-new(root) { animation:page-in .34s var(--ease) both }
  ::view-transition-old(site-header) { animation:none; opacity:0 }
  ::view-transition-new(site-header) { animation:none }
  .page-arriving main { animation:page-in .34s var(--ease) both }
  .page-leaving main,.page-leaving .site-footer { opacity:0; transition:opacity .16s ease-out }
  @keyframes page-out { from { opacity:1 } to { opacity:0 } }
  @keyframes page-in { from { opacity:0; translate:0 8px } to { opacity:1; translate:0 0 } }

  .mobile-menu[open] nav { animation:menu-in .2s var(--ease) both }
  .mobile-menu.is-closing nav { animation:menu-out .12s ease-out both; pointer-events:none }
  @keyframes menu-in { from { opacity:0; translate:0 -6px } to { opacity:1; translate:0 0 } }
  @keyframes menu-out { from { opacity:1; translate:0 0 } to { opacity:0; translate:0 -3px } }
  a .icon { transition:translate .22s var(--ease),color .2s ease-out }
  a:focus-visible .icon { translate:3px -3px }
  .round-link:focus-visible .icon { translate:0 3px }
  .back-top:focus-visible .icon { translate:0 -3px }
  .case-back:focus-visible .icon { translate:-3px 0 }
  @media (hover:hover) and (pointer:fine) {
    a:hover .icon { translate:3px -3px }
    .round-link:hover .icon { translate:0 3px }
    .back-top:hover .icon { translate:0 -3px }
    .case-back:hover .icon { translate:-3px 0 }
  }
  @media (max-width:700px) {
    @keyframes ridge-arrive { from { opacity:0; translate:0 16px } to { opacity:1; translate:0 0 } }
    @keyframes foreground-arrive { from { opacity:.3; translate:0 24px } to { opacity:1; translate:0 0 } }
    @keyframes sun-arrive { from { opacity:0; translate:0 28px } to { opacity:1; translate:0 0 } }
  }
}
.round-link:hover span { transform:none }
.round-link:focus-visible span { background:var(--blue); color:var(--paper) }
.desktop-nav a:focus-visible:after { transform:scaleX(1) }
.text-link:focus-visible,.header-link:focus-visible,.brand-disciplines a:focus-visible,.case-nav a:focus-visible { color:var(--red) }
.mobile-menu nav a:focus-visible { background:#efe9d8 }
.contact-details a:focus-visible,.back-top:focus-visible { color:var(--sand) }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none }
  .page-leaving main,.page-leaving .site-footer,[data-reveal] { opacity:1!important }
  a .icon,.round-link span { translate:none!important }
}
@media print {
  [data-reveal] :is(h2,h3),main { translate:none!important }
  [data-reveal] .image-placeholder { clip-path:none!important }
  main,.site-footer { opacity:1!important }
}

/* Five flat color pieces, four depth planes; the snow remains attached to its ridge. */
@media (prefers-reduced-motion:no-preference) {
  .intro-playing .landscape-river { animation:river-arrive .9s .26s var(--ease) both }
  @keyframes river-arrive { from { opacity:0; translate:-16px 48px } to { opacity:1; translate:0 0 } }
  @media (max-width:700px) {
    @keyframes river-arrive { from { opacity:0; translate:-8px 28px } to { opacity:1; translate:0 0 } }
  }
  /* Native scroll timelines add depth without listeners or changing page scrolling. */
  @supports (animation-timeline:view()) {
    .hero { view-timeline-name:--mugen-landscape; view-timeline-axis:block }
    .depth-sun { --depth-y:-36px }
    .depth-mountains { --depth-y:8px }
    .depth-sand { --depth-y:28px }
    .depth-river { --depth-y:44px }
    .landscape-plane {
      animation:landscape-depth linear both;
      animation-timeline:--mugen-landscape;
      animation-range:exit 0% exit 100%;
    }
    @keyframes landscape-depth { from { transform:translateY(0) } to { transform:translateY(var(--depth-y)) } }
    @media (max-width:700px) {
      .depth-sun { --depth-y:-22px }
      .depth-mountains { --depth-y:4px }
      .depth-sand { --depth-y:16px }
      .depth-river { --depth-y:26px }
    }
  }
}
@media print { .landscape-plane { animation:none!important; transform:none!important } }