@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-image {
    transform-origin: 75% 55%;
    animation: moon-window-arrival 2.6s cubic-bezier(.18, .7, .24, 1) both;
  }
  .hero-copy > h1, .hero-copy > p, .hero-copy > .button, .hero-copy > .buttons {
    animation: hero-copy-arrival .8s cubic-bezier(.18, .7, .24, 1) both;
  }
  .hero-copy > p { animation-delay: .14s; }
  .hero-copy > .button, .hero-copy > .buttons { animation-delay: .27s; }
  .hero-copy > .button:focus-visible, .hero-copy > .buttons:focus-within { animation: none; }
  .home-page .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 75% 24%, #d9e7ff50, #bed5ff15 25%, transparent 54%);
    opacity: 0;
    animation: moonlight-arrival 2.8s ease-out;
  }
  .home-page .hero h1::before, .hero-crescent {
    animation: crescent-arrival 1.35s cubic-bezier(.2, .7, .25, 1) both;
  }
  .hero.editorial .photo > img {
    transform-origin: center;
    animation: moon-window-arrival 2.6s cubic-bezier(.18, .7, .24, 1) both;
  }
  .hero.editorial .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 75% 24%, #d9e7ff70, #bed5ff20 25%, transparent 58%);
    opacity: 0;
    animation: moonlight-arrival 2.8s ease-out;
  }
  .hero.editorial .photo, .photo-in-view {
    animation: photo-arrival .95s cubic-bezier(.2, .68, .28, 1);
  }
  .service-grid .photo::before,
  :is(.service-grid, .service, .tiles) .photo > img {
    transition: scale .55s cubic-bezier(.2, .68, .28, 1);
  }
  .service-grid article:focus-within .photo::before,
  :is(.service-grid article, .service, .tile):focus-within .photo > img {
    scale: 1.045;
  }
  :is(.button, .btn, .link, .floating-line) > span[aria-hidden="true"] {
    transition: transform .22s ease-out;
  }
  :is(.button, .btn, .link, .floating-line):focus-visible > span[aria-hidden="true"] {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  :is(.button, .btn, .link, .floating-line):hover > span[aria-hidden="true"] {
    transform: translateX(4px);
  }
  .service-grid article:hover .photo::before,
  :is(.service-grid article, .tile):hover .photo > img,
  .service .photo:hover > img {
    scale: 1.045;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .home-page .hero-image { transform-origin: 75% 80%; }
  .home-page .hero::after {
    background: radial-gradient(ellipse at 77% 45%, #d9e7ff48, #bed5ff10 29%, transparent 57%);
  }
  #site-nav[data-open] {
    animation: menu-arrival .22s ease-out both;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panorama {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      view-timeline-name: --panorama;
    }
    .panorama::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -15% 0;
      pointer-events: none;
      background: inherit;
      animation: panorama-drift linear both;
      animation-timeline: --panorama;
      animation-range: entry 0% exit 100%;
    }
    .moon-story .photo { view-timeline-name: --moon-story; }
    .moon-story .photo > img {
      animation: moon-story-drift linear both;
      animation-timeline: --moon-story;
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes moon-window-arrival {
  from { transform: scale(1.095); }
  to { transform: scale(1); }
}
@keyframes hero-copy-arrival {
  from { opacity: .65; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes moonlight-arrival {
  0%, 100% { opacity: 0; }
  38% { opacity: 1; }
}
@keyframes crescent-arrival {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
@keyframes photo-arrival {
  from { opacity: .48; transform: translateY(18px); clip-path: inset(0 0 14% 0 round 15px); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}
@keyframes panorama-drift {
  from { transform: translateY(-10%); }
  to { transform: translateY(10%); }
}
@keyframes moon-story-drift {
  from { transform: translateY(-4%) scale(1.1); }
  to { transform: translateY(4%) scale(1.1); }
}
@keyframes menu-arrival {
  from { opacity: .65; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}