/* =========================================================
   eyes.plus — iridescent ophthalmic atrium
   Polar-coordinate layout, breath-pulse, chromatic seams.
   ========================================================= */

:root {
    /* Core palette — eight tokens from DESIGN.md */
    --bg-vitreous: #0A0E12;
    --bg-aqueous: #11161D;
    --ink-cornea: #F2EEE6;
    --ink-veil:   #A8B3BA;
    --iris-cyan:   #7FE8D6;
    --iris-rose:   #FFB7D5;
    --iris-violet: #B49CFF;
    --iris-amber:  #FFD89A;

    /* Geometry */
    --aperture-size: 62vmin;
    --pupil-radius: 31vmin;
    --orbit-062: 19.22vmin;   /* 0.62 r */
    --orbit-078: 24.18vmin;   /* 0.78 r */
    --orbit-104: 32.24vmin;   /* 1.04 r */

    /* Cursor offset, written by JS */
    --seam-offset: 0px;
    --aperture-scale: 1;
    --aperture-hue: 0deg;
}

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

html, body {
    background: var(--bg-vitreous);
    color: var(--ink-cornea);
    font-family: 'Cormorant Infant', 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(180, 156, 255, 0.06), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(127, 232, 214, 0.04), transparent 60%),
        var(--bg-vitreous);
}

.defs-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* =========================================================
   Diopter HUD — fixed corner annotation, prescription strengthens
   ========================================================= */
.diopter-hud {
    position: fixed;
    top: 22px;
    right: 24px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: 'Space Mono', 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-veil);
    pointer-events: none;
    mix-blend-mode: plus-lighter;
}

.diopter-label {
    opacity: 0.55;
    font-size: 0.62rem;
}

.diopter-value {
    color: var(--iris-cyan);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    transition: color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.diopter-eye {
    opacity: 0.45;
    font-size: 0.62rem;
}

/* =========================================================
   Floating particle catchlights
   ========================================================= */
.floaters {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: plus-lighter;
    overflow: hidden;
}

.floater {
    position: absolute;
    border-radius: 50%;
    opacity: 0.45;
    filter: blur(0.4px);
    will-change: transform;
}

/* =========================================================
   Atrium / lens layout
   ========================================================= */
.atrium {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.lens {
    position: relative;
    min-height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    --aperture-x: 50%;
    --aperture-y: 50%;
}

.lens[data-position="left"]  { --aperture-x: 38%; }
.lens[data-position="right"] { --aperture-x: 64%; }

.lens[data-lens="01"] { min-height: 120vh; }
.lens[data-lens="02"] { min-height: 110vh; }
.lens[data-lens="03"] { min-height: 130vh; }
.lens[data-lens="04"] { min-height: 115vh; }
.lens[data-lens="05"] { min-height: 125vh; }
.lens[data-lens="06"] { min-height: 140vh; }

.lens-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================================================
   Aperture (the pupil): radial + conic + filter
   ========================================================= */
.aperture {
    position: absolute;
    top: var(--aperture-y);
    left: var(--aperture-x);
    width: var(--aperture-size);
    height: var(--aperture-size);
    transform: translate(-50%, -50%) scale(var(--aperture-scale));
    filter: hue-rotate(var(--aperture-hue));
    border-radius: 50%;
    will-change: transform, filter;
    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
    animation: breath 7.4s ease-in-out infinite;
}

@keyframes breath {
    0%, 100% { --breath: 1; }
    50%      { --breath: 1.012; }
}

/* Apply the breath via a wrapper transform on a child layer because
   the var animation above is for documentation only. The actual breath
   is implemented as a scale on .aperture-base, layered on top of the
   IO-driven transform. */
.aperture-base,
.conic,
.catchlight,
.limbus,
.schlemm {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.aperture-base {
    background:
        radial-gradient(circle at 38% 32%,
            var(--iris-amber) 0%,
            var(--iris-amber) 4%,
            rgba(255, 216, 154, 0.25) 12%,
            rgba(180, 156, 255, 0.18) 38%,
            rgba(127, 232, 214, 0.12) 62%,
            var(--bg-vitreous) 88%);
    box-shadow:
        inset 0 0 60px rgba(127, 232, 214, 0.08),
        inset 0 0 120px rgba(180, 156, 255, 0.10),
        0 0 80px rgba(180, 156, 255, 0.10);
    animation: breath-base 7.4s ease-in-out infinite;
}

@keyframes breath-base {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.012); }
}

/* Three thin conic-gradient rings — never a uniform gradient */
.conic {
    mix-blend-mode: screen;
    opacity: 0.42;
    will-change: transform;
}

.conic-1 {
    width: 124%;
    height: 124%;
    top: -12%;
    left: -12%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--iris-cyan) 28deg,
        transparent 60deg,
        transparent 120deg,
        var(--iris-rose) 148deg,
        transparent 180deg,
        transparent 240deg,
        var(--iris-violet) 268deg,
        transparent 300deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 66%, transparent 68%);
            mask: radial-gradient(circle, transparent 60%, black 62%, black 66%, transparent 68%);
    animation: rotate-cw 84s linear infinite;
}

