/* src/assets/css/style.css */

/* --- THE RED ROOM PALETTE --- */
:root {
    /* REPLACED: Cyan -> Neon Red */
    --digi-blue: #ff0033;
    
    /* REPLACED: Yellow -> Deep Purple */
    --digi-yellow: #6600cc;
    
    /* REPLACED: Purple -> Dried Blood/Black */
    --digi-purple: #2a0000;
    
    /* KEPT: Standard Red (used for accents) */
    --digi-red: #ff0000;
    
    --void: #000000;
}

@keyframes bg-move { 
    from { background-position: 0 0; } 
    to { background-position: 100px 100px; } 
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(-4px, -2px); }
    60% { transform: translate(4px, 2px); }
    80% { transform: translate(4px, -2px); }
    100% { transform: translate(0); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 20px var(--digi-purple); }
    50% { box-shadow: 0 0 50px var(--digi-blue); }
    100% { box-shadow: 0 0 20px var(--digi-purple); }
}

@keyframes bulb-chaos {
    0%, 100% { opacity: 1; filter: brightness(2); color: var(--digi-blue); }
    20% { opacity: 0; }
    40% { opacity: 1; color: var(--digi-red); }
    60% { opacity: 0.5; color: #fff; }
    80% { opacity: 1; color: var(--digi-yellow); }
}

@keyframes float-parallax {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

@keyframes bar-shimmer {
    0%, 100% { opacity: 0.7; transform: scaleX(1); }
    50% { opacity: 0.8; transform: scaleX(1.02); }
}

body {
    background-color: var(--void);
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0; 
    padding: 0; 
    overflow-x: hidden;
    
    /* BACKGROUND PATTERN - Darker for Afterdark */
    background-image: 
        linear-gradient(45deg, #050000 25%, transparent 25%), 
        linear-gradient(-45deg, #050000 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #050000 75%), 
        linear-gradient(-45deg, transparent 75%, #050000 75%);
    background-size: 80px 80px;
    animation: bg-move 4s linear infinite;

    min-height: 100vh;
}

/* FANCY BARS & GIFS */
.curtain { 
    position: fixed; 
    top: 0; 
    width: 12vw; 
    height: 100vh; 
    z-index: 5; 
    pointer-events: none; 
    /* Updated to use the new red/blood variables */
    background: repeating-linear-gradient(90deg, var(--digi-purple), var(--digi-purple) 40px, #000 40px, #000 80px); 
    box-shadow: 0 0 40px rgba(0,0,0,0.9), inset 0 0 60px rgba(0,0,0,0.8); 
    animation: bar-shimmer 10s ease-in-out infinite; 
    display: none; 
    opacity: 0.9; 
}

.curtain.left { left: 0; border-right: 4px solid var(--digi-blue); }
.curtain.right { right: 0; border-left: 4px solid var(--digi-blue); }

.fg-gif { 
    position: fixed; 
    bottom: 10px; 
    width: 80px; 
    height: auto; 
    z-index: 1000; 
    image-rendering: pixelated; 
    opacity: 0.8;
}
.fg-gif.left { left: 20px; }
.fg-gif.right { right: 20px; }

@media (min-width: 1400px) { .curtain { display: block; } }
@media (max-width: 600px) { .fg-gif { width: 40px; bottom: 5px; } }

.glitch-overlay { 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05) 1px, transparent 1px, transparent 4px); 
    pointer-events: none; 
    z-index: 999; 
    mix-blend-mode: overlay;
}

/* LAYOUT & CONTENT */
.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 20px; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    z-index: 100; 
}

.marquee-container { 
    position: relative; 
    padding: 25px 50px; 
    /* Darker Marquee */
    background: repeating-linear-gradient(45deg, var(--digi-purple), var(--digi-purple) 10px, var(--void) 10px, var(--void) 20px); 
    border: 4px solid var(--digi-blue); 
    box-shadow: 0 0 20px var(--digi-blue);
    animation: pulse 3s infinite; 
    margin-bottom: 60px; 
    transform: rotate(-2deg); 
    max-width: fit-content; 
    text-align: center; 
}

.bulbs { 
    position: absolute; 
    top: -15px; left: -15px; right: -15px; bottom: -15px; 
    border: 4px dotted var(--digi-blue); 
    pointer-events: none; 
    animation: bulb-chaos 0.2s infinite; 
    z-index: 5; 
}

h1 { 
    font-family: 'Impact', 'Arial Black', sans-serif; 
    font-size: 5vw; 
    min-font-size: 3em; 
    margin: 0; 
    color: var(--digi-blue); 
    text-transform: uppercase; 
    text-shadow: 4px 4px 0 var(--digi-purple), -2px -2px 0 #fff; 
    animation: glitch 2s infinite; 
    line-height: 0.9; 
}

.subtitle { 
    font-size: 1.5em; 
    background: var(--digi-blue); 
    color: #000; 
    padding: 5px 20px; 
    display: inline-block; 
    font-weight: bold; 
    transform: skewX(-20deg); 
    margin-top: 15px; 
    border: 3px solid #000; 
    box-shadow: 5px 5px 0 var(--digi-purple); 
}

.legacy-name { 
    font-size: 0.8em; 
    color: var(--digi-blue); 
    background: #000; 
    margin-top: 5px; 
    display: inline-block; 
    padding: 2px 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border: 1px solid var(--digi-blue);
}

/* NAV & CARDS */
nav { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 60px; 
    flex-wrap: wrap; 
    width: 100%; 
}

.ticket { 
    background: #000; 
    color: var(--digi-blue); 
    text-decoration: none; 
    padding: 15px 35px; 
    font-weight: bold; 
    font-size: 1.2em; 
    border: 2px solid var(--digi-blue); 
    box-shadow: 0 0 10px var(--digi-blue);
    clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 20%); 
    transition: 0.2s; 
}
.ticket:hover { 
    background: var(--digi-blue); 
    color: #000; 
    transform: scale(1.1) !important; 
    box-shadow: 0 0 30px var(--digi-blue);
    z-index: 101; 
}

.midway { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 40px; 
    width: 100%; 
}

.tent-card { 
    background: rgba(0,0,0,0.95); 
    border: 1px solid var(--digi-blue); 
    padding: 40px; 
    position: relative; 
    box-shadow: 0 0 20px rgba(255, 0, 51, 0.2); 
}

.tent-card h2 { 
    font-family: 'Impact', sans-serif; 
    font-size: 2.5em; 
    color: #fff; 
    margin-top: 0; 
    background: var(--digi-purple); 
    display: inline-block; 
    padding: 5px 15px; 
    border: 1px solid var(--digi-blue); 
    transform: rotate(-1deg); 
}

.link-list a { 
    color: var(--digi-blue); 
    font-size: 1.6em; 
    text-decoration: none; 
    font-weight: bold; 
    display: block; 
    margin: 15px 0; 
    transition: 0.1s; 
    border-bottom: 1px solid transparent;
}
.link-list a:hover { 
    color: #fff; 
    text-shadow: 0 0 10px var(--digi-blue);
    border-bottom: 1px solid var(--digi-blue);
    padding-left: 10px;
}

/* SHAPES & FOOTER */
#shape-container { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: -100; 
    pointer-events: none; 
}

.shape { 
    position: absolute; 
    animation: float-parallax linear infinite; 
    will-change: transform; 
    z-index: inherit; 
}

.marquee-footer { 
    background: var(--digi-purple); 
    color: var(--digi-blue); 
    padding: 12px; 
    font-weight: bold; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 100%; 
    border-top: 2px solid var(--digi-blue); 
    box-sizing: border-box; 
    font-size: 1.2em; 
}

.marquee-footer span { 
    display: inline-block; 
    animation: scroll 15s linear infinite; 
}

@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

@media (min-width: 768px) { 
    .midway { grid-template-columns: 1fr 1fr; } 
    .full-width { grid-column: span 2; } 
}