/* State classes belong to the functional modules. No focus or visibility logic here. */
.btn, .icon-btn, .text-link, .site-nav a, .site-header__menu, .cart-btn, .field__input, .print__size {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.tile__img { transition: transform 1100ms cubic-bezier(.16,1,.3,1), filter 600ms ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile:hover .tile__img, .tile:focus-visible .tile__img { transform: scale(1.045); filter: brightness(1.07); }
}
/* Opacity avoids transformed stacking contexts and fixed-child interference. */
.overlay, .lightbox, .drawer, .scrim, .panel { transition: opacity 280ms ease; }
:is(.overlay, .lightbox, .drawer, .scrim, .panel).is-entering:not(.is-open),
:is(.overlay, .lightbox, .drawer, .scrim, .panel).is-leaving { opacity: 0; }
:is(.overlay, .lightbox, .drawer, .scrim, .panel).is-open:not(.is-leaving) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Clip the photograph separately so its caption never moves or gets covered. */
.motion-parallax-clip { overflow: hidden; }
.motion-parallax-clip > img { display: block; transform-origin: center; }