*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e27;color:#e8d5a3;font-family:'Epilogue',sans-serif;font-weight:300;font-size:clamp(0.95rem,1.8vw,1.15rem);line-height:1.72;overflow-x:hidden}

/* Abyss canvas */
#abyssCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* HUD frame */
.hud-frame{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud-corner{position:absolute}
.hud-tl{top:16px;left:16px}
.hud-tr{top:16px;right:16px}
.hud-bl{bottom:16px;left:16px}
.hud-br{bottom:16px;right:16px}
.hud-line{position:absolute;background:rgba(200,169,97,0.1)}
.hud-line-h{top:50%;left:0;right:0;height:1px}
.hud-line-v{left:50%;top:0;bottom:0;width:1px}
.hud-readout{position:absolute;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(200,169,97,0.6)}
.hud-depth{bottom:24px;left:24px}
.hud-signal{bottom:24px;right:24px}
.mono-label{color:rgba(200,169,97,0.4)}

/* Glitch layer */
.glitch-layer{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0}
.glitch-layer.active{opacity:1}
.glitch-red{position:absolute;inset:0;background:rgba(255,59,92,0.08);transform:translate(-3px,0);mix-blend-mode:screen}
.glitch-blue{position:absolute;inset:0;background:rgba(0,229,199,0.06);transform:translate(3px,0);mix-blend-mode:screen}
.glitch-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.03) 4px);animation:scanFlicker 0.15s steps(3) infinite}
@keyframes scanFlicker{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.4}}

/* Zones */
.zone{position:relative;z-index:20;padding:clamp(40px,8vw,100px) clamp(16px,4vw,48px)}
.zone-surface{min-height:100vh;display:flex;align-items:center;justify-content:center}
.zone-archive{min-height:400vh;display:flex;flex-direction:column;gap:clamp(60px,10vw,120px)}
.zone-signalloss{min-height:100vh;display:flex;flex-direction:column;gap:clamp(60px,10vw,120px)}

/* Content panels */
.content-panel{background:rgba(10,14,39,0.85);border:1px solid rgba(200,169,97,0.5);padding:clamp(28px,4vw,48px);position:relative;max-width:65vw;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.content-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,169,97,0.03) 0%,transparent 60%);pointer-events:none}

.content-panel h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);color:#e8eaf6;margin:8px 0 16px;position:relative}
.content-panel p{color:#e8d5a3;max-width:50ch}

/* Panel positioning */
.panel-hero{text-align:center;max-width:700px;margin:0 auto;transform:none !important}
.panel-offset-left{margin-left:15%;margin-right:auto}
.panel-offset-right{margin-left:auto;margin-right:15%}
.panel-offset-center{margin:0 auto;transform:rotate(0.5deg)}

/* Hero */
.hero-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.6rem,6.5vw,5rem);color:#e8eaf6;letter-spacing:0.04em;line-height:1.1;margin:16px 0;position:relative}

/* HUD label */
.hud-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(200,169,97,0.6);margin-bottom:8px;display:block}
.hud-label-warn{color:rgba(255,59,92,0.7)}

/* Filigree */
.filigree{width:100%;max-width:400px;height:20px;display:block;margin:0 auto}

/* Signal loss zone */
.panel-degraded{border-color:rgba(255,59,92,0.4);animation:borderFlicker 4s ease-in-out infinite}
@keyframes borderFlicker{0%,100%{border-color:rgba(200,169,97,0.5)}50%{border-color:rgba(255,59,92,0.6)}}

.panel-final{background:transparent;border:none;text-align:center;max-width:100%;margin:0 auto}
.closing-text{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);color:#e8eaf6;opacity:0.8}

/* Glitch text effect on hover */
[data-glitch-text]{position:relative;display:inline-block}
[data-glitch-text]:hover{animation:glitchText 0.3s steps(4) 1}
@keyframes glitchText{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(0)}}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}
/* Preserve rotation on reveal */
.panel-offset-left[data-reveal].visible{transform:translateY(0) rotate(-0.8deg)}
.panel-offset-right[data-reveal].visible:nth-child(2){transform:translateY(0) rotate(1.2deg)}
.panel-offset-center[data-reveal].visible{transform:translateY(0) rotate(0.5deg)}

/* Responsive */
@media(max-width:768px){
.content-panel{max-width:88vw;margin-left:auto !important;margin-right:auto !important}
.hud-corner{display:none}
.hud-line{display:none}
}
@media(max-width:480px){
.hero-title{font-size:clamp(2rem,8vw,3rem)}
}