/* ========================================
   eyes.team - Prismatic Lens Laboratory
   Frutiger-Aero Optical Aesthetic
   ======================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --deep-field: #0A1628;
    --frost-white: #E8F4F8;
    --spectral-cyan: #64DCFF;
    --aurora-teal: #64DCB4;
    --prismatic-violet: #A78BFA;
    --lens-amber: #F5C842;
    --pale-sky: #B8D4E3;
    --glass-panel: rgba(14, 30, 54, 0.65);
    --glass-border: rgba(100, 220, 255, 0.12);
}

html {
    overflow: hidden;
    height: 100%;
}

body {
    background: var(--deep-field);
    color: var(--frost-white);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.15vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow: hidden;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Spectral Noise Overlay --- */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(100,220,255,0.3) 0px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(167,139,250,0.3) 0px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(100,220,180,0.3) 0px, transparent 1px),
        radial-gradient(circle at 10% 90%, rgba(245,200,66,0.2) 0px, transparent 1px),
        radial-gradient(circle at 90% 20%, rgba(232,244,248,0.3) 0px, transparent 1px);
    background-size: 3px 3px, 5px 5px, 4px 4px, 6px 6px, 4px 4px;
}

/* --- Prismatic Light Beams --- */
#light-beams {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    perspective: 800px;
}

.beam {
    position: absolute;
    width: 3px;
    mix-blend-mode: screen;
    transform-origin: center center;
    transition: transform 0.3s ease-out;
}

.beam-1 {
    left: 12%;
    top: 5%;
    height: 60vh;
    background: linear-gradient(180deg, #64DCFF 0%, #A78BFA 50%, #F5C842 100%);
    opacity: 0.35;
    animation: beamRotate1 25s ease-in-out infinite;
}

.beam-2 {
    left: 28%;
    top: 10%;
    height: 50vh;
    width: 2px;
    background: linear-gradient(180deg, #A78BFA 0%, #64DCFF 50%, #64DCB4 100%);
    opacity: 0.25;
    animation: beamRotate2 32s ease-in-out infinite;
}

.beam-3 {
    left: 45%;
    top: 3%;
    height: 70vh;
    width: 4px;
    background: linear-gradient(180deg, #64DCB4 0%, #F5C842 50%, #64DCFF 100%);
    opacity: 0.2;
    animation: beamRotate3 28s ease-in-out infinite;
}

.beam-4 {
    left: 62%;
    top: 8%;
    height: 55vh;
    width: 2px;
    background: linear-gradient(180deg, #F5C842 0%, #64DCFF 50%, #A78BFA 100%);
    opacity: 0.3;
    animation: beamRotate4 35s ease-in-out infinite;
}

.beam-5 {
    left: 78%;
    top: 2%;
    height: 65vh;
    width: 3px;
    background: linear-gradient(180deg, #64DCFF 0%, #64DCB4 50%, #A78BFA 100%);
    opacity: 0.22;
    animation: beamRotate5 22s ease-in-out infinite;
}

.beam-6 {
    left: 35%;
    bottom: 5%;
    height: 45vh;
    width: 2px;
    background: linear-gradient(0deg, #A78BFA 0%, #F5C842 50%, #64DCFF 100%);
    opacity: 0.18;
    animation: beamRotate6 30s ease-in-out infinite;
}

.beam-7 {
    left: 55%;
    bottom: 10%;
    height: 40vh;
    width: 5px;
    background: linear-gradient(0deg, #64DCB4 0%, #64DCFF 50%, #A78BFA 100%);
    opacity: 0.15;
    animation: beamRotate1 38s ease-in-out infinite reverse;
}

.beam-8 {
    left: 88%;
    top: 15%;
    height: 50vh;
    width: 2px;
    background: linear-gradient(180deg, #64DCFF 0%, #A78BFA 100%);
    opacity: 0.2;
    animation: beamRotate3 27s ease-in-out infinite reverse;
}

@keyframes beamRotate1 {
    0%, 100% { transform: rotate(-3deg) translateZ(50px); }
    50% { transform: rotate(5deg) translateZ(50px); }
}

@keyframes beamRotate2 {
    0%, 100% { transform: rotate(2deg) translateZ(50px); }
    50% { transform: rotate(-6deg) translateZ(50px); }
}

@keyframes beamRotate3 {
    0%, 100% { transform: rotate(-4deg) translateZ(50px); }
    50% { transform: rotate(4deg) translateZ(50px); }
}

@keyframes beamRotate4 {
    0%, 100% { transform: rotate(3deg) translateZ(50px); }
    50% { transform: rotate(-5deg) translateZ(50px); }
}

@keyframes beamRotate5 {
    0%, 100% { transform: rotate(-2deg) translateZ(50px); }
    50% { transform: rotate(6deg) translateZ(50px); }
}

@keyframes beamRotate6 {
    0%, 100% { transform: rotate(4deg) translateZ(50px); }
    50% { transform: rotate(-3deg) translateZ(50px); }
}

/* --- Floating Lens Elements --- */
#floating-lenses {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
}

.floating-lens {
    position: absolute;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(100, 220, 255, 0.2);
    background: rgba(100, 220, 255, 0.03);
}

.lens-1 {
    width: 48px;
    height: 48px;
    top: 20%;
    left: 15%;
    animation: lensFloat1 18s ease-in-out infinite;
}

.lens-2 {
    width: 32px;
    height: 32px;
    top: 60%;
    left: 40%;
    animation: lensFloat2 22s ease-in-out infinite;
}

.lens-3 {
    width: 56px;
    height: 56px;
    top: 35%;
    left: 70%;
    animation: lensFloat3 20s ease-in-out infinite;
}

.lens-4 {
    width: 24px;
    height: 24px;
    top: 75%;
    left: 25%;
    animation: lensFloat4 16s ease-in-out infinite;
}

.lens-5 {
    width: 40px;
    height: 40px;
    top: 45%;
    left: 85%;
    animation: lensFloat5 24s ease-in-out infinite;
}

.lens-6 {
    width: 36px;
    height: 36px;
    top: 15%;
    left: 55%;
    animation: lensFloat6 19s ease-in-out infinite;
}

@keyframes lensFloat1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(60px, -30px); }
    50% { transform: translate(120px, 20px); }
    75% { transform: translate(40px, 40px); }
}

@keyframes lensFloat2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-40px, 50px); }
    50% { transform: translate(30px, 80px); }
    75% { transform: translate(-20px, 30px); }
}

@keyframes lensFloat3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-80px, -20px); }
    50% { transform: translate(-40px, 40px); }
    75% { transform: translate(-100px, 10px); }
}

