*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0B1226;color:#C8D6E5;font-family:'Karla',sans-serif;font-weight:400;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.72;overflow-x:hidden}

.section-label{position:fixed;top:16px;right:24px;font-family:'Libre Baskerville',serif;font-style:italic;font-size:11px;color:#4A6FA5;opacity:0.5;z-index:50;letter-spacing:0.05em;transition:opacity 0.3s}

.fish-swimmer{position:fixed;bottom:8%;left:0;z-index:40;pointer-events:none;animation:fishSwim 20s ease-in-out infinite}
.fish-swimmer svg{width:40px;height:20px;opacity:0.25}
@keyframes fishSwim{0%{left:-5%;opacity:0.15}25%{bottom:12%;opacity:0.35}50%{left:105%;opacity:0.2}75%{bottom:6%;opacity:0.3}100%{left:-5%;opacity:0.15}}

.scene{position:relative;z-index:2}
.surface{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-title{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(2.5rem,6vw,5rem);letter-spacing:0.02em;line-height:1.12;color:#C8D6E5;margin-bottom:0.5em}
.hero-title em{color:#00E5CC;font-style:italic}
.hero-sub{font-family:'Karla',sans-serif;font-size:clamp(0.9rem,1.5vw,1.1rem);color:#8BA4C7;max-width:40ch}

.mesh-organism{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:0}
.mesh-hero{width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px);top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#00E5CC22 0%,#7C3AED15 40%,transparent 70%);animation:meshPulse 8s ease-in-out infinite alternate}
.mesh-drift{width:40vw;height:40vw;top:20%;left:15%;background:radial-gradient(circle,#00E5CC18 0%,#FF6B8A10 50%,transparent 70%);animation:meshDrift 15s ease-in-out infinite alternate}
.mesh-drift-2{width:30vw;height:30vw;bottom:15%;right:10%;background:radial-gradient(circle,#7C3AED15 0%,#00E5CC10 50%,transparent 70%);animation:meshDrift 20s ease-in-out infinite alternate-reverse}
.mesh-dissolve{width:50vw;height:50vw;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#00E5CC10 0%,#FF6B8A08 40%,transparent 60%);animation:meshPulse 12s ease-in-out infinite alternate}
@keyframes meshPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:0.6}100%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}
@keyframes meshDrift{0%{transform:translate(0,0)}100%{transform:translate(3vw,-2vw)}}

.depths,.reef{padding:clamp(48px,10vh,120px) clamp(16px,4vw,48px)}
.masonry-grid{display:grid;grid-template-columns:5fr 3fr 4fr;gap:clamp(24px,4vw,48px);max-width:1100px;margin:0 auto}

.stone{background:#101B33;border-radius:8px;padding:clamp(24px,4vw,40px);position:relative;transition:background 0.3s ease}
.stone:hover{background:#162240}
.boulder{grid-column:span 2;min-height:300px}
.stepping{min-height:200px}
.pebble{min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center}

.stone h2{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:0.02em;line-height:1.15;color:#C8D6E5;margin-bottom:0.6em}
.stone h3{font-family:'Libre Baskerville',serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);color:#00E5CC;margin-bottom:0.5em}
.stone p{color:#8BA4C7;max-width:38em}
.pebble-text{font-family:'Libre Baskerville',serif;font-style:italic;font-size:clamp(1rem,1.8vw,1.3rem);color:#C8D6E5;line-height:1.5}
.card-stamp{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:0.75rem;color:#3D5A80;opacity:0.6;position:absolute;bottom:12px;right:16px;letter-spacing:0.04em}

.current{min-height:100vh;position:relative}
.abyss{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.abyss-text{font-family:'Libre Baskerville',serif;font-style:italic;font-size:clamp(1.2rem,2.5vw,2rem);color:#C8D6E5;max-width:30ch;line-height:1.5;margin-bottom:2em}
.abyss-footer{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:0.75rem;color:#3D5A80;opacity:0.4}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .masonry-grid{grid-template-columns:1fr}
  .boulder{grid-column:span 1}
  .fish-swimmer{display:none}
}