*{box-sizing:border-box}html,body{margin:0;background:#163b46;color:#fff1d5}body{font-family:Georgia,serif}#journey{height:440svh}.viewport{height:100svh;position:sticky;top:0;overflow:hidden}.art{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}.layer{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;user-select:none;will-change:transform,opacity}.background{z-index:0;object-fit:cover}.mist,.cloud-middle,.curtain{height:160%;top:-30%;object-fit:fill}.mist{z-index:1;opacity:.8}.cliff{z-index:2;width:min(75vw,100vh);object-fit:fill}.cliff.right{left:auto;right:0}.lettering{position:absolute;width:100%;text-align:center;z-index:3;will-change:transform,opacity;font-weight:bold;color:#f6b4b2;text-shadow:0 2px 0 #49394c,0 0 16px #fff0d670;pointer-events:none}.welcome{top:32%;font-size:clamp(18px,2vw,30px)}.title{top:35%;font-size:clamp(70px,10.5vw,180px);line-height:1;-webkit-text-stroke:1.5px #513e56;letter-spacing:-.055em}.subtitle{top:calc(35% + clamp(70px,10.5vw,180px) + 10px);font-size:clamp(16px,1.8vw,28px);color:#ffe1bd}.foreground{z-index:4;inset:auto;bottom:0;left:50%;width:min(45vw,60vh);height:auto;transform-origin:50% 100%}.cloud-middle{z-index:5}.curtain{z-index:6}.cue{position:absolute;bottom:34px;left:0;width:100%;font:12px system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#48344f;text-align:center;text-shadow:0 1px 8px #fff;pointer-events:none}.cue span{display:block;margin-top:12px;font-size:24px}nav{position:fixed;bottom:16px;right:16px;z-index:20;display:flex;gap:8px}button{color:#fff4df;background:#173c48dc;border:1px solid #f8e6c455;padding:10px 15px;border-radius:24px;cursor:pointer;font:12px system-ui,sans-serif;backdrop-filter:blur(12px)}button:hover{background:#355a66}button:focus-visible{outline:3px solid #ffdbad;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){#journey{height:380svh}.background{object-position:center}.cliff{width:125vw}.foreground{width:110vw;max-width:75vh}.welcome{top:35%;font-size:20px}.title{top:39%;font-size:20vw;-webkit-text-stroke:1px #513e56}.subtitle{top:calc(39% + 20vw + 10px);font-size:4.4vw}.mist,.cloud-middle,.curtain{height:120%;top:-10%}nav{bottom:8px;right:8px}button{padding:8px 12px}.cue{bottom:68px}}@media(prefers-reduced-motion:reduce){#journey{height:100svh}.cue,#replay{display:none}}
/* Desktop-first, one-screen cinematic stage. No tall scroll spacer. */
#journey{height:100svh;min-height:540px}.viewport{position:relative;height:100%;min-height:540px}.art{width:100%;height:100%;aspect-ratio:auto}.welcome{top:18%;font-size:clamp(20px,2.1vw,34px);letter-spacing:.08em}.title{top:29%;font-size:clamp(90px,11vw,190px)}.subtitle{top:calc(29% + clamp(90px,11vw,190px) + 22px);font-size:clamp(17px,1.7vw,28px);letter-spacing:.025em}.foreground{position:absolute;z-index:4;left:50%;bottom:-3%;width:min(42vw,57vh);height:auto;will-change:transform,opacity}.foreground svg{width:100%;display:block}.island{position:absolute;z-index:2;width:min(24vw,39vh);will-change:transform,opacity}.island img{width:100%;display:block;animation:island-float var(--duration,7s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.island-left-upper{left:-3%;top:-6%;--duration:7.2s;--delay:-2s}.island-right-upper{right:-3%;top:0%;--duration:9.1s;--delay:-4s}.island-left-lower{left:5%;top:57%;width:min(18vw,28vh);--duration:8.4s;--delay:-1s}.island-right-lower{right:4%;top:61%;width:min(17vw,27vh);--duration:6.8s;--delay:-3s}.mist img,.cloud-middle img,.curtain img{width:100%;height:100%;display:block;animation:cloud-float var(--duration,10s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.mist-left{--duration:13s;--delay:-3s}.mist-right{--duration:16s;--delay:-8s}.middle-left{--duration:10s;--delay:-5s}.middle-right{--duration:12s;--delay:-2s}.curtain-left{--duration:8s;--delay:-1s}.curtain-right{--duration:11s;--delay:-6s}.shimmer{position:absolute;inset:0;z-index:7;pointer-events:none;transition:opacity 1.4s}.shimmer i{position:absolute;left:50%;top:47%;width:5px;height:5px;border-radius:50%;background:#fff9dd;box-shadow:0 0 10px 5px #fff4cbaa,0 0 40px 16px #ffeac344;animation:twinkle 3.4s ease-in-out infinite}.shimmer i:before,.shimmer i:after{content:'';position:absolute;background:linear-gradient(transparent,#fffce6,transparent);width:1px;height:28px;top:-12px;left:2px}.shimmer i:after{transform:rotate(90deg)}.shimmer i:nth-child(2){left:43%;top:42%;animation-delay:-1s;scale:.6}.shimmer i:nth-child(3){left:57%;top:53%;animation-delay:-2.2s;scale:.7}.shimmer i:nth-child(4){left:46%;top:58%;animation-delay:-.8s;scale:.4}.shimmer i:nth-child(5){left:54%;top:36%;animation-delay:-2.8s;scale:.4}.shimmer i:nth-child(6){left:39%;top:51%;animation-delay:-1.6s;scale:.3}.shimmer i:nth-child(7){left:61%;top:44%;animation-delay:-.4s;scale:.35}.started .shimmer{opacity:0}.cue{z-index:8;background:none;border:0;border-radius:0;backdrop-filter:none;color:#48344f;cursor:pointer;pointer-events:auto;transition:opacity .5s}.cue:hover{background:none}.cue small{display:block;font-size:10px;letter-spacing:.1em;margin-top:8px}.started .cue{pointer-events:none;visibility:hidden}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}@keyframes island-float{from{transform:translateY(-7px) rotate(-.4deg)}to{transform:translateY(9px) rotate(.4deg)}}@keyframes cloud-float{from{transform:translate(-4px,-8px)}to{transform:translate(7px,10px)}}@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}@media(min-aspect-ratio:2/1){.title{font-size:17vh}.subtitle{top:calc(29% + 17vh + 22px)}}@media(max-width:700px){#journey,.viewport{min-height:560px}.welcome{top:22%;font-size:18px}.title{top:33%;font-size:20vw}.subtitle{top:calc(33% + 20vw + 22px);font-size:3.8vw;padding:0 12px}.foreground{width:min(100vw,63vh);bottom:-2%}.island{width:43vw}.island-left-upper{left:-14%;top:0}.island-right-upper{right:-14%;top:4%}.island-left-lower{left:-9%;top:59%;width:35vw}.island-right-lower{right:-10%;top:64%;width:34vw}.cue{font-size:10px}nav{gap:4px}nav button{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.shimmer,.cape-ripple,.cue,#motion{display:none}#journey{height:100svh}}
.puff{position:absolute;z-index:3;width:32vw;bottom:4%;left:1%;pointer-events:none;will-change:transform,opacity}.puff img{width:100%;display:block;animation:cloud-float var(--duration,9s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.puff-0{left:-6%;bottom:8%;--duration:11s;--delay:-3s}.puff-1{left:14%;bottom:-9%;width:30vw;--duration:8s;--delay:-6s}.puff-2{left:auto;right:-5%;bottom:5%;--duration:13s;--delay:-7s}.puff-3{left:auto;right:13%;bottom:-10%;width:29vw;--duration:9.5s;--delay:-2s}.puff-2 img,.puff-3 img{scale:-1 1}@media(max-width:700px){.puff{width:62vw}.puff-0{left:-24%}.puff-1{left:-10%;width:60vw;bottom:-3%}.puff-2{right:-25%}.puff-3{right:-10%;width:60vw;bottom:-4%}}
/* Water motion follows the source art precisely; only water receives glints. */
.waterfall-island-art{position:relative;animation:island-float var(--duration,7s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.island .waterfall-island-art>img{animation:none}.water-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.water-flow.distant-desktop,.water-flow.distant-mobile{z-index:0;transform-origin:center;will-change:transform}.distant-mobile{display:none}@media(max-width:700px){.distant-desktop{display:none}.distant-mobile{display:block}}@media(prefers-reduced-motion:reduce){.water-flow{display:none!important}}
/* Expose the waterfall faces rather than burying them behind foreground clouds. */
.island-left-lower{top:47%;left:6%;width:min(20vw,32vh)}.island-right-lower{top:50%;right:5%;width:min(19vw,31vh)}.puff-0{bottom:-3%;left:-9%}.puff-2{bottom:-5%;right:-9%}@media(max-width:700px){.island-left-lower{top:52%;left:-7%;width:38vw}.island-right-lower{top:55%;right:-8%;width:37vw}.puff-0{bottom:0;left:-30%}.puff-2{bottom:-2%;right:-30%}}