/* Depth is progressive enhancement: readable final positions without JavaScript. */
.js-ready [data-reveal] {
  transition-duration: .72s, .88s;
  transition-delay: var(--reveal-delay, 0ms);
}
.bed-showcase { perspective: 1500px; perspective-origin: 50% 38%; }
.depth-ready .bed-drift {
  transform-origin: 50% 65%;
  transform: translate3d(0,var(--bed-rise,0px),0) rotateX(var(--bed-rx,0deg)) rotateY(var(--bed-ry,0deg)) rotateZ(var(--bed-rz,0deg)) scale(var(--bed-scale,1));
  will-change: auto;
}
.bed-cutout { transition: none; }
.bed-ground {
  position: absolute; width: 60%; height: 8%; left: 20%; top: 70%;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse,#0009,transparent 70%);
  opacity: var(--bed-shadow,.65); transform: scaleX(var(--bed-shadow-scale,1));
}
.depth-ready .bed-wordmark { transform: translateY(var(--bed-word-y,0px)); }
.depth-ready .bed-halo { opacity: var(--bed-glow,1); }
.depth-ready .hero-photo { transform: translate3d(0,var(--hero-y,0px),0); inset: -45px 0; }
.depth-frame { display: block; overflow: hidden; position: relative; }
.depth-ready .depth-frame img {
  transform: translate3d(0,var(--photo-y,0px),0) scale(1.065);
  transition: none;
}
.spa-photo>.depth-frame { height: 100%; }
.room-tile { perspective: 1100px; }
.room-card { transform-origin: 50% 50%; }
@media (hover:hover) and (pointer:fine) {
  .depth-ready .room-card {
    transform: rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(var(--card-lift,0px));
    transition: transform .42s cubic-bezier(.2,.7,.25,1), box-shadow .42s, background .35s;
  }
  .depth-ready .room-card.is-tilting {
    box-shadow: 0 20px 35px -18px #000b;
    background: radial-gradient(ellipse at var(--light-x,50%) var(--light-y,20%),#c9aa7e17,transparent 70%);
  }
  .room-card:focus-visible { transform: translateY(-4px); }
}
#room-dialog[open] { animation: room-arrive .38s cubic-bezier(.16,1,.3,1) both; }
#room-dialog::backdrop { animation: backdrop-arrive .3s ease-out both; }
@keyframes room-arrive { from { opacity: 0; transform: perspective(1200px) translateY(22px) rotateX(3deg) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu:not([hidden])>a { animation: menu-arrive .48s cubic-bezier(.16,1,.3,1) both; }
.mobile-menu>a:nth-of-type(2) { animation-delay: 35ms; }
.mobile-menu>a:nth-of-type(3) { animation-delay: 70ms; }
.mobile-menu>a:nth-of-type(4) { animation-delay: 105ms; }
.mobile-menu>a:nth-of-type(5) { animation-delay: 140ms; }
.mobile-menu>a:nth-of-type(6) { animation-delay: 175ms; }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.motion-reduced .bed-drift,.motion-reduced .bed-wordmark,.motion-reduced .hero-photo,
.motion-reduced .depth-frame img,.motion-reduced .room-card { transform: none!important; }
.motion-reduced .bed-halo { opacity: 1; }
.motion-reduced .bed-ground { opacity: .65; transform: none; }
.motion-reduced #room-dialog,.motion-reduced #room-dialog::backdrop,.motion-reduced .mobile-menu>a { animation: none!important; }
.motion-reduced [data-reveal] { transition: none!important; }
@media(prefers-reduced-motion:reduce) {
  .bed-drift,.bed-wordmark,.hero-photo,.depth-frame img,.room-card { transform: none!important; }
  #room-dialog,#room-dialog::backdrop,.mobile-menu>a { animation: none!important; }
  [data-reveal] { transition: none!important; }
}

/* ---------- Choreography layer (2nd motion pass) ----------
   One easing family for every arrival: a long, soft tail. Hero and masks are plain CSS;
   the JS-driven pieces (split headings, curtains, magnets) only switch on when motion is allowed. */
:root { --ease-expo: cubic-bezier(.16,1,.3,1); }
.js-ready [data-reveal] { transition-timing-function: cubic-bezier(.2,.6,.3,1), var(--ease-expo); }

/* Hero: the photograph grows into its frame, then the title rises line by line behind a mask. */
/* `scale` is composited; animating clip-path on a full-bleed photo repaints it every frame (measured +7 ms/frame). */
@keyframes hero-open { from { scale: .93; } to { scale: 1; } }
@keyframes line-rise { from { transform: translate3d(0,112%,0); } to { transform: none; } }
@keyframes soft-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.hero-photo { animation: hero-open 2.1s var(--ease-expo) both; }
.hero h1 .ln, .hero h1 .ln-in { animation: none; }
.hero h1 .ln { display: block; overflow: hidden; padding: .06em .05em .14em; margin: -.06em -.05em -.14em; }
.hero h1 .ln-in { display: block; animation: line-rise 1.6s var(--ease-expo) both; }
.hero h1 .ln:nth-child(1) .ln-in { animation-delay: .34s; }
.hero h1 .ln:nth-child(2) .ln-in { animation-delay: .46s; }
.hero h1 .ln:nth-child(3) .ln-in { animation-delay: .6s; }
.hero-intro, .hero-bottom, .hero-cta { animation-timing-function: var(--ease-expo); }
.hero-bottom { animation-delay: 1s; }
.hero-cta { animation-delay: 1.12s; }
.hero-caption, .hero-location { animation: soft-in 1.4s 1.5s ease-out both; }
.header { animation: header-in 1.1s .6s var(--ease-expo) backwards; }

/* Section titles: each line slides up out of its own mask; the gold line follows. */
.split-title .line { display: block; overflow: hidden; padding: .06em .05em .16em; margin: -.06em -.05em -.16em; }
.split-title .line-in { display: block; }
.split-ready .split-title .line-in { transition: transform 1.25s var(--ease-expo); transition-delay: calc(var(--li,0) * .12s); }
.split-ready .split-title:not(.is-in) .line-in { transform: translate3d(0,112%,0); }
.split-ready h2.split-title[data-reveal].awaiting-reveal { opacity: 1; transform: none; }

/* Photographs open like a curtain from the bottom edge; the picture settles while it opens. */
.curtain-ready .depth-frame { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--ease-expo); }
.curtain-ready .depth-frame:not(.is-in) { clip-path: inset(100% 0 0 0); }
.curtain-ready .depth-frame img { scale: 1; transition: scale 2.2s var(--ease-expo); }
.curtain-ready .depth-frame:not(.is-in) img { scale: 1.16; }
.curtain-ready .image-reveal[data-reveal].awaiting-reveal { opacity: 1; transform: none; }
.curtain-ready .photo-caption { transition: opacity 1s .75s ease-out; }
.curtain-ready .depth-frame:not(.is-in) ~ .photo-caption { opacity: 0; }

/* Footer wordmark: letters rise one after another. */
.wm-l { display: inline-block; }
.split-ready .footer-wordmark .wm-l { transition: opacity 1.3s ease-out, transform 1.9s var(--ease-expo); transition-delay: calc(var(--wi,0) * .1s); }
.split-ready .footer-wordmark:not(.is-in) .wm-l { opacity: 0; transform: translate3d(0,34%,0); }

/* Magnetic controls use the independent `translate` property so hover transforms still compose. */
.is-magnet { will-change: translate; }

/* Reduced motion: final positions, no choreography. */
.motion-reduced .hero-photo, .motion-reduced .hero h1 .ln-in, .motion-reduced .hero-caption,
.motion-reduced .hero-location, .motion-reduced .header { animation: none!important; }
.motion-reduced .split-title .line-in, .motion-reduced .footer-wordmark .wm-l,
.motion-reduced .depth-frame, .motion-reduced .depth-frame img, .motion-reduced .photo-caption { transition: none!important; transform: none!important; scale: none!important; clip-path: none!important; opacity: 1!important; }
.motion-reduced .is-magnet { translate: none!important; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero h1 .ln-in, .hero-caption, .hero-location, .header { animation: none!important; }
  .split-title .line-in, .footer-wordmark .wm-l, .depth-frame, .depth-frame img, .photo-caption { transition: none!important; transform: none!important; scale: none!important; clip-path: none!important; opacity: 1!important; }
  .is-magnet { translate: none!important; }
}