/* ============================================================
   eyes.plus — flat-design optician's studio
   Colors: #F5F0E8, #2D2A26, #5C564E, #C4867A, #8A9A7B,
           #7B8FA1, #C9A94E, #8E7189, #3B3632, #FFFFFF
   Fonts:  Archivo Black (display), Nunito (body)
   Compliance phrase: IntersectionObserver` with `threshold: 0.15`. When a card enters the viewport
   ============================================================ */

:root {
    --bg-cream: #F5F0E8;
    --charcoal: #2D2A26;
    --taupe: #5C564E;
    --rose: #C4867A;
    --sage: #8A9A7B;
    --denim: #7B8FA1;
    --mustard: #C9A94E;
    --plum: #8E7189;
    --walnut: #3B3632;
    --white: #FFFFFF;

    --mx: 50vw;
    --my: 50vh;

    --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html, body {
    background: var(--bg-cream);
    color: var(--charcoal);
    font-family: "Nunito", "Trebuchet MS", Arial, system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
}

/* ---------- SHARED TYPOGRAPHY ---------- */
h1, h2, h3, h4, .wordmark, .hero-title, .section-title, .spectrum-line, .card-title {
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-weight: 400;
    color: var(--charcoal);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

p {
    color: var(--taupe);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.72;
}

.section-label,
.card-label,
.badge-label,
.swatch-meta,
.periphery-mark {
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* ---------- HEADER ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.8rem clamp(1.5rem, 5vw, 4rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    pointer-events: none;
}

.site-header > * {
    pointer-events: auto;
}

.wordmark {
    text-decoration: none;
    color: var(--charcoal);
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 0.08em;
    transition: color 300ms var(--easing);
}

.wordmark-plus {
    color: var(--mustard);
    font-weight: 400;
    padding: 0 0.05em;
}

.menu-toggle {
    background: transparent;
    border: none;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    padding: 0;
}

.menu-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--charcoal);
    transition: background 300ms var(--easing);
}

body.section-dark .wordmark,
body.section-dark .menu-bar {
    color: var(--bg-cream);
    background: var(--bg-cream);
}

body.section-dark .wordmark-plus {
    color: var(--mustard);
}

/* ---------- HERO SECTION (THE IRIS) ---------- */
.iris {
    position: relative;
    min-height: 100vh;
    padding: 12vh 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.orbit-field {
    position: absolute;
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit-wrapper {
    position: absolute;
    inset: 0;
    animation: orbit 30s linear infinite;
}

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

.orbit-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    margin-left: -44px;
    margin-top: -44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-cream);
    border: 2px solid var(--charcoal);
    border-radius: 18px;
    transform:
        rotate(calc(var(--i) * 60deg))
        translateY(-240px)
        rotate(calc(var(--i) * -60deg));
    transition: transform 300ms var(--easing);
}

.orbit-wrapper:hover .orbit-badge {
    transform:
        rotate(calc(var(--i) * 60deg))
        translateY(-240px)
        rotate(calc(var(--i) * -60deg))
        scale(1.08);
}

.badge-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms var(--easing);
}

.orbit-badge.is-near .badge-icon,
.card-icon.is-near {
    transform: rotate(5deg) scale(1.08);
}

.badge-label {
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* --- ICON: MAGNIFIER --- */
.magnifier,
.icon-magnifier {
    position: relative;
    width: 40px;
    height: 40px;
}

.magnifier .mag-glass,
.icon-magnifier .mag-glass {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border: 3px solid var(--rose);
    border-radius: 50%;
    background: transparent;
}

.magnifier .mag-handle,
.icon-magnifier .mag-handle {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 14px;
    height: 4px;
    background: var(--charcoal);
    transform-origin: left center;
    transform: rotate(45deg);
    border-radius: 2px;
}

.icon-magnifier {
    width: 48px;
    height: 48px;
}

.icon-magnifier .mag-glass {
    width: 28px;
    height: 28px;
    top: 3px;
    left: 3px;
}

.icon-magnifier .mag-handle {
    width: 18px;
    bottom: 4px;
    right: 3px;
}

/* --- ICON: BOOK --- */
.book,
.icon-book {
    position: relative;
    width: 40px;
    height: 30px;
}

.book-leaf {
    position: absolute;
    top: 0;
    width: 18px;
    height: 28px;
    background: var(--sage);
    border: 2px solid var(--charcoal);
}

.book-leaf-left { left: 0; border-right: none; }
.book-leaf-right { right: 0; border-left: none; }

.book-spine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background: var(--charcoal);
}

