/* Late-90s PC landing page. Sizes inside .pc use cqw (1cqw = 1% of the PC's width),
   so the whole machine scales together; the monitor gets the full width on phones. */

:root {
    --navy: #1c2433;
    --navy-deep: #121822;
    --beige: #e6e0cd;
    --beige-light: #f1ecdc;
    --beige-shade: #cfc7b0;
    --beige-dark: #b9b098;
    --key-light: #ebe7da;
    --key-grey: #b9bcb5;
    --crt-text: #cfd8e6;
    --crt-dim: #7f8ba0;
    --crt-blue: #4ea8ff;
    --crt-orange: #ff7a1a;
}

body.home {
    display: block;
    place-items: normal;
    padding: 0;
    background:
        radial-gradient(ellipse at 50% 35%, #26304250, transparent 70%),
        radial-gradient(ellipse at 50% 120%, #0d121a, transparent 60%),
        var(--navy);
    overflow-x: hidden;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.desk {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 14px 12px 96px;
}

.pc {
    /* The monitor (88% of this width, about 0.67 x this width tall) fills the window height. */
    --W: min(96vw, 1500px, calc((100dvh - 36px) / 0.68));
    width: var(--W);
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

/* Flying floppy disks (js/floppies.js): one layer behind the PC, one in front. */
.floppy-layer {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floppy-layer-back {
    z-index: 0;
}

.floppy-layer-front {
    z-index: 2;
}

/* ------------------------------------------------------------------ monitor */
.monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88cqw;
}

.monitor-body {
    position: relative;
    width: 100%;
    padding: 4.6cqw 5cqw 1.8cqw;
    background: linear-gradient(175deg, var(--beige-light) 0%, var(--beige) 45%, var(--beige-shade) 100%);
    border-radius: 1.6cqw 1.6cqw 1.2cqw 1.2cqw;
    box-shadow:
        inset 0.4cqw 0.5cqw 0.6cqw rgba(255, 255, 255, 0.6),
        inset -0.5cqw -0.7cqw 1cqw rgba(90, 80, 55, 0.25),
        0 0.3cqw 0 var(--beige-dark);
}

.bezel {
    padding: 2cqw;
    background: linear-gradient(180deg, var(--beige-shade), var(--beige) 60%, var(--beige-light));
    border-radius: 2.6cqw / 3cqw;
    box-shadow:
        inset 0.5cqw 0.7cqw 1.2cqw rgba(70, 60, 40, 0.35),
        inset -0.2cqw -0.2cqw 0.4cqw rgba(255, 255, 255, 0.6);
}

.crt {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #121a22 0%, #090d12 70%, #040608 100%);
    border-radius: 3.4cqw / 4cqw;
    box-shadow:
        0 0 0 0.35cqw #2b2b28,
        inset 0 0 3cqw rgba(0, 0, 0, 0.9);
}

/* Glass: scanlines, curved vignette and a soft reflection. */
.crt-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.09), transparent 40%),
        radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px);
}

.crt.is-off .pc-screen {
    opacity: 0;
}

.crt.is-booting .pc-screen {
    animation: crt-on 0.6s ease-out;
}

@keyframes crt-on {
    0% { transform: scale(1, 0.01); filter: brightness(3); }
    60% { transform: scale(1, 1.02); filter: brightness(1.4); }
    100% { transform: scale(1, 1); filter: brightness(1); }
}

/* ------------------------------------------------------------------ terminal */
.pc-screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 4.5% 5.5%;
    font-family: Consolas, "Lucida Console", "Courier New", monospace;
    font-size: clamp(11px, 2.2cqw, 21px);
    line-height: 1.3;
    color: var(--crt-text);
    text-shadow: 0 0 0.35em rgba(160, 200, 255, 0.35);
    cursor: text;
}

