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


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


body {
    background: #050708;
    color: #d0d7d2;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   ROOM
   ========================================================= */

#room {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #050708;
}


/* =========================================================
   WORLD
   ========================================================= */

#world {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    filter:
        brightness(1.06)
        contrast(1.05);
}


/* =========================================================
   STRUCTURAL LINES
   ========================================================= */

.inner-line {
    stroke: #74847c;
    stroke-width: 2;
    opacity: 0.20;

    animation:
        ambientLine 7s ease-in-out infinite;
}


.inner-line.dim {
    opacity: 0.08;
}


@keyframes ambientLine {

    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.31;
    }
}


.bottom-seam {
    stroke: #596760;
    stroke-width: 2;
    opacity: 0.23;

    animation:
        seamPulse 6s ease-in-out infinite;
}


.bottom-seam.dim {
    opacity: 0.10;
}


@keyframes seamPulse {

    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.27;
    }
}


/* =========================================================
   MACHINES
   ========================================================= */

.machine-line {
    stroke: #78857f;
    stroke-width: 2;
    opacity: 0.38;
}


.machine-line.dim {
    opacity: 0.15;
}


.machine {
    animation:
        machineIdle 8s ease-in-out infinite;
}


.idle-machine:nth-of-type(2) {
    animation-delay: -3.2s;
}


@keyframes machineIdle {

    0%,
    100% {
        opacity: 0.58;
    }

    46% {
        opacity: 0.72;
    }

    53% {
        opacity: 0.60;
    }

    57% {
        opacity: 0.76;
    }
}


/* =========================================================
   TERMINALS
   ========================================================= */

.terminal {
    cursor: pointer;

    outline: none;

    transform-box: fill-box;
    transform-origin: center;

    transition:
        filter 170ms ease,
        opacity 170ms ease;
}


.terminal-shell {
    fill: #070a0b;

    stroke: #303a37;
    stroke-width: 3;
}


