/* ============================================
   thesecond.quest - Cyberpunk Intelligence Briefing Terminal
   ============================================ */

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

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #00E5CC33 #0A0C10;
}

body {
    background-color: #0A0C10;
    color: #8B8D93;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 1.85;
    letter-spacing: 0.04em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Font Classes --- */
.share-tech {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.3;
}

.ibm-plex {
    font-family: 'IBM Plex Mono', monospace;
}

/* --- HUD Frame Overlay --- */
#hud-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#hud-frame.visible {
    opacity: 1;
}

#hud-frame.dim {
    opacity: 0.15;
}

/* Corner Brackets */
.hud-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hud-corner.visible {
    opacity: 1;
}

.hud-corner-tl {
    top: 48px;
    left: 48px;
    border-top: 1px solid #00E5CC;
    border-left: 1px solid #00E5CC;
}

.hud-corner-tr {
    top: 48px;
    right: 48px;
    border-top: 1px solid #00E5CC;
    border-right: 1px solid #00E5CC;
}

.hud-corner-bl {
    bottom: 48px;
    left: 48px;
    border-bottom: 1px solid #00E5CC;
    border-left: 1px solid #00E5CC;
}

.hud-corner-br {
    bottom: 48px;
    right: 48px;
    border-bottom: 1px solid #00E5CC;
    border-right: 1px solid #00E5CC;
}

/* HUD Connecting Lines */
.hud-line {
    position: absolute;
    background-color: #00E5CC;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hud-line.visible {
    opacity: 0.3;
}

.hud-line-top {
    top: 48px;
    left: 72px;
    right: 72px;
    height: 1px;
}

.hud-line-bottom {
    bottom: 48px;
    left: 72px;
    right: 72px;
    height: 1px;
}

.hud-line-left {
    top: 72px;
    left: 48px;
    bottom: 72px;
    width: 1px;
}

.hud-line-right {
    top: 72px;
    right: 48px;
    bottom: 72px;
    width: 1px;
}

/* HUD Status Bar */
#hud-status-bar {
    position: absolute;
    top: 52px;
    left: 80px;
    right: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#hud-status-bar.visible {
    opacity: 1;
}

.hud-data {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.6rem, 0.8vw, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #00E5CC;
    opacity: 0.7;
}

/* Scan Line */
#scan-line {
    position: fixed;
    top: 0;
    left: 48px;
    right: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00E5CC99, transparent);
    opacity: 0;
    z-index: 999;
    animation: scanSweep 8s linear infinite;
    pointer-events: none;
}

#scan-line.visible {
    opacity: 0.6;
}

@keyframes scanSweep {
    0% { top: 48px; }
    100% { top: calc(100vh - 48px); }
}

/* --- Data Stream Particles --- */
#data-streams {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.data-stream {
    position: absolute;
    width: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: #00E5CC;
    opacity: 0.07;
    writing-mode: vertical-rl;
    animation: streamFloat 60s linear infinite;
}

.data-stream-1 {
    left: 12px;
    animation-delay: 0s;
}

.data-stream-1::before {
    content: '01001101 01100001 01110100 01110010 01101001 01111000';
    white-space: nowrap;
}

.data-stream-2 {
    right: 24px;
    animation-delay: -20s;
}

.data-stream-2::before {
    content: '38.9072 77.0369 51.5074 0.1278 35.6762 139.6503';
    white-space: nowrap;
}

.data-stream-3 {
    left: 30px;
    animation-delay: -40s;
}

.data-stream-3::before {
    content: '0xE5CC 0xCC00 0xE5CC 0x0A0C 0x14161C';
    white-space: nowrap;
}

@keyframes streamFloat {
    0% { transform: translateY(100vh); }
    100% { transform: translateY(-200vh); }
}

/* --- Sections --- */
.section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* --- Opening Sequence --- */
#opening {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.opening-text-container {
    text-align: center;
    padding: 0 48px;
}

#opening-text {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #00E5CC;
    opacity: 0;
}

#opening-text.revealed {
    opacity: 1;
}

#opening-text.faded {
    opacity: 0.3;
    transform: translateY(-40px);
    transition: opacity 1s ease, transform 1.5s ease;
}

