/* Motion enhances the reference composition without changing its resting layout. */
html.has-motion [data-reveal] {
  translate: 0 12px;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    translate .5s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}
html.has-motion [data-reveal].is-visible,
html.has-motion [data-reveal]:focus-within { opacity: 1; translate: 0 0; }

html.has-image-effects img.motion-image,
html.has-image-effects img.motion-image.is-loaded {
  filter: none;
  transform: none;
  will-change: auto;
  transition: opacity .5s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
html.has-image-effects img.motion-image { opacity: 0; }
html.has-image-effects img.motion-image.is-loaded { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  html.has-image-effects :is(.work-card, .team-card):hover img.motion-image.is-loaded {
    transform: scale(1.025);
  }
}

html.has-motion .detail-drawer { animation: none; }
html.has-motion .detail-drawer::backdrop {
  backdrop-filter: none;
  animation: nine-backdrop-in .24s ease both;
}
html.has-motion .detail-drawer.is-closing::backdrop { animation: nine-backdrop-out .18s ease both; }
@keyframes nine-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nine-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

.gallery-motion-shell { position: relative; min-width: 0; }
.gallery-motion-shell .carousel-controls { z-index: 2; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.carousel-controls[hidden], .carousel-pagination[hidden] { display: none; }
.carousel-pagination { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: 7px; }
.carousel-dot { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; background: transparent; cursor: pointer; }
.carousel-dot::before { width: 5px; height: 5px; border-radius: 50%; background: #595452; content: ""; transition: background-color .2s ease, transform .2s ease; }
.carousel-dot.is-active::before { background: var(--red-light); transform: scale(1.2); }
.carousel-dot:focus-visible { outline: 1px solid var(--red-light); outline-offset: -2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.has-motion [data-reveal],
  html.has-image-effects img.motion-image,
  html.has-image-effects img.motion-image.is-loaded { opacity: 1; filter: none; transform: none; translate: 0 0; transition: none; }
  .detail-drawer, .detail-drawer::backdrop, .carousel-dot::before { animation: none; transition: none; }
}