.terminal-screen {
    fill: url(#screen);

    stroke: #26302e;
    stroke-width: 2;

    animation:
        screenIdle 8s ease-in-out infinite;
}


.terminal-profile .terminal-screen {
    animation-delay: -1.8s;
}


.terminal-projects .terminal-screen {
    animation-delay: -4.4s;
}


.terminal-logs .terminal-screen {
    animation-delay: -2.9s;
}


.terminal-books .terminal-screen {
    animation-delay: -5.7s;
}


.terminal-contact .terminal-screen {
    animation-delay: -3.6s;
}


@keyframes screenIdle {

    0%,
    100% {
        opacity: 0.86;
    }

    44% {
        opacity: 0.97;
    }

    47% {
        opacity: 0.76;
    }

    50% {
        opacity: 0.93;
    }

    54% {
        opacity: 0.84;
    }

    58% {
        opacity: 0.96;
    }
}


.terminal-shadow {
    fill: #010203;

    opacity: 0.72;

    filter: url(#shadow);
}


.screen-gloss {
    fill: #d7e0db;

    opacity: 0.035;
}


/* =========================================================
   TERMINAL TEXT
   ========================================================= */

.terminal-title {
    fill: #d3dad5;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: 4px;

    pointer-events: none;
}


.terminal-title.small {
    font-size: 14px;

    letter-spacing: 3px;
}


.terminal-caption {
    fill: #78847e;

    font-size: 8px;

    letter-spacing: 3px;

    pointer-events: none;
}


.terminal-caption.small {
    font-size: 6px;
}


/* =========================================================
   TERMINAL LIGHTS
   ========================================================= */

.green-light {
    fill: #91ad9c;
}


.orange-light {
    fill: #bf8d64;
}


.light-glow {
    filter: url(#blur);

    opacity: 0.14;
}


.green-glow {
    fill: #91ad9c;
}


.orange-glow {
    fill: #bf8d64;
}


.idle-light {
    animation:
        lightIdle 4.4s ease-in-out infinite;

    transform-box: fill-box;
    transform-origin: center;
}


.terminal-profile .idle-light {
    animation-delay: -1.4s;
}


.terminal-projects .idle-light {
    animation-delay: -3.7s;
}


.terminal-logs .idle-light {
    animation-delay: -0.8s;
}


.terminal-books .idle-light {
    animation-delay: -2.5s;
}


.terminal-contact .idle-light {
    animation-delay: -4s;
}


@keyframes lightIdle {

    0%,
    100% {
        opacity: 0.27;
    }

    30% {
        opacity: 0.58;
    }

    48% {
        opacity: 0.36;
    }

    57% {
        opacity: 0.92;
    }

    64% {
        opacity: 0.44;
    }

    78% {
        opacity: 0.68;
    }
}


/* =========================================================
   TERMINAL INTERACTION
   ========================================================= */

.terminal:hover,
.terminal:focus-visible {

    filter:
        brightness(1.18)
        contrast(1.05);
}


.terminal:focus-visible {
    stroke: none;
}


.terminal-profile:hover,
.terminal-profile:focus-visible {
    opacity: 1;
}


.terminal-projects:hover,
.terminal-projects:focus-visible {
    opacity: 1;
}


.terminal-logs:hover,
.terminal-logs:focus-visible {
    opacity: 1;
}


.terminal-books:hover,
.terminal-books:focus-visible {
    opacity: 1;
}


.terminal-contact:hover,
.terminal-contact:focus-visible {
    opacity: 1;
}


/* =========================================================
   SYSTEM MARK
   ========================================================= */

.system-mark {
    position: absolute;

    top: 18px;
    left: 22px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: white;

    font-size: 8px;

    letter-spacing: 3px;

    pointer-events: none;

    user-select: none;
}


.mark-dot {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #95a399;

    animation:
        markIdle 4s ease-in-out infinite;
}


@keyframes markIdle {

    0%,
    100% {
        opacity: 0.28;
    }

    50% {
        opacity: 0.9;
    }
}


/* =========================================================
   CONTENT PANEL
   ========================================================= */

.content-panel {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(560px, 82vw);

    max-height: 72vh;

    padding: 35px 38px 38px;

    background:
        linear-gradient(
            135deg,
            rgba(24, 32, 31, 0.98),
            rgba(7, 10, 11, 0.99)
        );

    border: 2px solid #38413f;

    clip-path:
        polygon(
            0 5%,
            95% 0,
            100% 8%,
            97% 96%,
            8% 100%,
            0 90%
        );

    transform:
        translate(-50%, -50%)
        scale(0.95);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.8);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;
}


.content-panel.open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-accent {
    width: 74px;
    height: 2px;

    margin-bottom: 24px;

    background: #87968d;
}


.content-category {
    margin-bottom: 8px;

    color: #748078;

    font-size: 8px;

    letter-spacing: 4px;
}


.content-panel h1 {

    margin-bottom: 23px;

    color: #d4dbd6;

    font-size:
        clamp(
            30px,
            5vw,
            47px
        );

    font-weight: 500;

    letter-spacing: 2px;
}


.content-body {

    max-height: 42vh;

    overflow-y: auto;

    color: #9aa59f;

    font-size: 14px;

    line-height: 1.8;
}


.content-body p {
    margin-bottom: 15px;
}


.content-body strong {
    color: #d0d7d2;
}


/* =========================================================
   CLOSE
   ========================================================= */

.close-panel {

    position: absolute;

    top: 13px;
    right: 15px;

    width: 30px;
    height: 30px;

    border: 0;

    background: transparent;

    color: #747f79;

    font-size: 25px;

    font-weight: 300;

    cursor: pointer;
}


.close-panel:hover {
    color: #d4dbd6;
}


/* =========================================================
   VIGNETTE
   ========================================================= */

.vignette {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 43%,
            rgba(0, 0, 0, 0.08) 62%,
            rgba(0, 0, 0, 0.48) 100%
        );

    pointer-events: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    #world {
        filter:
            brightness(1.03)
            contrast(1.03);
    }

    .system-mark {
        top: 12px;
        left: 13px;
    }

    .content-panel {
        width: 88vw;

        padding:
            28px;
    }

    .content-panel h1 {
        font-size: 30px;
    }

    .content-body {
        font-size: 13px;
    }
}


