*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#c8dce8;font-family:'Space Mono',monospace;font-weight:400;font-size:clamp(0.875rem,1.8vw,1.05rem);line-height:1.7;letter-spacing:0.02em;overflow-x:hidden;min-height:100vh}

/* Scanlines overlay */
.scanlines{position:fixed;inset:0;z-index:100;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(126,184,218,0.03) 2px,rgba(126,184,218,0.03) 3px);transition:opacity 0.5s ease}
.scanlines.intense{background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(126,184,218,0.12) 2px,rgba(126,184,218,0.12) 3px)}
.noise-overlay{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:0;transition:opacity 0.15s ease;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOUlEQVQYV2P4z8DwHwMNMDAwMGCThQkyCUIFYRIgPhSGKYJpwKoIpgGnIpgGvIrQNRBUhK4BryIAN1EM/xl8tEoAAAAASUVORK5CYII=") repeat}
.noise-overlay.flash{opacity:0.03}

/* Margin glyphs */
.margin-glyphs{position:fixed;left:0;top:0;width:10%;max-width:80px;height:100vh;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:40px 0}
.star-glyph{width:20px;height:20px}
.pulse-a{animation:starPulse 5s ease-in-out infinite}
.pulse-b{animation:starPulse 6.5s ease-in-out infinite 1.2s}
.pulse-c{animation:starPulse 4s ease-in-out infinite 2.8s}
@keyframes starPulse{0%,100%{opacity:0.4}50%{opacity:1}}

/* Scroll indicator */
.scroll-indicator{position:fixed;right:8px;top:10%;height:80%;width:3px;background:rgba(126,184,218,0.1);z-index:20;border-radius:2px;cursor:pointer}
.scroll-fill{width:100%;height:0%;background:#7eb8da;border-radius:2px;transition:height 0.2s ease,box-shadow 0.3s ease}

/* Hero */
.hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:16px}
.hero-title{font-family:'Space Mono',monospace;font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:0.12em;text-transform:uppercase;color:#c8dce8;overflow:hidden;white-space:nowrap;border-right:2px solid #7eb8da;width:0;animation:none}
.hero-title.typing{animation:typewriter 0.8s steps(12) forwards,blinkCaret 0.6s step-end 4}
.hero-title.typed{width:auto;border-right:none}
.hero-subtitle{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-0.01em;color:#a3cfe0;opacity:0;transition:opacity 2s ease}
.hero-subtitle.visible{opacity:0.6}
.hero-star{width:24px;height:24px;margin-top:24px;opacity:0;transition:opacity 1s ease}
.hero-star.visible{opacity:1}
@keyframes typewriter{0%{width:0}100%{width:100%}}
@keyframes blinkCaret{50%{border-color:transparent}}

/* Glitch effect */
.glitch-active{animation:textGlitch 0.2s steps(2) 1}
@keyframes textGlitch{0%{transform:translateX(0);clip-path:inset(0)}25%{transform:translateX(3px);clip-path:inset(10% 0 60% 0)}50%{transform:translateX(-2px);clip-path:inset(40% 0 20% 0)}75%{transform:translateX(1px);clip-path:inset(0)}100%{transform:translateX(0);clip-path:inset(0)}}

/* Specimen sections */
.specimen-section{min-height:100vh;position:relative;padding:10vh 12% 10vh 12%;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2.5rem);align-items:center}

/* Specimen 01 */
#specimen-01 .annotation-col{grid-column:1/5;grid-row:1;transform:rotate(1deg)}
#specimen-01 .blob-container{grid-column:5/13;grid-row:1;justify-self:center}

/* Specimen 02 */
#specimen-02 .annotation-top{grid-column:1/13;grid-row:1;align-self:start}
#specimen-02 .panel-stack{grid-column:7/13;grid-row:2;display:flex;flex-direction:column;gap:40px}

/* Specimen 03 */
.specimen-section.wide{padding-left:8%;padding-right:8%}
#specimen-03 .wide-panel{grid-column:1/13;transform:rotate(-1.5deg);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#0f1e2b;padding:40px;border:1px solid rgba(126,184,218,0.15);box-shadow:2px 1px 0 #d64f8c}

/* Specimen 04 */
.specimen-section.minimal{display:flex;flex-direction:column;align-items:center;justify-content:center}
.blob-centered{position:relative;z-index:2}
.scatter-annotations{position:absolute;inset:0;z-index:3;pointer-events:none}
.scatter-note{position:absolute;font-family:'Space Mono',monospace;font-size:0.8rem;color:#c8dce8;opacity:0.5;letter-spacing:0.02em}
.scatter-note.amber{color:#d4a853}
.specimen-name.centered{margin-top:40px;position:relative;z-index:2}

/* Annotation strips */
.annotation-strip{font-family:'Space Mono',monospace;font-size:0.8rem;letter-spacing:0.05em;color:#7eb8da;display:block;margin-bottom:8px;text-transform:uppercase}
.annotation-strip.amber{color:#d4a853;text-decoration:line-through;text-decoration-color:rgba(212,168,83,0.4)}
.specimen-text{font-size:clamp(0.875rem,1.8vw,1.05rem);line-height:1.7;color:#c8dce8;max-width:50ch;margin:12px 0}
.specimen-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(2rem,5vw,4rem);letter-spacing:-0.01em;color:#a3cfe0;display:block;margin-top:16px}

/* Organic blobs */
.blob{position:relative;width:clamp(200px,40vw,500px);height:clamp(200px,40vw,500px)}
.blob::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:3px 2px 0 rgba(214,79,140,0.3);z-index:-1}
.blob-inner{position:absolute;inset:0;transition:border-radius 3s ease-in-out}

/* Blob 01 */
.blob-01{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;animation:blobMorph01 20s ease-in-out infinite}
.b01-a{background:rgba(62,201,167,0.15);border-radius:40% 60% 50% 50%/60% 40% 60% 40%;animation:blobMorph01b 18s ease-in-out infinite}
.b01-b{background:rgba(126,184,218,0.1);border-radius:50% 50% 30% 70%/40% 60% 40% 60%;animation:blobMorph01c 22s ease-in-out infinite;inset:10%}
@keyframes blobMorph01{0%,100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}33%{border-radius:50% 50% 40% 60%/60% 40% 50% 50%}66%{border-radius:40% 60% 60% 40%/50% 50% 40% 60%}}
@keyframes blobMorph01b{0%,100%{border-radius:40% 60% 50% 50%/60% 40% 60% 40%}50%{border-radius:60% 40% 40% 60%/40% 60% 40% 60%}}
@keyframes blobMorph01c{0%,100%{border-radius:50% 50% 30% 70%/40% 60% 40% 60%}50%{border-radius:30% 70% 50% 50%/60% 40% 60% 40%}}

/* Blob 02 */
.blob-02{width:clamp(140px,20vw,280px);height:clamp(140px,20vw,280px);border-radius:60% 40% 50% 50%/50% 60% 40% 60%;animation:blobMorph02 16s ease-in-out infinite}
.b02-a{background:rgba(62,201,167,0.2);border-radius:50% 50% 40% 60%/60% 40% 60% 40%;animation:blobMorph02b 14s ease-in-out infinite}
.b02-b{background:rgba(126,184,218,0.12);border-radius:40% 60% 60% 40%/50% 50% 50% 50%;inset:15%;animation:blobMorph02c 18s ease-in-out infinite}
@keyframes blobMorph02{0%,100%{border-radius:60% 40% 50% 50%/50% 60% 40% 60%}50%{border-radius:40% 60% 40% 60%/60% 40% 60% 40%}}
@keyframes blobMorph02b{0%,100%{border-radius:50% 50% 40% 60%/60% 40% 60% 40%}50%{border-radius:40% 60% 60% 40%/40% 60% 40% 60%}}
@keyframes blobMorph02c{0%,100%{border-radius:40% 60% 60% 40%/50% 50% 50% 50%}50%{border-radius:60% 40% 40% 60%/50% 50% 50% 50%}}

.blob-02b{width:clamp(100px,15vw,200px);height:clamp(100px,15vw,200px);border-radius:50% 50% 60% 40%/40% 60% 40% 60%;animation:blobMorph02 18s ease-in-out infinite reverse}
.b02b-a{background:rgba(62,201,167,0.18);border-radius:60% 40% 40% 60%/50% 50% 50% 50%;animation:blobMorph02b 15s ease-in-out infinite reverse}

/* Blob 03 */
.blob-03{width:clamp(160px,25vw,320px);height:clamp(160px,25vw,320px);border-radius:45% 55% 60% 40%/55% 45% 55% 45%;animation:blobMorph03 20s ease-in-out infinite}
.b03-a{background:rgba(62,201,167,0.2);border-radius:55% 45% 40% 60%/45% 55% 45% 55%;animation:blobMorph03b 17s ease-in-out infinite}
.b03-b{background:rgba(126,184,218,0.1);border-radius:40% 60% 55% 45%/60% 40% 60% 40%;inset:10%;animation:blobMorph03c 22s ease-in-out infinite}
.b03-c{background:rgba(163,207,224,0.08);border-radius:50% 50% 45% 55%/55% 45% 55% 45%;inset:20%;animation:blobMorph03b 25s ease-in-out infinite reverse}
@keyframes blobMorph03{0%,100%{border-radius:45% 55% 60% 40%/55% 45% 55% 45%}33%{border-radius:55% 45% 45% 55%/45% 55% 45% 55%}66%{border-radius:50% 50% 55% 45%/50% 50% 50% 50%}}
@keyframes blobMorph03b{0%,100%{border-radius:55% 45% 40% 60%/45% 55% 45% 55%}50%{border-radius:45% 55% 55% 45%/55% 45% 55% 45%}}
@keyframes blobMorph03c{0%,100%{border-radius:40% 60% 55% 45%/60% 40% 60% 40%}50%{border-radius:60% 40% 45% 55%/40% 60% 40% 60%}}

.blob-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.orbital-ring{position:absolute;width:120%;height:120%;animation:orbitSpin 30s linear infinite}
.ring-b{animation:orbitSpin 40s linear infinite reverse}
@keyframes orbitSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.text-wrap{display:flex;flex-direction:column;gap:8px}

/* Blob 04 */
.blob-04{width:clamp(250px,50vw,600px);height:clamp(250px,50vw,600px);border-radius:35% 65% 55% 45%/50% 50% 50% 50%;animation:blobMorph04 24s ease-in-out infinite}
.b04-a{background:rgba(62,201,167,0.18);border-radius:55% 45% 45% 55%/45% 55% 55% 45%;animation:blobMorph04b 20s ease-in-out infinite}
.b04-b{background:rgba(126,184,218,0.12);border-radius:45% 55% 55% 45%/55% 45% 45% 55%;inset:12%;animation:blobMorph04c 18s ease-in-out infinite}
.b04-c{background:rgba(163,207,224,0.06);border-radius:50% 50% 40% 60%/60% 40% 50% 50%;inset:25%;animation:blobMorph04b 28s ease-in-out infinite reverse}
@keyframes blobMorph04{0%,100%{border-radius:35% 65% 55% 45%/50% 50% 50% 50%}33%{border-radius:55% 45% 35% 65%/45% 55% 55% 45%}66%{border-radius:45% 55% 50% 50%/55% 45% 45% 55%}}
@keyframes blobMorph04b{0%,100%{border-radius:55% 45% 45% 55%/45% 55% 55% 45%}50%{border-radius:45% 55% 55% 45%/55% 45% 45% 55%}}
@keyframes blobMorph04c{0%,100%{border-radius:45% 55% 55% 45%/55% 45% 45% 55%}50%{border-radius:55% 45% 45% 55%/45% 55% 55% 45%}}

.blob-container.small .blob{width:clamp(140px,20vw,280px);height:clamp(140px,20vw,280px)}
.blob-container.small .specimen-name{font-size:clamp(1.4rem,3vw,2.5rem)}

/* Stagger reveal */
[data-stagger]{opacity:0;transition:opacity 0.8s cubic-bezier(0.34,1.56,0.64,1),transform 0.8s cubic-bezier(0.34,1.56,0.64,1)}
[data-stagger].visible{opacity:1;transform:translate(0,0) !important}
[data-enter="left"] [data-stagger]{transform:translateX(-100vw)}
[data-enter="right"] [data-stagger]{transform:translateX(100vw)}
[data-enter="bottom"] [data-stagger]{transform:translateY(50vh)}
[data-stagger]:nth-child(1){transition-delay:0s}
[data-stagger]:nth-child(2){transition-delay:0.12s}
[data-stagger]:nth-child(3){transition-delay:0.24s}

/* Panel backgrounds */
#specimen-01 .blob-container,#specimen-02 .panel-stack .blob-container{background:#0f1e2b;padding:32px;border:1px solid rgba(126,184,218,0.15);box-shadow:2px 1px 0 rgba(214,79,140,0.3)}
#specimen-01 .blob-container{transform:rotate(2deg)}
#specimen-02 .panel-stack .blob-container:first-child{transform:rotate(-1deg)}
#specimen-02 .panel-stack .blob-container:last-child{transform:rotate(1.5deg);margin-left:-20%}

/* Palette refs */
.ref-void{color:#0a0e1a}
.ref-frost{color:#c8dce8}
.ref-ethereal{color:#7eb8da}
.ref-cerulean{color:#a3cfe0}
.ref-magenta{color:#d64f8c}
.ref-midnight{color:#0f1e2b}
.ref-cyan{color:#3ec9a7}
.ref-amber{color:#d4a853}

@media(max-width:768px){
.margin-glyphs{display:none}
.specimen-section{grid-template-columns:1fr;padding:8vh 6%}
#specimen-01 .annotation-col,#specimen-01 .blob-container,#specimen-02 .annotation-top,#specimen-02 .panel-stack{grid-column:1/-1;grid-row:auto}
#specimen-01 .annotation-col{transform:none}
#specimen-01 .blob-container{transform:none}
#specimen-03 .wide-panel{grid-template-columns:1fr;transform:none}
.blob{width:clamp(160px,70vw,300px) !important;height:clamp(160px,70vw,300px) !important}
}