/* Poster-first atmosphere motion. The still image is the complete experience; the
   clip is loaded only near the viewport, never under reduced motion, never without
   JavaScript, and can be paused by the visitor. One owner per moving property: the
   clip owns the motion, so no CSS animation runs on these frames. */
.motion-media { position: relative; overflow: hidden; }
.motion-media > img, .motion-media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.motion-media > video { opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
.motion-media[data-motion-state="ready"] > video { opacity: 1; }

.motion-toggle { position: absolute; z-index: 3; width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(241, 233, 220, 0.38); border-radius: 999px; color: var(--paper); background: rgba(23, 20, 17, 0.55); backdrop-filter: blur(8px); cursor: pointer; font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1; transition: background 180ms ease, border-color 180ms ease; }
.motion-toggle:hover { border-color: var(--paper); background: rgba(23, 20, 17, 0.8); }
.motion-toggle:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.motion-toggle[hidden] { display: none; }
.motion-toggle-play { display: none; font-size: 0.7rem; }
.motion-toggle[aria-pressed="true"] .motion-toggle-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle-play { display: inline; }

.hero-motion-toggle { top: 98px; right: 40px; }
.res-motion-toggle { top: 98px; right: 40px; }
.visit-motion-toggle { right: 14px; bottom: 14px; }
@media (max-width: 620px) {
  .hero-motion-toggle, .res-motion-toggle { top: 86px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-media > video, .motion-toggle { display: none !important; }
}