/* motion.css - Rimal Spire motion system (owner: M). Nothing here hides content: every initial state is set by motion.js
   after it loads, and the reduced-motion block leaves everything visible with no transforms. */

/* ---- Scroll base: never smooth in CSS (Lenis or native only), Lenis recommended base ---- */
html { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
html.mx-locked { overflow: hidden; }
[hidden] { display: none !important; }

/* ---- M10 cross-document morph (off under reduced motion); fallback = ivory root fade ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
  html:active-view-transition { background: #F6F5F1; }
}

/* ---- M1 / M4 split lines ---- */
.mx-line-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mx-line { display: block; will-change: transform; }

/* ---- M3 header state ---- */
[data-mx-header] { transition: background-color .35s ease, box-shadow .35s ease, color .35s ease; }
[data-mx-header][data-mx-state="scrolled"] { background-color: rgba(246, 245, 241, .96); box-shadow: 0 1px 0 #D5D3CA; }

/* ---- SIGNATURE (live = canvas scrub; rest = the two stills side by side, same as home.css's reduced-motion layout) ---- */
.mx-sg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.hm-sig.mx-sg-live .hm-sig-img--night { visibility: hidden; }  /* the sequence owns the change; the day still sits under the canvas until frame 1 decodes */
.hm-sig.mx-sg-live .hm-sig-wipe { display: none; }
.hm-sig.mx-sg-live [data-sg-cap] { transition: none; }
.hm-sig.mx-sg-live [data-sg-cap="day"] { opacity: calc(1 - var(--sg-p, 0) * .55); }
.hm-sig.mx-sg-live [data-sg-cap="night"] { opacity: calc(.45 + var(--sg-p, 0) * .55); }
/* C2: in the live scrub the image callouts + the big clock carry the endpoints; the caption row under the image repeated them.
   (rest mode keeps the captions: there they label the two stills side by side) */
.hm-sig.mx-sg-live .hm-sig-cap { display: none; }
/* C2: anchor / programmatic scrolls land with the eyebrow clear of the fixed header */
#signature { scroll-margin-top: calc(var(--header-h, 72px) + 1.25rem); }
.pin-spacer:has(> .hm-sig-grid), .pin-spacer:has(> .hm-sig-stage) { background: transparent; }
/* keyboard mirror of the scrub: visually hidden, its focus ring is drawn on the hour scale */
.mx-sg-range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mx-sg-range:focus-visible ~ .hm-sig-scale { outline: 2px solid #F08A5D; outline-offset: 8px; }
.hm-sig.mx-sg-rest .hm-sig-ctl, .hm-sig.mx-sg-rest .hm-sig-wipe, .hm-sig.mx-sg-rest .hm-sig-scale { display: none; }
.hm-sig.mx-sg-rest .hm-sig-frame { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; }
.hm-sig.mx-sg-rest .hm-sig-img, .hm-sig.mx-sg-rest .hm-sig-img--night { position: static; aspect-ratio: 3 / 4; clip-path: none; visibility: visible; }

/* ---- B2 hour-line callouts on the signature canvas (motion.js sets left/top per frame and opacity per hour) ---- */
.mx-sg-call { position: absolute; z-index: 2; width: 0; height: 0; opacity: 0; pointer-events: none; }
.mx-sg-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #F08A5D;
  box-shadow: 0 0 0 3px rgba(22, 34, 52, .55), 0 0 0 calc(4px + var(--mx-k, 0) * 8px) rgba(201, 169, 120, calc(.45 - var(--mx-k, 0) * .3)); }
.mx-sg-tag { position: absolute; top: 0; display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; transform: translateY(-50%);
  padding: .42em .8em; background: rgba(22, 34, 52, .86); color: #F6F5F1; border: 1px solid rgba(201, 169, 120, .7);
  font-size: clamp(.68rem, .62rem + .3vw, .82rem); font-weight: 500; letter-spacing: .06em; line-height: 1.2; }
.mx-sg-tag b { color: #F08A5D; font-weight: 600; letter-spacing: .08em; }
.mx-sg-tag::before { content: ""; position: absolute; top: 50%; width: calc(14px + var(--mx-k, 0) * 18px); height: 1px; background: #F08A5D; }
.mx-sg-call--l .mx-sg-tag { right: calc(20px + var(--mx-k, 0) * 18px); }
.mx-sg-call--l .mx-sg-tag::before { left: 100%; }
.mx-sg-call--r .mx-sg-tag { left: calc(20px + var(--mx-k, 0) * 18px); }
.mx-sg-call--r .mx-sg-tag::before { right: 100%; }

/* ---- B2 phone signature (<= 600 px, class set by motion.js): one compact block, no pin, no navy void.
   Order: label, title, rule, image + hour line + clock, Day/Night, then the lede and the room link. ---- */
@media (max-width: 600px) {
  .hm-sig.mx-sg-phone { padding-block: 3rem 3.25rem; }
  .hm-sig.mx-sg-phone .hm-sig-grid { display: flex; flex-direction: column; gap: 0; }
  .hm-sig.mx-sg-phone .hm-sig-copy { display: contents; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .rs-label { order: 1; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .rs-h2 { order: 2; margin-top: .6rem; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .rs-rule { order: 3; }
  .hm-sig.mx-sg-phone .hm-sig-stage { order: 4; margin-top: 1.25rem; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .hm-sig-ctl { order: 5; margin: 1.1rem 0 0; align-self: stretch; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .rs-lede { order: 6; margin: 1.25rem 0 .9rem; }
  .hm-sig.mx-sg-phone .hm-sig-copy > .rs-link { order: 7; align-self: flex-start; }
  .hm-sig.mx-sg-phone .hm-sig-frame { touch-action: pan-y; cursor: ew-resize; }
  .hm-sig.mx-sg-phone .hm-sig-cap { display: none; }
  /* clock on its own line above the hour scale (beside it, it covered the 20:00 tick at 390) */
  .hm-sig.mx-sg-phone .hm-sig-scale { margin-top: .6rem; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .hm-sig.mx-sg-phone .hm-sig-now { order: -1; text-align: right; line-height: 1; }
}

/* ---- B2 back-to-top yields where it would cover the hour line or card copy (class set by motion.js) ---- */
.back-to-top.mx-btt-off { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ---- Evening loops (motion.js inserts them after the still; same box as a drift image, fade in once playing) ---- */
.rs-frame > .mx-loop { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; opacity: 0;
  transition: opacity .6s ease; pointer-events: none; will-change: transform; }
.rs-frame > .mx-loop.is-playing { opacity: 1; }

/* ---- M14 colour tide bands (behind the section's content: host is isolated, band at z -1) ---- */
.mx-tide-host { position: relative; isolation: isolate; }
/* a SOLID band of the next section's colour (no gradient, no grey) rises out of the seam inside the bottom padding,
   with a brass hairline on its leading edge; scaleY is scrubbed by motion.js */
.mx-tide { position: absolute; left: 0; right: 0; bottom: 0; height: min(8svh, 3.5rem); pointer-events: none; z-index: -1;
  transform: scaleY(0); transform-origin: 50% 100%; border-top: 1px solid #BC4C27; box-sizing: border-box; }

/* ---- M8 compare dialog / M9 lightbox ---- */
dialog[data-compare-dialog], dialog[data-lightbox] { transform-origin: 50% 80%; }

/* ---- M11 / M12 overlay tween: the DOM text is final at once; only this overlay counts ---- */
/* booking progress in the hour-line style: a 1 px brass line with the hour marker riding its end (CSS only, 300 ms) */
.mx-steps-bar { position: relative; height: 1px; margin-top: 14px; background: rgba(20, 24, 41, .14); overflow: visible; }
.mx-steps-bar > span { position: relative; display: block; height: 100%; width: 0; background: #BC4C27; transition: width .3s cubic-bezier(.2,.7,.2,1); }
.mx-steps-bar > span::after { content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #BC4C27; box-shadow: 0 0 0 3px #F6F5F1; }
.mx-tweening { position: relative; color: transparent !important; }
.mx-tweening::after { content: attr(data-mx-display); position: absolute; left: var(--mx-left, auto); right: var(--mx-right, 0); top: 0;
  color: var(--mx-c); white-space: nowrap; }

/* ---- Reduced motion: everything at rest and visible ---- */
@media (prefers-reduced-motion: reduce) {
  .mx-tide, .mx-loop, .mx-sg-canvas { display: none !important; }
  .mx-steps-bar > span { transition: none; }
  [data-mx-header] { transition: none; }
  .mx-tweening { color: inherit !important; }
  .mx-tweening::after { content: none; }
}