/* eyes.plus - Optic-Luxe Optical Journey */
/* Palette: Obsidian #0f1117 | Graphite #1a1d27 | Slate Glass #252833 | Silver Mist #3a3f4e | Cool Ash #9ca3af | Frost White #e8ecf1 | Iris Blue #6b8cce | Blush Rose #d4a0a0 | Prism Violet #8b7fc7 | Lens Green #7cc8a0 */

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

:root{
    --obsidian:#0f1117;
    --graphite:#1a1d27;
    --slate:#252833;
    --silver:#3a3f4e;
    --ash:#9ca3af;
    --frost:#e8ecf1;
    --iris-blue:#6b8cce;
    --blush:#d4a0a0;
    --violet:#8b7fc7;
    --green:#7cc8a0;
    --spring:linear(0,0.006,0.025,0.058,0.104,0.162,0.231,0.309,0.395,0.486,0.578,0.669,0.754,0.832,0.899,0.954,0.995,1.022,1.037,1.042,1.037,1.025,1.01,0.995,0.984,0.977,0.975,0.977,0.982,0.989,0.996,1.001,1.003,1.003,1.001,1);
    --ease-smooth:cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth}

body{
    background:var(--obsidian);
    color:var(--ash);
    font-family:'Nunito',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

.chamber{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/* === CHAMBER 1: APERTURE === */
.chamber-aperture{background:var(--obsidian)}

.iris-gradient{
    position:absolute;
    width:min(90vw,90vh);
    height:min(90vw,90vh);
    border-radius:50%;
    background:radial-gradient(ellipse at center,#6b8cce 0%,#8b7fc7 35%,#0f1117 70%);
    opacity:0;
    animation:irisOpen 1.2s var(--ease-smooth) 0.4s forwards;
    transition:transform 0.3s linear;
}

@keyframes irisOpen{
    from{opacity:0;transform:scale(0.3)}
    to{opacity:1;transform:scale(1)}
}

.hero-content{
    position:relative;
    z-index:10;
    text-align:center;
}

.hero-title{
    font-family:'Quicksand',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    font-weight:700;
    color:var(--frost);
    letter-spacing:0.06em;
    line-height:1.1;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

.h-char{
    display:inline-block;
    opacity:0;
    transform:translateY(20px);
    animation:charIn 600ms var(--spring) forwards;
    animation-delay:calc(1.6s + var(--i) * 80ms);
}

@keyframes charIn{
    to{opacity:1;transform:translateY(0)}
}

.plus-glow{
    text-shadow:0 0 20px rgba(107,140,206,0.6);
    animation:charIn 600ms var(--spring) forwards,plusPulse 2s ease-in-out infinite 3s;
    animation-delay:calc(1.6s + var(--i) * 80ms);
}

@keyframes plusPulse{
    0%,100%{text-shadow:0 0 20px rgba(107,140,206,0.4)}
    50%{text-shadow:0 0 30px rgba(107,140,206,0.8)}
}

.hero-tagline{
    font-family:'Comfortaa',sans-serif;
    font-weight:300;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--ash);
    margin-top:1.5rem;
    opacity:0;
    animation:fadeIn 800ms var(--ease-smooth) 2.6s forwards;
}

@keyframes fadeIn{to{opacity:1}}

/* === CHAMBER 2: REFRACTION === */
.chamber-refraction{
    flex-direction:column;
    padding:20vh 5vw;
    min-height:auto;
}

.iris-watermark{
    position:absolute;
    width:80vw;height:80vw;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(107,140,206,0.03) 0%,transparent 60%);
    pointer-events:none;
}

.glass-cards{
    display:flex;
    flex-direction:column;
    gap:4rem;
    max-width:600px;
    width:90%;
    z-index:2;
}

.glass-card{
    background:rgba(37,40,51,0.6);
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:1.2rem;
    padding:clamp(1.5rem,3vw,2.5rem);
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    opacity:0;
    transform:translateY(40px) rotate(2deg);
    transition:opacity 800ms var(--spring),transform 800ms var(--spring),border-color 400ms ease;
    position:relative;
    overflow:hidden;
}

.glass-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:1.2rem;
    background:radial-gradient(circle at var(--flare-x,50%) var(--flare-y,50%),rgba(107,140,206,0.08),transparent 60%);
    opacity:0;
    transition:opacity 300ms ease;
    pointer-events:none;
}

.glass-card:hover::before{opacity:1}
.glass-card:hover{border-color:rgba(107,140,206,0.2);transform:translateY(-4px) rotate(0deg)}

.glass-card.visible{
    opacity:1;
    transform:translateY(0) rotate(0deg);
}

.card-tilt-right{transform:translateY(40px) rotate(-2deg)}
.card-tilt-right.visible{transform:translateY(0) rotate(0deg)}

.card-heading{
    font-family:'Quicksand',sans-serif;
    font-size:clamp(1.3rem,2.5vw,2.2rem);
    font-weight:500;
    color:var(--frost);
    letter-spacing:0.06em;
    line-height:1.1;
    margin-bottom:1rem;
}

.card-body{
    color:var(--ash);
}

/* === CHAMBER 3: PRISM === */
.chamber-prism{
    flex-direction:column;
    padding:10vh 0;
    min-height:120vh;
}

.prism-line{
    width:60vw;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--frost),transparent);
    margin-bottom:4rem;
    opacity:0.6;
}

