/* General Body Styles */
body {
  width: 100%;
  background: linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.hero-image {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.hero-image picture,
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-image img {
  object-fit: cover;
  object-position: center;
}

.first-fold-cta-button-wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: center;
}

.vip-cta-button-wrapper {
  margin-top: 0;
  margin-bottom: 3rem;
  text-align: center;
}

p.info {
  font-size: 1.2rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  body {
    width: 100%;
    background: linear-gradient(135deg, #000000 0%, #0a0a1e 100%);
    color: #ffffff !important;
  }
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      transparent 5px,
      rgba(255, 215, 0, 0.05) 5px,
      rgba(255, 215, 0, 0.05) 6px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent 5px,
      rgba(255, 215, 0, 0.05) 5px,
      rgba(255, 215, 0, 0.05) 6px,
      transparent 6px
    );
  background-size: 6px 6px;
  z-index: -1;
}

/* Container Styles */
.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

/* Header Styles */
/*
 * Header Spacing System - Equal spacing between all sections
 * - Desktop: 2.5rem between each section (main logo → lineup box → partner images → info section)
 * - Tablet: 2rem between each section
 * - Mobile: 1.5rem between each section
 * - Proportional spacing system scales with screen size (percentage-based, not hard-coded pixels)
 * - Header margin-bottom set to 0 to prevent black bar between header and info section
 * Updated 2025-12-11 - BASS LORD
 */
header {
  /* padding: 2rem 1rem 2.5rem 1rem; */
  background: rgba(0, 34, 0, 0.7);
  border-bottom: 2px solid #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  margin-bottom: 0;
  position: relative;
}
@media (max-width: 768px) {
  header {
    background: rgba(0, 34, 0, 0.8);
    /* padding-bottom: 2rem !important; */
  }
}
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(
      transparent 5px,
      rgba(255, 215, 0, 0.15) 5px,
      rgba(255, 215, 0, 0.15) 6px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent 5px,
      rgba(255, 215, 0, 0.15) 5px,
      rgba(255, 215, 0, 0.15) 6px,
      transparent 6px
    );
  background-size: 6px 6px;
  z-index: -1;
  opacity: 0.8;
}
@media (max-width: 768px) {
  header::before {
    background-image:
      linear-gradient(
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      ),
      linear-gradient(
        90deg,
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      );
    opacity: 0.5;
  }
}

/*
 * Accessibility: Skip navigation link for keyboard users - styled with neon gold theme
 * - Hidden by default (positioned off-screen at top: -100px)
 * - Visible on focus for keyboard navigation
 * - Golden gradient background with neon glow effects
 * Updated 2025-12-10 - BASS LORD
 */
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d4af37 0%, #f0e68c 50%, #d4af37 100%);
  color: #000;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  z-index: 10000;
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 5px;
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.8),
    0 0 30px rgba(212, 175, 55, 0.5);
  border: 2px solid #d4af37;
  transition: all 0.3s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow:
    0 0 20px rgba(212, 175, 55, 1),
    0 0 40px rgba(212, 175, 55, 0.7);
  text-decoration: none;
  transform: translateX(-50%);
}

/*
 * Performance optimizations - prevent layout shifts and optimize rendering
 * FIXED: Removed content-visibility:auto to prevent scroll jumping near header partner logos
 * - content-visibility:auto combined with animations caused layout recalculation issues
 * - Animations scoped to .center class (main logo only) instead of all header images
 * Updated 2025-12-11 - BASS LORD
 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Main pulsing logo - animations only apply to the center logo, not partner logos */
header img.center {
  max-width: 100%;
  width: 950px;
  height: auto;
  animation:
    pulseGlow 4s ease-in-out infinite,
    breatheAndTilt 4s ease-in-out infinite;
  margin-bottom: -4.5rem;
  padding: 2rem 0;
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (max-width: 768px) {
  header img.center {
    margin-bottom: 0 !important;
    width: 98% !important;
    padding: 1.5rem 0;
  }
}
/*
 * Fixed header padding and proportionate spacing on header-partners at ≤480px
 * - Maintains 8% padding on sides for proportionate spacing that scales with screen size
 * - Percentage-based padding preferred over hard-coded pixel/rem values for responsive design
 * - 2025-12-10 - BASS LORD
 */
@media (max-width: 480px) {
  /* header {
    padding: 1.5rem 0 1.5rem 0;
  }
  header img.center {
    width: 380px !important;
    max-width: 95% !important;
    padding: 1rem 0;
  }
  .header-logo-container > a img {
    width: 240px !important;
    max-width: 63% !important;
  }
  .header-partners {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 8% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .header-partners a img {
    height: 20px !important;
  } */
}

/* Lineup Announcement Box - Countdown Timer Style */
/*
 * Countdown-style container for lineup announcements with progress bar
 * - Starts as "VIEW LINEUP" button with golden text styling
 * - On click: button hides, loading animation appears
 * - Matches countdown timer styling (border, background, glow)
 * - Width: 60% across all screen sizes for consistent proportions
 * - Updated 2025-12-11 - BASS LORD
 */
.lineup-announcement-box {
  font-family: "Orbitron", sans-serif;
  background: rgba(255, 215, 0, 0.1);
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  width: 60%;
  max-width: 500px;
  margin: 2.5rem auto 2.5rem auto;
  position: relative;
  z-index: 10;
}
.lineup-load-button {
  font-family: "Orbitron", sans-serif;
  font-size: 0.845rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.lineup-load-button:hover {
  color: #ffed4e;
  text-shadow: 0 0 15px rgba(255, 215, 0, 1);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
.lineup-load-button:active {
  -webkit-transform: scale(0.98);
  -moz-transform: scale(0.98);
  -ms-transform: scale(0.98);
  -o-transform: scale(0.98);
  transform: scale(0.98);
}
.lineup-loading-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
/*
 * Lineup loading text sizing - smaller on mobile for better fit
 * - Hazard symbol (⚠) replaces cursor during error flash at 44% progress
 * - Cursor positioned at right: 14px, hazard at right: 0 (2px spacing prevents overlay on ellipsis)
 * - Cross-browser compatible positioning (works on Safari, Brave, Chrome)
 * Updated 2025-12-11 - BASS LORD
 */
.lineup-loading-text {
  font-family: "Orbitron", sans-serif;
  font-size: 0.845rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  min-height: 0.845rem;
  position: relative;
  padding-right: 22px;
  margin-bottom: 0.3rem;
}
.lineup-loading-text::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 215, 0, 0.9);
  animation: cursorBlink 0.8s step-end infinite;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.lineup-loading-text.typing-complete::after {
  display: none;
}
.lineup-loading-text.show-hazard::after {
  content: "⚠";
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  animation: hazardBlink 0.5s ease-in-out infinite;
  font-size: 1rem;
  line-height: 1;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  right: 0;
  top: 0;
}
@keyframes cursorBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes hazardBlink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}
/*
 * Progress bar container and animation
 * - Synced with typewriter: loads to 44% as typing completes, flashes red, retracts to 0% as deleting
 * - 44% represents initial lineup drop with only some artists confirmed
 * - Progress bar retracts at same rate as character deletion for perfect sync
 * - JavaScript-controlled width with smooth transitions
 * - Updated 2025-12-11 - BASS LORD
 */
.lineup-progress-container {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 215, 0, 0.2);
}
.lineup-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  width: 0;
  transition: width 0.3s ease-out;
}
.lineup-progress-bar.flash-error {
  background: linear-gradient(90deg, #ff4444 0%, #ff6666 50%, #ff4444 100%);
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.8);
  animation: flashPulse 0.5s ease-in-out infinite;
}
@keyframes flashPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@media (max-width: 768px) {
  .lineup-announcement-box {
    margin: 2rem auto 2rem auto;
    padding: 0.8rem;
    width: 60%;
  }
  .lineup-load-button {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
  }
  .lineup-loading-text {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    min-height: 0.7rem;
  }
  .lineup-loading-text.show-hazard::after {
    font-size: 0.85rem;
  }
  .lineup-progress-container {
    height: 6px;
  }
}
@media (max-width: 480px) {
  .lineup-announcement-box {
    margin: 1.5rem auto 1.5rem auto;
    padding: 0.6rem;
    width: 60%;
  }
  .lineup-load-button {
    font-size: 0.6rem;
    letter-spacing: 1.2px;
  }
  .lineup-loading-text {
    font-size: 0.6rem;
    letter-spacing: 1.2px;
    min-height: 0.6rem;
  }
  .lineup-loading-text.show-hazard::after {
    font-size: 0.75rem;
  }
  .lineup-progress-container {
    height: 5px;
  }
}

