/* Homepage tour: the exploded house folds into a self-building listing card (approved mock 4, 2026-10-27).
   Loaded after site.css. Everything here only applies while the 3D tour runs (html.has-3d); without it the
   chapters stay ordinary sections and these layers stay hidden. */

:root { --amber-lit: #e2892a; }

.backdrop, #cardstage, #leaders, #tags { display: none; }
.has-3d .backdrop, .has-3d #cardstage, .has-3d #leaders, .has-3d #tags { display: block; }
.has-3d .tour { height: 1000vh; }

/* Past the tour the fixed layers step aside for the sections below. */
.past-tour .backdrop, .past-tour #stage, .past-tour #cardstage, .past-tour #leaders, .past-tour #tags,
.past-tour .stage-fade, .past-tour .rail, .past-tour .chapter.is-on { visibility: hidden !important; }

/* Phone: copy sits in a frosted card at the bottom, the model gets the top (from the mock's base). */
@media (max-width: 760px) {
  .has-3d .m4 .chapter { width: 100%; align-items: flex-end; padding-bottom: 42px; }
  .has-3d .m4 .chapter .panel, .has-3d .m4 .ch-hero .panel {
    background: rgba(250,248,244,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(27,29,33,.08); box-shadow: 0 10px 30px rgba(40,30,15,.12);
    border-radius: 16px; padding: 20px 20px 18px; width: 100%; max-width: none;
  }
  .has-3d .m4 .ch-hero { align-items: flex-end; }
  .has-3d .m4 .ch-hero .panel p { text-shadow: none; }
  .has-3d .m4 .top { background: none; }
  .has-3d .m4 .panel h1 { font-size: clamp(48px, 15vw, 64px); margin-bottom: 14px; }
  .has-3d .m4 .panel h2 { font-size: 34px; margin-bottom: 10px; }
  .has-3d .m4 .panel p { font-size: 15.5px; line-height: 1.5; margin-bottom: 0; }
  .has-3d .m4 .panel .lede { font-size: 16.5px; }
  .has-3d .m4 .ch-hero .panel .ctas { margin-top: 18px; }
  .has-3d .m4 .ch-hero .scroll-cue { display: none; }
  .has-3d .m4 .ch-final h2 { font-size: 52px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .has-3d .m4 .panel p { font-size: 14.5px; }
}

/* ---- from the approved mock ---- */
/* Mock 4: house into card. Mock 2's exploded isometric house folds flat into mock 3's listing card. */
body.m4 { background: #f3f1ec; }
.backdrop { position: fixed; inset: 0; z-index: 0; background:
  radial-gradient(1200px 700px at 62% 48%, #fbfaf7 0%, #f3f1ec 60%, #ece8e0 100%); }
.backdrop::after { content: ""; position: absolute; inset: 0; opacity: var(--dots, 0);
  background: radial-gradient(rgba(27,29,33,.09) 1px, transparent 1.4px) 0 0 / 26px 26px; }
#stage { z-index: 0; background: none; }
#cardstage { visibility: hidden; }
/* Chapter crossfade: outgoing copy leaves fast, incoming arrives after it is gone, so two chapters never share the screen. */
.m4 .chapter { transition: opacity .16s ease, transform .3s ease, visibility 0s linear .16s; }
.m4 .chapter.is-on { transition: opacity .38s ease .2s, transform .6s cubic-bezier(.2,.7,.2,1) .2s, visibility 0s linear .2s; }
.m4 .chapter:not(.is-on) { transform: translate3d(0, 10px, 0); }
html.reduce .m4 .chapter, html.reduce .m4 .chapter.is-on { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .m4 .chapter, .m4 .chapter.is-on { transition: none; transform: none; } }
/* Mock 2: exploded isometric. Cool paper, fine grid, product-diagram polish. */
body.m4 { background: #f3f1ec; }
.m4 .stage-fade { background:
  linear-gradient(90deg, rgba(243,241,236,.9) 0%, rgba(243,241,236,.5) 26%, rgba(243,241,236,0) 42%),
  linear-gradient(180deg, rgba(243,241,236,.7) 0%, rgba(243,241,236,0) 12%); }
#leaders { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
#leaders path { fill: none; stroke: rgba(27,29,33,.28); stroke-width: 1; }
#leaders circle { fill: #fff; stroke: rgba(27,29,33,.5); stroke-width: 1.2; }
#leaders .on path { stroke: var(--amber); stroke-width: 1.5; }
#leaders .on circle { fill: var(--amber); stroke: #fff; stroke-width: 2; }
#tags { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px 9px;
  border-radius: 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(27,29,33,.12); backdrop-filter: blur(6px);
  font: 600 12px/1.1 var(--sans); letter-spacing: .04em; color: var(--muted); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.tag b { font-weight: 700; color: var(--cream); opacity: .5; margin-right: 6px; letter-spacing: .08em; }
.tag small { font: 500 11px/1.2 var(--sans); letter-spacing: .02em; color: var(--muted); opacity: .9; }
.tag.on { background: #fff; color: var(--cream); border-color: rgba(162,86,10,.45); box-shadow: 0 10px 28px rgba(80,50,10,.16); }
.tag.on b { color: var(--amber); opacity: 1; }
.tag.live { color: var(--live); border-color: rgba(200,50,31,.45); background: #fff; box-shadow: 0 10px 28px rgba(200,50,31,.16); }
.tag.live b { color: var(--live); opacity: 1; }
@media (max-width: 760px) {
  .m4 .stage-fade { background: linear-gradient(180deg, rgba(243,241,236,.85) 0%, rgba(243,241,236,0) 14%); }
  .tag small { display: none; }
  .tag { padding: 7px 10px; font-size: 11px; }
}

/* ---- card (from mock 3) ---- */
/* Mock 3: self-building listing card. DOM + CSS 3D, driven by scroll. */
.stage3 { position: fixed; inset: 0; z-index: 0; overflow: hidden; perspective: 1700px; perspective-origin: 60% 45%; pointer-events: none; }
#glow { position: absolute; left: 0; top: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226,137,42,.34), rgba(226,137,42,0)); opacity: .5; will-change: transform, opacity; }
#rig { position: absolute; left: 0; top: 0; width: 560px; height: 700px; margin: -350px 0 0 -280px; transform-style: preserve-3d; will-change: transform; }
#shadow { position: absolute; left: 30px; right: 30px; bottom: -70px; height: 70px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60,40,15,.32), rgba(60,40,15,0)); filter: blur(6px); will-change: transform, opacity; }
#card { position: relative; width: 560px; height: 700px; transform-style: preserve-3d; font-family: var(--sans); will-change: transform; }
#card > * { position: absolute; }
.cardbg { left: 0; top: 0; width: 560px; height: 700px; border-radius: 26px; background: #fffefb; border: 1px solid rgba(27,29,33,.1);
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px rgba(70,45,10,.2), 0 8px 20px rgba(70,45,10,.1); transform-origin: 50% 0; will-change: transform, opacity; }

/* photos */
.photos { left: 14px; top: 14px; width: 532px; height: 236px; transform-style: preserve-3d; }
.ph { position: absolute; border-radius: 14px; overflow: hidden; background: #d9cfbf; transform-style: preserve-3d; will-change: transform, opacity; }

.ph i { position: absolute; inset: 0; background-image: url(../assets/mangrove-hero-1400.webp); background-repeat: no-repeat; opacity: 1; }
.ph-a { left: 0; top: 0; width: 326px; height: 236px; }
.ph-b { left: 332px; top: 0; width: 200px; height: 115px; }
.ph-c { left: 332px; top: 121px; width: 200px; height: 115px; }
.photos { transform-origin: 0 0; }
.ph-a i { background-size: 190%; background-position: 28% 62%; }
.ph-b i { background-image: url(../assets/mangrove-03-560.webp); background-size: cover; background-position: 50% 55%; }
.ph-c i { background-image: url(../assets/mangrove-04-560.webp); background-size: cover; background-position: 50% 50%; }
.draft { right: 12px; top: 12px; font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: rgba(255,255,255,.9); border: 1px solid var(--line); padding: 6px 9px; border-radius: 99px; z-index: 3; transform: translateZ(30px); }
.draft.live { color: #fff; background: var(--live); border-color: var(--live); }

/* title */
.head { left: 14px; top: 266px; width: 532px; height: 96px; }
.sk-bars b { position: absolute; left: 0; height: 14px; border-radius: 7px; background: #ece6da; }
.sk-bars b:nth-child(1) { top: 8px; width: 360px; } .sk-bars b:nth-child(2) { top: 34px; width: 220px; }
.sk-bars { position: absolute; inset: 0; }
#ttl { position: absolute; left: 0; top: 0; font: 400 34px/1.04 var(--serif); letter-spacing: -.01em; color: var(--cream); width: 532px; margin: 0; }
#caret { display: inline-block; width: 2px; height: 28px; margin-left: 2px; background: var(--amber); vertical-align: -4px; opacity: 0; }
.meta { position: absolute; left: 0; top: 78px; margin: 0; font: 500 13px/1 var(--sans); color: var(--muted); white-space: nowrap; }

/* chips */
.chips { left: 14px; top: 374px; display: flex; gap: 8px; width: 532px; height: 30px; transform-style: preserve-3d; }
.chip { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 8px; border-radius: 99px; background: #fff;
  border: 1px solid var(--line); font: 600 12px/1 var(--sans); color: var(--cream); will-change: transform, opacity; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.c-air { --c: #ff385c; } .c-vrbo { --c: #245eab; } .c-book { --c: #003b95; } .c-dir { --c: var(--amber-lit); }

/* calendar */
.cal { left: 14px; top: 424px; width: 326px; height: 176px; border-radius: 16px; background: #fbf8f2; border: 1px solid var(--line); padding: 12px 14px; }
.cal-h { display: flex; justify-content: space-between; align-items: baseline; font: 400 19px/1 var(--serif); color: var(--cream); margin-bottom: 8px; }
.cal-h b { font-weight: 400; }
.cal-h span { font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); opacity: 0; }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-w i { font: 600 9px/1 var(--sans); color: var(--muted); text-align: center; font-style: normal; margin-bottom: 2px; }
.cal-g span { position: relative; height: 21px; border-radius: 6px; background: #fff; border: 1px solid #ece6da; font: 600 9.5px/19px var(--sans);
  color: #9a9488; text-align: center; overflow: hidden; }
.cal-g span.off { background: transparent; border-color: transparent; color: transparent; }
.cal-g span.bk { color: transparent; }
.cal-g span::before { content: ""; position: absolute; inset: 0; background: var(--amber-lit); transform: scaleX(var(--f, 0)); transform-origin: left; }
.cal-g span em { position: relative; font-style: normal; }
.cal-g span.bk em { color: #3a2208; opacity: calc(var(--f, 0)); }
.cal-g span u { position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 1.5px #fff; transform: scale(var(--c, 0)); }

/* price */
.cprice { left: 346px; top: 424px; width: 200px; height: 176px; border-radius: 16px; background: #fff; border: 1.5px dashed #d9d0bf; padding: 14px 16px; overflow: hidden; }
.cprice small { font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cprice .amt { font: 400 54px/1 var(--serif); color: var(--cream); margin-top: 8px; letter-spacing: -.01em; }
.cprice .delta { position: absolute; right: 14px; top: 14px; font: 700 10.5px/1 var(--sans); color: var(--ok); background: #e5f3ea; padding: 5px 7px; border-radius: 99px; opacity: 0; }
.bars { position: absolute; left: 16px; right: 16px; bottom: 26px; height: 46px; display: flex; align-items: flex-end; gap: 4px; }
.bars i { flex: 1; background: linear-gradient(#ecb36c, var(--amber-lit)); border-radius: 3px 3px 0 0; height: 4px; }
.floor { position: absolute; left: 16px; right: 16px; bottom: 10px; font: 600 9.5px/1 var(--sans); color: var(--muted); letter-spacing: .04em; }

/* footer */
.cfoot { left: 14px; top: 618px; width: 532px; height: 68px; display: flex; align-items: center; justify-content: space-between; }
.owner { display: flex; align-items: center; gap: 10px; opacity: 0; will-change: transform, opacity; }
.owner b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: #fff; font: 700 11px/1 var(--sans); }
.owner span { font: 600 12px/1.2 var(--sans); color: var(--cream-2); max-width: 110px; }
.status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px; background: #f1ece2; color: var(--muted); font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #b9b2a6; }
.status.on { background: var(--live); color: #fff; box-shadow: 0 8px 20px rgba(200,50,31,.3); }
.status.on i { background: #fff; animation: pulse 1.6s ease-in-out infinite; }

/* floating layers */
.float { z-index: 5; will-change: transform, opacity; }
.lock { left: 574px; top: 424px; width: 186px; height: 176px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 18px; background: #23252a; color: #f6f3ee; box-shadow: 0 18px 34px rgba(30,20,5,.3); }
.lock small { display: block; font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a9a59c; }
.digits { display: flex; gap: 6px; }
.digits i { flex: 1; height: 42px; display: grid; place-items: center; border-radius: 8px; background: #111317; font: 500 26px/1 var(--serif); font-style: normal; color: #6a665d; }
.digits i.set { color: var(--amber-lit); box-shadow: 0 0 0 1px rgba(226,137,42,.5) inset; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.keys i { height: 9px; border-radius: 3px; background: #34373d; }
.lock em { display: block; font: 600 10px/1 var(--sans); font-style: normal; color: #a9a59c; }
.bub { left: 574px; width: 186px; height: 72px; padding: 0 14px; display: flex; flex-direction: column; justify-content: center; border-radius: 18px 18px 18px 5px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 26px rgba(60,40,10,.14); font: 500 12px/1.3 var(--sans); color: var(--cream); }
.bub small { display: block; font: 700 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-bottom: 5px; }
.b1 { top: 14px; } .b2 { top: 96px; background: #fbf3e6; } .b3 { top: 178px; }
.clean { left: 574px; top: 266px; width: 186px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; border-radius: 99px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 14px 26px rgba(60,40,10,.16); font: 700 13px/1.1 var(--sans); color: var(--cream); }
.clean b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); position: relative; }
.clean b::after { content: ""; position: absolute; left: 10px; top: 7px; width: 6px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(40deg); }
.clean small { display: block; font: 600 10px/1 var(--sans); color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.stamp { left: 130px; top: 70px; width: 300px; text-align: center; padding: 14px 10px 12px; border: 5px solid var(--live); border-radius: 14px; color: var(--live);
  background: rgba(255,254,251,.88); transform-origin: 50% 50%; box-shadow: 0 30px 60px rgba(120,20,10,.3); pointer-events: none; }
.stamp span { display: block; font: 400 84px/.9 var(--serif); letter-spacing: .02em; text-transform: uppercase; }
.stamp small { display: block; margin-top: 6px; font: 700 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }

/* active highlight */
.cal, .cprice, .chips, .head { transition: box-shadow .35s, border-color .35s; }
.hot { box-shadow: 0 0 0 3px rgba(226,137,42,.55), 0 14px 34px rgba(226,137,42,.25); border-radius: 16px; }
.chips.hot { box-shadow: none; }
.chips.hot .chip { border-color: rgba(162,86,10,.5); }
.head.hot { box-shadow: none; }

@keyframes pulse { 50% { opacity: .45; } }

/* phone: the satellites drop into a single tray under the card, one at a time, so nothing sits on card content */
.stage3.ph-on .lock { left: 14px; top: 716px; width: 532px; height: 88px; padding: 10px 14px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 8px; align-items: center; }
.stage3.ph-on .lock small { grid-column: 1 / 3; }
.stage3.ph-on .digits { width: 210px; }
.stage3.ph-on .digits i { height: 38px; }
.stage3.ph-on .keys { display: none; }
.stage3.ph-on .lock em { font-size: 13px; }
.stage3.ph-on .bub { left: 14px; top: 716px; width: 532px; height: 76px; padding: 0 18px; font-size: 15px; border-radius: 18px; }
.stage3.ph-on .bub small { font-size: 10px; }
.stage3.ph-on .b1, .stage3.ph-on .b2, .stage3.ph-on .b3 { top: 716px; }
.stage3.ph-on .clean { left: 14px; top: 716px; width: 532px; height: 64px; justify-content: center; font-size: 16px; }

.reduce .status.on i { animation: none; }

/* soften the 3D stack where it would otherwise be sliced by the top nav */
#stage { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 54px, #000 150px); mask-image: linear-gradient(180deg, transparent 0, transparent 54px, #000 150px); }
@media (max-width: 760px) {
  .m4 .stage-fade { background: linear-gradient(180deg, rgba(243,239,231,.7) 0%, rgba(243,239,231,0) 12%); }
  #stage { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 44px, #000 96px); mask-image: linear-gradient(180deg, transparent 0, transparent 44px, #000 96px); }
}