/* motion.css | shared motion layer for the site templates.
 Load after the site stylesheets. Every hidden or moved state is scoped
 under html.motion, which motion.js adds, so without the script the page
 renders exactly as before. Colours come from the site's own variables. */

:root {
  --mo-ease: cubic-bezier(.16, 1, .3, 1);
  --mo-accent: var(--maroon, var(--brown, #3a2a20));
  --mo-y: 24px;
}

@media (max-width: 640px) {
  :root { --mo-y: 16px; }
}

/* Native jumps (arriving on page.php#id, back and forward) stop below the fixed header.
   Zero specificity, so a template rule such as .pg-grid .prop-card { scroll-margin-top } still wins. */
:where(html.motion [id]) { scroll-margin-top: var(--mo-hoff, 0px); }

@media (prefers-reduced-motion: reduce) {
  html.motion { scroll-behavior: auto; }
}

/* ---------- Header: solid bar once the page scrolls ---------- */
html.motion header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mo-bar, 100%);
  background: var(--panel-dark, #1c1410);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: -1;
}
html.motion header.mo-scrolled::before { opacity: .97; }

/* Scroll lock without the page jumping sideways (only when a scrollbar takes space) */
html.mo-lock body,
html.mo-lock body > header { padding-right: var(--mo-sbw, 0px); }

html.motion .prop-card:not([data-card-link=off]) { cursor: pointer; }
html.motion [data-lightbox]:not(a):not(button) { cursor: zoom-in; }
html.motion [data-lightbox][tabindex]:focus-visible { outline: 2px solid var(--mo-accent); outline-offset: 3px; }
html.motion .mo-target:focus { outline: none; }
:where(button[data-lightbox-open]) { border: 0; font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {

  html.motion header > .wrap,
  html.motion header .logo,
  html.motion header .nav-toggle { transition: transform .5s var(--mo-ease); }
  html.motion header.mo-scrolled:not(.mo-navfixed) > .wrap,
  html.motion header.mo-scrolled.mo-navfixed .logo,
  html.motion header.mo-scrolled.mo-navfixed .nav-toggle { transform: translate3d(0, var(--mo-shift, 0px), 0); }

  /* ---------- Buttons and links ---------- */
  html.motion .btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .4s var(--mo-ease); }
  html.motion .pg-chip { transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .3s var(--mo-ease); }
  html.motion .btn:active,
  html.motion .pg-chip:active,
  html.motion .pd-card-alt:active { transform: scale(.97); transition-duration: .1s; }
  html.motion .prop-link { transition: opacity .25s ease, transform .45s var(--mo-ease); }
  html.motion .prop-card { transition: transform .6s var(--mo-ease); }
  html.motion .prop-photo img,
  html.motion [data-lightbox] img { transition: transform 1.4s var(--mo-ease); }
  html.motion .hood-tile { transition: transform .5s var(--mo-ease); }

  @media (hover: hover) {
    html.motion .btn:hover { transform: translate3d(0, -2px, 0); }
    html.motion .btn:active { transform: scale(.97); }
    html.motion .prop-card:hover { transform: translate3d(0, -4px, 0); }
    html.motion .prop-card:hover .prop-photo img { transform: scale(1.05); }
    html.motion .prop-card:hover .prop-link { transform: translate3d(4px, 0, 0); }
    /* keyboard focus inside a card (kept separate so browsers without :has() still get hover) */
    html.motion .prop-card:has(:focus-visible) { transform: translate3d(0, -4px, 0); }
    html.motion .prop-card:has(:focus-visible) .prop-photo img { transform: scale(1.05); }
    html.motion .prop-card:has(:focus-visible) .prop-link { transform: translate3d(4px, 0, 0); }
    html.motion [data-lightbox]:hover img { transform: scale(1.03); }
    html.motion .hood-tile:hover { transform: translate3d(0, -3px, 0); }

    html.motion nav a:not(.btn):not(.ig-link) { position: relative; }
    html.motion nav a:not(.btn):not(.ig-link)::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -4px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .45s var(--mo-ease);
    }
    html.motion nav a:not(.btn):not(.ig-link):hover::after,
    html.motion nav a:not(.btn):not(.ig-link):focus-visible::after { transform: scaleX(1); transform-origin: left; }
  }

  /* ---------- Enquiry modal: backdrop fades, panel rises, content follows ---------- */
  html.motion .enquire-modal { opacity: 1; transition: visibility 0s linear .5s; }
  html.motion .enquire-modal.is-open { transition: visibility 0s; }
  html.motion :where(.enquire-modal__backdrop, .enquire-overlay) { opacity: 0; transition: opacity .45s ease .05s; }
  html.motion .enquire-modal.is-open :where(.enquire-modal__backdrop, .enquire-overlay) { opacity: 1; transition: opacity .4s ease; }
  html.motion :where(.enquire-modal__box, .enquire-dialog) {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.98);
    transition: opacity .3s ease, transform .4s cubic-bezier(.4, 0, .6, 1);
  }
  html.motion .enquire-modal.is-open :where(.enquire-modal__box, .enquire-dialog) {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease .06s, transform .8s var(--mo-ease) .06s;
  }
  html.motion :where(.enquire-modal__intro, .enquire-intro) > *,
  html.motion :where(.enquire-modal__form, .enquire-form-wrap) {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .2s ease, transform 0s linear .3s;
  }
  html.motion .enquire-modal.is-open :where(.enquire-modal__intro, .enquire-intro) > *,
  html.motion .enquire-modal.is-open :where(.enquire-modal__form, .enquire-form-wrap) {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease var(--mo-m, .2s), transform .8s var(--mo-ease) var(--mo-m, .2s);
  }
  html.motion :where(.enquire-modal__intro, .enquire-intro) > :nth-child(2) { --mo-m: .26s; }
  html.motion :where(.enquire-modal__intro, .enquire-intro) > :nth-child(3) { --mo-m: .32s; }
  html.motion :where(.enquire-modal__intro, .enquire-intro) > :nth-child(n+4),
  html.motion :where(.enquire-modal__form, .enquire-form-wrap) { --mo-m: .36s; }
}