/* Header Logo Container */
/*
 * Fixed header container to prevent left-side spacing issues on all screen sizes
 * - Logos positioned closer to edges with maximum space between them
 * - Proportionate padding (5% of container width) scales with screen size
 * - No hard-coded values - spacing adapts to all screen sizes
 * - 2025-12-10 - BASS LORD
 */
.header-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.header-logo-container > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.header-logo-container > a img {
  max-width: 100%;
  width: 600px;
  height: auto;
  /* margin-bottom: -3rem; */
  padding: 1.5rem 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.header-partners {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.header-partners a {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-partners a:first-child {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.header-partners a:last-child {
  padding-right: 0 !important;
  margin-right: 0 !important;
}
.header-partners a img {
  max-width: 100%;
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Mobile header adjustments */
/*
 * Fixed header logo spacing issues on tablet/mobile devices ≤768px
 * - Proportionate padding (5% of container width) scales with screen size
 * - No hard-coded values - spacing adapts to all screen sizes
 * - 2025-12-10 - BASS LORD
 */
@media (max-width: 768px) {
  .header-logo-container > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .header-logo-container > a img {
    width: 380px !important;
    max-width: 63% !important;
    margin: 0 auto;
    padding: 1rem 0;
  }
  header img.center {
    width: 600px !important;
    max-width: 98% !important;
  }
  .header-partners {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    max-width: 800px !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
  }
  .header-partners a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-partners a:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .header-partners a:last-child {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .header-partners a img {
    height: 32px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}
/*
 * Fixed header-partners container on mobile ≤480px
 * - Proportionate padding (8% of container width) scales with screen size
 * - No hard-coded values - spacing adapts to all screen sizes
 * - 2025-12-10 - BASS LORD
 */
@media (max-width: 480px) {
  .header-logo-container > a {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-logo-container > a img {
    width: 260px !important;
    max-width: 65% !important;
    margin: 0 auto !important;
    padding: 1rem 0 !important;
  }
  .header-partners {
    padding: 0 5% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  .header-partners a {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .header-partners a:first-child {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-partners a:last-child {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-partners a img {
    height: 20px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  .header-partners a img[src*="WEB-WHITE-LOGO-V2AM.png"] {
    height: 20px !important;
  }
  .header-partners a img[src*="WEB-WHITE-LOGO-V2-ENT.png"] {
    height: 20px !important;
  }
  p.info {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/*
 * Animations - GPU accelerated with transform3d and will-change
 * Updated 2025-12-10 - BASS LORD
 */
@keyframes pulseGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    -webkit-filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
    -webkit-filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
  }
}
@keyframes breatheAndTilt {
  0%,
  100% {
    transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.02, 1.02, 1);
    -webkit-transform: scale3d(1.02, 1.02, 1);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes arrowPulseLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(-10px, 0, 0);
    opacity: 0.5;
  }
}
@keyframes arrowPulseRight {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(10px, 0, 0);
    opacity: 0.5;
  }
}
.in-view {
  animation: fadeInUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Golden Neon Sign for "NEON FUTURE" */
/*
 * Premium golden neon tube sign effect - Simplified for mobile performance
 * - Reduced text-shadow layers from 8 to 3 for better performance
 * - Simplified pulse animation with fewer keyframes
 * - Removed flicker animation from ::before pseudo-element
 * - Green/gold color palette with warm golden-lime tones
 * - Proportional sizing using clamp() for consistent scaling across all screen sizes
 * - Updated 2025-12-10 - BASS LORD
 */
/* Updated 2025-12-27 - BVSS LORD - Removed filter and animation to allow sandbox.css controls to work */
.neon-future-sign {
  display: inline-block;
  font-family: "Orbitron", sans-serif;
  font-weight: bold;
  font-size: clamp(1.8rem, 3.5vw, 2.2rem);
  letter-spacing: clamp(2px, 0.5vw, 4px);
  color: #f0e68c;
  position: relative;
  padding: 0.2rem 0.5rem;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.15) 0%,
    transparent 70%
  );
  border-radius: 8px;
}
.neon-future-sign::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(212, 175, 55, 0.3) 50%,
    transparent 70%
  );
  border-radius: 10px;
  z-index: -1;
  opacity: 0.5;
}
@keyframes neonSignPulse {
  0%,
  100% {
    text-shadow:
      0 0 8px #d4af37,
      0 0 16px #c9a428,
      0 0 24px #9acd32;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.7)) brightness(1);
  }
  50% {
    text-shadow:
      0 0 10px #d4af37,
      0 0 20px #c9a428,
      0 0 30px #9acd32;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8)) brightness(1.1);
  }
}
@keyframes neonFlicker {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.6;
  }
}

/*
 * Info Block Styles with clover background
 * Very subtle clover background with low opacity and darkened
 * Updated 2025-12-11 - BASS LORD
 */
.info-block {
  padding: 1vh 2rem;
  background: transparent;
  margin: 0;
  min-height: calc(100vh - 250px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  background-color: transparent;
}
.info-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/clover-bg.jpg") no-repeat center center;
  background-size: cover;
  z-index: 0;
  opacity: 0.15;
  filter: brightness(0.4);
  -webkit-filter: brightness(0.4);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.vip {
  max-width: 1000px;
}
@media (max-width: 768px) {
  .info-block::before {
    opacity: 0.12;
    filter: brightness(0.3);
    -webkit-filter: brightness(0.3);
  }
}
.info-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  background-image:
    linear-gradient(
      transparent 5px,
      rgba(255, 215, 0, 0.1) 5px,
      rgba(255, 215, 0, 0.1) 6px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent 5px,
      rgba(255, 215, 0, 0.1) 5px,
      rgba(255, 215, 0, 0.1) 6px,
      transparent 6px
    );
  background-size: 6px 6px;
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@media (max-width: 768px) {
  .info-block::after {
    background: rgba(0, 0, 0, 0.7);
    background-image:
      linear-gradient(
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      ),
      linear-gradient(
        90deg,
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      );
  }
  .info-block {
    /* padding: 2vh 1rem; */
    min-height: calc(100vh - 200px);
  }
  .info-block div {
    max-width: 100%;
    /* padding: 0 0.5rem !important; */
  }
  h2.info {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  /* p.info {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  } */
  /* a[href*="tixr.com"] {
   font-size: 1.1rem;
    padding: 0.6rem 1.5rem;
  } */
  div[style*="flex: 1"] {
    min-width: 100%;
    margin-bottom: 1rem;
  }
}

/* .info-block div {
  padding: 0 !important;
  width: 100%;
  max-width: 800px;
  text-align: left;
  position: relative;
  z-index: 2;
} */

.info-block h1 {
  padding: 0 !important;
  width: 100%;
  /* max-width: 800px; */
  text-align: center;
  position: relative;
  z-index: 2;
}
.info-block h2 {
  position: relative;
  z-index: 2;
}
.info-block p {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}
.info-block main {
  position: relative;
  z-index: 2;
}
.info-content {
  padding: 4vh 0;
  position: relative;
  z-index: 2;
}

.info-content {
  padding: 4vh 0;
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

.info {
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
body > main > section > div > p:nth-child(7) {
  text-align: center;
}
h1.info {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}
/* p.info {
  font-size: 1.2rem;
  line-height: 1.6;
} */
@media (max-width: 768px) {
  .info {
    color: #ffffff !important;
    text-shadow: 0 0 7px rgba(255, 215, 0, 0.6);
    font-size: 1.2rem;
    padding: 0 1rem;
  }

  .info a {
    color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  }
  .info a:hover {
    background: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  }
}
.info a {
  color: #ffd700;
  text-decoration: none;
  background: rgba(255, 215, 0, 0.2);
  padding: 0.5rem 2rem;
  border-radius: 50px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid #ffd700;
  display: inline-block;
  margin-top: 1rem;
}
.info a:hover {
  background: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  transform: scale(1.05);
}

/* Countdown Timer */
/*
 * Countdown timer matches width of ticket tier boxes
 * - Desktop: Same width as both tier boxes combined (max-width: 1000px)
 * - Mobile: Same width as individual tier boxes (100%)
 * - Opera browser compatibility: Added vendor prefixes for flexbox
 * - Updated 2025-12-14 - BVSS LORD @ V2 PRESENTS
 */
#countdown-container {
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  margin-bottom: 2rem;
  background: rgba(255, 215, 0, 0.1);
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#countdown-container span {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
#countdown {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 0.5rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 1rem;
}
#days,
#hours,
#minutes,
#seconds {
  min-width: 70px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0.25rem;
}
#days div,
#hours div,
#minutes div,
#seconds div {
  font-size: 0.8rem;
  text-transform: uppercase;
  text-align: center;
}
#countdown span {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
@media (max-width: 768px) {
  #countdown-container {
    font-size: 1.2rem;
    padding: 0.8rem;
    width: 100%;
    max-width: 100%;
  }
  #countdown {
    gap: 0.1rem;
    padding: 0 0.5rem;
  }
  #days,
  #hours,
  #minutes,
  #seconds {
    min-width: 60px;
  }
  #days div,
  #hours div,
  #minutes div,
  #seconds div {
    font-size: 0.7rem;
  }
}
@media (max-width: 480px) {
  #countdown-container {
    font-size: 1rem;
  }
  #days,
  #hours,
  #minutes,
  #seconds {
    min-width: 55px;
  }
}

/* Ticket Tiers Container */
/*
 * Tickets Section Header - "GET TICKETS" with ticket emojis and pipes
 * - Slightly larger than "EVENT DETAILS" and "KNOW BEFORE YOU GO" headers
 * - Pipes (|) on either side to match EVENT DETAILS style
 * - Reduced glow on ticket emojis for subtler effect
 * - Centered layout with animated floating ticket emojis
 * Updated 2025-12-11 - Andrew CEO Festival WiFi Guys - info+developer@festivalwifiguys.com
 */
.tickets-section-header {
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.tickets-section-header .ticket-emoji {
  font-size: 1.7rem;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
  animation: ticketFloat 3s ease-in-out infinite;
}
@keyframes ticketFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(5deg);
  }
}
@media (max-width: 768px) {
  .tickets-section-header {
    font-size: 1.2rem;
    gap: 0.8rem;
  }
  .tickets-section-header .ticket-emoji {
    font-size: 1.4rem;
  }
}

/*
 * Ticket tier display showing Tier 1 (sold out) and Tier 2 (active)
 * - Desktop: side-by-side layout with gap
 * - Mobile: stacked vertical layout
 * - Each tier has label, button, and date
 * - Sold out tier uses muted gray/red styling with strikethrough
 * - Active tier uses golden neon styling
 * - Text is centered using !important to override .info-block div text-align:left
 * Updated 2025-12-11 - Andrew CEO Festival WiFi Guys - info+developer@festivalwifiguys.com
 */
.ticket-tiers-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  padding: 0 1rem;
}
.tier-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 3.5rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  border: 3px solid;
  min-width: 320px;
  flex: 1;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  box-sizing: border-box;
}
.tier-box.tier-sold-out {
  border-color: rgba(200, 50, 50, 0.6);
  background: rgba(40, 0, 0, 0.4);
  box-shadow:
    0 0 15px rgba(200, 50, 50, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
}
.tier-box.tier-active {
  border-color: rgba(255, 215, 0, 0.8);
  background: rgba(255, 215, 0, 0.08);
  box-shadow:
    0 0 30px rgba(255, 215, 0, 0.3),
    0 0 50px rgba(255, 215, 0, 0.15),
    inset 0 0 40px rgba(255, 215, 0, 0.05);
}
.tier-label {
  font-family: "Orbitron", sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd700;
  text-shadow:
    0 0 15px rgba(255, 215, 0, 0.9),
    0 0 25px rgba(255, 215, 0, 0.5);
  margin: 0;
  padding: 0 1rem 0.8rem 1rem;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  width: 100%;
  text-align: center !important;
  box-sizing: border-box;
}
.tier-box.tier-sold-out .tier-label {
  color: #cc5555;
  text-shadow: 0 0 10px rgba(200, 50, 50, 0.8);
  border-bottom-color: rgba(200, 50, 50, 0.4);
}
.tier-date {
  font-family: "Orbitron", sans-serif;
  font-size: 0.9rem;
  color: #ffd700;
  opacity: 0.9;
  margin: 0;
  padding: 0 1rem;
  letter-spacing: 1.5px;
  font-weight: 500;
  text-align: center !important;
  width: 100%;
  box-sizing: border-box;
}
.tier-box.tier-sold-out .tier-date {
  color: #999999;
  opacity: 0.7;
}
.tier-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 0.5rem;
}
@media (max-width: 768px) {
  .ticket-tiers-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
    align-items: center;
  }
  .tier-box {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
  }
  .tier-label {
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 0 0.8rem 0.6rem 0.8rem;
  }
  .tier-date {
    font-size: 0.8rem;
    padding: 0 0.8rem;
  }
  .tier-button-wrapper {
    padding: 0 0.3rem;
  }
}

