*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--vapor:#F0EDF6;--cosmos:#1B1040;--violet:#9B72CF;--peach:#FFB088;--sky:#6EC8E4;--glass:rgba(255,255,255,0.55);--graphite:#2C2440;--moon:#E8E0F0;--pink:#E86AA0}
html{scroll-behavior:smooth}
body{background:var(--vapor);color:var(--graphite);font-family:'Lexend',sans-serif;font-weight:300;font-size:clamp(0.95rem,1.2vw,1.15rem);line-height:1.75;overflow-x:hidden}

.noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:0.02;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='3' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E")}

.room{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;overflow:hidden}
.room-1{background:var(--vapor)}
.room-2{background:var(--cosmos);color:var(--moon)}
.room-3{background:var(--vapor)}
.room-4{background:linear-gradient(180deg,var(--cosmos) 0%,var(--vapor) 100%);color:var(--moon)}
.room-5{background:var(--vapor)}

/* Domain */
.domain{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,7rem);letter-spacing:0.02em;text-shadow:2px 2px 0 rgba(155,114,207,0.15),-1px -1px 0 rgba(255,176,136,0.1);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.tagline{font-weight:400;margin-top:1rem;opacity:0.6;letter-spacing:0.01em}

/* Gradient orbs */
.gradient-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.orb-1{width:300px;height:300px;background:radial-gradient(circle,rgba(155,114,207,0.3),rgba(255,176,136,0.1),transparent);top:20%;right:15%;animation:drift-orb 90s linear infinite}
.orb-2{width:250px;height:250px;background:radial-gradient(circle,rgba(110,200,228,0.2),rgba(232,106,160,0.1),transparent);top:30%;left:10%;animation:drift-orb 100s linear infinite reverse}
.orb-3{width:200px;height:200px;background:radial-gradient(circle,rgba(255,176,136,0.2),transparent);bottom:20%;right:20%;animation:drift-orb 80s linear infinite}
.orb-4{width:350px;height:350px;background:radial-gradient(circle,rgba(155,114,207,0.15),transparent);top:10%;left:20%;animation:drift-orb 120s linear infinite}
.orb-5{width:280px;height:280px;background:radial-gradient(circle,rgba(110,200,228,0.15),rgba(155,114,207,0.1),transparent);bottom:10%;left:30%;animation:drift-orb 95s linear infinite reverse}
@keyframes drift-orb{0%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-20px,30px)}75%{transform:translate(15px,15px)}100%{transform:translate(0,0)}}

/* Islands */
.island{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:clamp(1.5rem,3vw,2.5rem);max-width:380px;position:relative;z-index:1;box-shadow:8px 8px 24px rgba(44,36,64,0.08),-4px -6px 16px rgba(155,114,207,0.05);animation:float 60s linear infinite;margin:1rem}
.island-1{transform:rotateX(2deg) rotateY(-1deg);animation-delay:-10s}
.island-2{transform:rotateX(-1deg) rotateY(2deg);animation-delay:-25s}
.island-3{transform:rotateX(1deg) rotateY(-2deg);animation-delay:-40s}
@keyframes float{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(5px,-8px) rotate(0.5deg)}50%{transform:translate(-3px,5px) rotate(-0.3deg)}75%{transform:translate(4px,3px) rotate(0.2deg)}100%{transform:translate(0,0) rotate(0deg)}}

.refraction em{text-shadow:2px 1px 0 rgba(110,200,228,0.3),-1px -1px 0 rgba(255,176,136,0.3)}

.rotating-shape{width:60px;height:60px;border:2px solid var(--violet);border-radius:8px;animation:slow-spin 120s linear infinite;margin:0 auto}
@keyframes slow-spin{to{transform:rotate(360deg)}}

/* Portals */
.portal{width:120px;height:auto;margin-top:3rem;position:relative;z-index:1}
.portal-path{stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 8px rgba(232,106,160,0.4))}
.portal-path.drawn{stroke-dashoffset:0;transition:stroke-dashoffset 2s cubic-bezier(0.22,1,0.36,1)}

/* Float labels */
.float-label{position:absolute;bottom:3rem;left:3rem;font-family:'Azeret Mono',monospace;font-size:clamp(0.65rem,0.8vw,0.8rem);letter-spacing:0.08em;text-transform:uppercase;color:var(--violet);opacity:0.6;animation:slow-spin 120s linear infinite}
.float-coord{position:absolute;top:3rem;right:3rem;font-family:'Azeret Mono',monospace;font-size:0.65rem;letter-spacing:0.08em;color:var(--sky);opacity:0.4}

/* Compass */
.compass-rose{position:fixed;bottom:24px;right:24px;width:40px;height:40px;z-index:100;opacity:0.6}

/* Fade in */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Final text */
.final-text{max-width:600px;text-align:center;position:relative;z-index:1}
.final-text p{margin-bottom:1.5rem}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.fade-in{opacity:1;transform:none}
}