#opening-text .char {
    opacity: 0;
    transition: opacity 0.05s ease;
    display: inline-block;
}

#opening-text .char.visible {
    opacity: 1;
}

#opening-text .char.space {
    width: 0.4em;
}

/* --- Decontamination Zones --- */
.decontamination-zone {
    position: relative;
    height: 80vh;
    background-color: #0A0C10;
    overflow: hidden;
}

.decon-scan-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00E5CC66, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.decontamination-zone.in-view .decon-scan-line {
    opacity: 1;
    animation: deconSweep 4s ease-in-out infinite;
}

@keyframes deconSweep {
    0% { top: 10%; }
    50% { top: 90%; }
    100% { top: 10%; }
}

/* --- Section Content Layout --- */
.section-content {
    position: relative;
    z-index: 10;
    padding: 120px 48px 120px;
}

.section-left {
    max-width: 55%;
    margin-left: 8%;
}

.section-center {
    max-width: 70%;
    margin: 0 auto;
    text-align: center;
}

.section-right {
    max-width: 55%;
    margin-left: auto;
    margin-right: 8%;
}

/* --- Classification Stamps --- */
.classification-stamp {
    display: inline-block;
    border: 1px solid #CC00E5;
    padding: 6px 16px;
    margin-bottom: 60px;
    transform: rotate(-2deg);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.classification-stamp.visible {
    opacity: 1;
}

.classification-stamp span {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    color: #CC00E5;
    text-transform: uppercase;
}

/* --- Gutter Marker --- */
.gutter-marker {
    position: absolute;
    right: -40px;
    top: 180px;
    bottom: 120px;
    width: 1px;
    background-color: #00E5CC;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.gutter-marker.pulse {
    opacity: 0.5;
}

/* --- Context Paragraphs --- */
.context-paragraphs p {
    color: #8B8D93;
    margin-bottom: 40vh;
    max-width: 600px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.context-paragraphs p:last-child {
    margin-bottom: 80px;
}

.context-paragraphs p.in-view {
    opacity: 1;
    transform: translateY(0);
}

.context-paragraphs p .char {
    opacity: 0;
    transition: opacity 0.03s ease;
    display: inline-block;
}

.context-paragraphs p .char.visible {
    opacity: 1;
}

.context-paragraphs p .char.space {
    width: 0.35em;
}

/* --- Data Field Section --- */
.data-visualization {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    margin-bottom: 80px;
    padding-top: 40px;
}

.reticle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reticle-container.in-view {
    opacity: 1;
    transform: scale(1);
}

.targeting-reticle {
    animation: reticleRotate 90s linear infinite;
}

.reticle-outer {
    fill: none;
    stroke: #00E5CC;
    stroke-width: 0.5;
    opacity: 0.4;
    stroke-dasharray: 565;
    stroke-dashoffset: 565;
    transition: stroke-dashoffset 1.5s ease;
}

.reticle-container.in-view .reticle-outer {
    stroke-dashoffset: 0;
}

.reticle-mid {
    fill: none;
    stroke: #E5CC00;
    stroke-width: 0.5;
    opacity: 0.3;
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    transition: stroke-dashoffset 1.2s ease 0.3s;
}

.reticle-container.in-view .reticle-mid {
    stroke-dashoffset: 0;
}

.reticle-inner {
    fill: none;
    stroke: #CC00E5;
    stroke-width: 0.5;
    opacity: 0.5;
    stroke-dasharray: 188;
    stroke-dashoffset: 188;
    transition: stroke-dashoffset 0.8s ease 0.6s;
}

.reticle-container.in-view .reticle-inner {
    stroke-dashoffset: 0;
}

.reticle-cross {
    stroke: #00E5CC;
    stroke-width: 0.5;
    opacity: 0.6;
}

@keyframes reticleRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.reticle-data {
    text-align: center;
}

.data-value {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #00E5CC;
    margin-bottom: 8px;
}

.data-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.55rem, 0.7vw, 0.65rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #8B8D93;
    text-transform: uppercase;
}

/* --- Data Grid --- */
.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 60px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.data-grid.in-view {
    opacity: 1;
    transform: translateY(0);
}

.data-cell {
    padding: 24px;
    border: 1px solid #14161C;
    background-color: #14161C;
    text-align: left;
    position: relative;
}

.data-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #00E5CC;
    opacity: 0.3;
}