/* Tier Buttons - Active and Sold Out */
/*
 * Tier button styling for both active (golden) and sold out (red/gray) states
 * - Active tier: Golden gradient with glow, shimmer animation, hover effects, scales on hover
 * - Sold out tier: Dark gray/red gradient, red strikethrough, disabled state, no interactions
 * - Visually communicative: sold out looks "dead", active looks "alive" and inviting
 * - Forces gradient background and shadows on mobile browsers
 * - Updated 2025-12-11 - BASS LORD
 */
.tier-button {
  font-size: 1.25rem;
  padding: 1.1rem 2.8rem;
  text-decoration: none;
  border-radius: 15px;
  font-weight: bold;
  font-family: "Orbitron", sans-serif;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 3px solid;
  min-width: 220px;
  white-space: nowrap;
}
.tier-button.active-tier {
  color: #cc8800 !important;
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffed4e 50%,
    #ffd700 100%
  ) !important;
  border-color: #ffaa00 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 -1px 2px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 35px rgba(255, 215, 0, 0.95),
    0 0 55px rgba(255, 215, 0, 0.65),
    0 0 75px rgba(255, 215, 0, 0.45),
    inset 0 2px 12px rgba(255, 255, 255, 0.6),
    inset 0 -2px 12px rgba(255, 170, 0, 0.6) !important;
}
.tier-button.active-tier:hover {
  background: linear-gradient(
    135deg,
    #ffed4e 0%,
    #ffffff 50%,
    #ffed4e 100%
  ) !important;
  color: #aa7700 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 -1px 2px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4);
  box-shadow:
    0 0 45px rgba(255, 215, 0, 1),
    0 0 75px rgba(255, 215, 0, 0.85),
    0 0 105px rgba(255, 215, 0, 0.65),
    inset 0 2px 18px rgba(255, 255, 255, 0.85),
    inset 0 -2px 18px rgba(255, 170, 0, 0.75) !important;
  border-color: #ffed4e !important;
  transform: scale(1.08) translateZ(0);
}
.tier-button.active-tier::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.3) 60%,
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: goldShimmer 3s ease-in-out infinite;
}
.tier-button.active-tier:hover::before {
  animation: goldShimmer 1.5s ease-in-out infinite !important;
}
.tier-button.active-tier:active {
  background: linear-gradient(
    135deg,
    #ffaa00 0%,
    #ffd700 50%,
    #ffaa00 100%
  ) !important;
  box-shadow:
    0 0 28px rgba(255, 215, 0, 0.85),
    0 0 48px rgba(255, 215, 0, 0.55),
    inset 0 2px 10px rgba(255, 255, 255, 0.45),
    inset 0 -2px 10px rgba(255, 170, 0, 0.45) !important;
  transform: scale(0.98) translateZ(0);
}
.tier-button.sold-out {
  color: #888888;
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
  border-color: #cc5555;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 5px rgba(200, 50, 50, 0.3);
  box-shadow:
    0 0 15px rgba(200, 50, 50, 0.4),
    inset 0 2px 8px rgba(0, 0, 0, 0.7),
    inset 0 -2px 8px rgba(200, 50, 50, 0.2);
  cursor: not-allowed;
  opacity: 0.75;
}
.tier-button.sold-out::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 50, 50, 0.9) 10%,
    rgba(255, 50, 50, 0.9) 90%,
    transparent 100%
  );
  transform: translateY(-50%) rotate(-3deg);
  box-shadow:
    0 0 12px rgba(255, 50, 50, 0.9),
    0 0 20px rgba(255, 50, 50, 0.6);
}
.tier-button.sold-out::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  pointer-events: none;
}
@keyframes goldShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
@media (max-width: 768px) {
  .tier-button {
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    min-width: 190px;
    letter-spacing: 1.5px;
  }
  .tier-button.active-tier {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: linear-gradient(
      135deg,
      #ffd700 0%,
      #ffed4e 50%,
      #ffd700 100%
    ) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    box-shadow:
      0 0 35px rgba(255, 215, 0, 0.95),
      0 0 55px rgba(255, 215, 0, 0.65),
      0 0 75px rgba(255, 215, 0, 0.45),
      inset 0 2px 12px rgba(255, 255, 255, 0.6),
      inset 0 -2px 12px rgba(255, 170, 0, 0.6) !important;
    -webkit-box-shadow:
      0 0 35px rgba(255, 215, 0, 0.95),
      0 0 55px rgba(255, 215, 0, 0.65),
      0 0 75px rgba(255, 215, 0, 0.45),
      inset 0 2px 12px rgba(255, 255, 255, 0.6),
      inset 0 -2px 12px rgba(255, 170, 0, 0.6) !important;
  }
}

