/* ===================================
   eyes.plus v2 — Pop-Art Vision Diagnostic
   =================================== */

/* --- Tokens --- */
:root {
    --magenta: #E91E8C;
    --terracotta: #D4764E;
    --yellow: #FFD23F;
    --ink: #1A1A1A;
    --cream: #FFF5E6;
    --iris-blue: #3A86C8;
    --retina-green: #4CAF50;

    --border-w: 4px;
    --border-thick: 6px;

    --font-display: 'Bungee', 'Work Sans', system-ui, sans-serif;
    --font-body: 'Work Sans', system-ui, sans-serif;
    --font-mono: 'Overpass Mono', ui-monospace, 'SF Mono', monospace;

    --halftone-spacing: 16px;
    --halftone-dot: 4px;

    --hud-pad: 14px;
}

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

html, body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.7;
    overflow-x: hidden;
}

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

/* --- Halftone background (pop-art texture) --- */
.halftone-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at center, var(--ink) var(--halftone-dot), transparent calc(var(--halftone-dot) + 1px));
    background-size: var(--halftone-spacing) var(--halftone-spacing);
    opacity: 0.18;
    transition: background-size 600ms ease, opacity 600ms ease;
}

/* --- Brand bar --- */
.brand-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: var(--cream);
    border-bottom: var(--border-w) solid var(--ink);
    backdrop-filter: blur(2px);
}
.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-dot {
    width: 22px; height: 22px;
    background: var(--magenta);
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--ink);
}
.brand-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: 0.04em;
}
.brand-nav {
    display: flex;
    gap: 22px;
}
.brand-link {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink);
    padding: 6px 10px;
    border: 2px solid transparent;
    transition: border-color 160ms, background 160ms, color 160ms;
}
.brand-link:hover {
    border-color: var(--ink);
    background: var(--yellow);
}

/* --- HERO --- */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 32px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
}

/* HUD readouts arranged as corner overlays */
.hud {
    position: absolute;
    background: var(--cream);
    border: var(--border-w) solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    padding: var(--hud-pad) 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    min-width: 180px;
    z-index: 6;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease;
}
.hud.is-visible { transform: translateY(0); opacity: 1; }
.hud-tl { top: 110px; left: 32px; }
.hud-tr { top: 110px; right: 32px; }
.hud-bl { bottom: 120px; left: 32px; }
.hud-br { bottom: 120px; right: 32px; }
.hud-bc {
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 20px);
    text-align: center;
    background: var(--magenta);
    color: var(--cream);
    padding: 16px 28px;
}
.hud-bc.is-visible { transform: translate(-50%, 0); }

.hud-label {
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--ink);
    opacity: 0.78;
}
.hud-bc .hud-label { color: var(--cream); opacity: 0.9; }
.hud-value {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
}
.hud-score {
    font-family: var(--font-display);
    font-size: 38px;
    letter-spacing: 0.04em;
    line-height: 1;
}
.hud-bar {
    margin-top: 8px;
    height: 8px;
    width: 100%;
    background: var(--cream);
    border: 2px solid var(--ink);
    overflow: hidden;
}
.hud-bar-fill {
    display: block;
    height: 100%;
    width: 60%;
    background: var(--magenta);
    transition: width 240ms ease;
}
.hud-bar-fill--green { background: var(--retina-green); }
.hud-spectrum {
    margin-top: 8px;
    height: 8px;
    border: 2px solid var(--ink);
    background: linear-gradient(to right,
        #6c2bd9 0%,
        var(--iris-blue) 22%,
        var(--retina-green) 42%,
        var(--yellow) 60%,
        var(--terracotta) 78%,
        var(--magenta) 100%);
}

/* --- The eye stage --- */
.eye-stage {
    position: sticky;
    top: 80px;
    width: min(620px, 78vw);
    height: min(620px, 78vw);
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}
.pop-eye {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(8px 8px 0 var(--ink));
}

