:root {color-scheme:dark;--cream:#fff9e7;--gold:#f8d57a;--plum:#302149}
* {box-sizing:border-box}
html,body {margin:0;min-height:100%;background:#7978ca}
body {font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased}
.scene {position:relative;isolation:isolate;width:100%;min-height:100svh;height:100svh;overflow:hidden;background:#8a8bd1}
.world {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.world-plate {position:absolute;inset:-2%;display:block;overflow:hidden;animation:sky-drift 95s ease-in-out infinite}
.world-plate img {width:225%;height:100%;display:block;object-fit:fill;max-width:none}
.sky-wash {position:absolute;inset:0;background:linear-gradient(90deg,rgba(65,45,126,.22),rgba(114,77,154,.05) 48%,transparent 76%)}
.atmosphere {position:absolute;inset:0;background:linear-gradient(0deg,rgba(151,119,174,.2),transparent 27%);z-index:8}
.distant-planet {position:absolute;z-index:1;left:51%;top:0%;width:48%;height:auto;opacity:.76;animation:planet-drift 66s ease-in-out infinite;transform-origin:50% 50%}
.brand-corner {position:absolute;z-index:12;left:max(3vw,24px);bottom:max(3vh,env(safe-area-inset-bottom),20px);width:clamp(92px,8vw,125px)}
.brand-corner img {display:block;width:100%;height:auto;filter:drop-shadow(0 7px 18px rgba(57,30,91,.18))}
.announcement {position:absolute;z-index:10;left:6.3%;top:28%;width:35%;text-align:center}
.wordmark-float {animation:brand-float 8.6s ease-in-out infinite;transform-origin:50% 70%;filter:drop-shadow(0 4px 1px rgba(57,32,98,.1)) drop-shadow(0 12px 30px rgba(65,37,102,.2))}
.wordmark {display:block;width:100%;height:auto}
h1 {display:flex;align-items:center;justify-content:center;gap:18px;margin:28px 0 0;padding-left:.29em;color:var(--cream);font-size:clamp(12px,1.1vw,17px);font-weight:650;letter-spacing:.29em;text-transform:uppercase;line-height:1.4;text-shadow:0 2px 10px rgba(40,27,78,.35)}
h1 span {display:block;width:clamp(24px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,#f9eac7)}
h1 span:last-child {transform:rotate(180deg)}
.foreground-rig {position:absolute;inset:0;z-index:5;animation:raft-drift 12s ease-in-out infinite;transform-origin:72% 80%}
.traveller {position:absolute;z-index:6;left:55%;bottom:12%;width:min(32vw,48vh);aspect-ratio:2/3;filter:drop-shadow(0 12px 12px rgba(54,32,84,.12))}
.traveller-shadow {position:absolute;left:24%;bottom:2%;width:63%;height:4%;border-radius:50%;background:rgba(55,33,77,.2);filter:blur(11px)}
.raloku-rest,.raloku-breath,.raloku-head-turn {position:absolute;inset:0}
.raloku-rest {animation:weight-shift 29s ease-in-out infinite;transform-origin:57% 92%}
.raloku-breath {animation:breathing 5.8s ease-in-out infinite;transform-origin:58% 87%}
.raloku-part {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.raloku-rock {clip-path:polygon(0 88.5%,100% 88.5%,100% 100%,0 100%)}
.raloku-body {clip-path:polygon(0 0,37.5% 0,37.5% 23%,44% 24.7%,49% 26.7%,56% 28.6%,64.5% 27.8%,71% 25.1%,82.5% 24%,85% 0,100% 0,100% 91%,0 91%)}
.raloku-head {clip-path:polygon(37.5% 0,85% 0,82.5% 24%,71% 25.1%,64.5% 27.8%,56% 28.6%,49% 26.7%,44% 24.7%,37.5% 23%)}
.raloku-head-turn {transform-origin:57% 27.6%;animation:look-around 23s ease-in-out infinite}
.cloud {position:absolute;display:block;height:auto;pointer-events:none;will-change:transform}
.cloud--far {z-index:2;left:25%;top:13%;width:28%;opacity:.33;animation:cloud-far 61s ease-in-out infinite}
.cloud--middle {z-index:4;left:-13%;bottom:18%;width:58%;opacity:.6;animation:cloud-drift 47s ease-in-out infinite}
.cloud--foreground {z-index:7;right:-29%;bottom:-16%;width:72%;opacity:.73;animation:cloud-drift 63s ease-in-out infinite reverse;filter:blur(.5px)}
.floating-island {position:absolute;will-change:transform}
.floating-island img {display:block;width:100%;height:auto}
.island--far {z-index:3;left:37%;top:57%;width:12%;filter:blur(.6px) saturate(.8);opacity:.76;animation:island-bob 13s ease-in-out infinite}
.island--tiny {z-index:2;left:90%;top:42%;width:7%;opacity:.56;filter:blur(1px) saturate(.7);animation:island-bob 17s ease-in-out infinite reverse}
.island--tiny img {transform:scaleX(-1)}
.island--near {z-index:5;left:47%;bottom:-7%;width:49%;filter:drop-shadow(0 14px 20px rgba(58,36,89,.08))}
.waterfall {position:absolute;z-index:2;left:67.8%;top:48%;width:5.8%;height:47%;overflow:hidden;clip-path:polygon(0 0,66% 0,91% 12%,100% 90%,78% 100%,4% 100%,15% 40%);mix-blend-mode:screen;opacity:.75;mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent)}
.waterfall i {position:absolute;inset:-100% 0;background:repeating-linear-gradient(180deg,transparent 0 15px,rgba(221,253,255,.65) 19px,transparent 25px 48px);animation:water-flow 2.4s linear infinite;filter:blur(.5px)}
.waterfall i:nth-child(2){left:40%;right:0;opacity:.65;animation-duration:1.7s;animation-delay:-.8s}
.motes {position:absolute;inset:0;z-index:9}
.motes i {position:absolute;left:18%;top:75%;width:3px;height:3px;border-radius:50%;background:#fff1c8;box-shadow:0 0 10px #ffedb3;animation:mote 11s ease-in-out infinite}
.motes i:nth-child(2){left:44%;top:49%;width:2px;height:2px;animation-delay:-3s}
.motes i:nth-child(3){left:82%;top:71%;animation-delay:-7s}
.motes i:nth-child(4){left:61%;top:31%;width:2px;height:2px;animation-delay:-5s}
.motes i:nth-child(5){left:33%;top:15%;animation-delay:-9s}
.tab-hidden * {animation-play-state:paused!important}
@keyframes brand-float{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-11px) rotate(.4deg)}}
@keyframes breathing{0%,100%{transform:scale(1,1)}50%{transform:scale(1.003,1.007)}}
@keyframes look-around{0%,23%,43%,69%,100%{transform:rotate(0)}27%,34%{transform:rotate(1.8deg)}37%{transform:rotate(.6deg)}73%,79%{transform:rotate(-1.4deg)}83%{transform:rotate(.4deg)}}
@keyframes weight-shift{0%,44%,65%,100%{transform:rotate(0)}49%,58%{transform:rotate(-.55deg)}62%{transform:rotate(.2deg)}}
@keyframes cloud-far{0%,100%{transform:translate(-25px,0)}50%{transform:translate(40px,8px)}}
@keyframes cloud-drift{0%,100%{transform:translate(-25px,5px)}50%{transform:translate(38px,-7px)}}
@keyframes island-bob{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-16px) rotate(.6deg)}}
@keyframes raft-drift{0%,100%{transform:translateY(0) rotate(-.1deg)}50%{transform:translateY(-7px) rotate(.1deg)}}
@keyframes planet-drift{0%,100%{transform:translate(0,0) rotate(-1deg)}50%{transform:translate(-13px,10px) rotate(1deg)}}
@keyframes sky-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-.6%)}}
@keyframes water-flow{from{transform:translateY(0)}to{transform:translateY(48px)}}
@keyframes mote{0%,100%{transform:translate(0,0);opacity:.1}50%{transform:translate(12px,-27px);opacity:.7}}
@media(min-width:1800px){.announcement{left:9%;width:33%}.traveller{left:56%;width:min(31vw,48vh)}}
@media(max-width:1000px) and (orientation:portrait){
 .announcement{left:50%;top:9%;width:min(74vw,35vh);transform:translateX(-50%)}
 h1{font-size:14px;margin-top:25px}
 .traveller{left:30%;bottom:12%;width:min(65vw,35vh)}
 .island--near{left:12%;bottom:-5%;width:105%}
 .island--far{left:1%;top:48%;width:25%}
 .island--tiny{left:82%;top:38%;width:14%}
 .distant-planet{left:31%;top:26%;width:83%;opacity:.67}
 .cloud--far{top:35%;left:-15%;width:63%;opacity:.42}
 .cloud--middle{bottom:22%;left:-36%;width:90%;opacity:.58}
 .cloud--foreground{width:110%;right:-47%;bottom:-4%;opacity:.68}
 .brand-corner{width:99px;left:24px;bottom:25px}
 .sky-wash{background:linear-gradient(180deg,rgba(65,42,118,.13),transparent 42%)}
}
@media(max-width:600px) and (orientation:portrait){
 .announcement{top:8.5%;width:min(78vw,40vh)}
 h1{font-size:11px;gap:13px;margin-top:20px;letter-spacing:.25em}
 h1 span{width:30px}
 .traveller{left:22%;bottom:12%;width:min(78vw,35vh)}
 .island--near{left:-12%;bottom:-5%;width:124%}
 .island--far{left:-9%;top:44%;width:31%}
 .island--tiny{left:84%;top:38%;width:15%}
 .cloud--middle{bottom:23%;left:-37%;width:105%;opacity:.5}
 .cloud--foreground{right:-55%;bottom:-2%;width:138%}
 .brand-corner{width:86px;left:17px;bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-height:650px) and (orientation:landscape){
 .announcement{top:25%;left:6%;width:33%}
 h1{font-size:10px;margin-top:20px}
 .traveller{width:min(35vw,49vh);left:57%;bottom:12%}
 .brand-corner{width:75px;left:20px;bottom:16px}
}
@media(max-height:740px) and (orientation:portrait){
 .announcement{width:min(74vw,35vh)}
}
@media(max-height:650px) and (orientation:portrait){
 .announcement{width:min(70vw,34vh)}
 h1{font-size:10px;margin-top:14px;gap:10px}
 .brand-corner{width:75px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}