@media (max-width: 550px) {

    .terminal-title {
        font-size: 16px;
    }

    .terminal-title.small {
        font-size: 10px;
    }

    .terminal-caption {
        font-size: 6px;
    }

    .terminal-caption.small {
        display: none;
    }
}

/* =========================================================
   CENTER DASHBOARDS
   ========================================================= */

.center-dashboard {
    pointer-events: none;
}


.dashboard-shell {
    fill: #080c0d;

    stroke: #3a4541;

    stroke-width: 2;
}


.dashboard-screen {
    fill: url(#screen);

    stroke: #27312f;

    stroke-width: 1.5;
}


.dashboard-gloss {
    fill: #d9e2dc;

    opacity: 0.045;
}


.dashboard-line {
    stroke: #91a49a;

    stroke-width: 1.6;

    opacity: 0.48;
}


.dashboard-line.dim {
    opacity: 0.18;
}


.dashboard-wave {
    fill: none;

    stroke: #9aac9f;

    stroke-width: 1.3;

    opacity: 0.52;

    stroke-linejoin: bevel;
}


.dashboard-vents line {
    stroke: #68766f;

    stroke-width: 1.5;

    opacity: 0.42;
}


.dashboard-screw {
    fill: #394440;

    stroke: #111617;

    stroke-width: 1;
}


.dashboard-label {
    fill: #65726c;

    font-size: 5px;

    letter-spacing: 1.5px;

    opacity: 0.85;
}


.dashboard-bar-base {
    fill: #202927;

    opacity: 0.7;
}


.dashboard-bar-active {
    fill: #82968b;

    opacity: 0.6;

    animation:
        dashboardBar 4s ease-in-out infinite;
}


.dashboard-right .dashboard-bar-active {
    animation-delay: -2s;
}


@keyframes dashboardBar {

    0%,
    100% {
        opacity: 0.32;
    }

    50% {
        opacity: 0.78;
    }
}


.dashboard-block {
    fill: #718077;

    opacity: 0.5;

    animation:
        blockFlicker 5s ease-in-out infinite;
}


.dashboard-block.dim {
    opacity: 0.16;
}


@keyframes blockFlicker {

    0%,
    100% {
        opacity: 0.22;
    }

    45% {
        opacity: 0.66;
    }

    52% {
        opacity: 0.32;
    }

    60% {
        opacity: 0.58;
    }
}


.dashboard-glow {
    filter: url(#blur);

    opacity: 0.16;
}

/* =========================================================
   FULL ENVIRONMENT DECORATION
   ========================================================= */

.environment-detail {
    pointer-events: none;
}


/* =========================================================
   VENTS
   ========================================================= */

.vent-line {
    stroke: #505c57;
    stroke-width: 2;

    opacity: 0.34;
}


.wall-vent {
    animation:
        ventIdle 9s ease-in-out infinite;
}


.wall-vent:nth-of-type(2) {
    animation-delay: -3s;
}


@keyframes ventIdle {

    0%,
    100% {
        opacity: 0.64;
    }

    50% {
        opacity: 0.82;
    }
}


/* =========================================================
   PIPE NETWORK
   ========================================================= */

.pipe-network {
    opacity: 0.9;
}


.pipe-network path {
    transition: opacity 300ms ease;
}


.pipe-network:hover path {
    opacity: 1;
}


/* =========================================================
   WARNING STRIPS
   ========================================================= */

.warning-line {
    stroke: #766a55;

    stroke-width: 5;

    opacity: 0.20;
}


.warning-panel {
    opacity: 0.72;
}


/* =========================================================
   HATCH
   ========================================================= */

.hatch-line {
    stroke: #5e6b65;

    stroke-width: 1.5;

    opacity: 0.35;
}


.hatch-line.dim {
    opacity: 0.14;
}


.hatch-bolt {
    fill: #4a5550;

    stroke: #101415;

    stroke-width: 1;
}


/* =========================================================
   SMALL MACHINES
   ========================================================= */

.environment-machine {
    opacity: 0.78;

    animation:
        environmentMachineIdle 7s ease-in-out infinite;
}


.environment-machine:nth-of-type(2) {
    animation-delay: -3.5s;
}


@keyframes environmentMachineIdle {

    0%,
    100% {
        opacity: 0.62;
    }

    42% {
        opacity: 0.82;
    }

    49% {
        opacity: 0.68;
    }

    56% {
        opacity: 0.87;
    }
}


/* =========================================================
   LIGHT STRIPS
   ========================================================= */

.small-light-strip {
    stroke: #7d9188;

    stroke-width: 3;

    opacity: 0.21;

    animation:
        stripIdle 6s ease-in-out infinite;
}


.small-light-strip.dim {
    opacity: 0.10;
}


@keyframes stripIdle {

    0%,
    100% {
        opacity: 0.10;
    }

    50% {
        opacity: 0.32;
    }
}


/* =========================================================
   BOLTS
   ========================================================= */

.bolt {
    fill: #36403d;

    stroke: #101415;

    stroke-width: 1;

    opacity: 0.70;
}


/* =========================================================
   WARNING MARKERS
   ========================================================= */

.warning-markers {
    opacity: 0.65;
}


/* =========================================================
   SERVICE BOX
   ========================================================= */

.service-box {
    animation:
        serviceIdle 5s ease-in-out infinite;
}


@keyframes serviceIdle {

    0%,
    100% {
        opacity: 0.58;
    }

    50% {
        opacity: 0.78;
    }
}


/* =========================================================
   MORE IDLE ACTIVITY
   ========================================================= */

.environment-detail .idle-light {
    animation:
        detailLightIdle 3.7s ease-in-out infinite;
}


.environment-detail
.idle-light:nth-of-type(2n) {
    animation-delay: -1.6s;
}


.environment-detail
.idle-light:nth-of-type(3n) {
    animation-delay: -2.7s;
}


@keyframes detailLightIdle {

    0%,
    100% {
        opacity: 0.20;
    }

    35% {
        opacity: 0.60;
    }

    51% {
        opacity: 0.30;
    }

    65% {
        opacity: 0.88;
    }

    78% {
        opacity: 0.46;
    }
}

/* =========================================================
   STORY SCREENS
   ========================================================= */

.story-screen {
    cursor: pointer;

    outline: none;

    transform-box: fill-box;
    transform-origin: center;

    transition:
        filter 180ms ease,
        opacity 180ms ease;
}


.story-screen:hover,
.story-screen:focus-visible {
    filter:
        brightness(1.25);
}


.story-screen-content {
    pointer-events: none;
}


.story-label {
    fill: #96a29b;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


.story-small {
    fill: #5e6b65;

    font-size: 5px;

    letter-spacing: 1px;
}


.story-glitch-text {
    fill: #84968b;

    font-size: 9px;

    letter-spacing: 1px;

    animation:
        storyGlitch 3.8s steps(1) infinite;
}


.story-line {
    stroke: #64736b;

    stroke-width: 1.5;

    opacity: 0.26;
}


.story-light {
    animation:
        storyLightIdle 3.2s ease-in-out infinite;
}


.story-screen-two .story-light {
    animation-delay: -1.7s;
}


.story-screen-three .story-light {
    animation-delay: -2.5s;
}


@keyframes storyLightIdle {

    0%,
    100% {
        opacity: 0.18;
    }

    42% {
        opacity: 0.72;
    }

    48% {
        opacity: 0.30;
    }

    57% {
        opacity: 0.88;
    }
}


@keyframes storyGlitch {

    0%,
    76%,
    100% {
        opacity: 0.24;
    }

    77% {
        opacity: 0.9;
    }

    78% {
        opacity: 0.1;
    }

    79% {
        opacity: 0.65;
    }

    80% {
        opacity: 0.18;
    }

}


/* =========================================================
   WHEN A SCREEN IS RECOVERED
   ========================================================= */

.story-screen.recovered .story-glitch-text {
    animation: none;

    fill: #b1c1b8;

    opacity: 0.88;
}


.story-screen.booting {
    animation:
        terminalBoot 900ms steps(2) forwards;
}


@keyframes terminalBoot {

    0% {
        filter: brightness(1);
        opacity: 0.72;
    }

    20% {
        filter: brightness(2.3);
        opacity: 1;
    }

    32% {
        filter: brightness(0.35);
        opacity: 0.5;
    }

    46% {
        filter: brightness(2);
        opacity: 1;
    }

    62% {
        filter: brightness(0.65);
        opacity: 0.7;
    }

    75% {
        filter: brightness(1.8);
        opacity: 1;
    }

    100% {
        filter: brightness(1.15);
        opacity: 1;
    }

}


/* =========================================================
   ENVIRONMENT STORY PROGRESSION
   ========================================================= */

#room.story-awake .story-screen-one {
    filter: brightness(1.08);
}


#room.story-awake .story-screen-two,
#room.story-awake .story-screen-three {
    opacity: 0.9;
}


#room.story-complete .story-screen {
    opacity: 1;
}