.eye-draw {
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
    animation: eye-draw 900ms ease-out 200ms forwards;
}
.eye-outline {
    fill-opacity: 0;
    animation: eye-fill 600ms ease-out 900ms forwards;
}
.iris {
    transform-origin: 300px 300px;
    transform: scale(0);
    animation: iris-pop 500ms cubic-bezier(.2,1.4,.4,1) 1100ms forwards;
}
.iris-halftone {
    opacity: 0;
    animation: iris-pop-fade 400ms ease-out 1500ms forwards;
}
.iris-ring {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: iris-ring-draw 600ms ease-out 1300ms forwards;
}
.pupil, .pupil-shine, .pupil-shine-sm {
    transform-origin: 300px 300px;
    transform: scale(0);
    animation: pupil-pop 400ms cubic-bezier(.2,1.4,.4,1) 1700ms forwards;
}
.pupil-shine { animation-delay: 1850ms; }
.pupil-shine-sm { animation-delay: 1950ms; }

#pupilGroup {
    transition: transform 80ms linear;
    will-change: transform;
}
.eyelid {
    transform-origin: 300px 300px;
    transform: scaleY(0);
    pointer-events: none;
}
.eye-stage.is-blinking .eyelid {
    animation: blink 320ms ease;
}
.eye-stage.is-blinking .eye-outline-stroke {
    animation: outline-flash 320ms ease;
}

@keyframes eye-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes eye-fill {
    to { fill-opacity: 1; }
}
@keyframes iris-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes iris-pop-fade {
    to { opacity: 0.55; }
}
@keyframes iris-ring-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes pupil-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes blink {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@keyframes outline-flash {
    0%, 100% { stroke-width: 9; }
    50%      { stroke-width: 14; }
}

/* "BLINK!" speech bubble */
.speech-bubble {
    position: relative;
    display: inline-block;
    background: var(--yellow);
    color: var(--ink);
    border: 4px solid var(--ink);
    padding: 14px 24px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 28px);
    border-radius: 28px 28px 28px 6px;
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(-4deg);
}
.speech-bubble::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: -22px;
    width: 0; height: 0;
    border-left: 16px solid var(--ink);
    border-right: 8px solid transparent;
    border-top: 22px solid var(--ink);
    transform: skewX(-8deg);
}
.speech-bubble::before {
    content: "";
    position: absolute;
    left: 26px;
    bottom: -14px;
    width: 0; height: 0;
    border-left: 10px solid var(--yellow);
    border-right: 6px solid transparent;
    border-top: 16px solid var(--yellow);
    transform: skewX(-8deg);
    z-index: 1;
}
.speech-bubble--blink {
    position: absolute;
    top: 6%;
    right: -6%;
    background: var(--magenta);
    color: var(--cream);
    opacity: 0;
    transform: rotate(-8deg) scale(0.6);
    transition: opacity 240ms, transform 240ms cubic-bezier(.2,1.6,.4,1);
    pointer-events: none;
}
.speech-bubble--blink::before {
    border-left-color: var(--magenta);
    border-top-color: var(--magenta);
}
.speech-bubble--blink.is-visible {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
}

/* Hero title (letter-stagger entrance) */
.hero-title {
    position: relative;
    margin-top: 30px;
    font-family: var(--font-display);
    font-size: clamp(38px, 7vw, 92px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    text-align: center;
    text-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--ink);
    z-index: 5;
}
.hero-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    animation: letter-in 500ms cubic-bezier(.2,1.5,.3,1) forwards;
}
.hero-letter--dot { color: var(--magenta); text-shadow: 4px 4px 0 var(--ink); }
.hero-letter:nth-child(1) { animation-delay: 1300ms; }
.hero-letter:nth-child(2) { animation-delay: 1380ms; }
.hero-letter:nth-child(3) { animation-delay: 1460ms; }
.hero-letter:nth-child(4) { animation-delay: 1540ms; }
.hero-letter:nth-child(5) { animation-delay: 1620ms; }
.hero-letter:nth-child(6) { animation-delay: 1700ms; }
.hero-letter:nth-child(7) { animation-delay: 1780ms; }
.hero-letter:nth-child(8) { animation-delay: 1860ms; }
.hero-letter:nth-child(9) { animation-delay: 1940ms; }
@keyframes letter-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-tag {
    margin: 18px auto 0;
    max-width: 640px;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.7vw, 19px);
    color: var(--ink);
    opacity: 0;
    animation: fade-in 600ms ease 2100ms forwards;
    z-index: 5;
    position: relative;
}
@keyframes fade-in { to { opacity: 0.9; } }