.spectral-bands{
    display:flex;
    flex-direction:column;
    width:65vw;
    gap:0;
}

.band{
    height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:height 800ms var(--spring);
    mix-blend-mode:screen;
}

.band.visible{height:clamp(3rem,6vh,5rem)}

.band-label{
    font-family:'Comfortaa',sans-serif;
    font-weight:300;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--frost);
    opacity:0.9;
}

.band-red{background:rgba(212,64,64,0.15);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
.band-orange{background:rgba(212,160,64,0.15);clip-path:polygon(0 0,97% 0,100% 100%,3% 100%)}
.band-yellow{background:rgba(160,212,64,0.15);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
.band-green{background:rgba(64,212,160,0.15);clip-path:polygon(0 0,98% 0,100% 100%,2% 100%)}
.band-cyan{background:rgba(64,160,212,0.15);clip-path:polygon(3% 0,100% 0,97% 100%,0 100%)}
.band-blue{background:rgba(64,128,212,0.15);clip-path:polygon(0 0,97% 0,100% 100%,3% 100%)}
.band-violet{background:rgba(128,64,212,0.15);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}

/* === CHAMBER 4: FOCUS === */
.chamber-focus{
    position:relative;
    padding:10vh 5vw;
}

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

.layer-far{
    z-index:1;
    filter:blur(3px);
    opacity:0.5;
    transition:filter 1s ease,opacity 1s ease;
}

.layer-near{
    z-index:2;
    filter:blur(0px);
    opacity:1;
    transition:filter 1s ease,opacity 1s ease;
}

.focus-element{
    position:absolute;
    font-family:'Quicksand',sans-serif;
    font-weight:500;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--iris-blue);
    letter-spacing:0.06em;
}

.far-1{top:20%;left:15%}
.far-2{top:50%;right:12%}
.far-3{bottom:20%;left:25%}

.focus-card{
    background:rgba(37,40,51,0.6);
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:1.2rem;
    padding:clamp(2rem,4vw,3rem);
    max-width:500px;
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
    position:relative;
    z-index:5;
}

/* === CHAMBER 5: RESOLUTION === */
.chamber-resolution{
    background:var(--obsidian);
}

.iris-close{
    position:absolute;
    width:min(80vw,80vh);
    height:min(80vw,80vh);
    border-radius:50%;
    background:radial-gradient(ellipse at center,transparent 20%,#8b7fc7 40%,#6b8cce 60%,var(--obsidian) 80%);
    opacity:0.15;
}

.resolution-text{
    font-family:'Quicksand',sans-serif;
    font-size:clamp(2rem,5vw,4rem);
    font-weight:700;
    color:var(--frost);
    letter-spacing:0.12em;
    z-index:10;
    opacity:0;
    transition:opacity 2s var(--ease-smooth);
}

.resolution-text.visible{opacity:1}

/* Links */
a{color:var(--iris-blue);text-decoration:none;transition:color 400ms ease}
a:hover{color:var(--blush)}

/* Responsive */
@media(max-width:768px){
    .glass-cards{max-width:100%}
    .spectral-bands{width:90vw}
    .focus-element{font-size:1.2rem}
    .focus-card{clip-path:none;border-radius:1.2rem}
}

@media(prefers-reduced-motion:reduce){
    .h-char,.hero-tagline{opacity:1;transform:none;animation:none}
    .iris-gradient{opacity:1;transform:scale(1);animation:none}
    .glass-card{opacity:1;transform:none;transition:none}
    .band{height:clamp(3rem,6vh,5rem)}
}