/* eyes.cash - Ophthalmological Luxury Interface */
/* Palette: Sclera Black #0A0505 | Vitreous Dark #1A0F14 | Retinal Amber #C4841D | Corneal Gold #E8B931 | Fundus Red #3D0C02 | Slit-lamp Teal #1B6B6F | Retina White #F0E6D8 | Iris Gray #4A3F3A */

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

:root{
    --sclera:#0A0505;
    --vitreous:#1A0F14;
    --amber:#C4841D;
    --gold:#E8B931;
    --fundus:#3D0C02;
    --teal:#1B6B6F;
    --retina-white:#F0E6D8;
    --iris-gray:#4A3F3A;
    --ease-aperture:cubic-bezier(0.2,0,0,1);
    --ease-lens:cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth}

body{
    background:var(--sclera);
    color:var(--retina-white);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

.section{
    min-height:100vh;
    position:relative;
    overflow:hidden;
}

/* Slit-lamp scan beam */
.slit-lamp-beam{
    position:fixed;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,transparent 10%,rgba(27,107,111,0.3) 50%,transparent 90%);
    z-index:50;
    pointer-events:none;
    animation:slitScan 20s linear infinite;
}

@keyframes slitScan{
    0%{top:-2px}
    100%{top:100vh}
}

/* === HERO SECTION === */
.hero-section{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.iris-pattern{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    animation:irisReveal 1.5s ease forwards 0.8s;
}

@keyframes irisReveal{to{opacity:1}}

.iris-ring{
    width:min(90vw,90vh);
    height:min(90vw,90vh);
    border-radius:50%;
    background:repeating-conic-gradient(
        from 0deg,
        rgba(196,132,29,0.03) 0deg,
        rgba(196,132,29,0.08) 0.5deg,
        transparent 1deg,
        transparent 2deg
    );
    position:relative;
    animation:irisRotate 720s linear infinite;
}

@keyframes irisRotate{to{transform:rotate(360deg)}}

.pupil-void{
    position:absolute;
    width:15%;
    height:15%;
    border-radius:50%;
    background:var(--sclera);
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 80px 40px rgba(10,5,5,0.8);
}

.hero-content{
    position:relative;
    z-index:10;
    text-align:center;
    opacity:0;
    animation:fadeIn 2s ease forwards 2s;
}

@keyframes fadeIn{to{opacity:1}}

.hero-title{display:flex;align-items:baseline;justify-content:center;gap:0}

.hero-eyes{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--retina-white);
}

.hero-dot{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    color:var(--amber);
}

.hero-cash{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:clamp(2.5rem,6vw,5.5rem);
    color:var(--gold);
    letter-spacing:-0.02em;
}

.hero-tagline{
    font-family:'DM Sans',sans-serif;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    color:var(--iris-gray);
    margin-top:1.5rem;
    letter-spacing:0.08em;
}

/* === ACUITY SECTION === */
.acuity-section{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--vitreous);
}

.acuity-chart{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2.5rem;
    padding:4rem 2rem;
    max-width:800px;
}

.acuity-line{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--retina-white);
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 1.2s var(--ease-lens),transform 1.2s var(--ease-lens);
}

.acuity-line.visible{opacity:1;transform:translateY(0)}

.line-1{font-size:clamp(2.8rem,6vw,5rem)}
.line-2{font-size:clamp(2rem,4vw,3.5rem)}
.line-3{font-size:clamp(1.4rem,2.5vw,2rem);font-family:'DM Sans',sans-serif;font-weight:500;text-transform:none;letter-spacing:0.01em}
.line-4{font-size:clamp(0.95rem,1.5vw,1.15rem);font-family:'DM Sans',sans-serif;font-weight:400;text-transform:none;letter-spacing:0.01em;max-width:600px;color:var(--iris-gray)}
.line-5{font-size:clamp(0.8rem,1.2vw,0.95rem);font-family:'DM Sans',sans-serif;font-weight:400;text-transform:none;letter-spacing:0.01em;max-width:500px;color:var(--iris-gray);opacity:0.7}

/* === STEREO SECTION === */
.stereo-section{
    display:flex;
    min-height:100vh;
    position:relative;
}

.stereo-left,.stereo-right{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:4rem clamp(2rem,4vw,4rem);
    gap:3rem;
}

.stereo-divider{
    width:1px;
    background:var(--fundus);
    position:relative;
    display:flex;
    align-items:center;
}

.lens-bridge{
    width:16px;height:16px;
    border-radius:50%;
    border:1px solid var(--amber);
    background:var(--sclera);
    position:absolute;
    left:-7.5px;
    top:50%;
    transform:translateY(-50%);
}