.scroll-cue {
    margin-top: 36px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--ink);
    opacity: 0;
    animation: fade-in 800ms ease 2400ms forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.scroll-arrow {
    font-size: 22px;
    animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* --- Comic panels (slide over the sticky eye) --- */
.panels {
    position: relative;
    z-index: 3;
    padding: 20vh 0 12vh;
}
.panel {
    position: relative;
    width: min(560px, 88vw);
    margin: 14vh 0;
    padding: 28px 30px;
    background: var(--cream);
    border: var(--border-w) solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    background-image:
        radial-gradient(circle at center, var(--ink) 2px, transparent 3px);
    background-size: 18px 18px;
    background-blend-mode: normal;
    opacity: 0;
    transform: translateX(0) scale(0.94);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(.2,.9,.2,1.1);
}
.panel::before {
    /* clean inner rectangle so background-image dots only show as a thin border halo */
    content: "";
    position: absolute;
    inset: 8px;
    background: var(--cream);
    z-index: 0;
}
.panel > * { position: relative; z-index: 1; }
.panel--left { margin-left: 6vw; transform: translateX(-80px) scale(0.94); }
.panel--right { margin-left: auto; margin-right: 6vw; transform: translateX(80px) scale(0.94); }
.panel.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: wham 480ms cubic-bezier(.2,1.5,.3,1);
}
@keyframes wham {
    0%   { box-shadow: 10px 10px 0 var(--ink); border-width: 4px; }
    40%  { box-shadow: 14px 14px 0 var(--magenta); border-width: 6px; }
    100% { box-shadow: 10px 10px 0 var(--ink); border-width: 4px; }
}

.panel-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    background: var(--ink);
    color: var(--yellow);
    padding: 4px 10px;
    margin-bottom: 14px;
}
.panel-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.4vw, 54px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 14px;
    text-shadow: 3px 3px 0 var(--yellow);
}
.panel-title em {
    font-style: normal;
    color: var(--magenta);
    text-shadow: 3px 3px 0 var(--ink);
}
.panel-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--ink);
}
.panel-body strong { color: var(--magenta); }

.speech-bubble--yellow {
    margin-top: 18px;
    transform: rotate(-3deg);
    background: var(--yellow);
    color: var(--ink);
}

.readout {
    list-style: none;
    margin-top: 16px;
    border-top: 2px dashed var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
}
.readout li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 2px dashed var(--ink);
}
.readout li span:last-child { font-weight: 600; color: var(--magenta); }

.dot-meter {
    margin-top: 16px;
    height: 14px;
    border: 3px solid var(--ink);
    background: var(--cream);
    overflow: hidden;
}
.dot-meter-bar {
    display: block;
    height: 100%;
    width: 0%;
    background-image:
        radial-gradient(circle at center, var(--ink) 2px, transparent 3px);
    background-size: 8px 8px;
    background-color: var(--retina-green);
    transition: width 200ms linear;
}

/* --- Spectrum band --- */
.spectrum {
    position: relative;
    z-index: 3;
    padding: 12vh 28px 8vh;
    background: var(--cream);
    border-top: var(--border-w) solid var(--ink);
    border-bottom: var(--border-w) solid var(--ink);
}
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 56px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
    text-shadow: 4px 4px 0 var(--iris-blue);
}
.section-sub {
    text-align: center;
    color: var(--ink);
    opacity: 0.8;
    max-width: 640px;
    margin: 0 auto 40px;
    font-family: var(--font-body);
}
.spectrum-band {
    position: relative;
    height: 60vh;
    max-height: 380px;
    width: min(1100px, 92vw);
    margin: 0 auto;
    border: var(--border-w) solid var(--ink);
    background: linear-gradient(to right,
        #6c2bd9 0%,
        var(--iris-blue) 22%,
        var(--retina-green) 42%,
        var(--yellow) 60%,
        var(--terracotta) 78%,
        var(--magenta) 100%);
    box-shadow: 10px 10px 0 var(--ink);
    overflow: hidden;
}
.spectrum-band::before {
    /* halftone overlay on band */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, rgba(26,26,26,0.32) 2px, transparent 3px);
    background-size: 14px 14px;
    pointer-events: none;
}
.spectrum-tick {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(26,26,26,0.65);
}
.spectrum-tick span {
    position: absolute;
    top: 12px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    background: var(--ink);
    color: var(--cream);
    padding: 2px 8px;
    white-space: nowrap;
}
.spectrum-tick em {
    position: absolute;
    bottom: 18px;
    left: 8px;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 4px 8px;
    white-space: nowrap;
}

