@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap");:root{--color-surface:#1E90FF;--color-surface-light:#87CEEB;--color-twilight:#2D3561;--color-twilight-deep:#1A1F3D;--color-midnight:#0A0A14;--color-abyss:#050508;--color-hadal:#020203;--color-glow-cyan:#00FFFF;--color-glow-green:#39FF14;--color-glow-blue:#4169E1;--color-pressure:#FF4444;--color-depth:#00BFFF;--font-display:"Space Grotesk",sans-serif;--font-mono:"IBM Plex Mono",monospace;--ease-sink:cubic-bezier(0.4,0,0.2,1);--ease-glow:cubic-bezier(0.16,1,0.3,1)}.ocean-container *{margin:0;padding:0;box-sizing:border-box}.ocean-container{font-family:var(--font-display);background:var(--color-surface);color:#FFFFFF;overflow-x:hidden;min-height:100vh;transition:background-color .5s var(--ease-sink)}.ocean-container.zone-surface{background:linear-gradient(180deg,#87CEEB,#1E90FF)}.ocean-container.zone-twilight{background:linear-gradient(180deg,#1E90FF,#2D3561 50%,#1A1F3D)}.ocean-container.zone-midnight{background:linear-gradient(180deg,#1A1F3D,#0A0A14)}.ocean-container.zone-abyss{background:linear-gradient(180deg,#0A0A14,#050508)}.ocean-container.zone-hadal{background:var(--color-hadal)}.ocean-container .depth-meter{position:fixed;left:2rem;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:1rem}.ocean-container .depth-track{width:4px;height:200px;background:rgba(255,255,255,.2);border-radius:2px;position:relative;overflow:hidden}.ocean-container .depth-fill{position:absolute;top:0;left:0;width:100%;background:linear-gradient(180deg,var(--color-surface) 0,var(--color-glow-cyan) 50%,var(--color-pressure) 100%);border-radius:2px;transition:height .3s var(--ease-sink)}.ocean-container .depth-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:500;color:var(--color-glow-cyan);text-shadow:0 0 20px var(--color-glow-cyan)}.ocean-container .depth-unit{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}.ocean-container .pressure-value{font-family:var(--font-mono);font-size:.75rem;color:var(--color-pressure);text-shadow:0 0 10px var(--color-pressure)}.ocean-container .light-rays{position:fixed;top:0;left:0;right:0;height:100vh;pointer-events:none;z-index:5;opacity:1;transition:opacity .5s var(--ease-sink)}.ocean-container .light-ray{position:absolute;top:-50%;width:200px;height:200%;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);transform:rotate(15deg)}.ocean-container .light-ray:first-child{left:10%}.ocean-container .light-ray:nth-child(2){left:30%;width:150px}.ocean-container .light-ray:nth-child(3){left:50%;width:100px}.ocean-container .light-ray:nth-child(4){left:70%;width:180px}.ocean-container .light-ray:nth-child(5){left:85%;width:120px}.ocean-container .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;z-index:20}.ocean-container .hero-badge{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#FFFFFF;margin-bottom:2rem;text-shadow:0 2px 10px rgba(0,50,100,.5)}.ocean-container .hero-title{font-size:clamp(3.5rem,12vw,8rem);font-weight:700;line-height:1;margin-bottom:1.5rem;color:#FFFFFF;text-shadow:0 2px 4px rgba(0,30,80,.4),0 4px 20px rgba(0,50,120,.3),0 8px 40px rgba(0,50,100,.2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ocean-container .hero-title .line{display:block}.ocean-container .hero-title .line span{display:inline-block}.ocean-container .hero-subtitle{font-size:1.25rem;font-weight:400;max-width:600px;line-height:1.7;color:#FFFFFF;text-shadow:0 2px 10px rgba(0,50,100,.4)}.ocean-container .hero-stats{display:flex;gap:3rem;margin-top:3rem;opacity:0;animation:fade-in 1s var(--ease-sink) 1.2s forwards}.ocean-container .hero-stat{text-align:center}.ocean-container .hero-stat-value{font-family:var(--font-mono);font-size:2rem;font-weight:600;color:var(--color-glow-cyan);text-shadow:0 0 20px var(--color-glow-cyan)}.ocean-container .hero-stat-label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.25rem}.ocean-container .hero-scroll{position:absolute;bottom:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fade-in 1s var(--ease-sink) 1.5s forwards}.ocean-container .hero-scroll span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase}.ocean-container .scroll-arrow{width:20px;height:30px;border:2px solid rgba(255,255,255,.5);border-radius:10px;position:relative}.ocean-container .scroll-arrow:after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:white;border-radius:2px;animation:scroll-bounce 1.5s ease-in-out infinite}@keyframes scroll-bounce{0%,to{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(8px);opacity:.3}}@keyframes rise-up{to{opacity:1;transform:translateY(0) translateZ(0)}}@keyframes fade-in{to{opacity:1}}.ocean-container .zone-section{position:relative;padding:8rem 2rem;z-index:10}.ocean-container .zone-header{max-width:900px;margin:0 auto 4rem;text-align:center}.ocean-container .zone-badge{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:.5rem 1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:2rem;margin-bottom:1.5rem}.ocean-container .zone-depth{color:var(--color-glow-cyan);text-shadow:0 0 10px var(--color-glow-cyan)}.ocean-container .zone-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:600;margin-bottom:1.5rem}.ocean-container .zone-description{font-size:1.125rem;font-weight:300;line-height:1.8;color:rgba(255,255,255,.85)}.ocean-container .creatures-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1000px;margin:0 auto}.ocean-container .creature-card{background:rgba(0,0,0,.4);border:1px solid rgba(0,255,255,.2);border-radius:8px;padding:2rem;opacity:0;transform:translateY(30px);transition:all .8s var(--ease-glow)}.ocean-container .creature-card.visible{opacity:1;transform:translateY(0)}.ocean-container .creature-card:hover{border-color:var(--color-glow-cyan);box-shadow:0 0 30px rgba(0,255,255,.2)}.ocean-container .creature-icon{font-size:3rem;margin-bottom:1rem;filter:drop-shadow(0 0 15px var(--color-glow-cyan))}.ocean-container .creature-name{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:var(--color-glow-cyan);text-shadow:0 0 15px var(--color-glow-cyan)}.ocean-container .creature-depth{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:1rem}.ocean-container .creature-fact{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.8)}.ocean-container .timeline-section{padding:6rem 2rem}.ocean-container .timeline{max-width:800px;margin:0 auto;position:relative}.ocean-container .timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--color-glow-cyan),var(--color-glow-blue),transparent);transform:translateX(-50%)}.ocean-container .timeline-item{display:flex;margin-bottom:3rem;opacity:0;transform:translateX(-30px);transition:all .8s var(--ease-sink)}.ocean-container .timeline-item:nth-child(2n){flex-direction:row-reverse;transform:translateX(30px)}.ocean-container .timeline-item.visible{opacity:1;transform:translateX(0)}.ocean-container .timeline-content{flex:1;padding:1.5rem;background:rgba(0,0,0,.4);border:1px solid rgba(0,255,255,.2);border-radius:8px;max-width:45%}.ocean-container .timeline-year{font-family:var(--font-mono);font-size:.8rem;color:var(--color-glow-cyan);text-shadow:0 0 10px var(--color-glow-cyan);margin-bottom:.5rem}.ocean-container .timeline-title{font-size:1.125rem;font-weight:600;margin-bottom:.75rem}.ocean-container .timeline-text{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.8)}.ocean-container .timeline-depth{font-family:var(--font-mono);font-size:.75rem;color:var(--color-pressure);margin-top:.75rem}.ocean-container .data-section{padding:6rem 2rem}.ocean-container .data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:800px;margin:0 auto}.ocean-container .data-card{background:rgba(0,0,0,.5);border:1px solid rgba(0,255,255,.15);padding:2rem;text-align:center;opacity:0;transform:scale(.9);transition:all .8s var(--ease-glow)}.ocean-container .data-card.visible{opacity:1;transform:scale(1)}.ocean-container .data-value{font-family:var(--font-mono);font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--color-glow-cyan);text-shadow:0 0 30px var(--color-glow-cyan);line-height:1}.ocean-container .data-value .unit{font-size:.5em;color:rgba(255,255,255,.6)}.ocean-container .data-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:1rem}.ocean-container .data-context{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:.75rem;line-height:1.5}.ocean-container .quote-section{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:4rem 2rem;position:relative}.ocean-container .quote-glow{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(0,255,255,.15) 0,transparent 70%);border-radius:50%;pointer-events:none}.ocean-container .quote-content{max-width:700px;text-align:center;position:relative;z-index:2}.ocean-container .quote-text{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:300;font-style:italic;line-height:1.5;color:var(--color-glow-cyan);text-shadow:0 0 40px rgba(0,255,255,.3)}.ocean-container .quote-attribution{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.15em;color:rgba(255,255,255,.6);margin-top:2rem}.ocean-container .sources-section{padding:4rem 2rem;background:rgba(0,0,0,.5)}.ocean-container .sources-content{max-width:800px;margin:0 auto}.ocean-container .sources-title{font-size:1.25rem;font-weight:500;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.ocean-container .sources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.ocean-container .sources-grid a{font-family:var(--font-mono);font-size:.75rem;color:rgba(255,255,255,.6);text-decoration:none;padding:.75rem 1rem;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.ocean-container .sources-grid a:hover{color:var(--color-glow-cyan);border-color:var(--color-glow-cyan);box-shadow:0 0 15px rgba(0,255,255,.2)}.ocean-container .sources-note{font-size:.8rem;font-style:italic;color:rgba(255,255,255,.5);margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.ocean-container .footer{padding:4rem 2rem;text-align:center;background:var(--color-hadal)}.ocean-container .footer-depth{font-family:var(--font-mono);font-size:3rem;font-weight:700;color:var(--color-glow-cyan);text-shadow:0 0 50px var(--color-glow-cyan);margin-bottom:1rem}.ocean-container .footer-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:2rem}.ocean-container .footer-message{font-size:1.125rem;font-weight:300;color:rgba(255,255,255,.7);max-width:500px;margin:0 auto;line-height:1.7}@media (max-width:768px){.ocean-container .depth-meter{left:1rem;top:auto;bottom:2rem;transform:none;flex-direction:row;gap:.75rem}.ocean-container .depth-track{width:100px;height:4px}.ocean-container .depth-fill{width:0;height:100%;background:linear-gradient(90deg,var(--color-surface) 0,var(--color-glow-cyan) 50%,var(--color-pressure) 100%)}.ocean-container .hero-stats{flex-direction:column;gap:1.5rem}.ocean-container .timeline:before{left:0}.ocean-container .timeline-item,.ocean-container .timeline-item:nth-child(2n){flex-direction:column;padding-left:2rem;transform:none}.ocean-container .timeline-content{max-width:100%}.ocean-container .data-grid,.ocean-container .sources-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.ocean-container .creature-card,.ocean-container .data-card,.ocean-container .scroll-arrow:after,.ocean-container .timeline-item{animation:none;transition:none;opacity:1;transform:none}}