/* =========================================================
   INDUSTRIAL TV
   ========================================================= */

.industrial-tv {
    transform-box: fill-box;
    transform-origin: center;
    animation: tv-flicker 7s steps(1, end) infinite;
}

.industrial-tv-screen {
    animation: tv-screen-flicker 3.5s steps(1, end) infinite;
}

.industrial-tv-text {
    fill: #718079;
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 1px;
    opacity: 0.55;
}

.industrial-tv-line {
    stroke: #90a49b;
    stroke-width: 1;
    opacity: 0.12;
}

.industrial-tv-line.dim {
    opacity: 0.06;
}

@keyframes tv-flicker {

    0%, 92%, 100% {
        opacity: 0.72;
    }

    93% {
        opacity: 0.35;
    }

    94% {
        opacity: 0.80;
    }

    95% {
        opacity: 0.46;
    }

    96% {
        opacity: 0.68;
    }
}

@keyframes tv-screen-flicker {

    0%, 86%, 100% {
        opacity: 0.65;
    }

    87% {
        opacity: 0.25;
    }

    88% {
        opacity: 0.72;
    }

    89% {
        opacity: 0.40;
    }

    90% {
        opacity: 0.62;
    }
}


/* =========================================================
   ELECTRICAL SPARKS
   ========================================================= */

