/*
 * cabinet-screen.css — the CRT "screen" every front-page preview is shown in.
 *
 * THE one definition of the look: the dimmed, slightly desaturated picture,
 * the scanlines, the brighten-and-lean-in on hover, and the NO SIGNAL state.
 * Used by /index.html and by the editor at /gate/frontpage.php, so what the
 * editor previews is exactly what the front page shows.
 *
 * Applied at DISPLAY time, never baked into the image files. Every screenshot —
 * hand-placed or uploaded through the editor — gets it automatically, and the
 * hover reveal keeps working because the file underneath is untouched. Upload
 * plain screenshots.
 *
 * Lives in /assets/, which is public and served straight from disk: the editor
 * is otherwise careful never to depend on serve.php, and this keeps it that way.
 */

.screen {
    position: relative;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    background: #000;
    overflow: hidden;
    border-bottom: 2px solid #fff;
}

.screen img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
    filter: brightness(.62) saturate(.9);
    transition: filter .25s ease, transform .25s ease;
}

/* .cabinet is any tile holding a screen — on the front page and in the editor. */
.cabinet:hover .screen img,
.cabinet:focus-visible .screen img {
    filter: brightness(.95) saturate(1);
    transform: scale(1.04);
}

/* CRT scanlines, over the picture only. */
.screen::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px);
    mix-blend-mode: multiply;
}

/* No image, or it failed to load: a dark screen instead of a broken icon. */
.screen.blank { display: flex; align-items: center; justify-content: center; }
.screen.blank img { display: none; }
.screen.blank::before {
    content: 'NO SIGNAL';
    color: #8ab4ff; font-size: 10px; letter-spacing: 2px;
    animation: cab-screen-blink 1.6s step-end infinite;
}
@keyframes cab-screen-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .screen img { transition: none; }
    .screen.blank::before { animation: none; }
}