/* ============================================================
   THE PLATE LANGUAGE, PAGE-WIDE
   The taskbar set the rule: one dark plate, the source's shadow ramp, white
   Inter, no gold chrome. Every window and section that still spoke Y2K gold —
   borders, glass gradients, glows, pixel type — is brought under that rule
   here. Layouts are changed per section so the page is not one plate repeated.
   Loaded after styles.css so it wins on equal specificity.
   ============================================================ */

@font-face {
    font-family: "Boba Mono";
    src: url("../fonts/boba-mono/boba-mono.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- section 2: about, re-laid as copy beside code --------------------- */
.y2k-about-bg {
    display: none !important;             /* the tube is the background now */
}
.y2k-about-section {
    position: relative;
    width: calc(100% - 32px);
    margin: 24px auto;
    padding: clamp(24px, 4vw, 50px);
    border: clamp(12px, 1.8vw, 24px) solid transparent;
    border-bottom-width: clamp(24px, 3vw, 38px);
    border-radius: 30px;
    background: linear-gradient(145deg, #101214, #040506 65%) padding-box,
                linear-gradient(155deg, #505358 0%, #292c30 8%, #191b1e 40%, #101113 75%, #303338 100%) border-box;
    box-shadow: 0 0 0 1px #070809, 0 -2px 0 1px #63676c,
                2px 3px 0 2px #090a0b, 0 8px 0 #111214,
                inset 0 2px 5px 2px #000, inset 0 -1px 0 #555a60,
                0 28px 48px #000c, 0 48px 90px #0008;
}
.y2k-about-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    max-width: 1560px;
    margin: 0 auto;
    padding: clamp(48px, 8vh, 96px) 24px;
}
.y2k-about-section::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 5px;
    z-index: 3;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e0fff3, #6bba99 45%, #254837);
    box-shadow: 0 0 0 2px #111315, 0 1px 0 2px #44484b, 0 0 7px #a5e8d150;
    pointer-events: none;
}
@media (max-width: 900px) {
    .y2k-about-container { grid-template-columns: 1fr; }
}

.y2k-about-copy {
    width: min(100%, 520px);
    justify-self: end;
    text-align: right;
    color: #fff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.y2k-about-kicker {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.y2k-about-headline {
    font-family: "Boba Mono", monospace;
    margin: 0 0 18px;
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: none;
}
.y2k-about-lead {
    margin: 0 0 26px;
    margin-left: auto;
    max-width: 40ch;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}
/* features as small plates: same body, same shadow ramp, no metal (static) */
.y2k-about-features {
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.y2k-about-features li {
    --h: 34px;
    height: var(--h);
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    background: #0b0c0e;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 500;
    box-shadow:
        0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0, 0, 0, .72),
        0 calc(var(--h) * 0.30) calc(var(--h) * 0.66) rgba(0, 0, 0, .62);
}

/* the code window: a plate, not a gold-framed pane */
.y2k-code-window-wrapper { max-width: none !important; }
.y2k-code-window {
    background: #0b0c0e !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow:
        0 6px 13px rgba(0, 0, 0, .72),
        0 18px 40px rgba(0, 0, 0, .62),
        0 37px 78px rgba(0, 0, 0, .42) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
}
.y2k-code-header {
    background: #08090a !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}
.y2k-code-title {
    color: rgba(255, 255, 255, .6) !important;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}
.y2k-code-body, .y2k-code-editor, .y2k-code-actions {
    background: transparent !important;
    border: 0 !important;
}
.y2k-code-editor pre, .y2k-code-editor code {
    color: #8df0b4 !important;            /* the tube's own phosphor */
    text-shadow: 0 0 6px rgba(28, 236, 132, .35);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
}
.y2k-code-terminal {
    background: #07080a !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.y2k-code-terminal-header {
    color: rgba(255, 255, 255, .45) !important;
    background: transparent !important;
    border: 0 !important;
    text-shadow: none !important;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.y2k-code-terminal-body, .y2k-terminal-placeholder {
    color: #4f9a76 !important;            /* dim phosphor */
    text-shadow: none !important;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
}

/* --- marquee: a strip of type on the tube, no bar ----------------------- */
.y2k-marquee-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.y2k-marquee-text {
    color: rgba(255, 255, 255, .28) !important;
    text-shadow: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
}

/* --- section 3: the gallery on the tube, monitors drifting behind -------- */
.y2k-snorbo-section {
    position: relative;
    background: none !important;
    overflow: hidden;
    isolation: isolate;
}
.y2k-snorbo-container {
    position: relative;
    z-index: 2;
}
.y2k-snorbo-title {
    color: #fff !important;
    text-shadow: none !important;
    font-family: "Boba Mono", monospace !important;
    font-weight: 400 !important;
    font-size: clamp(32px, 4.6vw, 56px) !important;
    letter-spacing: -.02em !important;
}
.ket-carousel {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.ket-wave-stage { background: transparent; }
.ket-wave-stage::after { content: none; }

/* the field of monitors */
.crt-monitor-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.crt-monitor {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    opacity: calc(0.35 + 0.45 * var(--depth));
    transform: rotate(var(--tilt)) scale(var(--depth));
    transform-origin: 50% 60%;
    animation: crt-monitor-drift var(--drift) ease-in-out infinite alternate;
    animation-delay: var(--delay);
    /* no filter here: a blur on a moving element inside the SVG-filtered screen
       is re-rastered on the main thread every frame — five of them hung the tab */
}
@keyframes crt-monitor-drift {
    from { translate: 0 0; }
    to   { translate: calc(var(--w) * -0.08) calc(var(--w) * 0.06); }
}

/* the box: thick beige plastic bezel, a screen well, a badge, neck and foot */
.crt-monitor-bezel {
    position: relative;
    padding: 7% 7% 11%;
    border-radius: 6% / 8%;
    background: linear-gradient(160deg, #d9d2c0 0%, #b9b19e 55%, #8f887a 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 0 -3px 0 rgba(0, 0, 0, .25),
        0 18px 30px rgba(0, 0, 0, .55);   /* the drop shadow, as a box-shadow */
}
.crt-monitor-screen {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 5% / 7%;
    overflow: hidden;
    background: #03100a;
    box-shadow:
        inset 0 0 0 2px #1b1a17,
        inset 0 0 18px rgba(0, 0, 0, .9);
}
.crt-monitor-screen .threeui-background {
    position: absolute;
    inset: 0;
}
.crt-monitor-brand {
    position: absolute;
    left: 50%;
    bottom: 3.5%;
    transform: translateX(-50%);
    font: 600 9px/1 "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    letter-spacing: .12em;
    color: rgba(40, 36, 30, .75);
}
.crt-monitor-neck {
    width: 26%;
    height: 7%;
    margin: 0 auto;
    background: linear-gradient(180deg, #a49c8a, #7c7567);
}
.crt-monitor-stand {
    width: 58%;
    height: 5%;
    margin: 0 auto;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    background: linear-gradient(180deg, #b7ae9b, #857d6e);
}

/* In-page controls sit under the metal canvas, so they are not shader-painted:
   they carry the plate themselves and skip the ribbons. Same body, same ramp. */
.lm-control.lm-plate {
    background: #0b0c0e !important;
}
.lm-control.lm-plate:hover  { background: #08090a !important; }
.lm-control.lm-plate:active { background: #070809 !important; }

/* Liquid-metal kit. CSS carries the panel finish; the existing shared WebGL
   surface continues to animate taskbar controls. No extra GPU contexts. */
:root {
    --metal-face: linear-gradient(155deg, #292c33 0%, #101115 24%, #090a0d 60%, #1a1e25 100%);
    --metal-rim: linear-gradient(125deg, #e4e7ec 0%, #707985 14%, #91dbe8 25%, #242830 38%, #b2a7d7 61%, #e6c6a5 76%, #3e4651 90%, #c3dce1 100%);
    --metal-shadow: inset 0 1px 0 #ffffff12, 0 6px 13px #0009, 0 18px 40px #0008;
}

.y2k-code-window,
.y2k-snorbo-window,
.y2k-snorbo-video-window,
.y2k-app-window,
.y2k-image-modal,
.y2k-stat-card,
.ket-wave-card,
.y2k-about-features li {
    border: 1px solid transparent !important;
    background: var(--metal-face) padding-box, var(--metal-rim) border-box !important;
    box-shadow: var(--metal-shadow) !important;
    color: #edf0f5;
}

.y2k-code-window,
.y2k-snorbo-window,
.y2k-snorbo-video-window,
.y2k-app-window,
.y2k-image-modal { border-radius: 22px !important; }

.y2k-code-header,
.y2k-snorbo-window-header,
.y2k-modal-header,
.y2k-modal-footer {
    background: linear-gradient(110deg, #ffffff0c, #ffffff02 45%, #a3c7e50a) !important;
    border-color: #ffffff14 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.y2k-modal-header { border-radius: 21px 21px 0 0; }
.y2k-modal-footer { border-radius: 0 0 21px 21px; }
.y2k-modal-title,
.y2k-snorbo-window-title,
.ket-wave-name,
.ket-wave-count {
    color: #e5e9f0 !important;
    text-shadow: none !important;
}
.ket-wave-card[aria-current="true"] {
    box-shadow: var(--metal-shadow), 0 0 0 2px #bbdce2, 0 0 24px #8cc8e324 !important;
}
.ket-wave-controls { border-color: #ffffff14; }
.ket-wave-controls button,
.y2k-modal-action-btn,
.ket-wave-follow {
    color: #edf0f5 !important;
    border: 1px solid transparent !important;
    border-radius: 999px;
    background: var(--metal-face) padding-box, var(--metal-rim) border-box !important;
    box-shadow: inset 0 1px 0 #ffffff12;
    text-shadow: none !important;
}
.ket-wave-controls button:hover,
.ket-wave-controls button[aria-pressed="true"],
.y2k-modal-action-btn:hover {
    background: linear-gradient(135deg, #3a424e, #161a22) padding-box, var(--metal-rim) border-box !important;
}
.ket-wave-controls button:focus-visible,
.y2k-modal-action-btn:focus-visible {
    outline: 2px solid #d8f5ff;
    outline-offset: 3px;
}
/* Keep the dock translucent so the already-mounted shader stays visible. */
.y2k-footer-taskbar {
    border: 1px solid #d5e9f044 !important;
    background: linear-gradient(110deg, #ffffff0a, #10111518, #a8dce610) !important;
    box-shadow: var(--metal-shadow) !important;
}

h1, h2, h3, .y2k-status-title, .y2k-code-title,
.y2k-snorbo-window-title, .y2k-snorbo-video-title, .y2k-modal-title,
.ket-wave-name, .ket-loading-title {
    font-family: "Boba Mono", monospace !important;
    font-weight: 400 !important;
}
.ket-loading-title {
    font-size: clamp(96px, 22vw, 280px);
    line-height: 1;
    color: #fff;
    text-align: center;
    animation: ket-loading-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes ket-loading-pulse {
    from { transform: scale(.88); opacity: .5; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ket-loading-title { animation: none; }
}

.y2k-about-kicker, .y2k-about-headline, .y2k-about-lead { text-transform: none; }