/* Unified Ticket Sales Area */
/*
 * New unified ticket area with availability status and progress bars
 * - Clean, informative layout with tier availability
 * - Progress bars showing how sold out each tier is with mild pulse animation
 * - Emojis for visual status indicators
 * - Big golden CTA button centered at bottom
 * - Responsive design for mobile
 * Updated 2025-12-14 - Andrew CEO Festival WiFi Guys - info+developer@festivalwifiguys.com - BVSS LORD @ V2 PRESENTS
 */
.ticket-sales-area {
  max-width: 1000px;
  margin: 0 auto 2.5rem auto;
  padding: 3rem;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(20, 20, 20, 0.75) 100%
  );
  border-radius: 30px;
  border: 3px solid rgba(255, 215, 0, 0.5);
  box-shadow:
    0 0 50px rgba(255, 215, 0, 0.3),
    0 0 100px rgba(255, 215, 0, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.6);
}
.main-ticket-cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4rem;
  padding: 3.5rem 5rem;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.12) 0%,
    rgba(255, 215, 0, 0.05) 40%,
    transparent 70%
  );
  border-top: 3px solid rgba(255, 215, 0, 0.4);
  border-bottom: 3px solid rgba(255, 215, 0, 0.4);
  position: relative;
  box-shadow:
    0 -10px 40px rgba(255, 215, 0, 0.15),
    0 10px 40px rgba(255, 215, 0, 0.15),
    inset 0 0 80px rgba(255, 215, 0, 0.08);
}
.main-ticket-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.8) 50%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.main-ticket-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.8) 50%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.big-cta-button {
  font-size: 2rem !important;
  padding: 1.8rem 5rem !important;
  min-width: auto !important;
  max-width: max-content !important;
  letter-spacing: 4px !important;
  border-width: 4px !important;
  display: inline-block !important;
  text-align: center !important;
  position: relative;
  z-index: 1;
  /* margin: 0 3rem !important; */
}
.tier-availability-section {
  margin-top: 0;
}
.availability-header {
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffd700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 1),
    0 0 35px rgba(255, 215, 0, 0.6);
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
}
.tier-status-item {
  margin-bottom: 1.8rem;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(10, 10, 10, 0.4) 100%
  );
  border-radius: 15px;
  border: 2px solid rgba(255, 215, 0, 0.25);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.tier-status-item:hover {
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.6) 0%,
    rgba(20, 20, 20, 0.5) 100%
  );
  box-shadow:
    0 0 25px rgba(255, 215, 0, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.4);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.tier-status-item:last-child {
  margin-bottom: 0;
}
.tier-status-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.tier-status-emoji {
  font-size: 1.8rem;
  line-height: 1;
  -webkit-filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}
