/* eyes.team - Dopamine Maximalist Optical Descent */
/* Palette: Void Black #08080F | Retinal White #F0F2F8 | Electric Cyan #00F0FF | Optic Magenta #E8318A | Iris Violet #7B2FBE | Sclera Gray #B0B8C8 | Cornea Mist #3A3A4A | Photon Burst #CCFF00 */

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

:root{
    --void:#08080F;
    --retinal-white:#F0F2F8;
    --cyan:#00F0FF;
    --magenta:#E8318A;
    --violet:#7B2FBE;
    --sclera:#B0B8C8;
    --mist:#3A3A4A;
    --photon:#CCFF00;
}

html{scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--sclera);
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(0.95rem,1.4vw,1.15rem);
    line-height:1.72;
    letter-spacing:0.02em;
    overflow-x:hidden;
}

/* CRT Scan lines */
.scanlines{
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(transparent 0px,transparent 1px,rgba(0,240,255,0.03) 1px,rgba(0,240,255,0.03) 2px);
    pointer-events:none;
    z-index:1000;
    mix-blend-mode:screen;
}

/* Nav dots */
.nav-dots{
    position:fixed;
    bottom:2rem;
    right:2rem;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:0.6rem;
}

.dot{
    width:8px;height:8px;
    border-radius:50%;
    border:none;
    background:var(--mist);
    cursor:pointer;
    transition:background 300ms ease-out,box-shadow 300ms ease-out;
    padding:0;
}

.dot.active{
    background:var(--cyan);
    box-shadow:0 0 8px rgba(0,240,255,0.6);
}

/* Layer base */
.layer{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    overflow:hidden;
}

.layer-label{
    position:absolute;
    bottom:1rem;left:1.5rem;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(0.6rem,0.9vw,0.8rem);
    font-weight:700;
    letter-spacing:0.15em;
    color:var(--mist);
    text-transform:uppercase;
}

.layer-label.inverted{color:var(--mist)}

/* === LAYER 1: CORNEA === */
.layer-cornea{background:var(--void)}

.cornea-frost{
    position:absolute;
    inset:0;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    background:rgba(8,8,15,0.4);
    transition:backdrop-filter 0.3s linear,-webkit-backdrop-filter 0.3s linear;
    z-index:2;
}

.hero-domain{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(15vw,20vw,30vw);
    font-weight:400;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--retinal-white);
    position:relative;
    z-index:1;
    text-shadow:0 0 40px rgba(0,240,255,0.15);
}

/* === LAYER 2: IRIS === */
.layer-iris{background:var(--void)}

.iris-rings{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.iris-svg{
    width:min(90vw,90vh);
    height:min(90vw,90vh);
}

.ring{
    fill:none;
    stroke-width:1.5;
    will-change:transform;
}

.ring-cw{animation:rotateCW var(--speed) linear infinite}
.ring-ccw{animation:rotateCCW var(--speed) linear infinite}

@keyframes rotateCW{
    from{transform-origin:400px 400px;transform:rotate(0deg)}
    to{transform-origin:400px 400px;transform:rotate(360deg)}
}

@keyframes rotateCCW{
    from{transform-origin:400px 400px;transform:rotate(360deg)}
    to{transform-origin:400px 400px;transform:rotate(0deg)}
}

.pupil-center{
    width:8vw;height:8vw;
    border-radius:50%;
    background:var(--void);
    position:absolute;
    box-shadow:0 0 60px 30px rgba(8,8,15,0.9);
    z-index:5;
    animation:pupilDilate 4s cubic-bezier(0.4,0,0.2,1) infinite;
}

@keyframes pupilDilate{
    0%,100%{width:8vw;height:8vw}
    50%{width:14vw;height:14vw}
}

/* === LAYER 3: PUPIL === */
.layer-pupil{background:var(--void)}

.pupil-light{
    position:absolute;
    width:10vw;height:10vw;
    border-radius:50%;
    background:radial-gradient(circle,transparent 0%,var(--void) 100%);
    box-shadow:0 0 100px 60px rgba(0,240,255,0.05);
    transition:width 0.5s ease,height 0.5s ease;
}

.pupil-text{
    position:relative;
    z-index:10;
    max-width:600px;
    text-align:center;
}

.typewriter-text{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.2rem,3vw,2.4rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cyan);
}

.typewriter-text .char{
    opacity:0;
    transition:opacity 0.1s ease;
}

.typewriter-text .char.visible{opacity:1}

/* === LAYER 4: LENS === */
.layer-lens{
    background:var(--void);
    position:relative;
}

.lens-element{
    position:absolute;
    transition:filter 0.3s ease;
}

.lens-bg{
    top:10%;right:10%;
    filter:blur(4px);
    opacity:0.5;
}

.lens-fg{
    bottom:15%;left:15%;
    filter:blur(0);
}

.lens-diagram{width:300px;height:150px}

.draw-path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 1.8s cubic-bezier(0.65,0,0.35,1);
}

.draw-path.visible{stroke-dashoffset:0}

.lens-content{
    max-width:500px;
    position:relative;
    z-index:10;
    padding:0 2rem;
}

.section-heading{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.2rem,3vw,2.4rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--retinal-white);
    margin-bottom:1rem;
}

.body-text{
    color:var(--sclera);
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
}

.orb-label{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(0.6rem,0.9vw,0.8rem);
    font-weight:700;
    color:var(--cyan);
    letter-spacing:0.15em;
    opacity:0.7;
}

/* === LAYER 5: VITREOUS === */
.layer-vitreous{
    background:var(--void);
    min-height:150vh;
}

#particleCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
}

.vitreous-content{
    position:relative;
    z-index:10;
    max-width:500px;
    padding:0 2rem;
}

.sticky-text{
    position:sticky;
    top:40vh;
}

/* === LAYER 6: RETINA === */
.layer-retina{
    background:var(--retinal-white);
    color:var(--void);
}

.retina-grid{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.retina-content{
    position:relative;
    z-index:10;
    max-width:600px;
    text-align:center;
    padding:0 2rem;
}

.retina-heading{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.2rem,3vw,2.4rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--void);
    margin-bottom:1.5rem;
}

.retina-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    color:#3A3A4A;
    margin-bottom:2rem;
}

.retina-closing{
    font-family:'Share Tech Mono',monospace;
    font-size:clamp(1.5rem,4vw,3rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--void);
    text-shadow:0 0 30px rgba(0,240,255,0.2);
}

/* Responsive */
@media(max-width:768px){
    .hero-domain{font-size:clamp(12vw,18vw,25vw)}
    .nav-dots{bottom:1rem;right:1rem}
    .ring:nth-child(n+7){display:none}
}