/* ---------- Page-load entrance and scroll reveals (screen only, motion allowed) ---------- */
@media screen and (prefers-reduced-motion: no-preference) {

  html.motion .hero-inner,
  html.motion .pg-hero-inner { animation: none; opacity: 1; }
  html.motion :where(.hero-inner, .pg-hero-inner) > * { opacity: 0; transform: translate3d(0, 16px, 0); }
  html.motion :where(.hero-inner, .pg-hero-inner).mo-go > * {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease var(--mo-d, 0s), transform .8s var(--mo-ease) var(--mo-d, 0s);
  }
  html.motion :where(.hero-inner, .pg-hero-inner) > .mo-split { opacity: 1; transform: none; transition: none; }
  html.motion .mo-w {
    display: inline-block;
    padding: .1em .08em .16em;
    margin: -.1em -.08em -.16em;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  html.motion .mo-w > span { display: inline-block; transform: translate3d(0, 115%, 0); }
  html.motion .mo-go .mo-w > span { transform: none; transition: transform .9s var(--mo-ease) var(--mo-d, 0s); }

  html.motion .hero-video { transform: scale(1.08); }
  html.motion .hero.mo-go .hero-video { transform: none; transition: transform 2.4s cubic-bezier(.2, .6, .2, 1); }
  html.motion .pg-hero::before { opacity: 0; }
  html.motion .pg-hero.mo-go::before { opacity: 1; transition: opacity 1.6s ease .15s; }

  /* The three :where() lists below must match UP, MEDIA and INNER in motion.js */
  html.motion :where(.section-head .eyebrow, .section-head h2, .section-head p, .value, .prop-card, .hood-tile, .pg-filters, .pg-note, .ab-story-copy > *, .ab-principle, .ab-quote > *, .pd-breadcrumb, .pd-title-row, .pd-lead, .pd-section > h3, .pd-amenity, .pd-location-copy, .pd-map, .pd-card, .cta .wrap > *, .foot-col, .foot-bottom, .pd-gallery-main, .pd-gallery-thumb, .ab-story-media, [data-reveal], [data-reveal-group] > *, [data-count]:not([data-count=off])):not([data-reveal=inner]):not([data-reveal=off]):not(.mo-in):not(.mo-done) {
    opacity: 0;
    transform: translate3d(0, var(--mo-y), 0);
  }
  html.motion :where(.am-item, .voice, .ab-stat, [data-reveal=inner]):not(.mo-in):not(.mo-done) > * {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  html.motion :where(.pd-gallery-main, .pd-gallery-thumb, .ab-story-media, [data-reveal=media]):not(.mo-in):not(.mo-done) > *,
  html.motion .prop-card:not(.mo-in):not(.mo-done) .prop-photo > * { transform: scale(1.08); }
  html.motion [data-reveal=fade] { --mo-y: 0px; }

  html.motion .mo-in {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease var(--mo-d, 0s), transform 1s var(--mo-ease) var(--mo-d, 0s);
  }
  html.motion .mo-inner.mo-in > * {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease calc(var(--mo-d, 0s) + var(--mo-c, 0s)), transform .9s var(--mo-ease) calc(var(--mo-d, 0s) + var(--mo-c, 0s));
  }
  html.motion .mo-inner > :nth-child(2) { --mo-c: .06s; }
  html.motion .mo-inner > :nth-child(3) { --mo-c: .12s; }
  html.motion .mo-inner > :nth-child(n+4) { --mo-c: .18s; }
  html.motion .mo-media.mo-in > *,
  html.motion .prop-card.mo-in .prop-photo > * { transform: none; transition: transform 1.5s var(--mo-ease) var(--mo-d, 0s); }
}

/* ---------- Lightbox ---------- */
.mo-lb {
  --mo-lb-pad: 72px 96px;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(20, 10, 8, .95);
  background: color-mix(in srgb, var(--panel-dark, #140a08) 95%, transparent);
  color: var(--panel-ink, #fff);
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.mo-lb[hidden] { display: none; }
.mo-lb.is-open { opacity: 1; }
.mo-lb__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--mo-lb-pad);
  touch-action: pan-y pinch-zoom;
}
.mo-lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 144px);
  max-height: calc(100dvh - 144px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  transition: opacity .2s ease, transform .35s var(--mo-ease);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.mo-lb.is-loading .mo-lb__img { opacity: .4; }
.mo-lb.is-dragging .mo-lb__img { transition: none; }
.mo-lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-color: color-mix(in srgb, var(--panel-ink, #fff) 28%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.mo-lb__btn[hidden] { display: none; }
.mo-lb__btn svg { width: 20px; height: 20px; transition: transform .3s var(--mo-ease); }
.mo-lb__btn:hover { background: var(--panel-ink, #fff); border-color: var(--panel-ink, #fff); color: var(--panel-dark, #140a08); }
.mo-lb__btn:focus-visible { outline: 2px solid var(--panel-ink, #fff); outline-offset: 3px; }
.mo-lb__prev:hover svg { transform: translateX(-2px); }
.mo-lb__next:hover svg { transform: translateX(2px); }
.mo-lb__close { top: 20px; right: 20px; }
.mo-lb__prev { left: 24px; top: 50%; margin-top: -24px; }
.mo-lb__next { right: 24px; top: 50%; margin-top: -24px; }
.mo-lb__count {
  position: absolute;
  top: 36px;
  left: 28px;
  font: 500 13px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--panel-dim, rgba(255, 255, 255, .7));
}
.mo-lb__count[hidden] { display: none; }

@media (max-width: 640px) {
  .mo-lb { --mo-lb-pad: 72px 12px 88px; }
  .mo-lb__img { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
  .mo-lb__prev, .mo-lb__next { top: auto; bottom: 20px; margin: 0; }
  .mo-lb__prev { left: calc(50% - 60px); }
  .mo-lb__next { right: calc(50% - 60px); }
}