.tier-status-name {
  font-family: "Orbitron", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 200px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tier-status-badge {
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  width: 135px;
  text-align: center;
}
.tier-status-badge.sold-out {
  background: linear-gradient(
    135deg,
    rgba(200, 50, 50, 0.4) 0%,
    rgba(150, 30, 30, 0.3) 100%
  );
  color: #ff8888;
  border: 2px solid rgba(200, 50, 50, 0.7);
  text-shadow:
    0 0 10px rgba(200, 50, 50, 1),
    0 0 20px rgba(200, 50, 50, 0.6);
}
.tier-status-badge.almost-sold-out {
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.4) 0%,
    rgba(200, 130, 0, 0.3) 100%
  );
  color: #ffbb66;
  border: 2px solid rgba(255, 165, 0, 0.7);
  text-shadow:
    0 0 10px rgba(255, 165, 0, 1),
    0 0 20px rgba(255, 165, 0, 0.6);
}
.tier-status-badge.low-stock {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(200, 170, 0, 0.3) 100%
  );
  color: #ffd700;
  border: 2px solid rgba(255, 215, 0, 0.7);
  text-shadow:
    0 0 10px rgba(255, 215, 0, 1),
    0 0 20px rgba(255, 215, 0, 0.6);
}
.tier-status-badge.available {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 100, 0.4) 0%,
    rgba(0, 200, 80, 0.3) 100%
  );
  color: #88ffaa;
  border: 2px solid rgba(0, 255, 100, 0.7);
  text-shadow:
    0 0 10px rgba(0, 255, 100, 1),
    0 0 20px rgba(0, 255, 100, 0.6);
}
.tier-status-badge.coming-soon {
  background: linear-gradient(
    135deg,
    rgba(100, 100, 150, 0.4) 0%,
    rgba(70, 70, 120, 0.3) 100%
  );
  color: #aaaacc;
  border: 2px solid rgba(100, 100, 150, 0.7);
  text-shadow:
    0 0 10px rgba(100, 100, 150, 1),
    0 0 20px rgba(100, 100, 150, 0.6);
}
.tier-progress-bar {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.tier-progress-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  animation: mildPulse 4s ease-in-out infinite;
}
.tier-progress-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
}
.tier-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: progressShimmer 4s ease-in-out infinite;
}
.tier-progress-fill.sold-out {
  background: linear-gradient(90deg, #dd3333 0%, #ff5555 50%, #dd3333 100%);
  box-shadow:
    0 0 20px rgba(200, 50, 50, 0.8),
    inset 0 2px 6px rgba(255, 100, 100, 0.5);
}
.tier-progress-fill.almost-sold-out {
  background: linear-gradient(90deg, #ff9900 0%, #ffbb55 50%, #ff9900 100%);
  box-shadow:
    0 0 20px rgba(255, 165, 0, 0.8),
    inset 0 2px 6px rgba(255, 200, 100, 0.5);
}
.tier-progress-fill.low-stock {
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    inset 0 2px 6px rgba(255, 255, 100, 0.5);
}
.tier-progress-fill.available {
  background: linear-gradient(90deg, #00dd77 0%, #00ff99 50%, #00dd77 100%);
  box-shadow:
    0 0 20px rgba(0, 255, 100, 0.8),
    inset 0 2px 6px rgba(100, 255, 150, 0.5);
}
.tier-progress-fill.coming-soon {
  background: linear-gradient(90deg, #666688 0%, #8888aa 50%, #666688 100%);
  box-shadow:
    0 0 15px rgba(100, 100, 150, 0.6),
    inset 0 2px 6px rgba(150, 150, 200, 0.4);
}
@keyframes progressShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
@keyframes mildPulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.92;
    filter: brightness(1.08);
  }
}
@media (max-width: 768px) {
  .ticket-sales-area {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
  }
  .main-ticket-cta {
    margin-top: 3rem;
    padding: 0.5rem;
  }
  .big-cta-button {
    font-size: 0.8rem !important;
    padding: 1.1rem !important;
    letter-spacing: 2.5px !important;
  }
  .availability-header {
    font-size: 1.2rem;
    letter-spacing: 2.5px;
    margin-bottom: 1.5rem;
  }
  .tier-status-item {
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.5rem;
  }
  .tier-status-header {
    gap: 1rem;
  }
  .tier-status-emoji {
    font-size: 1.5rem;
  }
  .tier-status-name {
    font-size: 1rem;
    min-width: 150px;
    letter-spacing: 1.5px;
  }
  .tier-status-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    letter-spacing: 1.5px;
  }
  .tier-progress-bar {
    height: 14px;
  }
}

/* Event Details Grid */
/*
 * Opera browser compatibility fixes for flexbox layout
 * - Added vendor prefixes for display:flex
 * - Added margin fallback for gap property (Opera may not support gap in older versions)
 * - Ensured proper box-sizing for consistent layout
 * - 2025-12-14 - BVSS LORD @ V2 PRESENTS
 */
.event-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.event-column {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 300px;
  text-align: left;
  margin: 0 1rem 1rem 1rem;
  box-sizing: border-box;
}
.event-column h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 1.3rem;
  color: #ffd700;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
  text-align: left;
}
.event-column ul {
  list-style-type: none;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #ffffff;
}
.event-column ul a {
  color: #ffd700;
  text-decoration: none;
  border-bottom: 1px solid #ffd700;
}

