/* holos.dev - Prismatic Totality */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --void:#07060D;
    --lavender:#9B8EC4;
    --recon-white:#E8E6F0;
    --cyan:#00E5CC;
    --magenta:#D946A8;
    --gold:#C8A832;
    --substrate:#1E1C28;
}

html{scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--recon-white);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Deep field wireframe */
.deep-field{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:0;
    filter:blur(1px);
    opacity:0.4;
    pointer-events:none;
}

.wireframe-ico{
    width:80vmin;
    height:80vmin;
    animation:icoRotate 120s linear infinite;
}

@keyframes icoRotate{
    from{transform:rotateY(0deg) rotateX(5deg)}
    to{transform:rotateY(360deg) rotateX(5deg)}
}

/* Near field spectral lines */
.near-field{
    position:fixed;
    inset:0;
    z-index:3;
    pointer-events:none;
    overflow:hidden;
}

.spectral-line{
    position:absolute;
    height:1px;
    background:var(--cyan);
    opacity:0.2;
    mix-blend-mode:screen;
}

.sl-1{width:120px;top:20%;left:-120px;animation:driftRight 20s linear infinite}
.sl-2{width:80px;top:40%;right:-80px;background:var(--magenta);animation:driftLeft 15s linear infinite}
.sl-3{width:160px;top:60%;left:-160px;animation:driftRight 25s linear infinite;opacity:0.15}
.sl-4{width:60px;top:75%;right:-60px;background:var(--gold);animation:driftLeft 18s linear infinite;opacity:0.25}
.sl-5{width:100px;top:85%;left:-100px;background:var(--magenta);animation:driftRight 22s linear infinite;opacity:0.15}

@keyframes driftRight{
    from{transform:translateX(0)}
    to{transform:translateX(calc(100vw + 200px))}
}

@keyframes driftLeft{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-100vw - 200px))}
}

/* Fixed domain label */
.fixed-domain{
    position:fixed;
    top:16px;left:16px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--lavender);
    letter-spacing:0.06em;
    z-index:50;
    opacity:0.7;
}

/* Scroll progress bar */
.scroll-progress{
    position:fixed;
    left:4px;
    top:20%;
    width:8px;
    height:60vh;
    background:var(--substrate);
    z-index:50;
    border-radius:4px;
    overflow:hidden;
}

.progress-fill{
    width:100%;
    height:0%;
    background:linear-gradient(180deg,var(--cyan),var(--magenta),var(--gold));
    border-radius:4px;
    transition:height 100ms linear;
}

/* Content field */
.content-field{
    position:relative;
    z-index:2;
}

/* Plate (section) base */
.plate{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,8vh,100px) clamp(24px,6vw,80px);
    position:relative;
}

/* Section labels (rotated left margin) */
.section-label{
    position:absolute;
    left:16px;
    top:50%;
    transform:rotate(-90deg) translateX(-50%);
    transform-origin:left center;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.06em;
    color:var(--lavender);
    opacity:0;
    transition:opacity 400ms ease;
}

.plate.in-focus .section-label{
    opacity:0.6;
}

/* Hero */
.hero-plate{
    flex-direction:column;
    gap:3rem;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:-0.02em;
    text-align:center;
    color:var(--recon-white);
    position:relative;
}

/* Chromatic aberration entrance */
.chromatic{
    text-shadow:
        3px -2px 0 rgba(0,229,204,0.4),
        -3px 2px 0 rgba(217,70,168,0.4);
    animation:chromaticResolve 1.5s ease-out forwards;
}

@keyframes chromaticResolve{
    0%{text-shadow:6px -4px 0 rgba(0,229,204,0.6),-6px 4px 0 rgba(217,70,168,0.6),0 0 0 rgba(200,168,50,0.4)}
    100%{text-shadow:0 0 0 rgba(0,229,204,0),0 0 0 rgba(217,70,168,0),0 0 0 rgba(200,168,50,0)}
}

.hero-pulse{
    width:clamp(120px,30vw,300px);
    height:1px;
    background:var(--cyan);
    animation:pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow{
    0%,100%{opacity:0.3}
    50%{opacity:0.7}
}

/* Chromatic divider */
.chromatic-divider{
    height:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    position:relative;
    z-index:2;
}

.cd-red,.cd-white,.cd-blue{
    display:block;
    width:clamp(100px,30vw,300px);
    height:1px;
}

.cd-red{background:var(--magenta);opacity:0.4}
.cd-white{background:var(--recon-white);opacity:0.3}
.cd-blue{background:var(--cyan);opacity:0.4}

/* Plate grid layout */
.plate-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:24px;
    width:100%;
    max-width:1100px;
    align-items:start;
}

.col-left{grid-column:2/7}
.col-right{grid-column:7/12}
.col-right-wide{grid-column:3/11}

/* Section headings */
.section-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:-0.02em;
    color:var(--recon-white);
    margin-bottom:1rem;
}

/* Body text */
.body-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.7;
    color:var(--recon-white);
    margin-bottom:1rem;
    max-width:60ch;
}

/* Focal content - sharpness/blur driven by JS */
.focal-content{
    opacity:0;
    transform:translateY(8px);
    transition:opacity 500ms ease,transform 500ms ease,filter 300ms ease;
}

.plate.in-focus .focal-content{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

.plate.out-focus .focal-content{
    opacity:0.85;
    filter:blur(0.5px);
}

/* Shapes grid */
.shapes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.shape-card{
    background:var(--substrate);
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    border:1px solid transparent;
    transition:border-color 200ms ease;
}

.shape-card:hover{
    border-color:var(--cyan);
}

.mini-shape{
    width:48px;height:48px;
    border:1px solid var(--lavender);
    animation:shapeRotate 12s linear infinite;
}

.cube-shape{transform:rotateX(30deg) rotateY(30deg)}
.tetra-shape{clip-path:polygon(50% 0%,0% 100%,100% 100%);border:none;border-bottom:1px solid var(--lavender);border-left:1px solid var(--lavender);border-right:1px solid var(--lavender)}
.octa-shape{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.dodeca-shape{clip-path:polygon(50% 0%,80% 10%,100% 40%,100% 70%,80% 100%,50% 100%,20% 100%,0% 70%,0% 40%,20% 10%)}

@keyframes shapeRotate{
    from{transform:rotateY(0deg)}
    to{transform:rotateY(360deg)}
}

.shape-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    color:var(--lavender);
    letter-spacing:0.06em;
}

/* Interference section */
.interference-plate{
    flex-direction:column;
}

.interference-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 30% 40%,rgba(0,229,204,0.06),transparent 50%),
        radial-gradient(ellipse at 70% 60%,rgba(217,70,168,0.06),transparent 50%);
    pointer-events:none;
    z-index:0;
}

.plate-center{
    max-width:700px;
    position:relative;
    z-index:1;
}

/* Signal plate */
.signal-plate{
    min-height:60vh;
}

.signal-text{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    color:var(--lavender);
    letter-spacing:0.06em;
    text-align:center;
}

/* Responsive */
@media(max-width:768px){
    .plate-grid{
        grid-template-columns:1fr;
    }
    .col-left,.col-right,.col-right-wide{
        grid-column:1;
    }
    .shapes-grid{
        grid-template-columns:1fr 1fr;
    }
    .scroll-progress{display:none}
    .section-label{display:none}
    .wireframe-ico{width:100vmin}
}