.data-cell-label {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #8B8D93;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.data-cell-value {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.data-cell-value.cyan { color: #00E5CC; }
.data-cell-value.magenta { color: #CC00E5; }
.data-cell-value.gold { color: #E5CC00; }

/* --- Geometric Motifs --- */
.geometric-motif {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease;
}

.geometric-motif.in-view {
    opacity: 1;
}

.motif-hex {
    bottom: 100px;
    left: 60px;
    animation: motifRotate 90s linear infinite;
}

@keyframes motifRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Transmission Log --- */
.transmission-messages {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.message-block {
    position: relative;
    padding: 30px 0 30px 24px;
    border-left: 1px solid #CC00E5;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.message-block.in-view {
    opacity: 1;
    transform: translateX(0);
}

.message-block.glitch {
    animation: glitchFlash 0.05s linear;
}

@keyframes glitchFlash {
    0% { transform: translateX(2px); filter: invert(1); }
    100% { transform: translateX(0); filter: invert(0); }
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.message-timestamp {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.55rem, 0.7vw, 0.65rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #E5CC00;
}

.message-origin {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.55rem, 0.7vw, 0.65rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #CC00E5;
    opacity: 0.7;
}

.message-text {
    color: #E0DDD5;
    font-weight: 300;
    max-width: 540px;
}

.message-text .char {
    opacity: 0;
    transition: opacity 0.03s ease;
    display: inline-block;
}

.message-text .char.visible {
    opacity: 1;
}

.message-text .char.space {
    width: 0.35em;
}

/* --- Closing Sequence --- */
#closing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.closing-content {
    text-align: center;
    padding: 0 48px;
    z-index: 10;
    position: relative;
}

#closing-text {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #00E5CC;
    opacity: 0;
}

#closing-text .char {
    opacity: 0;
    transition: opacity 0.05s ease;
    display: inline-block;
}

#closing-text .char.visible {
    opacity: 1;
}

#closing-text .char.space {
    width: 0.4em;
}

/* --- Bokeh Fields --- */
.bokeh-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 2s ease;
}

.bokeh-field.active {
    opacity: 1;
}