/*
 * FAQ Question Styling - matches "know before you go" style with reduced size
 * Updated 2025-12-10 - BASS LORD
 */
.faq-question {
  font-family: "Orbitron", sans-serif;
  font-size: 1.1rem;
  color: #ffd700;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
  text-align: left;
}

.info-block .faq-block .faq-content p {
  text-align: left !important;
}

/* Footer Styles */
/*
 * Footer with grid background and logo styling
 * - All footer logos have consistent height across all breakpoints
 * - Desktop: 40px, Tablet: 30px, Mobile: 24px
 * - Updated 2025-12-11 - BASS LORD
 */
footer {
  background: rgba(0, 34, 0, 0.9);
  padding: 1.5rem;
  font-size: 0.9rem;
  border-top: 2px solid #ffd700;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(
      transparent 5px,
      rgba(255, 215, 0, 0.15) 5px,
      rgba(255, 215, 0, 0.15) 6px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent 5px,
      rgba(255, 215, 0, 0.15) 5px,
      rgba(255, 215, 0, 0.15) 6px,
      transparent 6px
    );
  background-size: 6px 6px;
  z-index: -1;
  opacity: 0.8;
}
footer a {
  color: #ffd700;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.footer-logos {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0 1rem;
}
.footer-logos a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -moz-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.footer-logos a img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
}
@media (max-width: 768px) {
  footer {
    background: rgba(0, 34, 0, 0.95);
    padding: 1rem 0.5rem;
    font-size: 0.8rem;
  }
  footer::before {
    background-image:
      linear-gradient(
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      ),
      linear-gradient(
        90deg,
        transparent 5px,
        rgba(255, 215, 0, 0.08) 5px,
        rgba(255, 215, 0, 0.08) 6px,
        transparent 6px
      );
    opacity: 0.5;
  }
  .footer-logos {
    gap: 1.5rem !important;
    padding: 0 1rem;
  }
  .footer-logos a img {
    height: 30px !important;
    max-height: 30px !important;
  }
}
@media (max-width: 480px) {
  h1.info {
    font-size: 1.4rem;
  }
  .footer-logos {
    gap: 1rem !important;
    padding: 0 0.5rem;
  }
  .footer-logos a img {
    height: 24px !important;
    max-height: 24px !important;
  }
}
.social-container {
  margin-top: 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
}
.social-container a {
  font-size: 2rem;
  margin: 0 0.5rem;
  color: #ffd700;
  -webkit-transition:
    transform 0.3s ease,
    color 0.3s ease;
  -moz-transition:
    transform 0.3s ease,
    color 0.3s ease;
  -o-transition:
    transform 0.3s ease,
    color 0.3s ease;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, color;
}
.social-container a:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  color: #ffffff;
}
.social-container .x-icon {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1.8rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background-color: rgba(255, 215, 0, 0.2);
  border-radius: 5px;
  -webkit-transition:
    transform 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
  -moz-transition:
    transform 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
  -o-transition:
    transform 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
}
.social-container a:hover .x-icon {
  background-color: rgba(255, 215, 0, 0.4);
  color: #ffffff;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
@media (max-width: 768px) {
  .social-container a {
    font-size: 1.8rem;
    margin: 0 0.3rem;
  }
}

/* Loading Screen Styles */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #000000 0%, #001a00 50%, #000000 100%);
  z-index: 9999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
  will-change: opacity;
}
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
  visibility: hidden;
}
body.loading {
  overflow: hidden;
  background: #000000;
}
body.loading #loading-screen {
  opacity: 1;
}
body.loading header,
body.loading main,
body.loading footer {
  visibility: hidden;
  opacity: 0;
  display: none;
}
header,
main {
  transition: opacity 2s ease 0.8s;
  opacity: 0;
  visibility: hidden;
}
footer {
  transition: opacity 2s ease 0.8s;
  opacity: 0;
  visibility: hidden;
}
body:not(.loading) header,
body:not(.loading) main {
  opacity: 1;
  visibility: visible;
  display: block;
}
body:not(.loading) footer {
  opacity: 1;
  visibility: visible;
  display: flex;
}
.loading-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  animation: fadeInElement 1s ease-out 0.3s forwards;
}
.loading-logo-container img {
  max-width: 100%;
  width: 550px;
  height: auto;
  margin-bottom: 3rem;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}
