/* "Step inside": scroll-scrubbed walkthrough of the Ocean Suite (walkthrough.js). */
.walkthrough{position:relative;height:820vh;height:calc(var(--scene-vh) * 8.2);background:var(--paper)}
.walkthrough+.map-section{margin-top:0}
.is-viewing-walkthrough .contact-float{visibility:hidden;pointer-events:none}
.walk-sticky{position:-webkit-sticky;position:sticky;top:var(--nav);height:calc(100vh - var(--nav));height:calc(var(--scene-vh) - var(--nav));min-height:0;overflow:hidden;isolation:isolate;background:var(--paper)}
.walk-stage{position:absolute;inset:0}
.walk-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--ease);touch-action:pan-y;cursor:grab}
.walk-stage canvas:active{cursor:grabbing}
.walkthrough.is-ready .walk-stage canvas{opacity:1}
.walkthrough.is-fading .walk-stage canvas{opacity:0;transition-duration:.22s}

/* Static layer: photo + plan. Shown without JS, while loading (plan only) and as the WebGL fallback. */
.walk-fallback{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;gap:4vw;align-items:center;padding:7vh var(--gutter) 22vh}
.walk-fallback figure{margin:0;height:100%;min-height:0;overflow:hidden;background:var(--sage)}
.walk-fallback img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s var(--ease)}
.walk-plan{min-width:0}
.walk-plan svg{width:100%;height:auto;display:block}
.walk-plan .zone-label,.walk-plan .view-marker{display:none}
.walkthrough.is-gl .walk-fallback{grid-template-columns:1fr;padding:12vh 16vw 18vh;transition:opacity .9s var(--ease)}
.walkthrough.is-gl .walk-fallback figure{display:none}
.walkthrough.is-ready .walk-fallback{opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}

/* Drawing sheet: frame + title block, fades as the walls rise. */
.walk-sheet{position:absolute;inset:14px;border:1px solid var(--ink);pointer-events:none;opacity:0;transition:none}
.walk-sheet::after{content:"";position:absolute;inset:5px;border:.5px solid rgba(37,61,52,.55)}
.walkthrough.is-gl .walk-sheet{opacity:var(--sheet,1)}
.walk-titleblock{position:absolute;right:5px;bottom:5px;width:300px;background:var(--paper);border-top:.5px solid rgba(37,61,52,.55);border-left:.5px solid rgba(37,61,52,.55);display:grid;grid-template-columns:1fr 1fr;font:600 9px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);z-index:1}
.walk-titleblock>*{padding:8px 10px;border-bottom:.5px solid rgba(37,61,52,.35)}
.walk-titleblock>*+*{border-left:.5px solid rgba(37,61,52,.35)}
.walk-titleblock .tb-name{grid-column:1/-1;border-left:0;font:400 24px/1 var(--serif);letter-spacing:-.02em;text-transform:none}
.walk-titleblock .tb-wide{grid-column:1/-1;border-left:0}
.walk-titleblock .tb-left{border-left:0}
.walk-titleblock span{display:block;font-weight:500;letter-spacing:.12em;color:var(--muted);margin-bottom:2px}