.bokeh-cyan::before,
.bokeh-cyan::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bokeh-cyan::before {
    background:
        radial-gradient(circle 120px at 15% 20%, #00E5CC12 0%, transparent 100%),
        radial-gradient(circle 80px at 70% 40%, #00E5CC0D 0%, transparent 100%),
        radial-gradient(circle 160px at 40% 70%, #00E5CC0A 0%, transparent 100%),
        radial-gradient(circle 60px at 85% 15%, #00E5CC0F 0%, transparent 100%),
        radial-gradient(circle 100px at 25% 85%, #00E5CC0D 0%, transparent 100%);
    animation: bokehDrift1 30s ease-in-out infinite alternate;
}

.bokeh-cyan::after {
    background:
        radial-gradient(circle 90px at 60% 30%, #00E5CC0A 0%, transparent 100%),
        radial-gradient(circle 140px at 20% 60%, #00E5CC0D 0%, transparent 100%),
        radial-gradient(circle 70px at 80% 80%, #00E5CC0F 0%, transparent 100%);
    animation: bokehDrift2 30s ease-in-out infinite alternate-reverse;
}

.bokeh-triadic::before,
.bokeh-triadic::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bokeh-triadic::before {
    background:
        radial-gradient(circle 140px at 10% 25%, #00E5CC14 0%, transparent 100%),
        radial-gradient(circle 100px at 55% 15%, #CC00E512 0%, transparent 100%),
        radial-gradient(circle 180px at 80% 50%, #E5CC0010 0%, transparent 100%),
        radial-gradient(circle 80px at 30% 70%, #00E5CC0D 0%, transparent 100%),
        radial-gradient(circle 120px at 70% 80%, #CC00E50D 0%, transparent 100%);
    animation: bokehDrift1 30s ease-in-out infinite alternate;
}

.bokeh-triadic::after {
    background:
        radial-gradient(circle 100px at 45% 35%, #E5CC000F 0%, transparent 100%),
        radial-gradient(circle 160px at 15% 55%, #CC00E50A 0%, transparent 100%),
        radial-gradient(circle 90px at 85% 25%, #00E5CC12 0%, transparent 100%),
        radial-gradient(circle 130px at 60% 75%, #E5CC000D 0%, transparent 100%);
    animation: bokehDrift2 30s ease-in-out infinite alternate-reverse;
}

.bokeh-magenta::before,
.bokeh-magenta::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bokeh-magenta::before {
    background:
        radial-gradient(circle 130px at 20% 30%, #CC00E512 0%, transparent 100%),
        radial-gradient(circle 90px at 75% 20%, #CC00E50D 0%, transparent 100%),
        radial-gradient(circle 160px at 50% 65%, #CC00E50A 0%, transparent 100%),
        radial-gradient(circle 70px at 85% 75%, #00E5CC0D 0%, transparent 100%);
    animation: bokehDrift1 30s ease-in-out infinite alternate;
}

.bokeh-magenta::after {
    background:
        radial-gradient(circle 110px at 35% 55%, #CC00E50F 0%, transparent 100%),
        radial-gradient(circle 80px at 65% 85%, #E5CC000A 0%, transparent 100%),
        radial-gradient(circle 150px at 15% 80%, #CC00E50D 0%, transparent 100%);
    animation: bokehDrift2 30s ease-in-out infinite alternate-reverse;
}

.bokeh-intense::before,
.bokeh-intense::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bokeh-intense::before {
    background:
        radial-gradient(circle 200px at 15% 20%, #00E5CC1A 0%, transparent 100%),
        radial-gradient(circle 160px at 60% 30%, #CC00E518 0%, transparent 100%),
        radial-gradient(circle 180px at 80% 60%, #E5CC0016 0%, transparent 100%),
        radial-gradient(circle 140px at 30% 75%, #00E5CC14 0%, transparent 100%),
        radial-gradient(circle 120px at 70% 85%, #CC00E512 0%, transparent 100%),
        radial-gradient(circle 100px at 45% 50%, #E5CC0014 0%, transparent 100%);
    animation: bokehDrift1 30s ease-in-out infinite alternate;
}

.bokeh-intense::after {
    background:
        radial-gradient(circle 180px at 40% 15%, #CC00E516 0%, transparent 100%),
        radial-gradient(circle 150px at 75% 45%, #00E5CC18 0%, transparent 100%),
        radial-gradient(circle 130px at 20% 60%, #E5CC0014 0%, transparent 100%),
        radial-gradient(circle 170px at 55% 80%, #00E5CC16 0%, transparent 100%),
        radial-gradient(circle 110px at 85% 20%, #CC00E514 0%, transparent 100%);
    animation: bokehDrift2 30s ease-in-out infinite alternate-reverse;
}

@keyframes bokehDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -15px) scale(1.02); }
    66% { transform: translate(-10px, 10px) scale(0.98); }
    100% { transform: translate(15px, -5px) scale(1.01); }
}

@keyframes bokehDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-15px, 10px) scale(0.98); }
    66% { transform: translate(10px, -20px) scale(1.03); }
    100% { transform: translate(-5px, 15px) scale(1); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-left,
    .section-right {
        max-width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .section-center {
        max-width: 95%;
    }

    .data-visualization {
        gap: 40px;
    }

    .data-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hud-corner-tl,
    .hud-corner-tr,
    .hud-corner-bl,
    .hud-corner-br {
        display: none;
    }

    .hud-line {
        display: none;
    }

    #hud-status-bar {
        left: 16px;
        right: 16px;
        top: 16px;
    }

    .gutter-marker {
        display: none;
    }

    .context-paragraphs p {
        margin-bottom: 20vh;
    }

    .message-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .section-content {
        padding: 80px 20px;
    }

    .reticle-container svg {
        width: 140px;
        height: 140px;
    }

    .data-visualization {
        gap: 30px;
    }
}

/* --- Selection --- */
::selection {
    background-color: #00E5CC33;
    color: #E0DDD5;
}