.conic-2 {
    width: 156%;
    height: 156%;
    top: -28%;
    left: -28%;
    background: conic-gradient(
        from 120deg,
        transparent 0deg,
        var(--iris-rose) 22deg,
        transparent 50deg,
        transparent 130deg,
        var(--iris-violet) 152deg,
        transparent 180deg,
        transparent 250deg,
        var(--iris-cyan) 272deg,
        transparent 300deg);
    -webkit-mask: radial-gradient(circle, transparent 76%, black 78%, black 80%, transparent 82%);
            mask: radial-gradient(circle, transparent 76%, black 78%, black 80%, transparent 82%);
    animation: rotate-ccw 132s linear infinite;
    opacity: 0.36;
}

.conic-3 {
    width: 208%;
    height: 208%;
    top: -54%;
    left: -54%;
    background: conic-gradient(
        from 240deg,
        transparent 0deg,
        var(--iris-violet) 18deg,
        transparent 48deg,
        transparent 132deg,
        var(--iris-cyan) 154deg,
        transparent 184deg,
        transparent 252deg,
        var(--iris-rose) 274deg,
        transparent 306deg);
    -webkit-mask: radial-gradient(circle, transparent 96%, black 99%, black 100%, transparent 100%);
            mask: radial-gradient(circle, transparent 96%, black 99%, black 100%, transparent 100%);
    animation: rotate-cw 198s linear infinite;
    opacity: 0.28;
}

@keyframes rotate-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rotate-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.catchlight {
    width: 14%;
    height: 14%;
    top: 26%;
    left: 32%;
    background: radial-gradient(circle,
        rgba(255, 216, 154, 0.95) 0%,
        rgba(255, 216, 154, 0.6) 25%,
        rgba(255, 216, 154, 0.0) 70%);
    filter: blur(1.5px);
    pointer-events: none;
    mix-blend-mode: plus-lighter;
}

.limbus {
    width: 118%;
    height: 118%;
    top: -9%;
    left: -9%;
    border: 0.8px dashed var(--iris-violet);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.limbus.pulse {
    opacity: 0.95;
    filter: drop-shadow(0 0 6px var(--iris-violet));
}

.schlemm {
    width: 96%;
    height: 96%;
    top: 2%;
    left: 2%;
    color: var(--iris-cyan);
    opacity: 0.32;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Aperture variants — each lens has a slightly different tint */
.aperture-cyan   .aperture-base { box-shadow: 0 0 80px rgba(127, 232, 214, 0.12), inset 0 0 60px rgba(127, 232, 214, 0.10); }
.aperture-rose   .aperture-base { box-shadow: 0 0 80px rgba(255, 183, 213, 0.12), inset 0 0 60px rgba(255, 183, 213, 0.10); }
.aperture-violet .aperture-base { box-shadow: 0 0 80px rgba(180, 156, 255, 0.14), inset 0 0 60px rgba(180, 156, 255, 0.12); }
.aperture-amber  .aperture-base { box-shadow: 0 0 80px rgba(255, 216, 154, 0.10), inset 0 0 60px rgba(255, 216, 154, 0.10); }

/* =========================================================
   Orbit text — content sits along radii from the aperture center
   ========================================================= */
.orbit-text {
    position: absolute;
    color: var(--ink-cornea);
}

.lens-title {
    font-family: 'Fraunces', 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    font-size: clamp(3.2rem, 8.4vw, 7.8rem);
    line-height: 0.96;
    letter-spacing: -0.022em;
    text-transform: lowercase;
    color: var(--ink-cornea);
    text-shadow:
        -0.6px 0 0 rgba(127, 232, 214, 0.42),
         0.6px 0 0 rgba(255, 183, 213, 0.42),
         0    0 28px rgba(180, 156, 255, 0.15);
    transition: text-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.whisper {
    font-family: 'Cormorant Infant', 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.18rem;
    line-height: 1.62;
    color: var(--ink-cornea);
    max-width: 32ch;
    margin-bottom: 1.4em;
    opacity: 0.92;
}

.body {
    font-family: 'Cormorant Infant', 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--ink-veil);
    max-width: 28ch;
}

.annot {
    font-family: 'Space Mono', 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--iris-cyan);
    display: inline-block;
    margin-bottom: 0.7em;
}

.annot-cyan   { color: var(--iris-cyan);   }
.annot-rose   { color: var(--iris-rose);   }
.annot-violet { color: var(--iris-violet); }
.annot-amber  { color: var(--iris-amber);  }

.snellen {
    display: inline-block;
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--ink-veil);
    letter-spacing: 0.04em;
    margin-right: 1.5em;
    opacity: 0.7;
    text-transform: lowercase;
}

