/* Scoped pond component and approved botanical reveal. */
.home-pond *{box-sizing:border-box}
.home-pond [hidden]{display:none!important}
.home-pond button,.home-pond a{-webkit-tap-highlight-color:transparent}
.home-pond button{font:inherit;cursor:pointer}
.home-pond a{color:inherit;text-underline-offset:5px}
.home-pond button:focus-visible,.home-pond a:focus-visible{outline:3px solid #0756a6;outline-offset:5px}
.home-pond .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-pond{position:relative}
.home-pond .pond{position:relative;width:100%;height:clamp(620px,calc(100svh - 82px),1000px);overflow:hidden;background:#0756a6;isolation:isolate;touch-action:pan-y}
.home-pond .pond__painting,.home-pond .pond__water,.home-pond .pond__dragonfly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.home-pond .pond__water{opacity:0;transition:opacity .6s;pointer-events:none}
.home-pond .pond[data-engine="webgl"] .pond__water{opacity:1}
.home-pond .map-marker{position:absolute;z-index:3;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;width:66px;min-height:74px;padding:0 3px;border:0;background:none;color:#123c32;filter:drop-shadow(0 3px 3px #123c3238)}
.home-pond .map-marker__badge{display:grid;place-items:center;width:58px;height:58px;padding:3px;background:#f3e6c8;border:3px solid #f3e6c8;border-radius:44% 56% 49% 51%/52% 45% 55% 48%;transition:border-color .18s,transform .18s;overflow:hidden}
.home-pond .map-marker__badge img{width:100%;height:100%;object-fit:cover;pointer-events:none;border-radius:44% 56% 49% 51%/52% 45% 55% 48%}
.home-pond .map-marker__dot{width:14px;height:14px;flex:none;margin-top:3px;background:#f4511e;border:3px solid #f3e6c8;border-radius:50%}
.home-pond .map-marker__label{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translate(-50%,4px);padding:7px 11px;background:#f3e6c8;color:#123c32;white-space:nowrap;font:13px/1.35 Georgia,serif;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.home-pond .map-marker:hover,.home-pond .map-marker:focus-visible{z-index:4}
.home-pond .map-marker:hover .map-marker__badge,.home-pond .map-marker:focus-visible .map-marker__badge{transform:translateY(-3px)}
.home-pond .map-marker:hover .map-marker__label,.home-pond .map-marker:focus-visible .map-marker__label{opacity:1;transform:translate(-50%,0)}
.home-pond .map-marker[aria-expanded=true] .map-marker__badge{border-color:#f4511e}
.home-pond .map-marker[aria-expanded=true] .map-marker__label{opacity:0}
.home-pond .map-marker:focus-visible{outline:none}
.home-pond .map-marker:focus-visible .map-marker__badge{outline:2px solid #0756a6;outline-offset:4px}
.home-pond .pond__tools{position:absolute;z-index:4;left:24px;bottom:24px;display:flex;gap:8px}
.home-pond .pond__tools button{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:#f3e6c8;color:#123c32;font:23px/1 Arial,sans-serif;box-shadow:0 2px 8px #123c3228;transition:background .15s,color .15s}
.home-pond .pond__tools button:hover:not(:disabled){background:#f4511e;color:#f3e6c8}
.home-pond .pond__tools button:disabled{opacity:.5;cursor:default}
.home-pond .pond__tools svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.home-pond .water-card{position:absolute;z-index:5;right:20px;bottom:18px;width:clamp(260px,23vw,320px);aspect-ratio:4/5;container-type:inline-size;color:#123c32;isolation:isolate;filter:drop-shadow(0 5px 12px #123c3230);animation:home-pond-card-in .2s ease-out}
.home-pond .water-card:focus{outline:none}
.home-pond .water-card:focus-visible{outline:2px solid #0756a6;outline-offset:-10px}
.home-pond .water-card__paper{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.home-pond .water-card__close{position:absolute;right:7%;top:6%;display:grid;place-items:center;width:36px;height:36px;border:0;padding:0;background:none;color:#123c32;font:28px/1 Arial,sans-serif;z-index:2}
.home-pond .water-card__image{position:absolute;left:22%;top:8%;width:56%;height:45%;object-fit:cover;border-radius:44% 56% 49% 51%/52% 45% 55% 48%}
.home-pond .water-card h2{position:absolute;left:12%;top:55%;width:76%;margin:0;font:clamp(29px,11cqw,36px)/.98 Veluwe,Impact,sans-serif;letter-spacing:-.02em;color:#0756a6}
.home-pond .water-card p{position:absolute;left:12%;top:65%;width:75%;margin:0;font:13px/1.5 Georgia,serif}
.home-pond .water-card__action{position:absolute;left:12%;top:79%;width:76%;height:10%;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff8e6;text-decoration:none;font:15px/1.2 Georgia,serif}
.home-pond .water-card__action span{font-size:23px}
@keyframes home-pond-card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.home-pond .pond__surface-fallback{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
@media(max-width:800px){.home-pond .pond{height:calc(100svh - 70px);min-height:560px}}
@media(max-width:520px){.home-pond .pond{height:calc(100vw * .625 + 82px);min-height:0;background:#123c32}
.home-pond .pond__painting,.home-pond .pond__water,.home-pond .pond__dragonfly{height:calc(100vw * .625);bottom:auto}
.home-pond .pond__tools{left:6%;bottom:19px}
.home-pond .map-marker{width:50px;min-height:58px}
.home-pond .map-marker__badge{width:44px;height:44px;padding:2px}
.home-pond .map-marker__dot{width:12px;height:12px}
.home-pond .map-marker__label{font-size:12px}
.home-pond .water-card{position:relative;bottom:auto;right:auto;width:min(320px,calc(100% - 30px));margin:18px auto}
.home-pond.has-card{padding-bottom:1px}}
@media(prefers-reduced-motion:reduce){.home-pond *,.home-pond *:before,.home-pond *:after{animation:none!important;transition:none!important}}
.home-pond{height:100%;font:14px/1.55 Arial,Helvetica,sans-serif;color:var(--forest);position:relative}
.home-pond .pond{height:100svh;min-height:0}
.home-pond .pond__painting,.home-pond .pond__water,.home-pond .pond__dragonfly{height:100%;bottom:0}
.home-pond .water-card{position:absolute;right:20px;bottom:24px;margin:0}
.pond-story{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 100svh;background:var(--forest);--bank-old-height:min(33.333333vw,410px);--bank-overhang:85px;--bank-art-height:calc(var(--bank-old-height) * 1024 / 724)}
.pond-story__housing{position:relative;grid-area:1/1/2/2;align-self:start;z-index:3;padding-bottom:calc(var(--bank-overhang) + var(--bank-old-height) * 300 / 724);pointer-events:none}
.pond-story__housing>.stay-section{z-index:2;pointer-events:auto}
.pond-story__housing::after{content:"";position:absolute;z-index:1;left:0;bottom:calc(var(--bank-old-height) * 304 / 724);width:100%;height:calc(var(--bank-old-height) * 720 / 724);background:var(--paper);pointer-events:none}
.pond-story__bank{position:absolute;z-index:3;left:0;bottom:0;display:block;width:100%;height:var(--bank-art-height);max-width:none;object-fit:fill;pointer-events:none;user-select:none}
.pond-story__water{position:sticky;grid-area:1/1/3/2;top:0;align-self:start;z-index:1;width:100%;height:100svh}
.pond-story__space{grid-area:2/1/3/2;pointer-events:none}
[data-theme="night"] .pond-story__housing::after{background:#123c32 url('/assets/stays/night/forest-pigment-v02.webp') center/cover}
[data-theme="night"] .pond-story__bank{filter:brightness(.74) saturate(.86)}
[data-theme="night"] .home-pond .pond__painting,[data-theme="night"] .home-pond .pond__water{filter:brightness(.65) saturate(.8)}
@media(min-width:1600px){.pond-story{--bank-old-height:min(33.333333vw,460px)}}
@media(max-width:700px){
 .pond-story{display:block;overflow-x:clip;--bank-old-height:min(56.666667vw,270px);--bank-overhang:55px;--pond-height:calc(100vw * .625 + 82px)}
 .pond-story__bank,.pond-story__housing::after{width:170%;left:-35%}
 .pond-story__water{position:relative;top:auto;margin-top:calc(var(--bank-old-height) * -300 / 724 - 2px);height:var(--pond-height)}
 .pond-story__space{display:none}
 .home-pond .pond{height:var(--pond-height);min-height:0;background:var(--forest)}
 .home-pond .pond__painting,.home-pond .pond__water,.home-pond .pond__dragonfly{height:calc(100vw * .625);bottom:auto}
 .home-pond .pond__tools{left:6%;bottom:19px}
 .home-pond .map-marker{width:50px;min-height:58px}
 .home-pond .map-marker__badge{width:44px;height:44px;padding:2px}
 .home-pond .map-marker__dot{width:12px;height:12px}
 .home-pond .map-marker__label{font-size:12px}
 .home-pond .water-card{position:fixed;left:50%;right:auto;bottom:16px;width:260px;margin:0 0 0 -130px;z-index:120}
 .pond-story__water:has(.has-card){z-index:1000}
 .home-pond.has-card{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){.pond-story{display:block}.pond-story__water{position:relative;top:auto;margin-top:calc(var(--bank-old-height) * -300 / 724 - 2px)}.pond-story__space{display:none}}


/* A small leaf from the existing pond painting, drifting down and sinking. */
.pond .pond-leaf{position:absolute;z-index:0;display:block;width:clamp(28px,3vw,42px);aspect-ratio:190/130;pointer-events:none;will-change:transform,opacity;transform:translate(-50%,-50%)}
.pond .pond-leaf svg{display:block;width:100%;height:100%;overflow:hidden}
[data-theme="night"] .pond .pond-leaf svg{filter:brightness(.7) saturate(.8)}
@media(prefers-reduced-motion:reduce){.pond .pond-leaf{display:none}}

.pond .pond-leaf>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
[data-theme="night"] .pond .pond-leaf>img{filter:brightness(.7) saturate(.8)}
.pond .pond__tools .pond__shake{width:auto;display:flex;gap:8px;padding:10px 14px;border-radius:24px;font:14px/1 Georgia,serif;white-space:nowrap}
.pond .pond__tools .pond__shake svg{width:21px;height:23px;flex:none}
@media(max-width:520px){.pond .pond__tools .pond__shake{padding:10px 12px;font-size:12px;gap:5px}}


/* Registered transparent tree above the water simulation: only this layer sways. */
.pond .pond__tree{position:absolute;z-index:1;display:block;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;transform-origin:93% 0%;transform:translate(2%,-3%) scale(1.08);will-change:transform}
[data-theme="night"] .pond .pond__tree{filter:brightness(.65) saturate(.8)}
@media(prefers-reduced-motion:reduce){.pond .pond__tree{will-change:auto}}

/* Stationary reeds and approved dragonfly stay in front of the swaying canopy. */
.pond .pond__foreground{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;user-select:none}
[data-theme="night"] .pond .pond__foreground{filter:brightness(.65) saturate(.8)}

/* Original 1254px dragonfly, registered above reeds and tree at display resolution. */
.pond .pond__dragonfly{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;overflow:hidden}
[data-theme="night"] .pond .pond__dragonfly{filter:brightness(.65) saturate(.8)}

/* Small transparent frog, registered to its original mossy rock. */
.pond .pond__frog{position:absolute;z-index:1;display:block;visibility:hidden;object-fit:contain;pointer-events:none;user-select:none}
.pond .pond__frog[data-positioned="true"]{visibility:visible}
[data-theme="night"] .pond .pond__frog{filter:brightness(.65) saturate(.8)}

/* Video cutouts share the pond's native art coordinates and responsive cover crop. */
.pond .pond__dragonfly-video,.pond .pond__tadpoles{position:absolute;display:block;visibility:hidden;object-fit:contain;transform-origin:0 0;pointer-events:none;user-select:none}
.pond .pond__dragonfly-video{z-index:2}
.pond .pond__tadpoles{z-index:0}
.pond .pond__dragonfly-video[data-positioned="true"],.pond .pond__tadpoles[data-positioned="true"]{visibility:visible}
[data-theme="night"] .pond .pond__dragonfly-video,[data-theme="night"] .pond .pond__tadpoles{filter:brightness(.65) saturate(.8)}

/* WebGL composites tadpoles before refraction, highlights and surface ripples. */
.pond[data-engine="webgl"][data-tadpoles-layer="underwater"] .pond__tadpoles{opacity:0}

/* Match the leaf's partly submerged stage in the static fallback too. */
.pond .pond__tadpoles{opacity:.6;filter:blur(.3px)}
[data-theme="night"] .pond .pond__tadpoles{filter:brightness(.65) saturate(.8) blur(.3px)}

/* A single daytime jump arrives from the left, then switches directly to idle. */
.pond .pond__frog-entry{opacity:0}
:root:not([data-theme="night"]) .pond[data-frog-entrance="pending"] .pond__frog:not(.pond__frog-entry),
:root:not([data-theme="night"]) .pond[data-frog-entrance="playing"] .pond__frog:not(.pond__frog-entry){opacity:0}
.pond[data-frog-entrance="playing"] .pond__frog-entry{opacity:1;animation:pond-frog-arrival 1100ms cubic-bezier(.22,.7,.35,1) both}
@keyframes pond-frog-arrival{0%{translate:var(--frog-entry-x,0px) 0}65%{translate:calc(var(--frog-entry-x,0px) * .12) -8px}100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.pond .pond__frog{transition:none}.pond .pond__frog-entry{display:none}}

/* A quiet, compact tree action in the pond's bottom-left corner. */
.home-pond .pond__tools.pond__tree-control{left:24px;top:auto;bottom:24px;transform:none;transition:opacity 180ms ease}
.home-pond .pond__tree-control .pond__shake{display:flex;align-items:center;gap:6px;width:auto;height:42px;padding:3px 13px 3px 4px;border:1px solid #fff8e960;border-radius:21px 18px 20px 17px;background:#f3e6c8;color:#123c32;box-shadow:0 2px 5px #123c3220;font:13px/1 Georgia,serif;white-space:nowrap;transition:none}
.pond__shake-art{display:grid;place-items:center;flex:none;width:34px;height:34px;transform:rotate(-8deg);transition:none}
.pond__shake-art img{display:block;width:36px;height:36px;max-width:none;object-fit:contain;pointer-events:none}
.home-pond .pond__tree-control .pond__shake-gust{display:none}
.home-pond .pond__tree-control .pond__shake:disabled{opacity:.65}
@media(max-width:760px){.home-pond .pond__tools.pond__tree-control{left:16px;bottom:20px}}
.home-pond .pond__tree-control .pond__shake:hover:not(:disabled){background:#f3e6c8;color:#123c32;box-shadow:0 2px 5px #123c3220;transform:none}
