/* =====================================================
   eyes.team - Panopticon Surveillance Interface
   ===================================================== */

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

:root {
    --facility-black: #0B0C0F;
    --phosphor-white: #E8E6E1;
    --instrument-green: #7BA98F;
    --calibration-amber: #C4923A;
    --sighting-red: #8B2D3A;
    --lens-smoke: #1A1D24;
    --reticle-gray: #3A3D45;

    --scroll: 0;
    --mx: -100px;
    --my: -100px;
}

html {
    overflow-y: scroll;
    scroll-behavior: auto;
}

body {
    background: var(--facility-black);
    color: var(--phosphor-white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
    cursor: crosshair;
}

/* --- Scan Line --- */
#scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    background: var(--instrument-green);
    opacity: 0.15;
    z-index: 9998;
    animation: scanDown 12s linear infinite;
    pointer-events: none;
}

@keyframes scanDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* --- Cursor Reticle --- */
#cursor-reticle {
    position: fixed;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 9999;
    left: var(--mx);
    top: var(--my);
    transform: translate(-50%, -50%);
    transition: left 150ms linear, top 150ms linear;
    opacity: 0.8;
}

/* Hide reticle on touch devices */
@media (hover: none) {
    #cursor-reticle {
        display: none;
    }
}

/* --- Radial Section --- */
#radial-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 800ms ease-out;
    z-index: 10;
}

#radial-section.dissolved {
    opacity: 0;
    pointer-events: none;
}

/* --- Ring Guides SVG --- */
#ring-guides {
    position: absolute;
    width: 200vmax;
    height: 200vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.ring-guide {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.ring-guide.animate-in {
    animation: drawRing 400ms linear forwards;
}

.ring-guide-1.animate-in { animation-delay: 0ms; }
.ring-guide-2.animate-in { animation-delay: 200ms; }
.ring-guide-3.animate-in { animation-delay: 400ms; }

@keyframes drawRing {
    to { stroke-dashoffset: 0; }
}

/* --- The Aperture --- */
#aperture {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--reticle-gray);
    z-index: 100;
    opacity: 0;
    transition: opacity 400ms linear;
}

#aperture.visible {
    opacity: 1;
}

#aperture-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--sighting-red);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s step-start infinite;
}

@keyframes pulse {
    0%, 50% { opacity: 1; }
    50.1%, 100% { opacity: 0.3; }
}

/* Crosshair lines */
.crosshair {
    position: absolute;
    background: var(--reticle-gray);
    transform-origin: center;
}

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

.crosshair-right {
    width: 20px;
    height: 1px;
    top: 50%;
    right: -21px;
    transform: translateY(-50%) scaleX(0);
}

.crosshair-bottom {
    width: 1px;
    height: 20px;
    left: 50%;
    bottom: -21px;
    transform: translateX(-50%) scaleY(0);
}

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

.crosshair.extend {
    transition: transform 600ms linear;
}

.crosshair-top.extend { transform: translateX(-50%) scaleY(1); }
.crosshair-right.extend { transform: translateY(-50%) scaleX(1); }
.crosshair-bottom.extend { transform: translateX(-50%) scaleY(1); }
.crosshair-left.extend { transform: translateY(-50%) scaleX(1); }

.crosshair-top.extend { transition-delay: 0ms; }
.crosshair-right.extend { transition-delay: 100ms; }
.crosshair-bottom.extend { transition-delay: 200ms; }
.crosshair-left.extend { transition-delay: 300ms; }

/* --- Ring 1: Title Letters --- */
#ring-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
    transform: rotate(calc(var(--scroll) * 0.1deg));
    will-change: transform;
}

.title-letter {
    position: absolute;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.15em;
    color: var(--phosphor-white);
    /* Position along circular path at r=250px from center */
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(-250px)
        rotate(calc(var(--angle) * -1));
    opacity: 0;
    transition: opacity 80ms linear;
}

.title-letter.visible {
    opacity: 1;
}

/* --- Ring 2: Cardinal Blocks --- */
#ring-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 40;
    transform: rotate(calc(var(--scroll) * -0.07deg));
    will-change: transform;
}

.cardinal-block {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.4vw, 0.95rem);
    line-height: 1.65;
    color: var(--phosphor-white);
    opacity: 0;
    transition: opacity 300ms linear;
}

.cardinal-block.visible {
    opacity: 1;
}