/* Copy */
.walk-intro{position:absolute;left:var(--gutter);top:6vh;max-width:430px;color:var(--ink);opacity:var(--intro,1);pointer-events:none}
.walk-intro h2{font:400 clamp(48px,4.45vw,70px)/.98 var(--serif);letter-spacing:-.035em;margin:0 0 16px}
.walk-intro h2 em{color:#73816b}
.walk-intro p{margin:0;max-width:330px;font-size:15px;line-height:1.6;color:var(--muted)}
.walk-caption{position:absolute;left:var(--gutter);bottom:7vh;width:min(400px,calc(100vw - 2 * var(--gutter)));color:var(--ink)}
.walk-caption-body{transition:opacity .45s var(--ease)}
.walk-caption-body.is-swapping{opacity:0;transition-duration:.18s}
.walk-caption[hidden]{display:block;opacity:0;visibility:hidden}
.walk-caption h3{font:400 clamp(34px,3vw,46px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 8px}
.walk-caption-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.walk-room-count{flex:none;font:500 12px/1.4 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.06em;opacity:.75}
.walk-caption p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.walk-caption .walk-meta{display:block;margin-top:10px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#718065}
.walkthrough.is-gl .walk-caption{text-shadow:0 0 18px rgba(245,243,237,.9),0 0 3px rgba(245,243,237,.8)}
.walkthrough.is-inside .walk-caption{color:#fffcf7;text-shadow:0 1px 18px rgba(20,32,27,.55),0 0 2px rgba(20,32,27,.4)}
.walkthrough.is-inside .walk-caption p,.walkthrough.is-inside .walk-caption .walk-meta{color:rgba(255,252,247,.9)}
/* rentals-A: white caption/index sat on the balcony sun glare; soft scrim keeps them legible (desktop only, mobile caption has a paper bar) */
@media (min-width:768px){.walk-caption,.walk-index{isolation:isolate}.walk-caption:before,.walk-index:before{content:"";position:absolute;inset:-70px -110px -60px -120px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(20,32,27,.42),rgba(20,32,27,0));opacity:0;transition:opacity .45s var(--ease)}.walk-index:before{inset:-60px -60px -60px -70px}.walkthrough.is-inside .walk-caption:before,.walkthrough.is-inside .walk-index:before{opacity:1}}

/* Room index */
.walk-index{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);opacity:var(--index,0);visibility:visible;transition:opacity .3s var(--ease)}
.walk-index ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.walk-index button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:7px 0 7px 14px;border-left:1px solid rgba(37,61,52,.25);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s,border-color .3s}
.walk-index button span{font-weight:500;color:#718065;letter-spacing:.06em}
.walk-index button:hover,.walk-index button[aria-current="step"]{color:var(--ink);border-left-color:#728c66}
.walk-index button[aria-current="step"]{border-left-width:2px;padding-left:13px}
.walk-index button:focus-visible{outline:2px solid #728c66;outline-offset:3px}
.walkthrough.is-inside .walk-index button{color:rgba(255,252,247,.82);border-left-color:rgba(255,252,247,.35);text-shadow:0 1px 10px rgba(20,32,27,.5)}
.walkthrough.is-inside .walk-index button span{color:rgba(255,252,247,.7)}
.walkthrough.is-inside .walk-index button:hover,.walkthrough.is-inside .walk-index button[aria-current="step"]{color:#fffcf7;border-left-color:#fffcf7}
.walk-hint{position:absolute;right:var(--gutter);bottom:7vh;font:500 13px/1.6 var(--sans);color:var(--white);text-align:right;text-shadow:0 1px 10px rgba(20,32,27,.5);opacity:var(--hint,0);pointer-events:none}
.walk-hint span{display:block;font-weight:400;opacity:.8}
.walk-guidance{display:none}
.walk-progress{display:none}

/* Fallback mode (no WebGL): photo per room, plan beside it. */
.walkthrough.is-fallback .walk-sheet,.walkthrough.is-fallback .walk-hint{display:none}
.walkthrough.is-fallback .walk-index{--index:1}

@media (max-width:900px){
  .walk-sheet{inset:8px}
  .walk-titleblock{width:210px;font-size:8px}
  .walk-titleblock .tb-name{font-size:19px}
  .walk-titleblock>*{padding:6px 8px}
  .walk-titleblock .tb-hide{display:none}
}
@media (max-width:767px){
  .walk-intro{top:4.5vh;right:var(--gutter);max-width:none}
  .walk-intro h2{font-size:43px}
  .walk-intro p{font-size:14px;max-width:290px}
  .walk-titleblock{display:none}
  .walk-fallback{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:20vh var(--gutter) 26vh;gap:16px}
  .walkthrough.is-gl .walk-fallback{padding:26vh 8vw 30vh}
  .walk-caption{left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));width:auto;padding:5px var(--gutter) 14px;background:var(--paper);border-top:0;text-shadow:none!important;color:var(--ink)!important}
  .walkthrough .walk-caption p{color:var(--muted)!important;font-size:14px}
  .walkthrough .walk-caption .walk-meta{color:#718065!important;margin-top:8px}
  .walk-caption h3{font-size:30px;margin-bottom:5px}
  .walk-index{display:none}
  .walk-hint{display:none}
  .walk-progress{display:flex;position:relative;gap:8px;height:44px;opacity:var(--index,0)}
  .walk-progress button{all:unset;flex:1;min-width:44px;height:44px;cursor:pointer;position:relative}
  .walk-progress button::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--line);transition:background .3s}
  .walk-progress button[aria-current="step"]::before{background:var(--ink)}
  .walk-progress button.is-past::before{background:#899a83}
  .walk-progress button:focus-visible{outline:2px solid #728c66}
  .walk-guidance{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;height:calc(78px + env(safe-area-inset-bottom));padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--paper);color:var(--ink)}
  .walk-gesture{display:flex;align-items:center;gap:9px;min-width:0}
  .walk-gesture svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
  .walk-gesture p{font:500 13px/1.5 var(--sans)}
  .walk-gesture p span{display:block;color:var(--muted);font-weight:400}
  .is-viewing-walkthrough .walk-swipe-icon{animation:walk-swipe-cue 2.4s .6s 3}
  #walk-pan-guide:not([hidden]) svg{animation:walk-pan-cue 2.4s .6s 3}
  @keyframes walk-swipe-cue{0%,30%,100%{transform:translateY(0)}55%{transform:translateY(-4px)}}
  @keyframes walk-pan-cue{0%,30%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
}
@media (prefers-reduced-motion:reduce){
  .walk-stage canvas,.walk-caption-body,.walk-fallback img{transition-duration:.25s}
  .walk-gesture svg{animation:none!important}
}