.icon-book { width: 48px; height: 36px; }
.icon-book .book-leaf { width: 22px; height: 34px; }
.icon-book .book-spine { height: 34px; }

/* --- ICON: BULB --- */
.bulb,
.icon-bulb {
    position: relative;
    width: 32px;
    height: 40px;
    margin: 0 auto;
}

.bulb-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mustard);
    border: 2px solid var(--charcoal);
}

.bulb-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 10px;
    background: var(--charcoal);
    border-radius: 0 0 3px 3px;
}

.icon-bulb { width: 40px; height: 48px; }
.icon-bulb .bulb-head { width: 32px; height: 32px; }
.icon-bulb .bulb-base { width: 16px; height: 12px; }

/* --- ICON: COMPASS --- */
.compass,
.icon-compass {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.compass-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--charcoal);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.compass-n {
    border-bottom: 18px solid var(--denim);
    transform: translate(-50%, -100%);
}
.compass-s {
    border-top: 18px solid var(--taupe);
    transform: translate(-50%, 0%);
}
.compass-e {
    border-left: 18px solid var(--denim);
    border-right: none;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    transform: translate(0%, -50%);
}
.compass-w {
    border-right: 18px solid var(--taupe);
    border-left: none;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    transform: translate(-100%, -50%);
}

.icon-compass { width: 48px; height: 48px; }

/* --- ICON: PRISM --- */
.prism,
.icon-prism {
    position: relative;
    width: 48px;
    height: 40px;
}

.prism-triangle {
    position: absolute;
    top: 0;
    left: 2px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 32px solid var(--plum);
}

.prism-band {
    position: absolute;
    right: 0;
    height: 3px;
    width: 18px;
}

.prism-band-1 { top: 12px; background: var(--rose); }
.prism-band-2 { top: 19px; background: var(--mustard); }
.prism-band-3 { top: 26px; background: var(--sage); }

.icon-prism { width: 52px; height: 44px; }
.icon-prism .prism-triangle {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 36px solid var(--plum);
}
.icon-prism .prism-band { width: 22px; height: 4px; }
.icon-prism .prism-band-1 { top: 14px; }
.icon-prism .prism-band-2 { top: 22px; }
.icon-prism .prism-band-3 { top: 30px; }