/*
 * Loading text with simplified animation for better mobile performance
 * Reduced text-shadow complexity and removed infinite glowText animation
 * Updated 2025-12-10 - BASS LORD
 */
.loading-text {
  text-align: center;
  color: #ffed4e;
  font-family: "Orbitron", sans-serif;
  font-size: 3rem;
  text-shadow:
    0 0 15px rgba(255, 237, 78, 0.9),
    0 0 30px rgba(255, 215, 0, 0.6);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInElement 1s ease-out 0.8s forwards;
}
.clover-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  opacity: 0;
  animation: fadeInElement 1s ease-out 1.3s forwards;
}
.golden-question-mark {
  font-size: 12rem;
  font-family: "Orbitron", sans-serif;
  font-weight: bold;
  color: #ffd700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 215, 0, 0.8),
    0 0 60px rgba(255, 215, 0, 0.6),
    0 0 80px rgba(255, 215, 0, 0.4),
    0 0 100px rgba(255, 215, 0, 0.2);
  animation: spinY 4s linear 1.3s infinite;
  transform-style: preserve-3d;
  line-height: 1;
  user-select: none;
  background: transparent;
  border: none;
  cursor: not-allowed;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 0.5;
  transition:
    opacity 0.5s ease,
    transform 0.3s ease;
}
.golden-question-mark.clickable {
  cursor: pointer;
  opacity: 1;
}
.golden-question-mark.clickable:hover {
  transform: scale(1.1);
  text-shadow:
    0 0 30px rgba(255, 215, 0, 1),
    0 0 50px rgba(255, 215, 0, 0.9),
    0 0 70px rgba(255, 215, 0, 0.7),
    0 0 90px rgba(255, 215, 0, 0.5),
    0 0 110px rgba(255, 215, 0, 0.3);
}
.golden-question-mark.clickable:active {
  transform: scale(0.95);
}
.clover-leaf,
.clover-leaf.top,
.clover-leaf.right,
.clover-leaf.bottom,
.clover-leaf.left {
  display: none;
}
.sparkle {
  position: absolute;
  border-radius: 50%;
  box-shadow:
    0 0 20px currentColor,
    0 0 40px currentColor;
  animation: floatOrb 3s ease-in-out infinite;
}
.sparkle-1 {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #ffed4e 0%, #ffd700 50%, #ffaa00 100%);
  top: 10%;
  left: 60%;
  color: rgba(255, 215, 0, 0.8);
  animation:
    floatOrb 2.5s ease-in-out infinite,
    sparkleGold 2s ease-in-out infinite;
  box-shadow:
    0 0 25px rgba(255, 215, 0, 1),
    0 0 50px rgba(255, 215, 0, 0.6);
}
.sparkle-2 {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 50%, #ffaa00 100%);
  top: 40%;
  right: 10%;
  color: rgba(255, 215, 0, 0.8);
  animation:
    floatOrb 3s ease-in-out infinite 0.3s,
    sparkleGold 2.2s ease-in-out infinite 0.3s;
  box-shadow:
    0 0 20px rgba(255, 215, 0, 1),
    0 0 45px rgba(255, 215, 0, 0.5);
}
.sparkle-3 {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #ffed4e 0%, #ffd700 50%, #ff8800 100%);
  bottom: 15%;
  left: 40%;
  color: rgba(255, 215, 0, 0.9);
  animation:
    floatOrb 2.8s ease-in-out infinite 0.6s,
    sparkleGold 1.9s ease-in-out infinite 0.6s;
  box-shadow:
    0 0 30px rgba(255, 215, 0, 1),
    0 0 55px rgba(255, 215, 0, 0.7);
}
.sparkle-4 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 50%, #ffaa00 100%);
  top: 20%;
  left: 20%;
  color: rgba(255, 215, 0, 0.7);
  animation:
    floatOrb 3.2s ease-in-out infinite 0.9s,
    sparkleGold 2.3s ease-in-out infinite 0.9s;
  box-shadow:
    0 0 18px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 215, 0, 0.5);
}
.sparkle-5 {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #ffffff 0%, #9acd32 50%, #7cb342 100%);
  top: 15%;
  left: 30%;
  color: rgba(154, 205, 50, 0.9);
  animation:
    floatOrb 2.7s ease-in-out infinite 0.2s,
    sparkleGreen 2.1s ease-in-out infinite 0.2s;
  box-shadow:
    0 0 25px rgba(154, 205, 50, 1),
    0 0 50px rgba(154, 205, 50, 0.6);
}
.sparkle-6 {
  width: 17px;
  height: 17px;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 50%, #ffaa00 100%);
  bottom: 20%;
  right: 25%;
  color: rgba(255, 215, 0, 0.9);
  animation:
    floatOrb 2.6s ease-in-out infinite 0.5s,
    sparkleGold 2s ease-in-out infinite 0.5s;
  box-shadow:
    0 0 28px rgba(255, 215, 0, 1),
    0 0 52px rgba(255, 215, 0, 0.6);
}
.sparkle-7 {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle, #ffed4e 0%, #ffd700 50%, #ffaa00 100%);
  top: 50%;
  left: 10%;
  color: rgba(255, 215, 0, 0.8);
  animation:
    floatOrb 3.1s ease-in-out infinite 1s,
    sparkleGold 2.4s ease-in-out infinite 1s;
  box-shadow:
    0 0 22px rgba(255, 215, 0, 1),
    0 0 48px rgba(255, 215, 0, 0.6);
}
.sparkle-8 {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 50%, #ff8800 100%);
  bottom: 30%;
  right: 15%;
  color: rgba(255, 215, 0, 0.9);
  animation:
    floatOrb 2.9s ease-in-out infinite 1.2s,
    sparkleGold 2.2s ease-in-out infinite 1.2s;
  box-shadow:
    0 0 26px rgba(255, 215, 0, 1),
    0 0 51px rgba(255, 215, 0, 0.7);
}
.sparkle-9 {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 50%, #f0f0f0 100%);
  top: 60%;
  right: 30%;
  color: rgba(255, 255, 255, 0.9);
  animation:
    floatOrb 2.8s ease-in-out infinite 0.8s,
    sparkleWhite 2.3s ease-in-out infinite 0.8s;
  box-shadow:
    0 0 24px rgba(255, 255, 255, 1),
    0 0 49px rgba(255, 255, 255, 0.6);
}
.sparkle-10 {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 50%, #ffaa00 100%);
  bottom: 40%;
  left: 25%;
  color: rgba(255, 215, 0, 0.85);
  animation:
    floatOrb 3s ease-in-out infinite 1.5s,
    sparkleGold 2.1s ease-in-out infinite 1.5s;
  box-shadow:
    0 0 23px rgba(255, 215, 0, 1),
    0 0 47px rgba(255, 215, 0, 0.65);
}
/*
 * Mobile optimizations - Disable heavy animations on mobile devices for better performance
 * - Removes text glow animations on mobile
 * - Simplifies neon sign animations
 * - Reduces cursor blink frequency
 * - Updated 2025-12-10 - BASS LORD
 */