/* Polar positioning: top arc, right tangent, left tangent, bottom limb */
.orbit-arc-top {
    top: calc(50% - 0.62 * var(--aperture-size) * 0.5 - 6vmin);
    left: var(--aperture-x);
    transform: translate(-50%, -100%);
    text-align: center;
    width: min(70vw, 720px);
}

.orbit-tangent-right {
    top: 50%;
    left: calc(var(--aperture-x) + var(--aperture-size) * 0.56);
    transform: translateY(-30%);
    max-width: min(36ch, 38vw);
}

.orbit-tangent-left {
    top: 50%;
    left: calc(var(--aperture-x) - var(--aperture-size) * 0.56);
    transform: translate(-100%, -30%);
    max-width: min(36ch, 38vw);
    text-align: right;
}

.orbit-bottom {
    top: calc(50% + var(--aperture-size) * 0.5 + 4vmin);
    left: var(--aperture-x);
    transform: translateX(-50%);
    text-align: center;
    width: min(60vw, 640px);
    color: var(--ink-veil);
}

/* =========================================================
   Voids: chromatic seams between lenses
   ========================================================= */
.void {
    position: relative;
    min-height: 32vh;
    width: 100%;
    background: var(--bg-aqueous);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.seam {
    position: relative;
    width: 100%;
    height: 14px;
}

.seam-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: transparent;
    border-top: 1px dashed currentColor;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
    will-change: transform;
}

.seam-cyan {
    color: var(--iris-cyan);
    transform: translateY(calc(-0.6px + var(--seam-offset) * -1));
}

.seam-rose {
    color: var(--iris-rose);
    transform: translateY(0);
}

.seam-violet {
    color: var(--iris-violet);
    transform: translateY(calc(0.6px + var(--seam-offset)));
}

.void:hover .seam-cyan   { transform: translateY(-1.4px); filter: drop-shadow(0 0 4px var(--iris-cyan)); }
.void:hover .seam-rose   { transform: translateY(0); filter: drop-shadow(0 0 4px var(--iris-rose)); }
.void:hover .seam-violet { transform: translateY(1.4px); filter: drop-shadow(0 0 4px var(--iris-violet)); }

/* Hairline curve across each void — inside curvature of a sphere */
.void::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 28% at 50% 50%,
            transparent 49.6%,
            rgba(168, 179, 186, 0.16) 49.85%,
            transparent 50.1%);
    pointer-events: none;
    opacity: 0.6;
}

/* =========================================================
   Footer: single horizontal slit — closed eye
   ========================================================= */
.closed-eye {
    position: relative;
    width: 100%;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-vitreous);
    margin-top: 18vh;
    margin-bottom: 12vh;
    overflow: visible;
}

.slit-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: transparent;
    border-top: 1px solid currentColor;
    transform-origin: 50% 50%;
}

.slit-cyan   { color: var(--iris-cyan);   transform: translateY(-0.6px); opacity: 0.65; }
.slit-rose   { color: var(--iris-rose);   transform: translateY(0);      opacity: 0.85; }
.slit-violet { color: var(--iris-violet); transform: translateY(0.6px);  opacity: 0.65; }

.closed-mark {
    position: absolute;
    top: 22px;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-veil);
    opacity: 0.4;
}

/* =========================================================
   Intersection states — set by JS via .in-view
   ========================================================= */
.lens.in-view .lens-title {
    text-shadow:
        -1.2px 0 0 rgba(127, 232, 214, 0.55),
         1.2px 0 0 rgba(255, 183, 213, 0.55),
         0    0 36px rgba(180, 156, 255, 0.22);
}

/* =========================================================
   Responsive — keep polar geometry on small screens
   ========================================================= */
@media (max-width: 900px) {
    :root {
        --aperture-size: 84vmin;
    }

    .lens[data-position="left"],
    .lens[data-position="right"] {
        --aperture-x: 50%;
    }

    .orbit-tangent-right {
        top: auto;
        bottom: -8vh;
        left: 50%;
        transform: translateX(-50%);
        max-width: 86vw;
        text-align: center;
    }

    .orbit-tangent-left {
        top: auto;
        bottom: -8vh;
        left: 50%;
        transform: translateX(-50%);
        max-width: 86vw;
        text-align: center;
    }

    .lens-title {
        font-size: clamp(2.4rem, 11vw, 4.4rem);
    }

    .lens, .lens[data-lens] {
        min-height: 130vh;
    }
}

@media (max-width: 560px) {
    :root {
        --aperture-size: 92vmin;
    }

    .diopter-hud {
        top: 12px;
        right: 14px;
    }

    .diopter-value {
        font-size: 0.9rem;
    }

    .whisper { font-size: 1.04rem; }
    .body    { font-size: 0.96rem; }
}