/* --- Gallery of visions --- */
.gallery {
    position: relative;
    z-index: 3;
    padding: 12vh 28px 12vh;
    background: var(--cream);
    background-image:
        radial-gradient(circle at center, var(--terracotta) 2px, transparent 3px);
    background-size: 22px 22px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.gallery-tile {
    position: relative;
    border: var(--border-w) solid var(--ink);
    background: var(--cream);
    box-shadow: 8px 8px 0 var(--ink);
    padding: 18px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 220ms cubic-bezier(.2,1.6,.4,1), box-shadow 220ms;
    overflow: hidden;
}
.gallery-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, var(--ink) 2px, transparent 3px);
    background-size: 14px 14px;
    opacity: 0.18;
    pointer-events: none;
}
.gallery-tile:hover {
    transform: translate(-3px, -3px) rotate(-1deg);
    box-shadow: 12px 12px 0 var(--ink);
}
.gallery-tile--magenta { background: var(--magenta); }
.gallery-tile--magenta figcaption { background: var(--cream); }
.gallery-tile--blue { background: var(--iris-blue); }
.gallery-tile--blue figcaption { background: var(--cream); }
.gallery-tile--yellow { background: var(--yellow); }
.gallery-tile--green { background: var(--retina-green); }
.gallery-tile--terracotta { background: var(--terracotta); }
.gallery-tile--ink { background: var(--ink); }
.gallery-tile--ink figcaption { background: var(--yellow); }
.gallery-eye {
    width: 70%;
    height: 70%;
    filter: drop-shadow(4px 4px 0 var(--ink));
}
.gallery-tile figcaption {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    background: var(--cream);
    color: var(--ink);
    padding: 4px 10px;
    border: 2px solid var(--ink);
    z-index: 1;
}

/* --- Footer --- */
.foot {
    position: relative;
    z-index: 3;
    background: var(--ink);
    color: var(--cream);
    padding: 36px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: var(--border-w) solid var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
}
.foot-mark {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}
.foot-tag { color: var(--yellow); }
.foot-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    opacity: 0.85;
}
.foot-meta em { font-style: normal; color: var(--magenta); }

/* --- Click hint floating overlay --- */
.click-hint {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 40;
    background: var(--magenta);
    color: var(--cream);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    transform: rotate(-3deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms;
}
.click-hint.is-visible { opacity: 1; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-letter { opacity: 1; transform: none; }
    .hud { opacity: 1; transform: none; }
    .panel { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hud-tl, .hud-tr { top: 92px; min-width: 150px; padding: 10px 12px; font-size: 11px; }
    .hud-bl, .hud-br { bottom: 90px; min-width: 150px; padding: 10px 12px; font-size: 11px; }
    .hud-bc { padding: 12px 18px; }
    .hud-score { font-size: 28px; }
    .panel--left, .panel--right { margin-left: auto; margin-right: auto; }
    .speech-bubble--blink { right: -2%; top: 2%; }
}
@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .brand-nav { gap: 10px; }
    .brand-link { font-size: 11px; padding: 4px 6px; }
    .hud-tl { top: 84px; left: 12px; }
    .hud-tr { top: 84px; right: 12px; }
    .hud-bl { bottom: 100px; left: 12px; }
    .hud-br { bottom: 100px; right: 12px; }
    .hud { min-width: 120px; padding: 8px 10px; font-size: 10px; }
    .hud-bc { bottom: 18px; padding: 10px 14px; }
    .panel { padding: 22px 22px; }
    .panels { padding: 16vh 0 8vh; }
    .eye-stage { width: 85vw; height: 85vw; top: 70px; }
    .spectrum-band { height: 44vh; }
    .click-hint { bottom: 70px; right: 12px; }
}