/* ============================================================
   View Transitions for the hotel demos (vanilla CSS — no React).
   Paste into the site stylesheet (or a <style> block in <head>).

   1) Cross-page: @view-transition opt-in gives a smooth fade
      between same-origin pages in Chromium-based browsers.
   2) Same-page: room-card image gets a shared-element name so
      view-transitions.js can morph it into the detail/booking
      view. Names are added by JS only when the API exists.
   3) Short 250ms duration (mobile-safe; avoids the long-page
      freeze risk seen with heavy transitions on iOS/Safari).
   4) Fully disabled for prefers-reduced-motion users.
   ============================================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease-out;
}

/* Shared-element morph for the room photo (card -> detail). */
::view-transition-old(room-photo),
::view-transition-new(room-photo) {
  animation-duration: 250ms;
  animation-timing-function: ease-out;
}

/* During the morph, keep the photo fully visible (no cross-fade ghosting). */
::view-transition-image-pair(room-photo) {
  isolation: isolate;
}
::view-transition-old(room-photo) {
  display: none;
}
::view-transition-new(room-photo) {
  animation: none;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(room-photo),
  ::view-transition-new(room-photo) {
    animation: none !important;
  }
}