@keyframes lensFloat4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(50px, -40px); }
    50% { transform: translate(100px, -10px); }
    75% { transform: translate(30px, -50px); }
}

@keyframes lensFloat5 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-60px, 30px); }
    50% { transform: translate(-30px, -20px); }
    75% { transform: translate(-80px, 10px); }
}

@keyframes lensFloat6 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(40px, 40px); }
    50% { transform: translate(-20px, 60px); }
    75% { transform: translate(60px, 20px); }
}

/* --- Horizontal Scroll Track --- */
#horizontal-track {
    display: flex;
    height: 100vh;
    width: 700vw;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    perspective: 1000px;
}

#horizontal-track::-webkit-scrollbar {
    display: none;
}

/* --- Chamber Base Styles --- */
.chamber {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chamber-glass {
    position: relative;
    width: 85%;
    max-width: 700px;
    padding: 3rem 3.5rem;
    background: var(--glass-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    z-index: 10;
}

.chamber-glass::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 220, 255, 0.3), transparent);
}

.chamber-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* --- Chamber 0: Opening Hero --- */
.chamber-0 .chamber-content {
    min-height: 100vh;
}

.opening-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 0;
    background: var(--spectral-cyan);
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
}

.opening-beam.animate {
    animation: drawBeam 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes drawBeam {
    0% { height: 0; opacity: 0; }
    10% { opacity: 1; }
    100% { height: 80vh; opacity: 1; }
}

.prismatic-fan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 80vh;
    z-index: 1;
    opacity: 0;
}

.prismatic-fan.animate {
    opacity: 1;
}

.fan-beam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.prismatic-fan.animate .fan-beam {
    opacity: 0.5;
}