@media (max-width: 768px) {
  .clover-container {
    width: 250px;
    height: 250px;
  }
  .golden-question-mark {
    font-size: 10rem;
  }
  .loading-logo-container img {
    width: 450px;
  }
  .loading-text {
    font-size: 2.5rem;
    text-shadow: 0 0 10px rgba(255, 237, 78, 0.8);
  }
  .lineup-loading-text {
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
  }
  .lineup-loading-text::after {
    animation: cursorBlink 1.2s step-end infinite;
  }
  /* Updated 2025-12-27 - BVSS LORD - Removed text-shadow to allow sandbox.css controls */
  .neon-future-sign::before {
    display: none;
  }
}
@media (max-width: 480px) {
  .clover-container {
    width: 200px;
    height: 200px;
  }
  .golden-question-mark {
    font-size: 8rem;
  }
  .golden-question-mark.clickable:hover {
    transform: scale(1.05);
  }
  .loading-logo-container img {
    width: 350px;
  }
  .loading-text {
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(255, 237, 78, 0.7);
  }
  .lineup-loading-text {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
    filter: none;
  }
  .lineup-loading-text::after {
    animation: cursorBlink 1.5s step-end infinite;
  }
  /* Updated 2025-12-27 - BVSS LORD - Removed text-shadow to allow sandbox.css controls */
}

/* Loading Screen Animations */
@keyframes fadeInElement {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes spinY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes floatOrb {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-15px) scale(1.1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-25px) scale(1.15);
    opacity: 1;
  }
  75% {
    transform: translateY(-15px) scale(1.1);
    opacity: 0.9;
  }
}
@keyframes sparkle {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.8);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(1.5);
  }
}
@keyframes sparkleGold {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.85) translateY(0px);
    filter: brightness(1.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.4) translateY(-12px);
    filter: brightness(1.8);
  }
}
@keyframes sparkleGreen {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.85) translateY(0px);
    filter: brightness(1.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.4) translateY(-12px);
    filter: brightness(1.8);
  }
}
@keyframes sparkleWhite {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(0.9) translateY(0px);
    filter: brightness(1.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) translateY(-10px);
    filter: brightness(2);
  }
}
@keyframes glowText {
  0% {
    text-shadow:
      0 0 15px rgba(255, 237, 78, 0.9),
      0 0 30px rgba(255, 215, 0, 0.7),
      0 0 45px rgba(255, 215, 0, 0.5);
  }
  100% {
    text-shadow:
      0 0 25px rgba(255, 237, 78, 1),
      0 0 50px rgba(255, 215, 0, 0.9),
      0 0 75px rgba(255, 215, 0, 0.7),
      0 0 100px rgba(255, 215, 0, 0.5);
  }
}
@keyframes rotateClover {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dance {
  0% {
    transform: translateY(0px) rotate(5deg);
  }
  100% {
    transform: translateY(-10px) rotate(-5deg);
  }
}
@keyframes shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
}

/*
 * CRITICAL OVERRIDES - Must be at end of file for maximum specificity
 * Fixes for header MASV logo spacing and footer logo height consistency
 * - 2025-12-10 - BASS LORD
 */

/*
 * CRITICAL HEADER FIX: Position logos closer to edges with more space between them
 * - Proportionate padding (5% of container width) scales with screen size
 * - No hard-coded values - spacing adapts proportionately to all screen sizes
 * - space-between pushes logos to opposite sides with maximum separation
 * - Full-width container prevents centering and left-shift issues
 * - 2025-12-10 - BASS LORD
 */
@media (max-width: 480px) {
  header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  header .header-logo-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  header .header-logo-container > a {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  header .header-logo-container > a img {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }

  header .header-partners {
    padding: 0 5% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  header .header-partners a {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  header .header-partners a img {
    height: 20px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}