*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--sky:#B8D4E3;--water:#5B8FA8;--twilight:#0D2B3E;--abyss:#050A0F;--cyan:#7FDBCA;--magenta:#C74B8A;--violet:#2A1F3D;--text:#C8DDE6;--depth:0}
html{scroll-behavior:smooth}
body{background:var(--twilight);color:var(--text);font-family:'Lora',serif;font-weight:400;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.72;letter-spacing:0.01em;overflow-x:hidden}

.bubbles{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}

/* Surface */
.zone-surface{min-height:100vh;background:linear-gradient(180deg,#B8D4E3 0%,#5B8FA8 35%,#1A3A4A 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem}
.domain-name{font-family:'Commissioner',sans-serif;font-weight:200;font-size:clamp(3rem,10vw,8rem);letter-spacing:0.08em;color:var(--text);animation:materialize 2s ease forwards}
@keyframes materialize{from{font-variation-settings:'wght' 100;opacity:0.3}to{font-variation-settings:'wght' 200;opacity:1}}
.scroll-chevron{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.wave-layer{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,rgba(13,43,62,0.3));pointer-events:none}

/* Pressure locks */
.pressure-lock{height:15vh;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.1));position:relative;display:flex;align-items:center;justify-content:center}
.pressure-lock::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,0.06) 3px,rgba(0,0,0,0.06) 4px)}
.depth-label{font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--cyan);opacity:0.6}

/* Twilight */
.zone-twilight{min-height:150vh;padding:8vh 12vw;position:relative;background:var(--twilight)}
.content-block{max-width:45ch;margin-bottom:6vh;opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.content-block.right{margin-left:auto}
.content-block.visible{opacity:1;transform:translateY(0)}
.lantern{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--cyan),transparent);box-shadow:0 0 12px rgba(127,219,202,0.4);animation:pulse-lantern 3s ease-in-out infinite;margin-bottom:0.5rem}
@keyframes pulse-lantern{0%,100%{box-shadow:0 0 8px rgba(127,219,202,0.3)}50%{box-shadow:0 0 20px rgba(127,219,202,0.6)}}

/* Mesopelagic */
.zone-meso{min-height:100vh;padding:8vh 12vw;background:linear-gradient(180deg,var(--twilight),var(--violet));display:flex;flex-direction:column;align-items:center;gap:4rem}
.nautilus{width:200px;height:200px}
.nautilus-path{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 3s ease}
.nautilus-path.drawn{stroke-dashoffset:0}
.wide-content{max-width:65ch;text-align:center}

/* Abyssal */
.zone-abyss{min-height:100vh;padding:8vh 8vw;background:linear-gradient(180deg,var(--violet),var(--abyss))}
.bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:800px;margin:0 auto}
.bento-card{background:rgba(26,58,74,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:1.5rem;border:1px solid rgba(127,219,202,0.2);padding:clamp(1.5rem,3vw,2.5rem);opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease;animation:shimmer-border 8s ease-in-out infinite}
.bento-card.visible{opacity:1;transform:translateY(0)}
.bento-card.wide{grid-column:span 2}
.bento-card h2{font-family:'Commissioner',sans-serif;font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:0.75rem;color:var(--cyan)}
@keyframes shimmer-border{0%,100%{border-color:rgba(127,219,202,0.15)}50%{border-color:rgba(199,75,138,0.15)}}

/* Deep */
.zone-deep{min-height:100vh;background:var(--abyss);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4rem}
.deep-text{font-size:clamp(1.2rem,2.5vw,2rem);text-align:center;max-width:500px;text-shadow:0 0 40px rgba(127,219,202,0.3);line-height:1.6}
.orb{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,var(--cyan),transparent);box-shadow:0 0 30px rgba(127,219,202,0.5);transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:default}

.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
.bento-grid{grid-template-columns:1fr}
.bento-card.wide{grid-column:span 1}
.zone-twilight{padding:4vh 6vw}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.fade-in,.content-block,.bento-card{opacity:1;transform:none}
}