/* luminous.quest - Frutiger Aero Split-Screen Narrative */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',sans-serif;background:#061e2a;color:#e8f4f0;overflow-x:hidden;min-height:100vh}
#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}
.split-screen{display:flex;width:100%;min-height:100vh}
.glass-pane{width:50%;position:relative;z-index:10;overflow-y:auto;height:100vh;scroll-snap-type:y mandatory}
.glass-pane::-webkit-scrollbar{width:4px}
.glass-pane::-webkit-scrollbar-track{background:rgba(10,46,61,0.3)}
.glass-pane::-webkit-scrollbar-thumb{background:rgba(120,230,200,0.3);border-radius:2px}
.glass-inner{position:relative}
.glass-pane::before{content:'';position:fixed;top:0;left:0;width:50%;height:100%;background:linear-gradient(135deg,rgba(42,124,142,0.12) 0%,rgba(10,46,61,0.85) 50%,rgba(6,30,42,0.95) 100%);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-right:1px solid rgba(120,230,200,0.15);z-index:-1;pointer-events:none}
.glass-nav{position:fixed;top:0;left:0;width:50%;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;z-index:50;background:linear-gradient(180deg,rgba(6,30,42,0.9) 0%,rgba(6,30,42,0) 100%)}
.nav-logo{display:flex;align-items:center;gap:12px}
.logo-text{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#78e6c8;opacity:0.8}
.nav-chapters{display:flex;gap:8px;align-items:center}
.chapter-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(120,230,200,0.4);background:transparent;cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);padding:0}
.chapter-dot.active{background:#78e6c8;border-color:#78e6c8;box-shadow:0 0 12px rgba(120,230,200,0.5)}
.chapter-dot:hover{border-color:#78e6c8;transform:scale(1.3)}
.chapter{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 48px 80px;opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease;scroll-snap-align:start}
.chapter.active{opacity:1;transform:translateY(0)}
.chapter-label{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.chapter-number{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.15em;color:#78e6c8;opacity:0.7}
.chapter-line{display:block;width:40px;height:1px;background:linear-gradient(90deg,#78e6c8,transparent);opacity:0.5}
.chapter-title{font-family:'Playfair Display',serif;font-size:clamp(42px,6vw,72px);font-weight:700;letter-spacing:-0.02em;line-height:1.08;color:#e8f4f0;margin-bottom:16px;text-shadow:0 0 60px rgba(120,230,200,0.15)}
.chapter-subtitle{font-family:'Lora',serif;font-style:italic;font-size:18px;color:#78e6c8;opacity:0.7;margin-bottom:40px;letter-spacing:0.02em}
.chapter-body p{font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:300;line-height:1.75;color:rgba(232,244,240,0.75);margin-bottom:24px;max-width:480px}
.chapter-body p:last-child{margin-bottom:0}
.chapter-cta{display:flex;align-items:center;gap:12px;margin-top:48px;cursor:pointer;transition:all 0.4s ease}
.chapter-cta:hover{transform:translateY(4px)}
.chapter-cta:hover .cta-text{color:#78e6c8}
.cta-text{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(120,230,200,0.6);transition:color 0.4s ease}
.cta-arrow{animation:bobDown 2s ease-in-out infinite}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.chapter-finale{display:flex;flex-direction:column;align-items:center;margin-top:60px;gap:24px}
.finale-orb{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#78e6c8,#2a7c8e 60%,#1a4a5e);box-shadow:0 0 40px rgba(120,230,200,0.4),0 0 80px rgba(120,230,200,0.2),inset 0 -4px 12px rgba(6,30,42,0.3);animation:orbPulse 3s ease-in-out infinite}
@keyframes orbPulse{0%,100%{box-shadow:0 0 40px rgba(120,230,200,0.4),0 0 80px rgba(120,230,200,0.2);transform:scale(1)}50%{box-shadow:0 0 60px rgba(120,230,200,0.6),0 0 120px rgba(120,230,200,0.3);transform:scale(1.05)}}
.finale-text{font-family:'Lora',serif;font-style:italic;font-size:16px;color:rgba(120,230,200,0.6);letter-spacing:0.03em}
.scroll-progress{position:fixed;left:24px;bottom:48px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50}
.scroll-depth-label{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(120,230,200,0.4);writing-mode:vertical-rl;transform:rotate(180deg)}
.scroll-depth-bar{width:2px;height:100px;background:rgba(120,230,200,0.1);border-radius:1px;overflow:hidden}
.scroll-depth-fill{width:100%;height:0%;background:linear-gradient(180deg,#78e6c8,#2a7c8e);border-radius:1px;transition:height 0.3s ease}
.scroll-depth-value{font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(120,230,200,0.5);letter-spacing:0.05em}
.aquarium-pane{width:50%;position:fixed;top:0;right:0;height:100vh;overflow:hidden}
.aquarium-gradient{position:absolute;inset:0;transition:background 1.5s ease;background:linear-gradient(180deg,#2a7c8e 0%,#1a5c6e 30%,#1a4a5e 60%,#0a2e3d 100%)}
.caustics{position:absolute;inset:0;opacity:0.15;background:repeating-conic-gradient(rgba(120,230,200,0.08) 0%,transparent 2%,transparent 4%);background-size:200px 200px;animation:causticShift 8s linear infinite;mix-blend-mode:overlay}
@keyframes causticShift{0%{background-position:0 0;transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(2deg)}100%{background-position:200px 200px;transform:scale(1) rotate(0deg)}}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(232,244,240,0.3),rgba(120,230,200,0.05));border:1px solid rgba(232,244,240,0.1);animation:bubbleRise linear infinite}
@keyframes bubbleRise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:0.6}100%{transform:translateY(-100vh) translateX(20px);opacity:0}}
.fish-container{position:absolute;inset:0;pointer-events:none}
.fish{position:absolute;transition:transform 0.1s linear;will-change:transform}
.fish-svg{transition:opacity 0.3s}
.coral-container{position:absolute;bottom:0;left:0;right:0;height:250px;pointer-events:none}
.coral{position:absolute;bottom:0;transition:opacity 1s ease,transform 1s ease}
.coral-1{left:10%;opacity:0.8}
.coral-2{left:45%;opacity:0.6}
.coral-3{right:15%;opacity:0.7}
.seaweed-container{position:absolute;bottom:0;left:0;right:0;height:350px;pointer-events:none}
.seaweed{position:absolute;bottom:0}
.seaweed-1{left:25%;animation:seaweedSway 6s ease-in-out infinite}
.seaweed-2{left:55%;animation:seaweedSway 7s ease-in-out infinite 1s}
.seaweed-3{right:20%;animation:seaweedSway 5s ease-in-out infinite 2s}
@keyframes seaweedSway{0%,100%{transform:rotate(-2deg) scaleY(1)}25%{transform:rotate(1deg) scaleY(1.02)}50%{transform:rotate(2deg) scaleY(1)}75%{transform:rotate(-1deg) scaleY(0.98)}}
.aquarium-depth{position:absolute;bottom:48px;right:48px;font-family:'Space Grotesk',sans-serif;display:flex;align-items:baseline;gap:4px;opacity:0.4}
.depth-number{font-size:48px;font-weight:600;color:#78e6c8;font-variant-numeric:tabular-nums}
.depth-unit{font-size:16px;color:#78e6c8;letter-spacing:0.05em}
@media(max-width:768px){.split-screen{flex-direction:column}.glass-pane{width:100%;height:auto;overflow:visible;scroll-snap-type:none}.glass-pane::before{width:100%;backdrop-filter:blur(10px)}.glass-nav{width:100%;padding:16px 24px}.aquarium-pane{width:100%;position:relative;height:60vh}.chapter{padding:80px 24px 60px;min-height:auto}.chapter-title{font-size:clamp(32px,8vw,48px)}.scroll-progress{display:none}.aquarium-depth{bottom:16px;right:16px}}
.coral-container .coral-1 path{fill:#e87461}.coral-container .coral-2 path{fill:#f0b86e}.chapter-body p::first-letter{color:#f5f0eb}