/* Home-only preview experiments. All other pass-one styles stay untouched. */
.hero-original,.hero-sample,.hero-caustics{display:none}
.hero-options{position:fixed;z-index:50;left:18px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:3px;padding:5px;background:#faf9f5f5;border:1px solid #103d4930;box-shadow:0 4px 22px #092c3620;border-radius:7px}
.hero-options button{font:500 11px var(--sans);min-height:38px;padding:0 12px;border:0;border-radius:4px;background:transparent;color:#103d49;cursor:pointer}
.hero-options[hidden]{display:none}
.hero-options button[aria-pressed=true]{background:#103d49;color:#fff}
.hero-options .hero-replay{border-left:1px solid #103d4925;border-radius:0;margin-left:3px}
.hero-options button:focus-visible,.hero-motion:focus-visible{outline:2px solid #76aaa9;outline-offset:3px}
.hero{position:relative}
.hero-photo{transform:none}
.hero-photo img{object-position:50% 50%}
.hero-motion{position:absolute;right:24px;bottom:55px;z-index:4;border:1px solid #ffffff70;background:#092c36de;color:white;font:500 11px var(--sans);padding:10px 14px;cursor:pointer}
.hero-motion[hidden],.water-surface[hidden]{display:none!important}
html[data-hero=a] .hero{max-width:none;width:100%;min-height:680px;padding:65px max(56px,calc((100% - 1280px)/2));display:flex;color:#faf9f5;overflow:hidden;background:#092c36}
html[data-hero=a] .hero-original{display:block;position:absolute;inset:0}
html[data-hero=a] .hero-image,html[data-hero=a] .hero-image img,.water-surface{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
html[data-hero=a] .hero-original:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#051e2bdf 0%,#051e2b95 38%,#051e2b05 85%),linear-gradient(0deg,#051e2b70,transparent 35%)}
html[data-hero=a] .hero-copy{position:relative;z-index:2;width:min(600px,100%)}
html[data-hero=a] .hero-photo{display:none}
html[data-hero=a] .hero-lead,html[data-hero=a] .hero-foot p span,html[data-hero=a] .hero .eyebrow{color:#e0e8e7}
html[data-hero=a] .hero h1 em{color:#a8d3ce}
html[data-hero=a] .hero .button{background:#eee6d8;color:#103d49}
html[data-hero=a] .hero-foot{border-color:#faf9f540}
html[data-hero=a] .hero-sample{display:block;position:absolute;right:24px;bottom:22px;z-index:3;font-size:10px;color:#fff;background:#092c36c9;padding:5px 9px;border:1px solid #ffffff55}
html[data-hero=c] .hero-caustics{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.22}
.caustic-drift{animation:caustic-drift 13s ease-in-out infinite alternate;transform-origin:center}
.caustic-drift.secondary{animation-delay:-7s;animation-duration:17s;opacity:.6}
.motion-paused .caustic-drift,.hero-offscreen .caustic-drift{animation-play-state:paused}
@keyframes caustic-drift{from{transform:translate(-12px,3px) scale(1.02)}to{transform:translate(17px,-9px) scale(1.06)}}
/* The document is always painted; only this dismissible overlay covers it. */
.hero-intro{position:fixed;inset:0;margin:0;border:0;padding:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:hidden;color:#eee6d8;background:#092c36;opacity:1}
.hero-intro[open]{display:grid;place-items:center;animation:intro-failsafe 10s step-end forwards}
.hero-intro::backdrop{background:transparent}
.hero-intro[data-option=a]{background:#092c36}
.hero-intro[data-option=a] .opening-scene{animation:none}
.hero-intro[data-option=a] .opening-scene:after{content:"";position:absolute;inset:0;background:#092c3666}
.hero-intro .opening-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;animation:scene-settle var(--duration) ease both}
.hero-intro[data-option=b] .opening-scene{background:radial-gradient(ellipse at 50% 52%,#397b7b,#103d49 45%,#061d27 85%)}
.grotto-art{width:100%;height:100%;object-fit:cover}
.grotto-stone{stroke:#b3b7a844;stroke-width:1;stroke-dasharray:1900;animation:stone-draw 2.7s ease-out both}
.fall-filament{stroke-dasharray:30 15 90 22;animation:fall-flow 1.3s linear infinite}
.fall-filament:nth-child(3n){animation-duration:1.8s;animation-delay:-.6s}
.grotto-fall{transform-origin:50% 30%;animation:fall-in 2.5s ease both}
.grotto-rings ellipse{transform-origin:600px 570px;animation:pool-ring 3s ease-out infinite}
.grotto-rings ellipse:nth-child(2){animation-delay:-1s}.grotto-rings ellipse:nth-child(3){animation-delay:-2s}
.opening-word{position:relative;z-index:2;text-align:center;animation:opening-word var(--duration) ease both;text-shadow:0 2px 30px #092c36}
.opening-word span{font:400 clamp(60px,10vw,144px)/1 var(--serif);letter-spacing:.13em;padding-left:.13em}
.opening-word small{display:block;font-size:10px;letter-spacing:.38em;margin-top:18px}
.opening-word p{font:italic 24px var(--serif);margin-top:30px;color:#c2d8d1}
.hero-intro[data-option=a] .opening-word{animation-name:original-word}
.opening-skip{position:absolute;right:28px;top:28px;z-index:5;min-height:44px;padding:10px 18px;background:#092c3655;border:1px solid #ffffff66;color:white;font:500 12px var(--sans);cursor:pointer}
.opening-caption{position:absolute;left:0;right:0;bottom:40px;text-align:center;font-size:11px;letter-spacing:.12em;color:#c2d8d1}
.opening-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#a8d3ce;transform-origin:left;animation:opening-progress var(--duration) linear both}
.hero-intro.leaving{opacity:0;transition:opacity .65s ease;pointer-events:none}
.tile-opening{background:radial-gradient(ellipse at 50% 65%,#397b7b,#103d49 50%,#061d27)}
.glass-tiles{position:absolute;width:140%;height:80%;left:-20%;top:27%;transform:perspective(800px) rotateX(56deg) rotateZ(-8deg);background-image:linear-gradient(90deg,#c2d8d126 1px,transparent 1px),linear-gradient(#c2d8d126 1px,transparent 1px),linear-gradient(115deg,#29616aaa,#76aaa930 32%,#103d4988 70%);background-size:64px 64px,64px 64px,100% 100%;box-shadow:inset 0 0 150px 60px #092c36;animation:glass-rise 6.8s ease both}
.glass-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#d4ece233 48%,transparent 62%);animation:glass-sweep 4.8s ease both}
.tile-opening .ripple{top:57%;border-color:#b9e2da70;animation-duration:5.8s}
.tile-opening .r2{animation-delay:.55s}.tile-opening .r3{animation-delay:1.1s}
.tile-opening .water-line{top:57%;box-shadow:0 0 18px #b9e2da}
@keyframes stone-draw{from{stroke-dashoffset:1900;fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
@keyframes fall-in{from{opacity:0;transform:scaleY(.02)}45%{opacity:0}to{opacity:1;transform:scaleY(1)}}
@keyframes fall-flow{to{stroke-dashoffset:-157}}
@keyframes pool-ring{0%{opacity:0;transform:scale(.12)}25%{opacity:.7}100%{opacity:0;transform:scale(1.5)}}
@keyframes scene-settle{0%{opacity:0;transform:scale(1.035)}18%,52%{opacity:1}83%,100%{opacity:.12;transform:scale(1)}}
@keyframes opening-word{0%,40%{opacity:0;transform:translateY(28px);filter:blur(8px)}72%,100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes original-word{0%{opacity:0;transform:translateY(12px)}28%,75%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes opening-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes glass-rise{from{opacity:0;transform:perspective(800px) rotateX(65deg) rotateZ(-12deg) translateY(50px)}40%,70%{opacity:1}to{opacity:.2;transform:perspective(800px) rotateX(55deg) rotateZ(-8deg)}}
@keyframes glass-sweep{from{transform:translateX(-60%)}to{transform:translateX(70%)}}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}
@media(min-width:701px){html[data-hero=c] .hero-motion{bottom:78px;right:72px}}
@media(max-width:700px){
 html[data-hero=a] .hero{min-height:650px;padding:48px 20px 100px;align-items:flex-start}
 html[data-hero=a] .hero-original:after{background:linear-gradient(180deg,#051e2be8,#051e2b85 48%,#051e2b05 80%)}
 html[data-hero=a] .hero h1{font-size:65px}
 html[data-hero=a] .hero-sample{right:20px;bottom:18px}
 .hero-options{left:12px;bottom:12px}.hero-options button{padding:0 10px}
 .hero-motion{right:20px;bottom:53px}.hero-intro .opening-word span{font-size:61px}
 .opening-word small{font-size:8px}.opening-word p{font-size:22px}.opening-skip{right:20px;top:20px}
 .hero-photo .photo-image{aspect-ratio:5/4}.hero-photo img{object-position:50% 50%}
}
@media(prefers-reduced-motion:reduce){.hero-intro{display:none!important}.hero-caustics{display:none!important}}

/* 5 Oct: real pool #13 video hero (replaces the AI sample photo + water.js) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
html[data-hero=a] .hero-credit{display:block;position:absolute;right:24px;bottom:22px;z-index:3;font:500 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#092c36c9;padding:6px 10px;border:1px solid #ffffff40}
.hero-credit{display:none}
html[data-hero=a] .hero .hero-motion{right:24px;bottom:62px}
@media(min-width:901px){
 html[data-hero=a] .hero-original{left:auto;width:52%}
 html[data-hero=a] .hero-original:after{background:linear-gradient(90deg,#092c36 0%,#092c36a8 18%,#092c3600 45%),linear-gradient(0deg,#051e2b55,transparent 30%)}
 html[data-hero=a] .hero-image img{object-position:50% 60%}
}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero.motion-paused .hero-video{}
.area-section .metric-note{color:#36535c;font-size:13px;border-top-color:#103d4926;max-width:520px}