/* Integrated worlds (Pencil ZddyI). Each door is one unit: glow + contact shadow + door +
   light match, with a lagging reflection in the pool. Labels are hidden on desktop; the
   doorway itself is the button. Colour tokens are overridden by the twilight scene. */
:root{--tint-filter:brightness(0) invert(.36) sepia(1) saturate(2) hue-rotate(190deg) brightness(.9);--tint-a:.42;--ground-glow:#ffd9a0;--ground-glow-a:#ffd9a033;--ground-shadow:#5a3f2a;--ground-haze:#efdcc3;--ground-match:#c9a98a;--ground-fade:#f3e6d6;--water:#5f7f9a}
.scene-golden{--tint-filter:brightness(0) invert(.62) sepia(1) saturate(1.1);--tint-a:.38;--ground-glow:#ffcf8a;--ground-glow-a:#ffcf8a4d;--ground-shadow:#4a3220;--ground-haze:#f3dcc0;--ground-match:#d9b48e;--ground-fade:#f6e7d2;--water:#5f86a6}
.scene-twilight{--ground-glow:#ffb86b;--ground-glow-a:#ffb86b59;--ground-shadow:#1a1410;--ground-haze:#3a4c7a;--ground-match:#4a5d9a;--ground-fade:#0e1a33;--water:#2e4b7a}

/* The row appears as one unit once every door has decoded (JS adds is-set; no JS = always visible). */
/* Each door fades in from its stand-in the moment it has decoded; the row itself is never hidden. */
html.js-grounded .world .door-art{transition:opacity .35s ease-out}
html.js-grounded .world:not(.is-ready) .door-art,html.js-grounded .world:not(.is-ready) .door-tint{opacity:0}
/* While a door decodes, a 48-px blurred stand-in holds its place so slow networks never show an empty terrace. */
.door-lq{position:absolute;bottom:46px;left:0;width:100%;height:calc(100% - 50px);object-fit:fill;z-index:1;filter:blur(6px) saturate(.9);opacity:.85;pointer-events:none;transition:opacity .3s}
.world.is-ready .door-lq{opacity:0;visibility:hidden}
@media(min-width:761px){.world:nth-child(n) .door-lq{left:0;width:100%;height:calc(100% - 50px);bottom:46px}}
html.js-grounded .world-track.is-asleep{opacity:0;transition:none}
html .world:hover .door-art,html .world:focus-visible .door-art{transform:translateY(var(--lift,0px))}

@media(min-width:761px){
 .world-label{display:none}
 .world{isolation:isolate;overflow:visible}
 /* The door art is masked, which would clip an outline drawn on it, so the button carries the focus ring. */
 .world:focus-visible{outline:3px solid #fff3dc;outline-offset:-3px;border-radius:46% 46% 16px 16px/30% 30% 16px 16px}

 /* 3 glow — warm light behind the doorway, breathing. */
 .world:after{content:'';position:absolute;inset:4% -4% 24%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 62%,var(--ground-glow-a) 0%,color-mix(in srgb,var(--ground-glow-a) 40%,transparent) 30%,transparent 58%);opacity:0;transition:opacity .5s}
 /* 4 contact shadow — multiply ellipse on the terrace. */
 .world:before{inset:auto 6% 28px;height:30px;border-radius:50%;z-index:1;opacity:.6;filter:blur(10px);background:radial-gradient(ellipse at 50% 50%,var(--ground-shadow) 0%,transparent 70%);mix-blend-mode:multiply;transform:scaleX(var(--shadow-x,1));transition:transform .4s,opacity .4s}
 /* 5 door — lift on hover via a variable so entrance tweens can still own transform. */
 .world picture{display:contents}
 .door-art{z-index:2;transform:translateY(var(--lift,0px));transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s}
 /* 6 light match — the door PNG masks a sky-coloured gradient, multiplied onto itself. */
 .door-tint{position:absolute;bottom:46px;left:0;width:100%;height:calc(100% - 50px);z-index:3;pointer-events:none;object-fit:fill;filter:var(--tint-filter);mix-blend-mode:multiply;opacity:var(--tint-a);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 85%,#0008 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 85%,#0008 100%);transform:translateY(var(--lift,0px));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
 /* Every world stands the same height on the same ground line: the art is trimmed to its
    alpha bounds, so one height for all and each world takes its natural width (set by JS). */
 .world:nth-child(n){flex:0 0 auto;width:var(--w,13.63vw);margin-inline:-.35vw}
 .world:nth-child(n) .door-art,.world:nth-child(n) .door-tint{left:0;width:100%;height:calc(100% - 50px);bottom:46px;object-fit:fill}
 /* The hero owns the first screen: taller viewports crop the photo at the sides, never stretch it. */
 .experience{height:max(56.28vw,100svh);max-height:none}
 .scene-image,.scene-foreground,.scene-lights{object-fit:cover;object-position:50% 50%}
 .pool-mirror{left:var(--pool-x,41.2%);top:var(--pool-y,71.4%);width:var(--pool-w,28.6%);height:var(--pool-h,10.4%)}
 /* The doors start below the intro and run down behind the flower line. */
 .doors-viewport{top:var(--doors-top,35.5%);height:calc(82% - var(--doors-top,35.5%))}
 /* Intro rhythm is hero-tied: 1svh = 1% of hero on 16:9 and taller (hero = max(56.28vw,100svh)).
    Headline is capped at 4.4svh so the block always ends above the door row (34%). */
 html.scene-twilight .intro,html.scene-golden .intro{--s1:clamp(6px,1svh,11px);--s2:clamp(9px,1.5svh,16px);--zone-top:var(--intro-top,calc(2.4% + max(8.3%,63px)));top:var(--zone-top);height:calc(var(--doors-top,35.5%) - var(--zone-top));display:flex;flex-direction:column;justify-content:center;align-items:stretch}
 html.scene-twilight .intro .eyebrow,html.scene-golden .intro .eyebrow{font-size:clamp(8px,.62vw,11px);line-height:1.2;margin:0 0 var(--s1)}
 html.scene-twilight .intro h1,html.scene-golden .intro h1{font-size:clamp(32px,min(2.9vw,4.4svh),54px);line-height:.98}
 html.scene-twilight .flourish,html.scene-golden .flourish{font-size:clamp(8px,.6vw,10px);line-height:1;gap:clamp(10px,.8vw,14px);margin:var(--s1) 0}
 html.scene-twilight .flourish i,html.scene-golden .flourish i{width:clamp(30px,2.5vw,44px)}
 html.scene-twilight .subtitle,html.scene-golden .subtitle{font-size:clamp(11px,.8vw,14px);line-height:1.5;margin:0 0 var(--s2)}
 .subtitle br{display:none}
 html.scene-twilight .explore,html.scene-golden .explore{font-size:clamp(9px,.7vw,11px);line-height:1;letter-spacing:.16em;padding:10px 26px;align-self:center}
 html.scene-twilight .left-note,html.scene-golden .left-note{top:calc(14.5% - .5em);font-size:clamp(9px,min(.78vw,1.19svh),13px);line-height:1.8;letter-spacing:.12em}
 html.scene-twilight .right-note,html.scene-golden .right-note{top:15.8%}
 .door-controls{top:80.5%}
 /* The base dissolves into the terrace instead of ending on a hard edge. */
 .world .door-art{-webkit-mask-image:linear-gradient(#000 90%,#000c 95%,#0000 100%);mask-image:linear-gradient(#000 90%,#000c 95%,#0000 100%)}
 .world:hover:after,.world:focus-visible:after{opacity:.6}
 .world:hover,.world:focus-visible{--lift:-6px;--shadow-x:.86}
 .world:hover:before,.world:focus-visible:before{opacity:.38}
 .world:hover .door-art,.world:focus-visible .door-art{filter:saturate(1) brightness(1.04)}

 /* 2 horizon haze — mist at the door bases, between sky and doors. */
 .scene-canvas:after{content:'';position:absolute;left:0;right:0;top:40%;height:36%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ground-haze) 38%,transparent) 62%,transparent 100%);pointer-events:none}
 /* Edge worlds stay solid and are simply cut by the screen, like real objects. */
 .doors-viewport{-webkit-mask-image:none;mask-image:none}
 /* 10 vignette (twilight only). */
 .scene-twilight .experience:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 65% 65% at 50% 45%,transparent 55%,#0e1a3366 100%)}

 /* The parallax canvas moves on every door-scroll frame; keeping it on its own compositor layer
    means the hero (headline filters, notes, lights) is not repainted for each step. */
 .scene-canvas{will-change:transform;transform-origin:50% 60%}
 /* 8 reflection — mirrored, blurred doors inside the pool, rippling. */
 .pool-mirror{position:absolute;left:41.2%;top:71.4%;width:28.6%;height:10.4%;z-index:3;overflow:hidden;contain:strict;border-radius:46% 46% 48% 48% / 60% 60% 70% 70%;opacity:.7;pointer-events:none;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(#000 20%,#0009 100%);mask-image:linear-gradient(#000 20%,#0009 100%)}
 .scene-twilight .pool-mirror{mix-blend-mode:normal;opacity:.62}
 .pool-mirror:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--water) 12%,transparent),color-mix(in srgb,var(--water) 55%,transparent))}
 .mirror-track{position:absolute;inset:0;filter:url(#pool-ripple)}
 .mirror-door{position:absolute;top:0;left:0;width:0;height:0;object-fit:fill;transform-origin:50% 0;filter:blur(2.5px) saturate(.9);opacity:.8;will-change:transform}
}

/* Right-hand note: grounded.js wraps the words in .note-ink and adds a .note-glow twin that only
   the twilight scene shows (its halo breathes by opacity instead of re-rendering the filtered text). */
.right-note .note-ink{display:block;position:relative;margin:0}
.right-note .note-glow{display:none;position:absolute;inset:0;margin:0;pointer-events:none}

/* The arrows stay; the counter becomes "1–7 of 9" with a progress bar. */
.door-progress{display:block;width:100%;height:2px;margin-top:6px;border-radius:2px;background:#8b715b33;overflow:hidden}
.door-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:translateX(var(--p0,0%)) scaleX(var(--pf,.3));background:#8b715b;transition:transform .4s}
.scene-twilight .door-controls{background:#121c3cb8;border-color:#ffffff24;color:#f7ecdb;box-shadow:0 10px 30px #02061a40}
.scene-twilight .door-controls button{background:#ffffff14;border-color:#ffffff30;color:#f7ecdb}
.scene-twilight .door-controls button:hover:enabled{background:#ffffff2e}
.scene-twilight .door-controls small{color:#d9c9ad}
.scene-twilight .door-progress{background:#ffffff26}.scene-twilight .door-progress i{background:#f0dfae}
.scene-twilight .scroll-cue{color:#e9dcc7}.scene-twilight .scroll-cue span{background:#121c3cb8;border-color:#ffffff30;color:#f7ecdb}
.scene-twilight .benefits{color:#e9dcc7}
/* The lit marble and pool behind the night captions are pale; a soft navy halo keeps them readable (WCAG 1.4.3). */
.scene-twilight .benefits,.scene-twilight .scroll-cue{text-shadow:0 0 2px #0c1330,0 0 5px #0c1330e6,0 0 12px #0c1330a6}.scene-twilight .benefits i{background:#ffffff40}

/* Mode toggle: moon / sun. */
.scene-toggle{width:39px;height:39px;border-radius:50%;border:1px solid #dfd1c1;background:#fffaf17d;display:grid;place-items:center;padding:0}
.scene-toggle i{width:14px;height:14px;border-radius:50%;background:#e2b35a;box-shadow:0 0 0 3px #e2b35a33,0 0 10px #e2b35a99;display:block}
.scene-twilight .scene-toggle{background:#ffffff12;border-color:#ffffff2e}
.scene-twilight .scene-toggle i{background:transparent;box-shadow:inset -4px -3px 0 0 #f0dfae,0 0 10px #f0dfae66;transform:rotate(-20deg)}
@media(max-width:760px){.scene-toggle{display:none}}
@media(prefers-reduced-motion:reduce){.mirror-track{filter:none}}
@media(max-width:760px){
 .world-label{display:none}
 .world:nth-child(n){flex:0 0 auto;width:var(--w,235px);margin-inline:-6px;isolation:isolate}
 .world:nth-child(n) .door-art,.world:nth-child(n) .door-tint{left:0;width:100%;height:calc(100% - 50px);bottom:46px;object-fit:fill}
 .door-art{z-index:2}
 .door-tint{display:block;position:absolute;z-index:3;pointer-events:none;filter:var(--tint-filter);mix-blend-mode:multiply;opacity:var(--tint-a);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 85%,#0008 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 85%,#0008 100%)}
 .world:before{inset:auto 8% 32px;height:22px;border-radius:50%;z-index:1;opacity:.5;filter:blur(8px);background:radial-gradient(ellipse at 50% 50%,var(--ground-shadow) 0%,transparent 70%);mix-blend-mode:multiply;box-shadow:none}
 .world:after{content:none}
 .world:focus-visible{outline:3px solid #fff3dc;outline-offset:-3px;border-radius:46% 46% 16px 16px/30% 30% 16px 16px}
 .intro{--zone-top:var(--intro-top,122px);top:var(--zone-top);height:calc(var(--doors-top,406px) - var(--zone-top));left:4%;width:92%;display:flex;flex-direction:column;justify-content:center;align-items:stretch}
 .intro .explore{align-self:center}
 .intro .eyebrow{margin-bottom:10px}
 .intro h1{font-size:clamp(28px,7.4vw,42px);line-height:1.04}
 .flourish{margin:8px 0 6px}
 .subtitle{margin-bottom:12px;font-size:12px}
 .doors-viewport{top:var(--doors-top,406px);height:calc(791px - var(--doors-top,406px))}
}

/* The zoomed hero must never enlarge the document (mobile Chrome grows the layout viewport otherwise). */
main{overflow:clip}
/* Film: the veil darkens the hero as the camera walks in; desktop shows the whole reel over a drifting atmosphere. */
.scene-veil{position:absolute;inset:0;z-index:6;background:#06091a;opacity:0;pointer-events:none}
.scene-golden .scene-veil{background:#2a1c10}
@media(min-width:761px){
 #entrance-video{object-fit:cover;object-position:50% 30%}
}

/* Focus ring on the pale golden-hour sky needs a dark ink to stay visible (WCAG 1.4.11). */
html.scene-golden .world:focus-visible{outline-color:#4a3524}