.screen-output {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.screen-output::-webkit-scrollbar {
    display: none;
}

.screen-output pre {
    margin: 0.3em 0;
    font: inherit;
    line-height: 1.12;
    white-space: pre;
    overflow-x: auto;
    scrollbar-width: none;
}

.screen-output a {
    color: var(--crt-blue);
}

.t-blue { color: var(--crt-blue); text-shadow: 0 0 0.4em rgba(78, 168, 255, 0.55); }
.t-orange { color: var(--crt-orange); text-shadow: 0 0 0.4em rgba(255, 122, 26, 0.55); }
.t-dim { color: var(--crt-dim); }
.t-white { color: #ffffff; }

.screen-input {
    display: flex;
    align-items: baseline;
    gap: 0.5ch;
    margin-top: 0.2em;
}

.screen-input[hidden] {
    display: none;
}

.screen-prompt {
    flex: none;
    color: var(--crt-blue);
}

.screen-cmd {
    flex: 1;
    min-width: 0;
    padding: 0;
    font: inherit;
    color: #ffffff;
    caret-color: var(--crt-orange);
    background: transparent;
    border: none;
    outline: none;
    text-shadow: inherit;
}

.skip-boot {
    position: absolute;
    bottom: 4%;
    right: 4%;
    z-index: 3;
    padding: 0.25em 0.7em;
    font: inherit;
    font-size: 0.85em;
    color: var(--crt-dim);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(127, 139, 160, 0.5);
    border-radius: 4px;
    cursor: pointer;
}

.skip-boot:hover,
.skip-boot:focus-visible {
    color: #ffffff;
    border-color: var(--crt-blue);
}

.skip-boot[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ monitor details */
.monitor-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1cqw;
    margin-top: 1.4cqw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2cqw;
    color: #6b6553;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqw;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.badge em {
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.badge-dots {
    display: inline-flex;
    gap: 0.15cqw;
}

.badge-dots i {
    width: 0.7cqw;
    height: 0.7cqw;
    border-radius: 50%;
    background: var(--crt-blue);
}

.badge-dots i:nth-child(2) {
    background: var(--crt-orange);
}

.monitor-controls {
    display: inline-flex;
    gap: 1.6cqw;
}

.monitor-controls i {
    width: 2.2cqw;
    height: 0.9cqw;
    border-radius: 0.5cqw;
    background: linear-gradient(180deg, var(--beige-light), var(--beige-shade));
    box-shadow: 0 0.12cqw 0.2cqw rgba(0, 0, 0, 0.3);
}

.monitor-model {
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.06em;
}

.monitor-power {
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
}

.power-btn {
    width: 3.4cqw;
    height: 1.5cqw;
    border-radius: 0.8cqw;
    background: linear-gradient(180deg, var(--beige-light), var(--beige-shade));
    box-shadow: 0 0.15cqw 0.25cqw rgba(0, 0, 0, 0.35), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.7);
}

.asset-tag {
    position: absolute;
    left: 50%;
    bottom: 5.4cqw;
    transform: translateX(-50%);
    display: none;
}

.monitor-neck {
    width: 30cqw;
    height: 1.8cqw;
    background: linear-gradient(180deg, var(--beige-shade), var(--beige-dark));
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

/* ------------------------------------------------------------------ LEDs */
.led {
    display: inline-block;
    width: 0.7cqw;
    height: 0.7cqw;
    border-radius: 50%;
    background: #4a4a40;
    box-shadow: inset 0 0.1cqw 0.15cqw rgba(0, 0, 0, 0.5);
}

.led-tiny {
    width: 0.55cqw;
    height: 0.55cqw;
}

.led.on,
.led.led-green.on {
    background: #5cff7a;
    box-shadow: 0 0 0.6cqw #5cff7a;
}

.led.led-amber.on {
    background: #ffb02e;
    box-shadow: 0 0 0.6cqw #ffb02e;
}

/* ------------------------------------------------------------------ case */
.case {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.9fr;
    align-items: center;
    gap: 2.5cqw;
    width: 80cqw;
    height: 11cqw;
    padding: 1.6cqw 2.6cqw;
    background: linear-gradient(180deg, var(--beige-light) 0%, var(--beige) 50%, var(--beige-shade) 100%);
    border-radius: 0.6cqw;
    box-shadow:
        inset 0 0.3cqw 0.3cqw rgba(255, 255, 255, 0.6),
        inset 0 -0.5cqw 0.8cqw rgba(90, 80, 55, 0.25),
        0 0.4cqw 0 var(--beige-dark);
}

.bay {
    position: relative;
    height: 5.2cqw;
    border-radius: 0.3cqw;
}

.bay-525 {
    background: linear-gradient(180deg, #2c2c2a, #1a1a19);
    box-shadow: inset 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.6), 0 0.1cqw 0 rgba(255, 255, 255, 0.5);
}

.bay-slot {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 30%;
    height: 0.9cqw;
    background: #050505;
    border-radius: 0.2cqw;
    box-shadow: inset 0 0.15cqw 0.2cqw #000, 0 0.08cqw 0 #3a3a37;
}

.bay-lever {
    position: absolute;
    left: 46%;
    top: 58%;
    width: 2.4cqw;
    height: 1.6cqw;
    background: linear-gradient(180deg, #4a4a45, #2d2d2a);
    border-radius: 0.2cqw;
}

.bay-lever::after {
    content: "";
    position: absolute;
    inset: 30% 30%;
    background: #c9a227;
    border-radius: 0.1cqw;
}

.bay-525 .led {
    position: absolute;
    right: 7%;
    top: 14%;
}

.bay-35 {
    height: 6.6cqw;
}

.floppy-slot {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 14%;
    height: 1cqw;
    background: #141414;
    border-radius: 0.6cqw;
    box-shadow: inset 0 0.15cqw 0.2cqw #000, 0 0.1cqw 0 rgba(255, 255, 255, 0.7);
}

.floppy-eject {
    position: absolute;
    right: 8%;
    top: 34%;
    width: 1.6cqw;
    height: 0.8cqw;
    background: linear-gradient(180deg, var(--beige-light), var(--beige-shade));
    border-radius: 0.2cqw;
    box-shadow: 0 0.1cqw 0.15cqw rgba(0, 0, 0, 0.4);
}

.bay-35 > .led {
    position: absolute;
    left: 10%;
    top: 36%;
}

.case-power {
    position: absolute;
    left: 6%;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1cqw;
}

.power-oval {
    width: 4.6cqw;
    height: 2.2cqw;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--beige-light), var(--beige-shade));
    box-shadow: 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35), inset 0 0.1cqw 0 #fff;
}

.bay-blank {
    height: 4.4cqw;
    background: linear-gradient(180deg, var(--beige), var(--beige-light));
    box-shadow: inset 0.2cqw 0.25cqw 0.4cqw rgba(70, 60, 40, 0.3), 0 0.1cqw 0 rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------ keyboard and mouse */
.peripherals {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.5cqw;
    width: 100%;
    margin-top: 2.6cqw;
}

.keyboard {
    width: 86cqw;
    padding: 1cqw 1.4cqw 1.6cqw;
    background: linear-gradient(180deg, var(--beige-light) 0%, var(--beige) 60%, var(--beige-shade) 100%);
    border-radius: 0.8cqw 0.8cqw 1.2cqw 1.2cqw;
    box-shadow:
        inset 0 0.2cqw 0.3cqw rgba(255, 255, 255, 0.7),
        0 0.6cqw 0 var(--beige-dark),
        0 1.2cqw 1.6cqw rgba(0, 0, 0, 0.35);
    transform: perspective(120cqw) rotateX(14deg);
    transform-origin: 50% 100%;
}

.keyboard-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3cqw;
    margin-bottom: 0.6cqw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85cqw;
    color: #6b6553;
}

.kb-leds {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqw;
}

.kb-leds .led {
    width: 0.55cqw;
    height: 0.55cqw;
    margin-left: 0.8cqw;
}

.badge-kb {
    font-size: 1cqw;
}

.keys {
    display: grid;
    grid-template-columns: repeat(92, 1fr);
    grid-auto-rows: 3.1cqw;
    gap: 0.3cqw 0.25cqw;
}

.key {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.25cqw 0.35cqw;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85cqw;
    line-height: 1;
    white-space: nowrap;
    color: #4a4638;
    background: linear-gradient(180deg, #f7f4ea, var(--key-light) 70%);
    border-radius: 0.35cqw;
    box-shadow:
        inset 0 -0.35cqw 0 rgba(0, 0, 0, 0.13),
        0 0.18cqw 0 rgba(70, 64, 48, 0.55);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.key.grey {
    background: linear-gradient(180deg, #c9ccc5, var(--key-grey) 70%);
}

.key.gap-row {
    visibility: hidden;
}

.key.pressed {
    transform: translateY(0.18cqw);
    box-shadow: inset 0 -0.15cqw 0 rgba(0, 0, 0, 0.13), 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(0.95);
}

.mouse {
    position: relative;
    flex: none;
    width: 7.5cqw;
    margin-bottom: 1cqw;
}

.mouse-cable {
    position: absolute;
    left: 25%;
    bottom: 85%;
    width: 50%;
    height: 9cqw;
    overflow: visible;
}

.mouse-cable path {
    fill: none;
    stroke: var(--beige-shade);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.mouse-body {
    position: relative;
    height: 11cqw;
    background: linear-gradient(160deg, #fbf3d6, #ecdfb8 60%, #d8c99c);
    border-radius: 48% 48% 46% 46% / 40% 40% 60% 60%;
    box-shadow:
        inset -0.4cqw -0.6cqw 0.8cqw rgba(110, 95, 55, 0.35),
        0 0.8cqw 1.2cqw rgba(0, 0, 0, 0.35);
}

.mouse-split {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 38%;
    background: rgba(110, 95, 55, 0.45);
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 640px) {
    .desk {
        align-items: flex-start;
        padding: 12px 8px 96px;
    }

    .pc {
        --W: min(97vw, 600px);
    }

    .monitor {
        width: 100cqw;
    }

    .monitor-body {
        padding: 3cqw 3cqw 1.6cqw;
    }

    .bezel {
        padding: 1.6cqw;
    }

    .crt {
        aspect-ratio: 4 / 5;
    }

    .monitor-strip {
        font-size: 2.3cqw;
    }

    .monitor-controls {
        display: none;
    }

    .badge em {
        display: none;
    }

    .case {
        width: 92cqw;
        height: 15cqw;
    }

    .keyboard {
        width: 100cqw;
    }

    .keyboard-top {
        font-size: 1.6cqw;
    }

    .key {
        font-size: 1.15cqw;
    }

    .mouse {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crt.is-booting .pc-screen {
        animation: none;
    }
}