/* Motion layer, Saint Roch proposal. Everything is visible without JS (no .m-js) and with reduced motion. */
:root{--m-ease:cubic-bezier(.16,1,.3,1)}

/* Cover: slow settle of the photo, staggered entrance of the text */
.m-js .hero img.bg{animation:m-settle 2.8s var(--m-ease) both}
.m-js .hero .logo{animation:m-fade 1.2s .2s var(--m-ease) both}
.m-js .hero-in>*{animation:m-rise 1.1s var(--m-ease) both}
.m-js .hero-in>*:nth-child(1){animation-delay:.35s}
.m-js .hero-in>*:nth-child(2){animation-delay:.5s}
.m-js .hero-in>*:nth-child(3){animation-delay:.7s}
.hero-in{will-change:transform,opacity}
@keyframes m-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes m-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

/* Scroll cue */
.cue{position:absolute;left:50%;bottom:18px;z-index:2;width:1px;height:42px;background:rgba(255,255,255,.35);overflow:hidden;transform:translateX(-50%)}
.cue::after{content:'';position:absolute;left:0;top:-42px;width:1px;height:42px;background:#fff;animation:m-cue 2s 1.4s ease-in-out infinite}
@keyframes m-cue{to{top:42px}}

/* Headings: word by word */
.m-js h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-js h2 .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--m-ease);transition-delay:calc(var(--i)*55ms)}
.m-js h2.in .w>span{transform:none}

/* Generic staggered items */
.m-js [data-m]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--m-ease),transform .8s var(--m-ease);transition-delay:calc(var(--i,0)*90ms)}
.m-js [data-m].in{opacity:1;transform:none}
.m-js .lead[data-m]{transition-delay:.25s}

/* Deal figures */
.deal .n{font-variant-numeric:tabular-nums}

/* Confidential band: red wipe, then text */
.m-js .confidential{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--m-ease)}
.m-js .confidential.in{clip-path:inset(0 0 0 0)}
.m-js .confidential>*{opacity:0;transform:translateX(-16px);transition:opacity .7s .5s var(--m-ease),transform .7s .5s var(--m-ease)}
.m-js .confidential.in>*{opacity:1;transform:none}
.m-js .confidential.in>*:nth-child(2){transition-delay:.65s}

/* Room cards: lift on hover (desktop), rows appear in sequence */
.room{transition:transform .5s var(--m-ease),box-shadow .5s var(--m-ease),border-color .5s}
@media (hover:hover){.room:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,30,45,.12);border-color:#d8d8d8}}
.m-js .room .budget>div{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--m-ease),transform .6s var(--m-ease)}
.m-js .room.in .budget>div{opacity:1;transform:none}
.m-js .room.in .budget>div:nth-child(1){transition-delay:.25s}
.m-js .room.in .budget>div:nth-child(2){transition-delay:.35s}
.m-js .room.in .budget>div:nth-child(3){transition-delay:.45s}
.m-js .room.in .budget>div:nth-child(4){transition-delay:.6s}

/* Hotel showcase. Default (no JS / reduced motion): plain stacked photos. */
.show{background:#0A0A0A}
.show .frame{position:relative;margin:0;height:62vh;overflow:hidden}
.show .frame img{width:100%;height:100%;object-fit:cover;display:block}
.show figcaption{position:absolute;left:24px;bottom:28px;color:#fff;font-size:22px;font-weight:600;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.show .idx{display:block;font-size:11px;font-weight:700;letter-spacing:3px;color:#C9A96E;margin-bottom:6px}
.show .frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.72),transparent 55%);pointer-events:none}
.show-bar{display:none}

/* Scroll-driven mode */
.m-scroll .show{height:440vh;background:transparent}
.m-scroll .show-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0A0A0A}
.m-scroll .show .frame{position:absolute;inset:0;height:auto;opacity:0;z-index:0}
.m-scroll .show .frame.on{z-index:1}
.m-scroll .show .frame img{transform:scale(var(--z,1.12));will-change:transform}
.m-scroll .show figcaption{left:max(24px,calc(50% - 416px));bottom:56px;font-size:30px;opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0))*20px))}
.m-scroll .show-bar{display:block;position:absolute;z-index:3;left:max(24px,calc(50% - 416px));right:max(24px,calc(50% - 416px));bottom:28px;height:2px;background:rgba(255,255,255,.25)}
.m-scroll .show-bar span{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(var(--p,0))}

