/* Generated by scripts/import-3d-tour.cjs from resources/source-assets/3d-tour-light-2026-10-04 - edit the importer, not this file.  */
/* ---------- 3D tour: WebGL canvas behind the DOM overlays ---------- */
html.tour-3d .gl3d{position:absolute;inset:0;z-index:1;background:#bfc9c4 url(stills/d/hero.webp?v=251a88523c69) 50% 50%/cover no-repeat}
/* the poster is a frame of this very scene (rendered wide; any landscape screen sees its centre), so the live 3D fades in over an identical picture */
@media (max-aspect-ratio: 95/100){ html.tour-3d .gl3d{background-image:url(stills/m/hero.webp?v=251a88523c69)} }
html.tour-3d .gl3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
html.tour-3d .gl-ready .gl3d canvas{opacity:1}
html.tour-3d .gl-veil{position:absolute;inset:0;z-index:2;display:grid;place-items:end center;padding-bottom:88px;pointer-events:none;transition:opacity .6s ease .2s}
html.tour-3d .gl-veil.is-off{opacity:0}
html.tour-3d .no-gl .gl-load i{display:none}
html.tour-3d .gl-load{display:flex;align-items:center;gap:10px;font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.85);padding:9px 14px;border-radius:999px;box-shadow:0 8px 20px -12px rgba(17,28,44,.4)}
/* ---------- picture tour ---------- */
.stage .stills{position:absolute;inset:0;z-index:1;background:#bfc9c4;overflow:hidden}
.stage .stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.stage .stills img.is-on{opacity:1}
html.tour-stills .gl-veil, html.stills-on .gl3d{display:none !important}
@media (prefers-reduced-motion: reduce){ .stills img{transition:none} }
/* On phones the pill sits low, on the road in front of the house, above the scroll cue. */
@media (orientation:portrait){ html.tour-3d .gl-veil{padding-bottom:clamp(96px,14vh,150px)} }
/* On wide screens the pill waits in the bottom-right corner, clear of the hero text and buttons. */
@media (orientation:landscape) and (min-width:761px){ html.tour-3d .gl-veil{place-items:end end;padding:0 clamp(18px,4vw,56px) 26px 0} }
/* One tour at a time: the 3D house or the picture tour (html.tour-new), or with ?tour=video the pre-rendered video. */
html:not(.tour-new) .gl3d, html:not(.tour-new) .gl-veil{display:none}
html.tour-stills .gl3d{background-color:#bfc9c4}
html.tour-new .vt, html.tour-new .vt-load{display:none}
html.tour-new:not(.static) .tour{height:1000vh}               /* the tour timeline's own length */
/* The video tour hides room hotspots until its picture settles; these tours show them per chapter. */
html.tour-new .stage .hs{opacity:0 !important;pointer-events:none !important}
html.tour-new .stage[data-chapter="windows"] .hs[data-hs="windows"],
html.tour-new .stage[data-chapter="bifold"] .hs[data-hs="bifold"],
html.tour-new .stage[data-chapter="french"] .hs[data-hs="french"]{opacity:1 !important;pointer-events:auto !important}
/* While the 3D view starts: the poster is the first frame of this scene, so the page looks finished at once;
   a small pill says the live view is still on its way. */
html.tour-3d .gl-load{font-size:10.5px;padding:7px 12px;opacity:.92}