/* === NEW THEME: HERO BANNER (v3) === */

/* --- Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Roboto:wght@400;700&display=swap');

/* --- Custom Font Definitions --- */
@font-face {
    font-family: 'Haunted Spirit';
    src: url('../fonts/HauntedSpirit.woff2') format('woff2'),
         url('../fonts/HauntedSpirit.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nothing Inside';
    src: url('../fonts/NothingInside.woff2') format('woff2'),
         url('../fonts/NothingInside.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GhostScribe';
    src: url('../fonts/GhostScribe-Regular.woff2') format('woff2'),
         url('../fonts/GhostScribe-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* --- Global Styles & Atmosphere --- */
body {
    font-family: 'Roboto', sans-serif;
    background: url('https://www.transparenttextures.com/patterns/concrete-wall-2.png') #1a1a1a;
    color: #d1d1d1;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* --- Global Navigation --- */
.global-nav {
    background-color: rgba(10, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #333;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 40px; 
}

/* --- Nav Logo (Hidden on Desktop by default) --- */
.global-nav .nav-logo-link {
    display: none;
}
.nav-logo {
    height: 35px;
    width: auto;
    display: block;
}

/* Hamburger Menu Toggle */
.menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10; }
.hamburger-bar { width: 30px; height: 3px; background-color: #aaa; border-radius: 10px; transition: all 0.3s linear; }

.global-nav ul { margin: 0; padding: 0; list-style: none; display: flex; }
.global-nav ul li { display: inline-block; margin: 0 1rem; }
.global-nav ul li a { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #aaa; text-decoration: none; font-size: 1rem; padding: 0.5rem 0; letter-spacing: 1px; transition: color 0.3s, text-shadow 0.3s; }
.global-nav ul li a:hover { color: #ff3333; text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); }

/* --- HERO BANNER STYLES --- */
.hero-banner { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-bottom: 8px solid transparent; border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAf8/4dAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABWSURBVCHd7c5BDQAwEASh+rcfBn9oE4A8gEXyFmu3bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bdu2bXtzsYA3wmoDSJnjy7YAAAAASUVORK5CYII=") 8 stretch; }
.hero-banner .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-banner .video-background video { width: 100%; height: 100%; object-fit: cover; }
.hero-banner .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: url('https://www.transparenttextures.com/patterns/grunge-wall.png'); opacity: 0.6; }
.hero-banner .header-content { position: relative; z-index: 3; padding: 1rem; display: flex; flex-direction: column; align-items: center; }

/* --- Hero Logo & Animation --- */
.hero-logo { max-width: 400px; width: 80%; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7)); animation: floatAnimation 6s ease-in-out infinite; }
@keyframes floatAnimation { 0% { transform: translateY(0); filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7)); } 50% { transform: translateY(-12px); filter: drop-shadow(0 20px 25px rgba(0,0,0,0.4)); } 100% { transform: translateY(0); filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7)); } }

.glitch { position: relative; color: #f1f1f1; text-shadow: 2px 2px 10px #000, 0 0 5px #ff0000; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
.glitch::before { left: 2px; text-shadow: -2px 0 #ff3333; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00ffff; animation: glitch-anim-2 2s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 { 0% { clip-path: inset(45% 0 50% 0); } 5% { clip-path: inset(65% 0 15% 0); } 10% { clip-path: inset(40% 0 42% 0); } 15% { clip-path: inset(80% 0 10% 0); } 20% { clip-path: inset(15% 0 75% 0); } 25% { clip-path: inset(55% 0 35% 0); } 30% { clip-path: inset(35% 0 55% 0); } 35% { clip-path: inset(70% 0 20% 0); } 40% { clip-path: inset(30% 0 62% 0); } 45% { clip-path: inset(10% 0 88% 0); } 50% { clip-path: inset(48% 0 50% 0); } 55% { clip-path: inset(75% 0 15% 0); } 60% { clip-path: inset(52% 0 40% 0); } 65% { clip-path: inset(20% 0 70% 0); } 70% { clip-path: inset(90% 0 5% 0); } 75% { clip-path: inset(45% 0 45% 0); } 80% { clip-path: inset(10% 0 80% 0); } 85% { clip-path: inset(60% 0 30% 0); } 90% { clip-path: inset(25% 0 65% 0); } 95% { clip-path: inset(5% 0 90% 0); } 100% { clip-path: inset(77% 0 13% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(78% 0 15% 0); } 5% { clip-path: inset(5% 0 90% 0); } 10% { clip-path: inset(95% 0 2% 0); } 15% { clip-path: inset(25% 0 70% 0); } 20% { clip-path: inset(10% 0 85% 0); } 25% { clip-path: inset(65% 0 30% 0); } 30% { clip-path: inset(80% 0 10% 0); } 35% { clip-path: inset(30% 0 60% 0); } 40% { clip-path: inset(5% 0 92% 0); } 45% { clip-path: inset(70% 0 25% 0); } 50% { clip-path: inset(40% 0 55% 0); } 55% { clip-path: inset(20% 0 75% 0); } 60% { clip-path: inset(85% 0 5% 0); } 65% { clip-path: inset(40% 0 50% 0); } 70% { clip-path: inset(15% 0 80% 0); } 75% { clip-path: inset(55% 0 40% 0); } 80% { clip-path: inset(35% 0 60% 0); } 85% { clip-path: inset(90% 0 8% 0); } 90% { clip-path: inset(10% 0 88% 0); } 95% { clip-path: inset(70% 0 20% 0); } 100% { clip-path: inset(50% 0 48% 0); } }

.hero-banner h1 {
    /* UPDATED: Changed font to a solid one that works with the glitch effect */
    font-family: 'GhostScribe', sans-serif;
    font-size: 6rem; /* Increased size to compensate for narrower font */
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 3px;
}
.hero-banner .subtitle { font-family: 'Roboto', sans-serif; text-transform: none; font-size: 1.2rem; color: #aaa; margin: 0.5rem 0 1.5rem; max-width: 500px; }


/* --- BAND FEATURE STYLES (v3) --- */
.band-feature { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; }
.band-promo-circle { width: 300px; height: 300px; border-radius: 50%; border: 6px solid #990000; box-shadow: 0 0 20px #000, inset 0 0 15px rgba(0,0,0,0.8); background-image: url('../images/band-photo.jpg'); background-size: cover; background-position: center; transition: all 0.3s ease; }
.band-promo-circle:hover { transform: scale(1.05); box-shadow: 0 0 30px #000, inset 0 0 20px rgba(0,0,0,0.7), 0 0 30px rgba(255,0,0,0.6); }
.band-promo-text { text-align: center; margin-top: 1rem; padding: 0.5rem 1.5rem; background-color: rgba(0,0,0,0.5); border: 1px solid #333; }
.promo-intro { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #aaa; font-size: 0.9rem; margin: 0; }
.promo-band-name { font-family: 'Haunted Spirit', cursive; color: #d1d1d1; font-size: 2rem; margin: 0; letter-spacing: 1px; line-height: 1.1; }

.hero-actions { padding-top: 0.5rem; }

/* General Header for Inner Pages */
header { position: relative; padding: 3rem 1rem; padding-top: 2rem; text-align: center; border-bottom: 4px solid #333; margin-bottom: 2rem; background: #111; }
header h1 { font-family: 'Haunted Spirit', cursive; font-size: 4rem; color: #990000; margin: 0; text-shadow: 2px 2px 10px #000; }
header .subtitle { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.2rem; color: #888; margin: 0; letter-spacing: 2px; }

/* --- Page Logo for DESKTOP Inner Pages --- */
.page-logo { display: block; position: absolute; top: 1.5rem; left: 1.5rem; max-width: 250px; height: auto; opacity: 0.5; }

/* --- Main Content & Sections --- */
main { padding: 2rem 1rem; max-width: 960px; margin: 0 auto; }
section { background-color: rgba(0,0,0,0.75); border: 2px solid #333; box-shadow: inset 0 0 20px #000; margin-bottom: 2rem; padding: 1.5rem; }
h2 { font-family: 'GhostScribe', sans-serif; text-transform: uppercase; color: #d1d1d1; font-size: 2.5rem; text-align: center; margin-top: 0; letter-spacing: 1px; padding-bottom: 1rem; border-bottom: 2px solid #444; }

.details-grid, .attractions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.detail-item, .attraction-item { text-align: center; background-color: rgba(0,0,0,0.4); padding: 1.5rem; border: 1px solid #333; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.detail-item:hover, .attraction-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.detail-item h3, .attraction-item h3 { font-family: 'Oswald', sans-serif; color: #cc0000; font-size: 1.5rem; margin-bottom: 0.5rem; }
.donation-box { text-align: center; padding: 1.5rem; background-color: rgba(0,0,0,0.4); border: 1px solid #990000; box-shadow: 0 0 20px rgba(255,0,0,0.3); }
.donation-box p { font-size: 1.1rem; max-width: 500px; margin: 0 auto 1rem auto; }
.donation-box .venmo-handle { font-family: 'Oswald', sans-serif; color: #aaa; margin-top: 1rem; font-size: 1rem; }
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
a { color: #cc0000; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
a:hover { color: #ff3333; text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); }
.button { display: inline-block; width: auto; margin: 0 0.5rem; padding: 12px 24px; background: #8b0000; color: #d1d1d1; text-align: center; text-decoration: none; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; border: 2px solid #2b0000; border-radius: 2px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.5); transition: all 0.2s; }
.button:hover { background: #990000; color: #fff; box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 15px rgba(255,0,0,0.6); }
.button:disabled { background: #333; color: #666; border-color: #000; cursor: not-allowed; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }
.page-navigation, .submission-section { text-align: center; }
.contest-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #aaa; }
.form-group input { font-family: 'Roboto', sans-serif; font-size: 1rem; padding: 10px; border: 2px solid #333; background-color: #111; color: #d1d1d1; width: 100%; box-sizing: border-box; }
.form-group input:focus { outline: none; border-color: #990000; }
#contestant-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.contestant-card { background-color: #222; border: 2px solid #444; cursor: pointer; text-align: center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; width: 150px; }
.contestant-card:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 0, 0, 0.7); border-color: #990000; }
.contestant-card img { width: 100%; height: 130px; object-fit: cover; filter: grayscale(60%) contrast(1.3) brightness(0.9); transition: filter 0.3s; }
.contestant-card:hover img { filter: grayscale(0) contrast(1.1) brightness(1); }
.card-info { padding: 0.75rem; }
.card-costume { font-family: 'GhostScribe', sans-serif; text-transform: uppercase; font-weight: bold; color: #d1d1d1; margin: 0; font-size: 1rem; }
.card-name { font-size: 0.8em; color: #888; margin: 0.25rem 0 0; }
.drop-zones-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.drop-zone { background-color: rgba(0,0,0,0.5); border: 3px dashed #555; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color 0.3s, background-color 0.3s; }
.drop-zone:hover { border-color: #888; }
.zone-label { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.5em; color: #666; transition: color 0.3s; }
.drop-zone:hover .zone-label { color: #999; }
.drop-zone .contestant-card { margin-top: 1rem; }
.drop-zone .contestant-card ~ .zone-label { display: none; }
#contestant-pool .in-winner-zone { display: none; }
.modal-hidden { display: none; }
#modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 100; }
#selection-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; background-color: #1a1a1a; border: 2px solid #990000; z-index: 101; text-align: center; padding: 1.5rem; box-shadow: 0 0 30px #000; }
#modal-image { max-width: 100%; height: auto; max-height: 250px; object-fit: cover; margin-bottom: 1rem; }
#modal-costume-name { font-family: 'Haunted Spirit', cursive; color: #cc0000; font-size: 2.5rem; margin: 0; }
#modal-entrant-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #888; margin: 0 0 1.5rem 0; }
.modal-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
#selection-modal button { display: block; width: 100%; padding: 12px; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1rem; cursor: pointer; border-radius: 0; }
#selection-modal button { background: linear-gradient(to bottom, #6d0000, #400000); border: 2px solid #2b0000; color: #d1d1d1; }
#selection-modal button:hover { background: linear-gradient(to bottom, #990000, #6d0000); }
#selection-modal button:disabled { background: #333; color: #666; border-color: #000; cursor: not-allowed; }
#modal-cancel { background: #222; border-color: #000; color: #888; }
#modal-cancel:hover { background: #333; color: #aaa; }
.leaderboard-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.mosaic-tile { position: relative; aspect-ratio: 1 / 1.1; background-size: cover; background-position: center; overflow: hidden; opacity: 0; transform: translateY(20px); animation: fadeInTile 0.5s ease-out forwards; border: 3px solid #444; box-shadow: inset 0 0 15px #000; filter: grayscale(50%) contrast(1.2) brightness(0.9); transition: all 0.3s; }
.mosaic-tile:hover { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.03); }
@keyframes fadeInTile { to { opacity: 1; transform: translateY(0); } }
.tile-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0)); }
.tile-info { margin-bottom: 0.5rem; }
.tile-costume-name { font-family: 'GhostScribe', sans-serif; text-transform: uppercase; font-size: 1.8rem; color: #d1d1d1; margin: 0; }
.tile-entrant-name { font-size: 0.9rem; color: #888; margin: 0; }
.rank-badge { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.8); border: 2px solid #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: bold; }
.tile-score { position: absolute; top: 10px; right: 10px; text-align: right; font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: #fff; text-shadow: 1px 1px 5px #000; }
.tile-score span { font-size: 0.8rem; color: #888; display: block; line-height: 1; }
.mosaic-tile.rank-gold, .mosaic-tile.rank-silver, .mosaic-tile.rank-bronze { filter: grayscale(0) contrast(1) brightness(1); border-color: #990000; box-shadow: inset 0 0 20px #000, 0 0 20px #990000; }
.mosaic-tile.rank-gold .rank-badge { background-color: #ffd700; color: #333; border-color: #fff; }
.mosaic-tile.rank-silver .rank-badge { background-color: #c0c0c0; color: #333; border-color: #fff; }
.mosaic-tile.rank-bronze .rank-badge { background-color: #cd7f32; color: #333; border-color: #fff; }
.map-container { overflow: hidden; border: 2px solid #333; }
footer { text-align: center; padding: 2rem; color: #666; font-size: 0.9rem; border-top: 1px solid #333; margin-top: 2rem; }


/* --- NEW: Page-Specific Overrides --- */
/* Make the Social Wall container wider on large screens */
@media (min-width: 1200px) {
    .social-wall-page main {
        max-width: 90%;
    }
}


/* --- Media Query for Mobile Responsive --- */
@media (max-width: 800px) {
    .global-nav { justify-content: space-between; }
    .global-nav .nav-logo-link { display: block; }
    .nav-logo { height: 60px; }
    .page-logo { display: none; }
    .menu-toggle { display: flex; }
    #main-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(10, 0, 0, 0.95); flex-direction: column; align-items: center; padding: 1rem 0; border-bottom: 2px solid #333; }
    #main-menu.is-open { display: flex; }
    .global-nav ul li { margin: 0.75rem 0; }
    .hero-banner h1 { font-size: 3.5rem; }
    header h1 { font-size: 3rem; }
    .hero-actions { display: flex; flex-direction: column; gap: 1rem; }

    /* --- UPDATED: Sticky Vote Submit on Mobile --- */
    #submission-section {
        position: -webkit-sticky;
        position: sticky;
        top: 76px; /* The height of the sticky nav bar on mobile */
        z-index: 40; /* Lower than nav, but above content */
        padding: 1rem;
        margin-bottom: 2rem;
        border-top: none;
        border-bottom: 3px solid #333;
        background-color: rgba(10, 0, 0, 0.95);
        backdrop-filter: blur(5px);
    }
    #submission-section h2 {
        display: none; /* Hide the title, as the context is clear */
    }
    #submission-section .form-group {
        margin-bottom: 0.75rem; /* Tighten up spacing in the sticky bar */
    }
}