/* ==========================================================================
   Motion demo ("From the house to the mountains"), index-motion.html pages only.
   Loaded after site.css. Default state = final frame, so no-JS and reduced motion see
   the wide shot with the headline and buttons in place. motion.js adds .motion-on.
   Transform/opacity only. Black, gold, serif caps: same tokens as mock.css.
   ========================================================================== */

/* preview-only link back to the approved version, inside the existing preview banner */
.motion-banner a{color:#f0d28e;border-bottom:1px solid currentColor}
.motion-banner a:hover{color:#fff}

/* ---------- home: Brooke's own Blue Mountains photo, a slow push-in that dissolves into 74 Highland St ---------- */
.page-home .mhero{height:auto;min-height:0;max-height:none;overflow:visible;background:var(--black)}
.mhero-stage{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#0b0b0b}
.motion-on .mhero{height:280vh}
.motion-on .mhero-stage{position:sticky;top:0}
.mhero-media,.mhero-layer{position:absolute;inset:0}
.mhero-layer picture,.mhero-layer img{display:block;width:100%;height:100%}
.mhero-layer img{object-fit:cover}
.mhero-mountains img{object-position:62% 60%}
.mhero-house img{object-position:50% 58%;filter:brightness(.86) saturate(.95)}
.mhero-house{opacity:0}
.motion-on .mhero-layer{will-change:transform,opacity;backface-visibility:hidden}
.motion-on .mhero-mountains{transform-origin:62% 46%}
.motion-on .mhero-house{transform-origin:48% 40%}
.mhero .hero-shade{z-index:2;background:linear-gradient(90deg,#0b0b0bf0 0%,#0b0b0bc7 30%,#0b0b0b5c 58%,#0b0b0b1a 100%),linear-gradient(0deg,#0b0b0bf5 0%,transparent 32%),linear-gradient(180deg,#0b0b0b99 0%,transparent 24%)}
.mhero .hero-content{z-index:3}
.mhero .scroll-cue{z-index:3}
.mhero-caption{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(28px,5vh,48px);margin:0}
.mhero-caption span{position:absolute;right:0;bottom:0;display:block;white-space:nowrap;padding:6px 10px;border-left:2px solid var(--gold);background:#0b0b0bb3;color:#f3ecdc;font:500 11px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.mhero-caption span.is-on{opacity:1;transform:none}
.js:not(.motion-on) .mhero-caption{display:none}
@media(max-width:680px){
  .mhero-stage{min-height:560px}
  .motion-on .mhero{height:210vh}
  .mhero-mountains img{object-position:84% 60%}
  .mhero-house img{object-position:40% 55%}
  .motion-on .mhero-mountains{transform-origin:84% 44%}
  .motion-on .mhero-house{transform-origin:40% 50%}
  .mhero .hero-shade{background:linear-gradient(90deg,#0b0b0be6 0%,#0b0b0b99 70%,#0b0b0b4d 100%),linear-gradient(0deg,#0b0b0bf5 0%,transparent 45%)}
  .mhero-caption{top:140px;bottom:auto}
  .mhero-caption span{top:0;bottom:auto}
}

/* ---------- listing (Brooke's own photos only) ---------- */
.lp-mhero{height:auto}
.motion-on .lp-mhero{height:260vh;overflow:visible}
.lp-mhero .lp-stage{position:relative;height:min(92vh,900px);min-height:600px;overflow:hidden;background:#101316}
.motion-on .lp-mhero .lp-stage{position:sticky;top:0;height:100vh;height:100svh}
.lp-mhero .lp-hero-media{position:absolute;inset:0}
.lp-mhero .lp-layer{position:absolute;inset:0;width:100%;height:100%;will-change:transform,opacity}
.lp-mhero .lp-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.lp-mhero .lp-layer-close img{object-position:center 58%}
.lp-mhero .lp-layer-lot img{object-position:var(--pos,40% 55%)}
.lp-mhero .lp-layer-wide img{object-position:var(--pos,70% 40%)}
.lp-mhero .lp-layer-lot,.lp-mhero .lp-layer-wide{opacity:0}
.lp-mhero .lp-hero-shade{z-index:1}
.lp-mhero .lp-hero-content{z-index:2}
.lp-mcaption{position:absolute;z-index:2;right:var(--gutter);top:clamp(150px,20vh,190px);margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.lp-mcaption span{display:block;white-space:nowrap;padding:6px 10px;border-left:2px solid var(--gold);background:#0b0b0bb3;color:#f3ecdc;font:500 11px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.lp-mcaption span.is-on{opacity:1;transform:none}
.lp-mcaption span + span{position:absolute;right:0;top:0}
.lp-mcredit{position:absolute;z-index:2;left:var(--gutter);top:clamp(150px,20vh,190px);margin:0;padding:5px 9px;background:#0b0b0bb3;color:#e6dfcf;font:400 11px/1.4 var(--body);letter-spacing:.04em}
.js:not(.motion-on) .lp-mcaption,.js:not(.motion-on) .lp-mcredit{display:none}
@media(max-width:680px){
  .motion-on .lp-mhero{height:200vh}
  .motion-on .lp-mhero .lp-stage{height:100svh;display:block}
  .lp-mhero .lp-hero-content{position:absolute;margin-top:0;left:0;right:0;bottom:0;padding-bottom:26px}
  .lp-mhero .lp-hero-shade{background:linear-gradient(0deg,#07090d 0%,#07090df0 30%,#07090d66 56%,transparent 72%),linear-gradient(180deg,#07090de6 0%,transparent 26%)}
  .lp-mcaption{top:132px}
  .lp-mcredit{display:none}
  .lp-mhero .lp-layer-wide img{object-position:var(--pos-m,var(--pos,78% 40%))}
}
@media(prefers-reduced-motion:reduce){
  .mhero-media,.mhero-layer,.lp-layer{transform:none!important}
  .lp-mcaption span{transition:none}
}
/* Saved focal points apply to every selected photograph. */
.mhero-house img,.lp-mhero .lp-layer img{object-position:var(--pos,50% 50%)}
.motion-on .lp-mhero[data-motion-mode="gentle"]{height:200vh}
@media(max-width:680px){
  .mhero-house img,.lp-mhero .lp-layer img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .motion-on .lp-mhero[data-motion-mode="gentle"]{height:170vh}
  .mhero-caption,.lp-mcaption{max-width:calc(100% - 2 * var(--gutter))}
  .mhero-caption span,.lp-mcaption span{white-space:normal;max-width:280px;min-width:160px}
}