@media (max-width:760px){
  .m-scroll .show figcaption{font-size:24px;bottom:48px}
  .show .frame{height:48vh}
}

@media (prefers-reduced-motion:reduce){
  .m-js .hero img.bg,.m-js .hero .logo,.m-js .hero-in>*,.cue::after{animation:none}
  .m-js h2 .w>span,.m-js [data-m],.m-js .confidential,.m-js .confidential>*,.m-js .room .budget>div{transition:none;transform:none;opacity:1;clip-path:none}
}
@media print{
  .cue{display:none}
  .m-js [data-m],.m-js .confidential>*,.m-js .room .budget>div{opacity:1!important;transform:none!important}
  .m-js .confidential{clip-path:none!important}
  .m-js h2 .w>span{transform:none!important}
  .m-scroll .show{height:auto}.m-scroll .show-sticky{position:static;height:auto}
  .m-scroll .show .frame{position:relative;opacity:1!important;height:40vh}
}

/* Room photos: curtain reveal when the card enters */
.m-js .room .room-pics a{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--m-ease)}
.m-js .room.in .room-pics a{clip-path:inset(0 0 0 0)}
.m-js .room.in .room-pics a:nth-child(2){transition-delay:.12s}
.m-js .room .room-pics img{transform:scale(1.15);transition:transform 1.4s var(--m-ease)}
.m-js .room.in .room-pics img{transform:scale(1)}
@media (hover:hover){.m-js .room.in .room-pics a:hover img{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.m-js .room .room-pics a{clip-path:none;transition:none}.m-js .room .room-pics img{transform:none;transition:none}}
@media print{.m-js .room .room-pics a{clip-path:none!important}.m-js .room .room-pics img{transform:none!important}}

/* Mosaic tiles: curtain reveal in sequence */
.m-js .mosaic a{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--m-ease);transition-delay:calc(var(--i,0)*70ms)}
.m-js .mosaic.in a,.m-js .mosaic a.in{clip-path:inset(0 0 0 0)}
.m-js .mosaic a img{transform:scale(1.18);transition:transform 1.5s var(--m-ease);transition-delay:calc(var(--i,0)*70ms)}
.m-js .mosaic a.in img{transform:scale(1)}
@media (hover:hover){.m-js .mosaic a.in:hover img{transform:scale(1.05);transition-delay:0s}}
@media (prefers-reduced-motion:reduce){.m-js .mosaic a{clip-path:none;transition:none}.m-js .mosaic a img{transform:none;transition:none}}
@media print{.m-js .mosaic a{clip-path:none!important}.m-js .mosaic a img{transform:none!important}}

/* Logos: soft unveil (mask sweep left to right, blur to sharp, slight rise) */
@keyframes m-logo{
  from{opacity:0;filter:blur(8px);transform:translateY(8px) scale(.97);-webkit-mask-position:100% 0;mask-position:100% 0}
  to{opacity:1;filter:blur(0);transform:none;-webkit-mask-position:0 0;mask-position:0 0}
}
.m-js .m-logo{
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  opacity:0;will-change:opacity,filter,transform
}
.m-js .m-logo.in{animation:m-logo 1.6s var(--m-ease) both;animation-delay:var(--d,0s)}
/* Cover logo: plays on load, after the photo starts settling */
.m-js .hero .logo.m-logo{animation:m-logo 1.8s .25s var(--m-ease) both}
/* Signature: logo, divider grows, second logo */
.m-js .sig .sep{transform:scaleY(0);transition:transform .8s .55s var(--m-ease)}
.m-js .sig.in .sep{transform:none}
/* Footer: logo then the line under it */
.m-js footer .powered{opacity:0;transform:translateY(6px);transition:opacity .9s .7s var(--m-ease),transform .9s .7s var(--m-ease)}
.m-js footer.in .powered{opacity:.7;transform:none}
@media (prefers-reduced-motion:reduce){
  .m-js .m-logo,.m-js .m-logo.in,.m-js .hero .logo.m-logo{animation:none;opacity:1;filter:none;transform:none;-webkit-mask-image:none;mask-image:none}
  .m-js .sig .sep,.m-js footer .powered{transition:none;transform:none}
  .m-js footer .powered{opacity:.7}
}
@media print{
  .m-js .m-logo{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .m-js .sig .sep{transform:none!important}.m-js footer .powered{opacity:.7!important;transform:none!important}
}