.stereo-heading{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1rem,2vw,1.4rem);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--amber);
    margin-bottom:0.5rem;
}

.stereo-text{
    color:var(--retina-white);
    font-size:clamp(0.9rem,1.5vw,1.05rem);
}

.pair-fade{
    opacity:0;
    transform:translateX(-20px);
    transition:opacity 800ms var(--ease-lens),transform 800ms var(--ease-lens);
}

.stereo-right .pair-fade{transform:translateX(20px)}

.pair-fade.visible{opacity:1;transform:translateX(0)}

/* === FUNDUS SECTION === */
.fundus-section{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sclera);
}

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

.vein-svg{width:100%;height:100%;max-width:800px}

.vein-path{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    transition:stroke-dashoffset 3s var(--ease-lens);
}

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

.retinal-frame{
    width:min(400px,70vw);
    height:min(400px,70vw);
    border-radius:50%;
    border:2px solid var(--amber);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 35% 40%,rgba(196,132,29,0.05) 0%,transparent 40%),var(--sclera);
    z-index:2;
}

.optic-disc{
    position:absolute;
    width:40px;height:40px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(232,185,49,0.15) 0%,transparent 70%);
    left:35%;top:40%;
    transform:translate(-50%,-50%);
}

.fundus-node{
    position:absolute;
    font-family:'Orbitron',sans-serif;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    text-shadow:0 0 10px rgba(232,185,49,0.3);
    opacity:0;
    transition:opacity 1s var(--ease-lens);
}

.fundus-node.visible{opacity:1}

.node-1{top:20%;left:25%}
.node-2{top:35%;right:18%}
.node-3{bottom:25%;left:20%}
.node-4{bottom:20%;right:22%}

/* === BLINK SECTION === */
.blink-section{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sclera);
}

.eyelid-line{
    position:absolute;
    top:50%;left:10%;right:10%;
    height:1px;
    background:var(--iris-gray);
    opacity:0.3;
    transform:scaleX(0);
    transition:transform 1.5s var(--ease-lens);
}

.eyelid-line.visible{transform:scaleX(1)}

.refraction-text{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2rem,5vw,4rem);
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-align:center;
}

.refraction-word{
    display:inline-block;
    opacity:0;
    transition:opacity 0.6s var(--ease-lens);
    margin:0 0.3em;
}

.refraction-word.visible{opacity:1}
.refraction-word.amber{color:var(--amber)}
.refraction-word.teal{color:var(--teal)}

/* === PRESCRIPTION SECTION === */
.prescription-section{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--vitreous);
    position:relative;
}

.watermark-bg{
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        30deg,
        transparent,
        transparent 80px,
        rgba(196,132,29,0.015) 80px,
        rgba(196,132,29,0.015) 82px
    );
    pointer-events:none;
}

.prescription-card{
    background:var(--vitreous);
    border:1px solid var(--iris-gray);
    padding:clamp(2rem,4vw,3.5rem);
    max-width:500px;
    width:90%;
    position:relative;
    z-index:2;
}

.rx-header{
    display:flex;
    align-items:baseline;
    gap:1rem;
    margin-bottom:2rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--fundus);
}

.rx-symbol{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:2rem;
    color:var(--gold);
}

.rx-title{
    font-family:'Orbitron',sans-serif;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--retina-white);
}

.rx-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:2rem;
}

.rx-table th,.rx-table td{
    padding:0.75rem 1rem;
    text-align:left;
    border-bottom:1px solid rgba(74,63,58,0.3);
}

.rx-table th{
    font-family:'Orbitron',sans-serif;
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--iris-gray);
}

.rx-table td{
    font-family:'DM Sans',sans-serif;
    font-size:0.95rem;
    color:var(--retina-white);
}

.rx-eye{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    color:var(--amber);
    font-size:0.85rem;
    letter-spacing:0.1em;
}

.rx-note{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:1.1rem;
    color:var(--gold);
    text-align:center;
}

/* Aperture blades (decorative overlay) */
.aperture-blades{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

/* Links */
a{color:var(--teal);text-decoration:none;transition:color 400ms var(--ease-lens)}
a:hover{color:var(--gold)}

/* Responsive */
@media(max-width:768px){
    .stereo-section{flex-direction:column}
    .stereo-divider{width:100%;height:1px;flex:0 0 1px}
    .lens-bridge{top:-7.5px;left:50%;transform:translateX(-50%)}
    .pair-fade{transform:translateY(10px)}
    .stereo-right .pair-fade{transform:translateY(10px)}
}