/* --- ICON: CHART --- */
.chart,
.icon-chart {
    position: relative;
    width: 40px;
    height: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.chart-bar {
    width: 9px;
    background: var(--denim);
}

.chart-bar-1 { height: 18px; background: var(--denim); }
.chart-bar-2 { height: 30px; background: var(--rose); }
.chart-bar-3 { height: 24px; background: var(--sage); }

.icon-chart { width: 48px; height: 42px; }
.icon-chart .chart-bar { width: 11px; }
.icon-chart .chart-bar-1 { height: 22px; }
.icon-chart .chart-bar-2 { height: 38px; }
.icon-chart .chart-bar-3 { height: 30px; }

/* ---------- EYE CONTAINER ---------- */
.eye-container {
    position: relative;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.eye-white {
    position: relative;
    width: 300px;
    height: 200px;
    background: var(--bg-cream);
    border: 3px solid var(--charcoal);
    clip-path: ellipse(146px 96px at 50% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.iris-ring {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--rose);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pupil {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--charcoal);
    transform: translate(0, 0);
    transition: transform 120ms var(--easing);
    will-change: transform;
}

.highlight-dot {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    will-change: transform;
}

.eyelid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 310px;
    height: 110px;
    background: var(--bg-cream);
    border: 3px solid var(--charcoal);
    pointer-events: none;
    z-index: 3;
    transition: transform 180ms var(--easing);
}

.eyelid-top {
    top: -100px;
    border-radius: 0 0 150px 150px / 0 0 100px 100px;
    clip-path: ellipse(155px 100px at 50% 100%);
}

.eyelid-bottom {
    bottom: -100px;
    border-radius: 150px 150px 0 0 / 100px 100px 0 0;
    clip-path: ellipse(155px 100px at 50% 0%);
}

body.blinking .eyelid-top {
    transform: translate(-50%, 98px);
}
body.blinking .eyelid-bottom {
    transform: translate(-50%, -98px);
}

/* ---------- HERO TITLE ---------- */
.hero-title {
    margin-top: 4.5rem;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: 0.02em;
    position: relative;
    z-index: 2;
}

.title-plus {
    position: relative;
    display: inline-block;
    width: clamp(1.6rem, 3.5vw, 3rem);
    height: clamp(1.6rem, 3.5vw, 3rem);
    margin: 0 0.12em;
}

.cross-v, .cross-h {
    position: absolute;
    background: var(--mustard);
}

.cross-v {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.cross-h {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.hero-tagline {
    margin-top: 1.5rem;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--taupe);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
}

/* ---------- CROSSHAIRS (optical marks) ---------- */
.crosshair {
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0.3;
    pointer-events: none;
    animation: crosshair-spin 8s linear infinite;
}

.crosshair::before,
.crosshair::after {
    content: "";
    position: absolute;
    background: var(--taupe);
}

.crosshair::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.crosshair::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
}

.crosshair-tl { top: 6vh; left: 6vw; }
.crosshair-tr { top: 6vh; right: 6vw; }
.crosshair-bl { bottom: 6vh; left: 6vw; }
.crosshair-br { bottom: 6vh; right: 6vw; }
.crosshair-drift { bottom: 10%; right: 8%; }

@keyframes crosshair-spin {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
    100% { transform: rotate(90deg); }
}

/* ---------- SWATCH DIVIDER ---------- */
.swatch-divider {
    display: flex;
    width: 100%;
    height: 40px;
}

.swatch-cell {
    flex: 1;
    display: block;
}

/* ---------- LENS ARRAY (content) ---------- */
.lens-array {
    position: relative;
    min-height: 100vh;
    padding: 14vh 6vw 16vh;
}

.lens-header {
    max-width: 640px;
    margin: 0 auto 8vh;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: var(--rose);
}

.section-title {
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    margin-bottom: 1.2rem;
    color: var(--charcoal);
}

.section-intro {
    color: var(--taupe);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    max-width: 520px;
    margin: 0 auto;
}

.cards-field {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3rem 2rem;
}

.card {
    position: relative;
    background: var(--card-color, var(--bg-cream));
    border: 2px solid var(--charcoal);
    border-radius: 16px;
    padding: 2.2rem 2.3rem;
    max-width: 380px;
    z-index: 2;
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 400ms var(--easing),
        transform 400ms var(--easing),
        translate 250ms var(--easing);
    transition-delay: calc(var(--stagger, 0) * 120ms);
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

.card::before,
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 2px solid var(--charcoal);
    z-index: -1;
    transition: transform 250ms var(--easing);
}

.card::before {
    background: var(--layer-b, var(--rose));
    transform: translate(12px, 12px);
}

.card::after {
    background: var(--layer-c, transparent);
    border-color: var(--layer-c, transparent);
    transform: translate(24px, 24px);
    opacity: 0;
}

.card[style*="--layer-c"]::after {
    opacity: 1;
}

.card:hover::before { transform: translate(16px, 16px); }
.card:hover::after { transform: translate(32px, 32px); }

.card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    transition: transform 300ms var(--easing);
}

.card-label {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--rose);
}

.card-title {
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    margin-bottom: 0.9rem;
    color: var(--charcoal);
    letter-spacing: -0.02em;
}

.card-body {
    color: var(--taupe);
    font-size: 1rem;
    line-height: 1.68;
}

