/* One entrance on each visual block; child photo loops keep their own timeline. */
html.motion-ready body [data-reveal] {
  opacity: 0 !important;
  translate: 0 10px !important;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
    translate 850ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 300ms ease, transform 300ms ease !important;
  transition-delay: 0ms !important;
}
html.motion-ready body [data-reveal].is-revealed,
html.motion-ready body [data-reveal]:focus-within {
  opacity: 1 !important;
  translate: 0 0 !important;
}
/* Remove competing container keyframes, including the featured service card. */
body .project-card,
body .services .service-card,
body .services .service-card.featured {
  animation: none !important;
}

/* Keep the home navigation in the same coordinate system on both sides of 130px. */
body:not(.page-mode) .site-header,
body:not(.page-mode) .site-header.scrolled {
  position: fixed;
  top: 12px;
  left: 3vw;
  right: 3vw;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 60px;
  transition: background 450ms ease, color 350ms ease, box-shadow 450ms ease,
    border-color 450ms ease;
}
body:not(.page-mode) .site-header.scrolled { border-color: #ffffffcc; }
body:not(.page-mode) .site-header .brand > span { transition: font-size 450ms ease; }
body:not(.page-mode) .site-header .brand-symbol { transition: width 450ms ease, height 450ms ease; }

@media (max-width: 760px) {
  html.motion-ready body [data-reveal] { translate: 0 8px !important; }
  html.motion-ready body [data-reveal].is-revealed,
  html.motion-ready body [data-reveal]:focus-within { translate: 0 0 !important; }
  body:not(.page-mode) .site-header,
  body:not(.page-mode) .site-header.scrolled {
    top: 8px;
    left: 10px;
    right: 10px;
    padding: 6px 10px;
  }
  /* A stable slot keeps the quotation still when the next source has another ratio. */
  .image-interlude > img:not(.atelier-slide-layer) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--paper, #f6f1e9);
  }
}

html.motion-ready body.legal-mode [data-reveal] {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.motion-ready body [data-reveal],
  html body [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  body:not(.page-mode) .site-header,
  body:not(.page-mode) .site-header .brand > span,
  body:not(.page-mode) .site-header .brand-symbol { transition: none !important; }
}