@font-face {
    font-family: 'Silkscreen';
    src: url('../font/slkscr.ttf') format('truetype');
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: #000;
    overflow: hidden;
    font-family: 'Silkscreen', monospace;
}

/* ---------- the wall: three horizontal lanes, evenly spaced ---------- */
#wall {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;    /* 3 lanes, equal vertical gaps */
    align-items: flex-start;          /* lanes start at the left so the loop fills */
}

/* one horizontal row of boxes; JS sets --shift + the scroll animation */
.lane {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

/* one 16:9 "box" */
.tile {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 8px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 77, 77, 0.18);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tile:hover {
    border-color: rgba(255, 77, 77, 0.85);
    box-shadow: 0 0 18px rgba(255, 77, 77, 0.35);
}

/* grayscale poster (shared image via --poster) + colour video on hover */
.thumb {
    position: absolute;
    inset: 0;
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    z-index: 1;
}
.player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    background: #000;
}

/* film-strip sprocket border, inward on the top & bottom edges only */
.film {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.film::before, .film::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background-color: #0b0b0b;
    background-image: repeating-linear-gradient(
        to right,
        rgba(220, 220, 220, 0.92) 0 8px,
        transparent 8px 18px);
    background-size: 18px 6px;
    background-repeat: repeat-x;
    background-position: 5px center;
}
.film::before { top: 0; }
.film::after  { bottom: 0; }
.tile:hover .film { opacity: 0; }   /* fades away while the video plays */

/* seamless loop: each lane holds two identical halves; shift == one half width */
@keyframes laneLeft  {   /* content drifts left  (right-to-left) */
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--shift))); }
}
@keyframes laneRight {   /* content drifts right (left-to-right) */
    from { transform: translateX(calc(-1 * var(--shift))); }
    to   { transform: translateX(0); }
}

/* ---------- one-time "click for sound" hint ---------- */
.sound-hint {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 20;
    font-family: 'Silkscreen', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 210, 210, 0.92);
    background: rgba(20, 0, 0, 0.66);
    border: 1px solid rgba(255, 77, 77, 0.4);
    border-radius: 999px;
    padding: 8px 16px;
    pointer-events: none;
    animation: hintPulse 1.8s ease-in-out infinite;
    transition: opacity 0.4s ease;
}
.sound-hint.hide { animation: none; opacity: 0; }
@keyframes hintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---------- unobtrusive back link ---------- */
.back {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 20;
    font-family: 'Silkscreen', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 77, 77, 0.9);
    text-decoration: none;
    padding: 6px 11px;
    border: 1px solid rgba(255, 77, 77, 0.35);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.back:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .lane { animation: none !important; }
}