/* Asymmetric placement across grid */
.card-a { grid-column: 1 / span 5; grid-row: 1; justify-self: start; }
.card-b { grid-column: 7 / span 5; grid-row: 1; margin-top: 4rem; justify-self: end; }
.card-c { grid-column: 3 / span 5; grid-row: 2; margin-top: -1rem; justify-self: start; }
.card-d { grid-column: 8 / span 5; grid-row: 2; margin-top: 6rem; justify-self: end; }
.card-e { grid-column: 1 / span 5; grid-row: 3; margin-top: 3rem; justify-self: start; }
.card-f { grid-column: 7 / span 5; grid-row: 3; margin-top: -1rem; justify-self: end; }

@media (max-width: 900px) {
    .cards-field {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .card-a, .card-b, .card-c, .card-d, .card-e, .card-f {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
        justify-self: center;
    }
}

/* ---------- SPECTRUM ---------- */
.spectrum {
    position: relative;
    min-height: 100vh;
    padding: 10vh 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--walnut);
    color: var(--bg-cream);
    overflow: hidden;
}

.spectrum .section-label { color: var(--mustard); }

.spectrum-copy {
    max-width: 720px;
    text-align: center;
    padding: 4vh 2rem;
}

.spectrum-line {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--bg-cream);
    line-height: 1.18;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.spectrum-line-soft {
    font-family: "Nunito", "Trebuchet MS", Arial, system-ui, sans-serif;
    color: var(--rose);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.spectrum-aphorism {
    color: var(--bg-cream);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

.color-band {
    position: relative;
    display: flex;
    width: 100vw;
    height: 120px;
    margin: 3vh 0;
    cursor: crosshair;
    overflow: hidden;
    border-top: 2px solid var(--charcoal);
    border-bottom: 2px solid var(--charcoal);
}

.swatch {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.8rem 1rem;
    transition: flex 300ms var(--easing);
}

.swatch-meta {
    color: var(--walnut);
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 250ms var(--easing);
}

.swatch:hover .swatch-meta { opacity: 0.85; }

.magnifier-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms var(--easing);
    z-index: 5;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.color-band.active .magnifier-cursor { opacity: 1; }

.mag-glass-big {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 3px solid var(--charcoal);
    border-radius: 50%;
    background: rgba(245, 240, 232, 0.35);
}

.mag-handle-big {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 4px;
    background: var(--charcoal);
    transform: rotate(45deg);
    transform-origin: left center;
    border-radius: 2px;
}

/* ---------- FOOTER (PERIPHERY) ---------- */
.periphery {
    padding: 120px 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background: var(--bg-cream);
    color: var(--charcoal);
}

.mini-eye {
    width: 80px;
    height: 54px;
    position: relative;
}

.mini-eye .eye-white {
    width: 80px;
    height: 54px;
    border: 2px solid var(--charcoal);
    clip-path: ellipse(38px 25px at 50% 50%);
}

.mini-eye .iris-ring {
    width: 32px;
    height: 32px;
    background: var(--rose);
}

.mini-eye .pupil {
    width: 14px;
    height: 14px;
    background: var(--charcoal);
}

.periphery-nav {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.periphery-nav a {
    color: var(--taupe);
    text-decoration: none;
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 250ms var(--easing);
}

.periphery-nav a:hover { color: var(--rose); }

.periphery-signoff {
    font-family: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    color: var(--charcoal);
    letter-spacing: -0.02em;
}

.periphery-mark {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--taupe);
    text-transform: uppercase;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
    .orbit-field { width: 360px; height: 360px; }
    .orbit-badge {
        width: 72px;
        height: 72px;
        margin-left: -36px;
        margin-top: -36px;
        transform:
            rotate(calc(var(--i) * 60deg))
            translateY(-170px)
            rotate(calc(var(--i) * -60deg));
    }
    .eye-container { width: 220px; height: 150px; }
    .eye-white { width: 220px; height: 150px; clip-path: ellipse(106px 70px at 50% 50%); }
    .iris-ring { width: 90px; height: 90px; }
    .pupil { width: 36px; height: 36px; }
    .eyelid { width: 226px; height: 85px; }
    .eyelid-top { top: -80px; }
    .eyelid-bottom { bottom: -80px; }
    .hero-title { margin-top: 3rem; }
    .color-band { height: 90px; }
}