*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1B4B5A;color:#D4C5A9;font-family:'DM Sans',sans-serif;font-weight:400;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.72;overflow-x:hidden}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Epoch navigation */
.epoch-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:16px}
.epoch-dot{width:8px;height:8px;border-radius:50%;background:#A8D4E6;border:none;cursor:pointer;opacity:0.4;transition:opacity 0.3s ease,box-shadow 0.3s ease;padding:0}
.epoch-dot.active{opacity:1;box-shadow:0 0 12px #A8D4E6}

/* Split container */
.split-container{display:grid;grid-template-columns:45fr 8px 55fr;min-height:100vh;position:relative;transition:grid-template-columns 1.5s cubic-bezier(0.22,0.61,0.36,1)}
.split-container.merged{grid-template-columns:0fr 0px 1fr}

/* Observer panel (left, sticky) */
.panel-observer{position:sticky;top:0;height:100vh;background:#1B4B5A;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,48px);transition:opacity 1.5s ease}
.split-container.merged .panel-observer{opacity:0;pointer-events:none}

/* Caustic light layer */
.caustic-layer{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 40%,rgba(168,212,230,0.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(110,196,184,0.04) 0%,transparent 50%);animation:caustic1 15s ease-in-out infinite alternate,caustic2 22s ease-in-out infinite alternate}
@keyframes caustic1{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes caustic2{0%{background-position:100% 0%}100%{background-position:0% 100%}}

/* Divider */
.panel-divider{background:linear-gradient(180deg,#5B8FA8,#F2E8D5,#5B8FA8);animation:dividerPulse 8s ease-in-out infinite;transition:opacity 1.5s ease}
@keyframes dividerPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.split-container.merged .panel-divider{opacity:0}

/* Moving panel (right, scrolls) */
.panel-moving{padding:clamp(24px,4vw,48px);position:relative}

/* Observer epoch blocks */
.observer-epoch{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,48px);opacity:0;transition:opacity 0.8s ease;pointer-events:none}
.observer-epoch.active{opacity:1;pointer-events:auto}

/* Epoch titles */
.epoch-title{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:clamp(3rem,7vw,6rem);letter-spacing:0.08em;line-height:1.15;color:#F2E8D5;margin-bottom:clamp(16px,3vw,32px)}
.epoch-title-centered{text-align:center}

/* Epoch body text */
.epoch-body{font-family:'DM Sans',sans-serif;font-weight:400;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.72;color:#D4C5A9;max-width:38ch}

/* Mono accent */
.mono-accent{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:0.85rem;letter-spacing:0.12em;color:#A8D4E6;display:block;margin-bottom:12px}

/* Moving epoch blocks */
.moving-epoch{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vw,40px)}
.mov-epoch-2{min-height:150vh}
.mov-epoch-3{min-height:120vh}

/* Glassmorphic cards */
.glass-card{background:rgba(27,75,90,0.25);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(168,212,230,0.18);border-radius:16px;padding:clamp(20px,3vw,32px);box-shadow:0 8px 32px rgba(15,47,58,0.3),inset 0 1px 0 rgba(168,212,230,0.1);position:relative;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease}
.glass-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(168,212,230,0.08) 0%,transparent 60%);pointer-events:none;border-radius:16px}
.glass-card p{max-width:38ch;color:#D4C5A9}
.glass-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(15,47,58,0.4)}
.glass-card-wide{max-width:600px;margin:0 auto}

/* Interstitials */
.interstitial{min-height:30vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.interstitial-text{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:0.8rem;letter-spacing:0.12em;color:#A8D4E6;opacity:0.6;position:relative;z-index:2}

/* Wave SVGs */
.wave-svg{position:absolute;width:100%;height:80px;top:50%;transform:translateY(-50%);opacity:0.4;z-index:1}
.wave-horizon{top:20%;opacity:0.2}

/* Epoch 5: Horizon */
.epoch-horizon{min-height:100vh;background:#0F2F3A;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(32px,6vw,64px);position:relative;overflow:hidden}
.horizon-text{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:clamp(2rem,5vw,4rem);letter-spacing:0.08em;line-height:1.15;color:#A8D4E6;text-align:center;max-width:20ch}
.horizon-brand{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:0.85rem;letter-spacing:0.12em;color:#A8D4E6;opacity:0.3;position:absolute;bottom:clamp(24px,4vw,48px)}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(20px) scale(0.96);transition:opacity 0.8s cubic-bezier(0.22,0.61,0.36,1),transform 0.8s cubic-bezier(0.22,0.61,0.36,1)}
[data-reveal].visible{opacity:1;transform:translateY(0) scale(1)}

/* Glass card reveal with stagger */
.glass-card[data-reveal]{transform:translateY(20px) scale(0.92);transition-delay:calc(var(--reveal-index,0) * 200ms)}

/* Epoch 3 divider warp */
.panel-divider.warped{clip-path:polygon(0% 0%,100% 0%,100% 25%,40% 50%,100% 75%,100% 100%,0% 100%);transition:clip-path 2s cubic-bezier(0.22,0.61,0.36,1)}

/* Color temperature per epoch on moving panel */
.mov-epoch-1{background:linear-gradient(180deg,rgba(242,232,213,0.03) 0%,transparent 100%)}
.mov-epoch-3{background:linear-gradient(180deg,transparent 0%,rgba(15,47,58,0.2) 100%)}
.mov-epoch-4{background:linear-gradient(180deg,rgba(15,47,58,0.3) 0%,rgba(15,47,58,0.5) 100%)}

/* Responsive */
@media(max-width:768px){
.split-container{grid-template-columns:1fr;gap:0}
.panel-observer{position:relative;height:auto;min-height:50vh}
.panel-divider{height:4px;width:100%}
.observer-epoch{position:relative;padding:clamp(24px,4vw,48px)}
.observer-epoch.active{opacity:1}
.epoch-nav{right:12px;gap:12px}
.glass-card-wide{max-width:100%}
}
@media(max-width:480px){
.epoch-nav{display:none}
.epoch-title{font-size:clamp(2rem,8vw,3rem)}
}