.fan-1 {
    background: linear-gradient(180deg, #64DCFF, transparent);
    transform: translateX(-50%) rotate(-8deg);
}

.fan-2 {
    background: linear-gradient(180deg, #64DCB4, transparent);
    transform: translateX(-50%) rotate(-4deg);
}

.fan-3 {
    background: linear-gradient(180deg, #A78BFA, transparent);
    transform: translateX(-50%) rotate(0deg);
}

.fan-4 {
    background: linear-gradient(180deg, #F5C842, transparent);
    transform: translateX(-50%) rotate(4deg);
}

.fan-5 {
    background: linear-gradient(180deg, #64DCFF, transparent);
    transform: translateX(-50%) rotate(8deg);
}

/* Site Title */
.site-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    letter-spacing: 0.02em;
    color: var(--frost-white);
    text-shadow: 0 0 30px rgba(100, 220, 255, 0.15);
    position: relative;
    z-index: 20;
    opacity: 0;
}

.site-title.animate {
    opacity: 1;
}

.title-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 1.2s ease 0.8s;
}

.title-char.visible {
    opacity: 1;
    transform: translateY(0);
}

.title-char[data-index="0"] { color: #64DCFF; }
.title-char[data-index="1"] { color: #64DCB4; }
.title-char[data-index="2"] { color: #A78BFA; }
.title-char[data-index="3"] { color: #F5C842; }
.title-char[data-index="4"] { color: #B8D4E3; }
.title-char[data-index="5"] { color: #64DCFF; }
.title-char[data-index="6"] { color: #64DCB4; }
.title-char[data-index="7"] { color: #A78BFA; }
.title-char[data-index="8"] { color: #F5C842; }

.title-char.normalize {
    color: var(--frost-white) !important;
}

/* Scan Indicator */
.scan-indicator {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    z-index: 20;
}

.scan-indicator.animate {
    animation: fadeInScan 0.6s ease forwards, pulseAttention 2.5s ease-in-out 1s infinite;
}

@keyframes fadeInScan {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pulseAttention {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.scan-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--aurora-teal);
}

.scan-arrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    color: var(--spectral-cyan);
    animation: arrowSlide 1.5s ease-in-out infinite;
}

@keyframes arrowSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* Iris Aperture Decoration */
.iris-aperture-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: apertureRotate 60s linear infinite;
}

@keyframes apertureRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Data Annotations */
.data-annotation {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--aurora-teal);
    opacity: 0.5;
    position: absolute;
}

.annotation-1 {
    top: 18%;
    right: 15%;
}

.annotation-2 {
    bottom: 22%;
    left: 12%;
}

.annotation-top {
    top: 0;
    left: 0;
    margin-bottom: 1.5rem;
    position: relative;
}

.annotation-bottom {
    bottom: 0;
    right: 0;
    margin-top: 1.5rem;
    position: relative;
}

/* --- Chamber Typography --- */
.chamber-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    letter-spacing: 0.02em;
    color: var(--frost-white);
    text-shadow: 0 0 30px rgba(100, 220, 255, 0.15);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.chamber.in-view .chamber-title {
    opacity: 1;
    transform: translateY(0);
}

.chamber-body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.15vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: var(--pale-sky);
    max-width: 520px;
    margin: 0 auto 2rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.chamber.in-view .chamber-body {
    opacity: 1;
    transform: translateY(0);
}

/* --- Chamber Visuals --- */
.chamber-visual {
    margin: 1.5rem auto;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.chamber.in-view .chamber-visual {
    opacity: 1;
    transform: scale(1);
}

.chamber-svg {
    display: block;
    margin: 0 auto;
}

/* Spectrum Bars */
.spectrum-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 180px;
    width: 100%;
    max-width: 300px;
}

.spectrum-bar {
    width: 20px;
    border-radius: 4px 4px 0 0;
    opacity: 0.6;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chamber.in-view .spectrum-bar {
    transform: scaleY(1);
}

.spectrum-bar:nth-child(1) { transition-delay: 0.35s; }
.spectrum-bar:nth-child(2) { transition-delay: 0.42s; }
.spectrum-bar:nth-child(3) { transition-delay: 0.49s; }
.spectrum-bar:nth-child(4) { transition-delay: 0.56s; }
.spectrum-bar:nth-child(5) { transition-delay: 0.63s; }
.spectrum-bar:nth-child(6) { transition-delay: 0.7s; }
.spectrum-bar:nth-child(7) { transition-delay: 0.77s; }
.spectrum-bar:nth-child(8) { transition-delay: 0.84s; }

/* --- Iris Hub Navigation --- */
#iris-hub {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 500;
}

#iris-hub-toggle {
    cursor: pointer;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

#iris-hub-toggle:hover {
    transform: scale(1.15);
    opacity: 1;
}

#iris-hub-expanded {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
    background: rgba(10, 22, 40, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50%;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#iris-hub-expanded.open {
    transform: translate(50%, 50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.iris-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    fill: var(--spectral-cyan);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: fill 0.2s ease, font-size 0.2s ease;
}

.iris-label:hover {
    fill: var(--frost-white);
    font-size: 10px;
}

.iris-center-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    fill: var(--aurora-teal);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.iris-ring {
    transition: transform 0.3s ease;
    transform-origin: 150px 150px;
}

.iris-ring:hover {
    transform: scale(1.05);
}

/* --- Lens Overlap Zones --- */
.chamber::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6vw;
    width: 12vw;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(100, 220, 255, 0.03), rgba(167, 139, 250, 0.02), transparent);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

.chamber:last-child::after {
    display: none;
}

/* --- Chamber-specific color accents --- */
.chamber-1 .chamber-glass {
    border-color: rgba(100, 220, 255, 0.15);
}

.chamber-2 .chamber-glass {
    border-color: rgba(100, 220, 180, 0.15);
}

.chamber-3 .chamber-glass {
    border-color: rgba(167, 139, 250, 0.15);
}

.chamber-4 .chamber-glass {
    border-color: rgba(245, 200, 66, 0.12);
}

.chamber-5 .chamber-glass {
    border-color: rgba(100, 220, 255, 0.12);
}

.chamber-6 .chamber-glass {
    border-color: rgba(184, 212, 227, 0.12);
}

/* Chamber title color accents */
.chamber-1 .chamber-title {
    text-shadow: 0 0 30px rgba(100, 220, 255, 0.2);
}

.chamber-2 .chamber-title {
    text-shadow: 0 0 30px rgba(100, 220, 180, 0.2);
}

.chamber-3 .chamber-title {
    text-shadow: 0 0 30px rgba(167, 139, 250, 0.2);
}

.chamber-4 .chamber-title {
    text-shadow: 0 0 30px rgba(245, 200, 66, 0.15);
}

.chamber-5 .chamber-title {
    text-shadow: 0 0 30px rgba(100, 220, 255, 0.2);
}

.chamber-6 .chamber-title {
    text-shadow: 0 0 30px rgba(184, 212, 227, 0.15);
}

/* --- Tilt 3D hover on glass panels --- */
.chamber-glass {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.chamber-glass:hover {
    box-shadow: 0 20px 60px rgba(100, 220, 255, 0.06), 0 0 0 1px rgba(100, 220, 255, 0.08);
}

/* --- Responsive: Vertical stack below 768px --- */
@media (max-width: 768px) {
    html {
        overflow: auto;
        overflow-x: hidden;
    }

    body {
        overflow: auto;
        overflow-x: hidden;
    }

    #horizontal-track {
        flex-direction: column;
        width: 100vw;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
    }

    .chamber {
        flex: 0 0 auto;
        width: 100vw;
        min-height: 80vh;
        height: auto;
        scroll-snap-align: start;
    }

    .chamber-glass {
        width: 90%;
        padding: 2rem 1.5rem;
    }

    .chamber::after {
        right: auto;
        bottom: -6vh;
        top: auto;
        width: 100%;
        height: 12vh;
        background: linear-gradient(180deg, transparent, rgba(100, 220, 255, 0.03), rgba(167, 139, 250, 0.02), transparent);
    }

    #iris-hub {
        bottom: 15px;
        right: 15px;
    }

    .site-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .chamber-title {
        font-size: clamp(1.8rem, 6vw, 3rem);
    }

    .beam {
        opacity: 0.15;
    }

    .scan-indicator {
        bottom: 10%;
    }

    .scan-text::after {
        content: ' (swipe down)';
    }

    .scan-arrow {
        transform: rotate(90deg);
    }
}

/* --- Selection styling --- */
::selection {
    background: rgba(100, 220, 255, 0.25);
    color: var(--frost-white);
}