.spark {
    opacity: 0;
    animation-name: spark-flash;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
}

.spark-one {
    animation-duration: 4.8s;
}

.spark-two {
    animation-duration: 6.2s;
    animation-delay: 1.7s;
}

.spark-three {
    animation-duration: 5.5s;
    animation-delay: 3.1s;
}

.spark-core {
    fill: #d5dfd9;
}

.spark-arc {
    fill: none;
    stroke: #aebdb6;
    stroke-width: 1.5;
    stroke-linecap: round;
}

@keyframes spark-flash {

    0%, 86%, 100% {
        opacity: 0;
    }

    87% {
        opacity: 1;
    }

    88% {
        opacity: 0.25;
    }

    89% {
        opacity: 0.9;
    }

    90% {
        opacity: 0;
    }
}


/* =========================================================
   TERMINAL RAILINGS
   ========================================================= */

.terminal-railing line {
    stroke: #252d2d;
    stroke-width: 5;
    stroke-linecap: round;
}

.terminal-railing line:nth-child(odd) {
    stroke: #343d3c;
    stroke-width: 3;
}

.terminal-railing {
    opacity: 0.92;
    filter: url(#shadow);
}

/* =========================================================
   PAGE TRANSITION
   ========================================================= */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(170, 185, 178, 0.04) 0px,
            rgba(170, 185, 178, 0.04) 1px,
            transparent 1px,
            transparent 4px
        ),
        rgba(4, 7, 8, 0.92);

    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);

    transition:
        opacity 0.15s ease,
        transform 0.35s cubic-bezier(0.7, 0, 0.3, 1);
}

body.page-leaving::after {
    opacity: 1;
    transform: translateY(0);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
}

.contact-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.contact-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-info small {
    font-size: 9px;
    letter-spacing: 0.18em;
    opacity: 0.45;
}

.contact-info strong {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.log-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.log-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.log-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
}

.log-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.log-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.log-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-info small {
    font-size: 9px;
    letter-spacing: 0.18em;
    opacity: 0.45;
}

.log-info strong {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
}