/* 1. Global Reset */
html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden; background-color: #000;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}

/* 2. VCR Loader Section */
#loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0000ff; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.4);
    animation: crt-glow 0.15s infinite alternate;
    transition: opacity 0.4s steps(4), transform 0.3s ease-out;
}

@keyframes crt-glow { from { opacity: 1; } to { opacity: 0.97; } }

.static-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://upload.wikimedia.org/wikipedia/commons/5/5a/Static_noise.gif');
    opacity: 0.05; pointer-events: none; z-index: 1001;
}

.loader-logo { width: 240px; height: auto; margin-bottom: 25px; z-index: 1004; }

.osd-text {
    position: relative; color: #ffffff;
    font-size: 1.4rem; font-weight: bold; text-shadow: 3px 3px #000;
    z-index: 1002; letter-spacing: 2px; text-align: center;
    width: 80%; /* Keeps the cycling text from hitting edges */
}

.loading-bar-container {
    width: 60%; height: 2px; background: rgba(255,255,255,0.1);
    margin-top: 40px; position: relative; z-index: 1003;
}
.loading-bar-fill { height: 100%; background: #fff; width: 0%; }

/* 3. Horizontal Gallery & Image Fit */
#card-container { position: relative; width: 100%; height: 100%; }

.card {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
    display: flex; flex-direction: column; overflow: hidden;
}

.image-scroller {
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%; height: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
    z-index: 1;
}
.image-scroller::-webkit-scrollbar { display: none; }

.vhs-photo {
    flex: 0 0 100%; width: 100vw; height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    object-fit: contain; 
    object-position: top; /* MOVES IMAGE UP TO TOP OF SCREEN */
    background-color: #000;
}

/* 4. Side Navigation Arrows */
.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 45px; height: 45px; background: rgba(0,0,0,0.6);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white; cursor: pointer; z-index: 20;
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}

.card.show-nav .nav-arrow { opacity: 1; visibility: visible; }
.nav-arrow.left { left: 15px; }
.nav-arrow.right { right: 15px; }

/* 5. UI Elements & Stickers */
.content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
    padding: 20px 25px 60px 25px; box-sizing: border-box;
    pointer-events: none; z-index: 5;
}

.blurb { font-size: 0.85rem; color: #00ff00; margin-bottom: 6px; text-transform: uppercase; }
.title { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.1; width: 70%; }

/* Clapperboard Button Styled & Positioned */
.clapper-btn {
    position: absolute; right: 20px; bottom: 250px; /* Shifted up */
    background: #ff00ff; color: #fff; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; border: 2px solid #fff;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
    cursor: pointer; z-index: 15; pointer-events: auto;
    transition: transform 0.1s ease;
}
.clapper-btn:active { transform: scale(0.9) translate(2px, 2px); }

/* Yellow Price Sticker Positioned */
.price-sticker {
    position: absolute; right: 20px; bottom: 170px; /* Shifted up from 100px */
    background: #ffff00; color: #000; padding: 10px 12px;
    font-weight: 900; font-size: 1.2rem; transform: rotate(-4deg);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
    text-decoration: none; z-index: 10; border: 1.5px solid #000;
    text-align: center; pointer-events: auto;
}
.price-label { font-size: 0.55rem; display: block; opacity: 0.7; }