/* The original Blender cloud image remains the no-WebGL transition. A live
   depth-aware volume replaces it once the 3D scene has rendered successfully. */
.hero.scene-clouds-ready .hero-handoff > img { opacity:0; }
.hero:not(.scene-ready) .house-stage { position:fixed; transform:none!important; }
/* The lower half is the original viewport. The extra rendered area above it
   prevents a clipped house edge during a fast reverse scroll between frames. */
.house-canvas { top:-100%; bottom:auto; height:200%; }
.side-clouds { transform:translateY(calc(-1 * var(--cloud-view-offset, 0px))); }
.side-cloud { animation:none; }
.hero-viewport:after { content:''; position:absolute; left:-5vw; right:-5vw; bottom:-42svh; height:70svh; background:url('/media/hero-cloud-bank.webp?v=2') center top / 100% 100% no-repeat; pointer-events:none; }
@media (prefers-reduced-motion:no-preference) {
  .house-canvas { opacity:0; transition:opacity .65s ease; }
  .hero.scene-ready .house-canvas { opacity:1; }
  .house-poster,.side-clouds,.hero-viewport:after { transition:opacity .65s ease; }
  .hero.scene-ready .house-poster { visibility:visible; opacity:0; }
  .hero.scene-clouds-ready .side-clouds,.hero.scene-clouds-ready .hero-viewport:after { opacity:0; }
  .hero.scene-clouds-ready .cloud-foundation { background:transparent; }
  .hero.scene-clouds-ready .cloud-foundation:before { display:none; }
  .hero.scene-clouds-ready.scene-past { background:var(--paper); }
}
@media (prefers-reduced-motion:reduce) {
  .hero.scene-clouds-ready .hero-handoff > img { opacity:1; }
  .hero.scene-clouds-ready .cloud-foundation:before { height:24svh; }
}