/* Keep the hero canopy inside the outgoing scene's mask, with its overlap intact. */
.heathland-reveal{
  --hero-overlap:26.5625vw;
  --exit-art-height:47.145488vw;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 100svh;isolation:isolate;background:#123c32;
}
.heathland-reveal>.pond-story{
  grid-area:1/1/2/2;z-index:3;grid-template-rows:auto calc(100svh + var(--canopy-height) * .4 + var(--pond-clear-scroll)) var(--exit-art-height);
  margin-top:calc(-1 * var(--hero-overlap));padding-top:var(--hero-overlap);background:transparent;
  /* The transparent hero overlap must not intercept the hero CTA. */
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,#000),url('/water/transitions/botanical-bank-backing-v3.png');
  mask-image:linear-gradient(#000,#000),url('/water/transitions/botanical-bank-backing-v3.png');
  -webkit-mask-size:100% calc(100% - var(--exit-art-height) + 1px),100% var(--exit-art-height);
  mask-size:100% calc(100% - var(--exit-art-height) + 1px),100% var(--exit-art-height);
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.heathland-reveal>.pond-story .pond-story__water{pointer-events:auto}
/* Clip only the paper background at the water join, never the overlapping art. */
.pond-story--canopy{--canopy-height:33.333333vw;--pond-clear-scroll:clamp(360px,65svh,900px)}
.pond-story--canopy .pond-story__housing{padding-bottom:0;isolation:isolate}
.pond-story--canopy .pond-story__housing::after{display:none}
.pond-story--canopy .stay-section__body{padding-bottom:clamp(230px,23vw,360px)}
.pond-story--canopy .stay-section{background:transparent}
.pond-story--canopy .stay-section::after{content:"";position:absolute;inset:0;bottom:calc(var(--canopy-height) * .14);z-index:-1;background:var(--paper);pointer-events:none}
.pond-story--canopy .stay-section::before{bottom:calc(var(--canopy-height) * .14)}
[data-theme="night"] .pond-story--canopy .stay-section{background:transparent}
[data-theme="night"] .pond-story--canopy .stay-section::after{background:var(--forest)}
.pond-canopy{position:absolute;z-index:4;left:0;bottom:calc(var(--canopy-height) * -.40);width:100%;height:var(--canopy-height);pointer-events:none;user-select:none}
.pond-canopy__art{display:block;width:100%;height:auto;aspect-ratio:2172/724;transform-origin:0 0;animation:pond-canopy-sway 12s ease-in-out infinite alternate;will-change:transform}
@keyframes pond-canopy-sway{from{transform:translateY(-1px) rotate(-.1deg)}to{transform:translateY(2px) rotate(.1deg)}}
[data-theme="night"] .pond-canopy{filter:brightness(.72) saturate(.86);mix-blend-mode:normal}
/* The botanical edge and its mask share the artwork's native 2172:1024 ratio. */
/* The bank's pond-covering body ends at source row 724. The remaining 300
   rows are its trailing leaf edge: do not keep the pond pinned for that tail.
   Reserving it inside the sticky constraint starts scrolling at the aligned
   painted edge, while the bank artwork and outgoing mask stay registered. */
.heathland-reveal .pond-story__water{grid-area:1/1/4/2}
@media(prefers-reduced-motion:no-preference){
  .heathland-reveal .pond-story__water{margin-bottom:calc(var(--exit-art-height) * 300 / 1024)}
}
.pond-exit{position:relative;grid-area:3/1/4/2;z-index:4;height:var(--exit-art-height);isolation:isolate;pointer-events:none}
.pond-exit>.pond-story__bank{top:0;bottom:auto;left:0;width:100%;height:auto;aspect-ratio:2172/1024;object-fit:contain;z-index:3}
.heathland-scene{position:sticky;top:0;grid-area:1/1/3/2;align-self:start;width:100%;height:100svh;z-index:1;background:#9cc9df;overflow:hidden}
.heathland-scene__painting{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
[data-theme="night"] .heathland-scene__painting{filter:brightness(.68) saturate(.83)}
@media(max-width:700px){
  .heathland-reveal{--exit-art-height:70.718232vw}
  .heathland-reveal>.pond-story{display:grid;grid-template-rows:auto calc(100svh + var(--canopy-height) * .4 + var(--pond-clear-scroll)) var(--exit-art-height);
    -webkit-mask-size:100% calc(100% - var(--exit-art-height) + 1px),150% var(--exit-art-height);
    mask-size:100% calc(100% - var(--exit-art-height) + 1px),150% var(--exit-art-height)}
  .pond-story--canopy .pond-story__water{position:sticky;top:0;margin-top:0}
  .pond-story--canopy .pond-story__space{display:block}
  .pond-story--canopy .stay-section__body{padding-bottom:120px}
  .pond-exit>.pond-story__bank{width:150%;left:-25%}
}
@media(prefers-reduced-motion:reduce){
  .pond-canopy__art{animation:none;transform:none;will-change:auto}
  .pond-story--canopy .pond-story__water{position:relative}
}

.heathland-reveal__sky{display:none}
@media(max-width:700px){
  .heathland-scene{top:auto;bottom:0;align-self:end}
  .heathland-reveal__sky{display:block;position:absolute;z-index:0;left:0;bottom:calc(100vw * 992 / 1586 - 1px);width:100%;height:90px;background:linear-gradient(#95c7e7,#a2cfee);pointer-events:none}
}

/* Hide the stray matte row at the transparent divider boundary. */
.heathland-reveal .section-divider{clip-path:inset(2px 0 0)}

/* Keep the complete phone pond composition, with its own full-height pause.
   The incoming shop must not show through below the shorter painting. */
@media(max-width:700px){
 .heathland-reveal>.pond-story{background:var(--forest,#123c32)}
 .pond-story--canopy .pond-story__water{display:grid;align-items:center;height:100svh;background:var(--forest,#123c32)}
 .pond-story--canopy .pond-story__water .home-pond{height:var(--pond-height);width:100%;align-self:center}
}