/* North - narrow, top */
.cardinal-n {
    width: 180px;
    transform: translate(-50%, -50%) translateY(-500px);
    text-align: left;
}

/* East - wide, right */
.cardinal-e {
    width: 280px;
    transform: translate(-50%, -50%) translateX(500px);
    text-align: left;
}

/* South - narrow, bottom */
.cardinal-s {
    width: 180px;
    transform: translate(-50%, -50%) translateY(500px);
    text-align: left;
}

/* West - wide, left */
.cardinal-w {
    width: 280px;
    transform: translate(-50%, -50%) translateX(-500px);
    text-align: left;
}

/* --- Ring 3: Data Readouts --- */
#ring-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30;
    transform: rotate(calc(var(--scroll) * 0.04deg));
    will-change: transform;
}

.data-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    font-variant-numeric: tabular-nums;
    color: var(--instrument-green);
    text-shadow: 0 0 4px rgba(123, 169, 143, 0.25);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 200ms linear;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(-750px)
        rotate(calc(var(--angle) * -1));
}

.data-readout.visible {
    opacity: 1;
}

/* --- Transition: Radial dissolve --- */
#radial-section.dissolving .ring {
    transition: transform 800ms ease-out, opacity 800ms ease-out;
}

#radial-section.dissolving #ring-1 .title-letter {
    transition: transform 800ms ease-out, opacity 800ms ease-out;
    opacity: 0;
}

#radial-section.dissolving .cardinal-block,
#radial-section.dissolving .data-readout {
    transition: transform 800ms ease-out, opacity 800ms ease-out;
    opacity: 0;
}

/* --- Linear Section --- */
#linear-section {
    position: relative;
    z-index: 5;
    opacity: 0;
    transition: opacity 800ms ease-out;
    padding: 100vh 0 200px 0;
    pointer-events: none;
}

#linear-section.active {
    opacity: 1;
    pointer-events: auto;
}

.linear-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* Observation Ports - circular masks */
.observation-port {
    background: var(--lens-smoke);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    border: 1px solid var(--reticle-gray);
}

.observation-port h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--phosphor-white);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.observation-port p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    line-height: 1.65;
    color: var(--phosphor-white);
    opacity: 0.85;
}

.observation-port .data-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    color: var(--instrument-green);
    text-shadow: 0 0 4px rgba(123, 169, 143, 0.25);
    font-variant-numeric: tabular-nums;
}

.port-large {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    clip-path: circle(50%);
}

.port-medium {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    clip-path: circle(50%);
}

.port-small {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    clip-path: circle(50%);
}

.port-offset-right {
    align-self: flex-end;
}

.port-offset-left {
    align-self: flex-start;
}

/* --- Scroll Spacer --- */
#scroll-spacer {
    height: 6000px;
    pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .title-letter {
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateY(-160px)
            rotate(calc(var(--angle) * -1));
    }

    .cardinal-n {
        width: 140px;
        transform: translate(-50%, -50%) translateY(-320px);
    }

    .cardinal-e {
        width: 200px;
        transform: translate(-50%, -50%) translateX(300px);
    }

    .cardinal-s {
        width: 140px;
        transform: translate(-50%, -50%) translateY(320px);
    }

    .cardinal-w {
        width: 200px;
        transform: translate(-50%, -50%) translateX(-300px);
    }

    .data-readout {
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateY(-440px)
            rotate(calc(var(--angle) * -1));
    }

    .port-large {
        width: 300px;
        height: 300px;
    }

    .port-medium {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 600px) {
    .title-letter {
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateY(-120px)
            rotate(calc(var(--angle) * -1));
    }

    .cardinal-n {
        transform: translate(-50%, -50%) translateY(-240px);
    }

    .cardinal-e {
        width: 160px;
        transform: translate(-50%, -50%) translateX(220px);
    }

    .cardinal-s {
        transform: translate(-50%, -50%) translateY(240px);
    }

    .cardinal-w {
        width: 160px;
        transform: translate(-50%, -50%) translateX(-220px);
    }

    .data-readout {
        transform:
            translate(-50%, -50%)
            rotate(var(--angle))
            translateY(-340px)
            rotate(calc(var(--angle) * -1));
    }

    .port-large {
        width: 260px;
        height: 260px;
        padding: 24px;
    }

    .port-medium {
        width: 200px;
        height: 200px;
        padding: 24px;
    }

    .port-small {
        width: 100px;
        height: 100px;
    }
}