@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;overscroll-behavior:none;background-color:#000b1a;font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}.canvas-container{z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}.start-overlay{z-index:320;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;visibility:visible;cursor:pointer;background:radial-gradient(circle,#040e1c14 0%,#030a1666 100%);justify-content:center;align-items:center;transition:opacity .8s,visibility .8s;display:flex;position:fixed;inset:0}.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-overlay-message{color:#ebf5ffeb;letter-spacing:.14em;text-transform:uppercase;background:#0814246b;border:1px solid #aad2ff4d;border-radius:999px;padding:14px 22px;font-size:1rem;font-weight:400;box-shadow:0 0 24px #004b8c40}.scroll-container{z-index:10;pointer-events:none;position:relative}.scroll-container.hidden{transition:opacity .3s,visibility .3s;opacity:0!important;visibility:hidden!important}.section{height:100vh;position:relative}.landing-section{text-align:center;justify-content:center;align-items:center;display:flex}.landing-content{pointer-events:auto;margin-top:-15vh;animation:2s ease-out fadeIn}.title-glow{letter-spacing:.1em;color:#fff;text-shadow:0 2px 8px #0003;text-transform:uppercase;margin-bottom:.5rem;font-size:6rem;font-weight:700}.subtitle{letter-spacing:.25em;color:#fff;text-shadow:0 2px 8px #0003;text-transform:uppercase;opacity:.9;margin-bottom:4rem;font-size:1.5rem;font-weight:300}.scroll-indicator{color:#5a9bd4;text-transform:uppercase;letter-spacing:.1em;opacity:.8;flex-direction:column;align-items:center;gap:10px;font-size:.9rem;font-weight:600;animation:2s infinite bounce;display:flex}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.story-section{pointer-events:none;justify-content:center;align-items:center;display:flex}.story-content{text-align:center;z-index:15}.story-content h2{text-transform:uppercase;letter-spacing:.1em;color:#fff;text-shadow:0 0 20px #ffffff26;margin-bottom:1rem;font-size:3.5rem;font-weight:600}.story-content p{color:#b0d0ff;text-shadow:0 0 15px #ffffff1a;max-width:600px;margin:0 auto;font-size:1.25rem;font-weight:300;line-height:1.6}.abyss-ending .story-content{flex-direction:column;gap:15px;display:flex}.ending-title{opacity:.9;letter-spacing:.15em!important;color:#e6f7ff!important;text-shadow:0 0 30px #0032ff66!important;font-size:4.5rem!important}.depth-marker{letter-spacing:.25em;text-transform:uppercase;font-family:Space Grotesk,sans-serif;font-weight:500;color:#0ff!important;margin-bottom:3rem!important;font-size:1rem!important}.ending-quote{opacity:.8;font-style:italic;font-weight:300;color:#8ce!important;font-size:1.5rem!important}.ending-quote.highlight{text-shadow:0 0 20px #ffffff4d;font-style:normal;font-weight:400;color:#fff!important;margin-top:1rem!important;font-size:1.6rem!important}.dialogue-container{pointer-events:none;z-index:200;justify-content:center;align-items:center;display:flex;position:fixed;bottom:12%;left:50%;transform:translate(-50%)}.dialogue-bubble{color:#001a33;opacity:0;background:#fffffff2;border-radius:30px;padding:15px 30px;font-size:1.1rem;font-style:italic;font-weight:500;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards dialoguePop;transform:scale(.9)translateY(20px);box-shadow:0 10px 30px #0000004d}@keyframes dialoguePop{to{opacity:1;transform:scale(1)translateY(0)}}.fish-hover-label{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e0f0ff;letter-spacing:.1em;white-space:nowrap;opacity:0;pointer-events:none;z-index:300;background:#050f1e99;border:1px solid #96c8ff33;border-radius:8px;padding:6px 14px;font-size:.9rem;font-weight:500;animation:.15s ease-out forwards hoverFloatUI;box-shadow:0 4px 15px #0000004d}@keyframes hoverFloatUI{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:translateY(-5px)scale(1)}}.overlay-container{pointer-events:none;z-index:250;justify-content:center;align-items:center;width:100vw;height:100vh;transition:background .4s;display:flex;position:absolute;top:0;left:0}.overlay-container.active{pointer-events:auto;background:#00050fb3}.info-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;opacity:0;background:#0a1932d9;border:1px solid #0096ff4d;border-radius:12px;max-width:400px;padding:30px;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards panelOpen;transform:scale(.9);box-shadow:0 0 30px #0064ff33}@keyframes panelOpen{to{opacity:1;transform:scale(1)}}.info-panel h2{color:#6cf;margin-top:0;margin-bottom:20px;font-family:Inter,sans-serif;font-weight:400}.info-panel p{color:#b0d0ff;font-size:1rem;line-height:1.6}.info-panel .fact{color:#0ff;border-top:1px dashed #0096ff33;margin-top:20px;padding-top:15px;font-size:.95rem;font-style:italic}.close-btn{color:#fff;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;background:#0096ff33;border:1px solid #0096ff80;border-radius:6px;width:100%;margin-top:25px;padding:12px 20px;font-size:1rem;transition:all .2s}.close-btn:hover{background:#0096ff66}.scuba-hud{pointer-events:none;z-index:50;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.scuba-mask-overlay{pointer-events:none;background:radial-gradient(circle,#0000 35%,#00060fb3 70%,#00040af2 100%);border-radius:5% 5% 15% 15%;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 80px 40px #000c}.crosshair{background:#ffffffe6;border:1px solid #00000080;border-radius:50%;width:5px;height:5px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #64c8ffcc}.crosshair.active{background:#64ffc8;border:1px solid #0003;transform:translate(-50%,-50%)scale(2.5);box-shadow:0 0 15px #64ffc8}.hud-top-right{text-align:right;letter-spacing:.15em;text-shadow:0 2px 10px #000c;font-family:Space Grotesk,sans-serif;position:absolute;top:5vh;right:5vw}.hud-top-right .depth-text{color:#6cf;margin-bottom:8px;font-size:1.1rem;font-weight:600}.hud-top-right .exit-text{color:#adf;opacity:.8;font-size:.9rem}.hud-bottom-center{text-align:center;letter-spacing:.15em;color:#c8e6ffb3;text-shadow:0 2px 10px #000c;pointer-events:none;font-family:Space Grotesk,sans-serif;font-size:.85rem;animation:4s forwards fadeOutInstructions;position:absolute;bottom:8vh;left:50%;transform:translate(-50%)}.hud-bottom-center p{margin-bottom:5px}@keyframes fadeOutInstructions{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0;display:none}}.global-about-btn,.global-sound-btn{color:#cef;letter-spacing:.15em;text-transform:uppercase;z-index:1000;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a142399;border:1px solid #64b4ff66;border-radius:30px;padding:10px 24px;font-family:Space Grotesk,sans-serif;font-size:.95rem;transition:all .3s;position:fixed;top:40px;box-shadow:0 4px 15px #00329633}.global-about-btn{right:40px}.global-sound-btn{right:160px}.global-about-btn:hover,.global-sound-btn:hover{background:#0a1e3ccc;border-color:#64c8ffcc;transform:translateY(-2px);box-shadow:0 6px 20px #0064ff4d}.global-hint{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#cef;letter-spacing:.1em;text-transform:uppercase;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;background:#0a1423d9;border:1px solid #64b4ff40;border-radius:30px;padding:12px 24px;font-family:Space Grotesk,sans-serif;font-size:.95rem;transition:opacity .8s ease-out,transform .8s cubic-bezier(.175,.885,.32,1.275),visibility .8s;animation:3s infinite alternate hintPulse;position:fixed;bottom:8vh;left:50%;transform:translate(-50%)translateY(15px);box-shadow:0 4px 20px #0064ff33}.global-hint.active{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}@keyframes hintPulse{0%{border-color:#64b4ff33;box-shadow:0 4px 15px #00329633}to{border-color:#64b4ff66;box-shadow:0 4px 25px #0078ff66}}.depth-counter{letter-spacing:.25em;color:#c8e6ffe6;text-shadow:0 0 15px #00329680;z-index:900;pointer-events:none;opacity:1;visibility:visible;text-transform:uppercase;font-family:Space Grotesk,sans-serif;font-size:1.1rem;font-weight:500;transition:opacity .8s,visibility .8s;position:fixed;top:5vh;left:5vw}.depth-counter.hidden{opacity:0;visibility:hidden}@media (width<=768px){.title-glow{font-size:3.5rem}.subtitle{margin-bottom:2rem;font-size:1.1rem}.story-content h2{font-size:2.2rem}.story-content p{padding:0 1rem;font-size:1.1rem}.ending-title{font-size:2.8rem!important}.hud-top-right{top:10vh;right:5vw}.hud-top-right .depth-text{font-size:.9rem}.hud-top-right .exit-text{font-size:.75rem}.depth-counter{font-size:.9rem;top:10vh}.global-about-btn{padding:8px 16px;font-size:.8rem;top:20px;right:20px}.global-sound-btn{padding:8px 16px;font-size:.8rem;top:20px;right:100px}.info-panel{max-width:90vw;padding:20px}.dialogue-bubble{padding:10px 20px;font-size:.9rem}.pov-hint-overlay p{padding:8px 16px!important;font-size:.9rem!important}}.intro-overlay{z-index:999;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#000 0%,#020810 25%,#030d1a 50%,#010509 75%,#000 100%) 0 0/400% 400%;justify-content:center;align-items:center;width:100vw;height:100vh;animation:12s ease-in-out infinite gradientDrift;display:flex;position:fixed;top:0;left:0;overflow:hidden}@keyframes gradientDrift{0%{background-position:0 0}25%{background-position:100%}50%{background-position:50% 100%}75%{background-position:0%}to{background-position:0 0}}.intro-overlay:before{content:"";pointer-events:none;background:radial-gradient(#0819371f 0%,#0000 65%);width:200%;height:200%;animation:10s ease-in-out infinite ambientPulse;position:absolute;top:-50%;left:-50%}@keyframes ambientPulse{0%,to{opacity:.2;transform:scale(1)translate(0)}50%{opacity:.5;transform:scale(1.15)translate(2%,-1%)}}.intro-overlay:after{content:"";pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;width:400%;height:400%;animation:.8s steps(4,end) infinite grainShift;position:absolute;top:-150%;left:-150%}@keyframes grainShift{0%{transform:translate(0)}25%{transform:translate(-5%,5%)}50%{transform:translate(5%,-5%)}75%{transform:translate(-3%,-3%)}to{transform:translate(3%,3%)}}.intro-card-stage{perspective:1200px;justify-content:center;align-items:center;width:100%;max-width:720px;padding:0 2rem;display:flex}.intro-card{text-align:center;backface-visibility:hidden;width:100%;transform-style:preserve-3d;will-change:transform, opacity, filter;flex-direction:column;justify-content:center;align-items:center;display:flex}.intro-line{color:#fff;letter-spacing:.04em;will-change:transform, opacity;font-family:Inter,Space Grotesk,system-ui,sans-serif;font-weight:300;line-height:1.65}.intro-line:first-child{color:#fffffff2;text-shadow:0 0 30px #64b4ff14;font-size:clamp(1.3rem,3vw,1.8rem)}.intro-line:last-child{color:#c8dcffbf;text-shadow:0 0 20px #64b4ff0f;margin-top:.6em;font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:200}.intro-card .intro-line+.intro-line{margin-top:.5em}.intro-dots{z-index:5;gap:12px;display:flex;position:absolute;bottom:10vh;left:50%;transform:translate(-50%)}.intro-dot{background:#fff3;border-radius:50%;width:6px;height:6px;transition:all .6s cubic-bezier(.4,0,.2,1)}.intro-dot.active{background:#fffc;transform:scale(1.3);box-shadow:0 0 12px #96c8ff66}.intro-instruction{pointer-events:none;z-index:5;letter-spacing:.12em;text-transform:uppercase;color:#d7e8ff9e;text-shadow:0 0 12px #6ea5dc29;margin:0;padding:0;font-family:Inter,Space Grotesk,system-ui,sans-serif;font-size:clamp(.72rem,1.15vw,.86rem);font-weight:300;position:absolute;bottom:4.2vh;left:50%;transform:translate(-50%)}@media (width<=600px){.intro-card-stage{padding:0 1.5rem}.intro-instruction{letter-spacing:.1em;bottom:4.8vh}}.about-container{z-index:2000;color:#fff;background:linear-gradient(#001f33,#000814);font-family:Space Grotesk,sans-serif;position:fixed;inset:0;overflow:hidden auto;box-shadow:inset 0 0 200px #000000d9}.about-background{display:none}.about-close-btn{color:#fff;letter-spacing:.15em;cursor:pointer;z-index:2010;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:0 0;border:1px solid #ffffff4d;border-radius:30px;align-items:center;gap:8px;padding:10px 24px;font-family:Space Grotesk,sans-serif;font-size:.9rem;transition:all .3s;display:flex;position:fixed;top:40px;right:40px}.about-close-btn:hover{background:#ffffff1a;border-color:#fffc}.close-icon{font-size:1.5rem;line-height:.8}.about-content{flex-direction:column;gap:120px;max-width:1200px;margin:0 auto;padding:120px 40px;display:flex}.about-header{text-align:center}.about-header h1{letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(#fff 0%,#7dbdec 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:4rem;font-weight:700}.about-header p{color:#8ce;letter-spacing:.1em;font-size:1.4rem;font-style:italic}.chapters-grid{flex-direction:column;align-items:center;gap:60px;display:flex}.about-chapter-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#0a142866;border:1px solid #64c8ff1a;border-radius:20px;width:100%;max-width:800px;padding:60px;transition:box-shadow .4s,border-color .4s;position:relative;overflow:hidden}.about-chapter-card:before{content:"";opacity:0;background:radial-gradient(circle,#64c8ff0d 0%,#0000 70%);transition:opacity .4s;position:absolute;inset:0}.about-chapter-card:hover{border-color:#64c8ff4d;box-shadow:0 20px 50px #0032964d}.about-chapter-card:hover:before{opacity:1}.chapter-number{color:#ffffff08;pointer-events:none;font-size:8rem;font-weight:800;position:absolute;top:-20px;right:20px}.chapter-title{color:#cef;letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px;font-size:2.2rem}.chapter-desc{color:#adf;font-size:1.2rem;font-weight:300;line-height:1.8}.marine-life-section{border-top:1px solid #64c8ff1a;padding-top:60px}.section-title{text-align:center;letter-spacing:.2em;color:#fff;margin-bottom:60px;font-size:2.5rem}.marine-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}.marine-card{background:#050f1e99;border-left:3px solid #4da6ff;border-radius:0 10px 10px 0;padding:30px;transition:transform .3s,background .3s}.marine-card:hover{background:#0a1e3ccc;transform:translate(10px)}.marine-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.marine-header h3{color:#e6f7ff;letter-spacing:.1em;text-transform:uppercase;font-size:1.4rem}.marine-depth{color:#0ff;letter-spacing:.15em;background:#00ffff1a;border-radius:4px;padding:4px 8px;font-family:monospace;font-size:.85rem;font-weight:600}.marine-card p{color:#8ce;font-size:1.05rem;line-height:1.6}@media (width<=768px){.about-content{gap:60px;padding:80px 20px}.about-header h1{font-size:2.5rem}.about-header p{font-size:1.1rem}.about-chapter-card{padding:30px 20px}.chapter-number{font-size:5rem;top:-10px;right:10px}.chapter-title{font-size:1.6rem}.chapter-desc{font-size:1rem}.marine-grid{grid-template-columns:1fr}.marine-card{padding:20px}}