/* Loading Screen Styles */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #caff08;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out;
}

#loading-screen.fade-out {
  opacity: 0;
}

.loading-badge {
  width: 300px;
  height: 300px;
  background-color: #0f5e20;
  border: 6px solid #caff08;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 40px rgba(15, 94, 32, 0.6), 0 0 80px rgba(202, 255, 8, 0.4);
  animation: loadingSpin 10s linear infinite, pulseGlow 2s ease-in-out infinite;
}

@keyframes loadingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 40px rgba(15, 94, 32, 0.6), 0 0 80px rgba(202, 255, 8, 0.4);
  }
  50% {
    box-shadow: 0 0 60px rgba(15, 94, 32, 0.8), 0 0 120px rgba(202, 255, 8, 0.6);
  }
}

.loading-rotating-text {
  position: absolute;
  width: 100%;
  height: 100%;
}

.loading-curved-text {
  fill: #caff08;
  font-family: 'Pixelify Sans', cursive;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 6.5px;
}

.loading-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: loadingSpinReverse 10s linear infinite;
}

@keyframes loadingSpinReverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.loading-logo-glitch {
  width: 140px;
  height: auto;
  animation: loadingGlitch 6s ease-out infinite;
}

@keyframes loadingGlitch {
  0%, 100% {
    filter: none;
    transform: none;
  }
  50% {
    filter: none;
    transform: none;
  }
  52% {
    filter: brightness(1.2) hue-rotate(5deg);
    transform: translateX(-2px);
  }
  54% {
    filter: brightness(0.9) hue-rotate(-5deg);
    transform: translateX(2px) skewX(-2deg);
  }
  56% {
    filter: brightness(1.3) contrast(1.2);
    transform: translateX(-1px) skewX(1deg);
  }
  58% {
    filter: none;
    transform: none;
  }
  75% {
    filter: none;
    transform: none;
  }
  77% {
    filter: brightness(1.1) hue-rotate(-3deg);
    transform: translateX(1px);
  }
  79% {
    filter: brightness(0.95) saturate(1.2);
    transform: translateX(-1px) skewX(-1deg);
  }
  81% {
    filter: brightness(1.2) contrast(1.1);
    transform: skewX(0.5deg);
  }
  83% {
    filter: none;
    transform: none;
  }
}

/* Mobile responsive loading screen */
@media (max-width: 768px) {
  .loading-badge {
    width: 250px;
    height: 250px;
    border: 5px solid #caff08;
  }

  .loading-curved-text {
    font-size: 16px;
  }

  .loading-center-logo {
    width: 140px;
    height: 140px;
  }

  .loading-logo-glitch {
    width: 120px;
  }
}

/* Global overflow control */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Global font family */
body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent any element from causing horizontal scroll */
* {
  max-width: 100%;
}

body * {
  font-family: inherit;
}

/* All section titles in Pixelify font */
section h2 {
  font-family: 'Pixelify Sans', cursive !important;
  font-size: 3.5rem !important;
}

:root {
  /* Base colors */
  --white: #ffffff;
  --transparent: transparent;
  --black: #000000;
  
  /* Digital Jungle theme colors */
  --dj-accent: #caff08; /* Yellow-green accent color for highlights and interactive elements */
  --dj-bg-cream: #faf2d3; /* Cream background for sections */
  --dj-text-dark: #000000; /* Dark text color */
  --dj-text-light: #ffffff; /* Light text color */
  --dj-accent-dark: #e06500; /* Darker accent color */
  
  /* Legacy colors - keeping for backward compatibility */
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --indigo-300: #a5b4fc;
  --violet-200: #ddd6fe;
}

/* Custom colors */
.text-ffcb55 {
  color: var(--dj-accent);
}

/* Enhanced highlighted words */
.statement-section .text-ffcb55 {
  color: black !important;
  font-family: 'Pixelify Sans', cursive !important;
  font-size: 1.2em;
  font-weight: 900;
  letter-spacing: 0.01em;
  padding: 0 4px;
  border-radius: 0;
  margin: 0 1px;
  display: inline-block;
  background-color: rgba(250, 242, 211, 0.7); /* Semi-transparent beige background matching site color scheme */
}



.bg-ffcb55 {
  background-color: #caff08;
}

/* Section backgrounds */
.statement-section {
  background-color: #caff08; /* Bright yellow-green background */
  color: black; /* Setting text color to black for better readability on light background */
}

/* Footer logo styling */
.footer-logo {
  max-width: 280px;
  height: auto;
  margin-bottom: 1.5rem;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Custom padding override for .p-4 class */
.p-4 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

@keyframes aurora {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}

/* Hero video styling */
#hero {
  overflow: hidden;
  max-width: 100vw;
}

#hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hero title styling */
.hero-title {
  font-size: 8rem;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 2.5rem;
  text-align: center;
}

.hero-title .gradient-text {
  background: linear-gradient(to right, #caff08, #0f5e20);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-size: 7.5rem;
  font-weight: 800;
  position: relative;
}

.hero-title {
  font-size: 8rem;
  line-height: 1.2;
  text-align: center;
  font-family: 'Roboto', sans-serif !important;
  margin-top: -50px;
}

#changing-text {
  display: inline-block;
  width: 500px;
  text-align: left;
}

.changing-text {
  font-family: 'Pixelify Sans', cursive !important;
  font-size: 1.2em;
}

.hero-description {
  font-size: 1.5rem;
  line-height: 1.4;
  max-width: 42rem;
  margin: 0 auto 2.5rem auto;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 4rem;
    margin-top: 16px;  /* Reduced by 20% for tighter spacing */
    padding-top: 24px;  /* Reduced by 20% for tighter spacing */
  }

  .hero-title .gradient-text {
    font-size: 3.5rem;
  }
  
  #changing-text {
    width: auto;
    max-width: 100%;
    text-align: center;
    display: block;
  }
  
  .hero-description {
    font-size: 1.25rem;
  }
  
  /* Mobile-first layout for versatile spaces section */
  #spaces .space-content {
    order: 2;
  }
  
  #spaces .space-image {
    order: 1;
    margin-bottom: 1rem;
  }
}

.aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.aurora-effect {
  position: absolute;
  inset: -10px;
  opacity: 0.75;
  pointer-events: none;
  filter: blur(8px);
  background-image: 
    repeating-linear-gradient(100deg, var(--white) 0%, var(--white) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--white) 16%),
    repeating-linear-gradient(100deg, var(--blue-500) 10%, var(--indigo-300) 15%, var(--blue-300) 20%, var(--violet-200) 25%, var(--blue-400) 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  mask-image: radial-gradient(ellipse at 100% 0%, black 20%, var(--transparent) 80%);
}

.aurora-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(100deg, var(--white) 0%, var(--white) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--white) 16%),
    repeating-linear-gradient(100deg, var(--blue-500) 10%, var(--indigo-300) 15%, var(--blue-300) 20%, var(--violet-200) 25%, var(--blue-400) 30%);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 45s linear infinite;
}

/* Interactive Form Styling */
.form-container {
  width: 100%;
  max-width: 800px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0;
}

.slide {
  display: none;
  flex-direction: column;
  animation: fadeIn 0.5s;
}

.slide.active {
  display: flex;
}

.question {
  font-size: 1.5em;
  margin-bottom: 1em;
  color: var(--dj-text-light);
}

.options {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.option {
  padding: 10px;
  font-size: 1em;
  margin-bottom: 10px;
  border: 1px solid var(--dj-accent);
  background: var(--black);
  color: var(--dj-text-light);
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  transition: all 0.2s ease;
}

.option:hover {
  background: rgba(202, 255, 8, 0.15);
  box-shadow: inset 0 0 30px rgba(202, 255, 8, 0.25), 0 0 15px rgba(202, 255, 8, 0.2);
  border-color: #caff08;
  transition: all 0.3s ease;
}

.option.selected {
  background: var(--dj-accent);
  color: var(--black);
  border-color: var(--dj-accent);
}

#otherInputContainer,
#exactDateContainer,
#otherAvailabilityInputContainer {
  margin-bottom: 1em;
  width: 100%;
}

/* Calendar availability styling */
.day-label {
  color: var(--dj-accent);
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1.1em;
}

.loading-text {
  color: var(--dj-text-light);
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}

.no-slots {
  color: var(--dj-text-light);
  margin-bottom: 15px;
}

.form-container input[type="text"],
.form-container input[type="tel"],
.form-container input[type="email"] {
  padding: 10px;
  font-size: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--dj-accent);
  background: var(--black);
  color: var(--dj-text-light);
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
}

#otherInput,
#otherAvailabilityInput,
.flatpickr-input,
#exactDateInput {
  border: none;
  border-bottom: 1px solid var(--dj-accent);
  background: var(--black) !important;
  color: var(--dj-text-light) !important;
}

.name-fields {
  display: flex;
  gap: 10px;
  margin-bottom: 1em;
}

.name-fields input {
  flex: 1;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-buttons a {
  color: var(--dj-accent);
  text-decoration: underline;
  cursor: pointer;
  visibility: hidden;
}

.form-container button {
  padding: 10px 20px;
  font-size: 1.2em;
  background: #caff08;
  color: var(--black);
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  border: none;
  cursor: pointer;
  align-self: flex-end;
  border-radius: 0;
  transition: background-color 0.3s ease;
}

.form-container button:hover {
  background: #b8e607;
}

.form-container button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Flatpickr calendar styling */
.flatpickr-calendar {
  background: var(--black);
  border: 1px solid var(--dj-accent);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekday,
.flatpickr-day {
  color: var(--dj-accent);
}

.flatpickr-day.selected {
  background: var(--dj-accent);
  color: var(--black);
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* Logo styling */
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 90px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Header/menu styling */
header {
  background-color: black !important;
}

header nav ul li a {
  color: white !important;
  font-weight: bold !important;
}

header nav ul li a:hover {
  color: #caff08 !important;
}

header button svg {
  stroke: white !important;
}

header .book-now-btn {
  background-color: #caff08 !important;
  color: black !important;
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
  transition: background-color 0.3s ease;
}

header .book-now-btn:hover {
  background-color: #b8e607 !important;
}

/* Spinning badge animation */
@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning-badge {
  animation: slowSpin 10s linear infinite;
}

/* CTA button styling */
.book-cta-btn {
  background-color: #caff08 !important;
  color: black !important;
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.book-cta-btn:hover {
  background-color: #b8e607 !important;
  color: black !important;
  transform: scaleY(0.9) scaleX(1.05);
  box-shadow: 0 0 20px rgba(202, 255, 8, 0.8), inset 0 -2px 10px rgba(0, 0, 0, 0.5);
  filter: contrast(1.2);
}

.book-cta-btn:active {
  transform: scaleY(0.8) scaleX(1.1);
  box-shadow: 0 0 30px rgba(202, 255, 8, 1);
  filter: brightness(1.5);
}

/* Apply same hover effect to Book Now button */
.book-now-btn {
  transition: all 0.3s ease;
  position: relative;
}

.book-now-btn:hover {
  transform: scaleY(0.9) scaleX(1.05);
  filter: brightness(1.2);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
}

.book-now-btn:active {
  transform: scaleY(0.05) scaleX(1.2);
  filter: brightness(1.5);
  box-shadow: 0 0 25px rgba(99, 102, 241, 1);
}

/* Apply same hover effect to Explore Spaces button */
.explore-spaces-btn {
  transition: all 0.3s ease;
  position: relative;
}

.explore-spaces-btn:hover {
  transform: scaleY(0.9) scaleX(1.05);
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 -2px 10px rgba(255, 255, 255, 0.3);
}

.explore-spaces-btn:active {
  transform: scaleY(0.05) scaleX(1.2);
  filter: brightness(1.5);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
}

/* Reference Section with Rotating Logos */
.reference-section {
  background-color: #0f5e20;
  padding: 40px 0;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
}

.logo-carousel-container {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.logo-carousel {
  display: flex;
  align-items: center;
  animation: scrollLogos 30s linear infinite;
  width: fit-content;
  height: 100%;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  white-space: nowrap;
  min-width: 200px;
}

.logo-img {
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Make PG&E and Twilio logos larger */
.logo-item:nth-child(9n+7) .logo-img, /* PG&E */
.logo-item:nth-child(9n+8) .logo-img, /* Twilio */
.logo-item:nth-child(9n+16) .logo-img, /* PG&E duplicate */
.logo-item:nth-child(9n+17) .logo-img { /* Twilio duplicate */
  height: 70px;
  max-width: 220px;
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    position: relative;
    width: 100%;
  }

  /* Increase header logo size by 25% on mobile */
  header .logo-img {
    height: 112.5px !important;
    max-width: 160px !important;
  }

  .logo-item {
    padding: 0 40px;
    min-width: 150px;
  }

  .logo-img {
    height: 35px;
    max-width: 120px;
  }

  /* Make PG&E and Twilio logos larger on mobile too */
  .logo-item:nth-child(9n+7) .logo-img,
  .logo-item:nth-child(9n+8) .logo-img,
  .logo-item:nth-child(9n+16) .logo-img,
  .logo-item:nth-child(9n+17) .logo-img {
    height: 45px;
    max-width: 150px;
  }

  .reference-section {
    padding: 30px 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  .logo-carousel-container {
    height: 60px;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
  }
}

/* Versatile Spaces section styling */
#spaces {
  background-color: black;
  color: white;
}

/* Space titles with Pixelify font and caff08 color */
#spaces h3 {
  font-family: 'Pixelify Sans', cursive !important;
  color: #caff08 !important;
}

/* Gradient border for space, equipment, and gallery images */
.space-image {
  position: relative;
  display: inline-block;
}

.space-image img,
.gallery-item img {
  border: 10px solid;
  border-image: linear-gradient(135deg, #caff08 0%, #caff08 25%, #0f5e20 75%, #0f5e20 100%) 1;
  border-image-slice: 1;
  display: block;
}

.equipment-card img {
  border: 10px solid;
  border-image: linear-gradient(135deg, #9bc706 0%, #9bc706 25%, #0f5e20 75%, #0f5e20 100%) 1;
  border-image-slice: 1;
  display: block;
}

#spaces h2 {
  color: white;
  position: relative;
  display: inline-block;
}

#spaces h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #caff08;
}

#spaces h2 {
  margin-bottom: 50px;
}

/* Equipment section divider */
#equipment h2 {
  color: black;
  position: relative;
  display: inline-block;
  margin-bottom: 50px;
}

#equipment h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #caff08;
}

#spaces h3 {
  color: var(--dj-accent);
  font-weight: bold;
}

#spaces p {
  color: white;
}

#spaces .text-gray-600 {
  color: #cccccc !important;
}

#spaces .text-gray-800 {
  color: white !important;
}

.text-ffcb55 {
  color: var(--dj-accent) !important;
}

/* Technology section styling */
#tech {
  overflow-x: hidden; /* Prevent horizontal scrolling on the section */
}

/* Equipment showcase styling */
.equipment-horizontal-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  gap: 16px;
  padding: 20px 0;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

.carousel-item {
  position: relative;
  transition: all 0.5s ease;
}

.equipment-card {
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  height: 100%;
  border-radius: 0;
}

.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

/* Positioning the title and description */
.equipment-card h4 {
  transition: transform 0.3s ease;
  margin-bottom: 0;
  /* Position with some space above the tags */
  transform: translateY(50px);
  position: relative;
  z-index: 3;
}

.equipment-card:hover h4 {
  /* Raised position on hover */
  transform: translateY(0);
}

.equipment-description {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.5rem;
  font-weight: normal;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.equipment-card:hover .equipment-description {
  opacity: 1;
  transform: translateY(0);
}

/* Adjusting the specs position */
.equipment-specs {
  position: relative;
  z-index: 1;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.equipment-card:hover .equipment-specs {
  opacity: 1;
}

/* Background color for equipment section */
.bg-faf2d3 {
  background-color: var(--dj-bg-cream);
}

/* Testimonials section styling */
#testimonials {
  background-color: var(--dj-bg-cream);
}

/* Lightbox transition effects */
#image-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
  transition: opacity 0.4s, visibility 0.4s;
}

#image-modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#image-modal .relative.w-full {
  transform: scale(0.92);
  transition: transform 0.4s;
}

#image-modal.show .relative.w-full {
  transform: scale(1);
}

#image-modal.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


#testimonials h2 {
  color: black;
  position: relative;
  display: inline-block;
}

#testimonials h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: black;
}

#testimonials h2 {
  margin-bottom: 50px;
}

#testimonials .bg-white {
  transition: all 0.3s ease;
  background-color: black !important;
  color: white !important;
}

#testimonials .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#testimonials .bg-white p {
  color: #e2e2e2 !important;
}

/* Fixed height for testimonial paragraphs */
#testimonials .bg-white p.italic {
  min-height: 100px;
  display: flex;
  align-items: center;
  line-height: 1.6;
}

#testimonials .bg-white .text-gray-700 {
  color: #e2e2e2 !important;
}

#testimonials .bg-white .text-gray-600 {
  color: #cccccc !important;
}

#testimonials .bg-white h4 {
  color: white !important;
}

#testimonials h4 {
  color: black;
}

#testimonials .company-logo {
  background-color: #222;
  border: 1px solid #333;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#testimonials .company-logo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #caff08;
}

#testimonials .company-logo span {
  letter-spacing: 0.5px;
  font-weight: 800;
  color: var(--dj-accent);
}

#tech {
  background-color: #caff08;
}

/* Equipment titles with Pixelify font and white color */
.equipment-card h4 {
  font-family: 'Pixelify Sans', cursive !important;
  color: white !important;
}

/* Equipment descriptions in yellow-green */
.equipment-description {
  color: #caff08 !important;
}

/* Equipment spec tags styling */
.equipment-specs span {
  background-color: transparent !important;
  border: 1px solid #caff08 !important;
  border-radius: 0 !important;
  color: white !important;
  padding: 0.25rem 0.5rem !important;
}

/* Gallery section styling */
#gallery {
  background-color: black;
  color: white;
}

#gallery h2 {
  color: white;
  position: relative;
  display: inline-block;
}

#gallery h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #caff08;
}

#gallery h2 {
  margin-bottom: 50px;
}

#gallery .text-gray-600 {
  color: #cccccc !important;
}

#gallery a.text-indigo-600 {
  color: var(--dj-accent) !important;
}

#gallery a.hover\:text-indigo-800:hover {
  color: white !important;
}

.tech-icon-circle {
  background-color: #caff08;
  transition: all 0.3s ease;
}

.text-center:hover .tech-icon-circle {
  box-shadow: 0 0 15px rgba(255, 203, 85, 0.7);
  transform: scale(1.05);
}

/* Booking CTA section styling */
#book {
  background-color: var(--dj-bg-cream);
  color: black;
}

#book h2 {
  color: black;
  font-weight: bold;
}

#book .text-gray-600 {
  color: #333333 !important;
}

#book .bg-indigo-600 {
  background-color: black !important;
  color: var(--dj-accent) !important;
  font-weight: bold;
}

#book .hover\:bg-indigo-700:hover {
  background-color: #333 !important;
}

#tech h2 {
  color: black;
  position: relative;
  display: inline-block;
}

/* Contact section styling */
#contact {
  background-color: black;
  color: white;
}

#contact h2 {
  color: white;
  position: relative;
  display: inline-block;
}

#contact h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #caff08;
}

#contact h2 {
  margin-bottom: 50px;
}

#contact h3 {
  color: var(--dj-accent);
}

#contact .text-gray-600 {
  color: #cccccc !important;
}

#contact .text-gray-700 {
  color: white !important;
}

#contact .text-indigo-600 {
  color: var(--dj-accent) !important;
}

#contact input, #contact textarea {
  background-color: #222;
  border-color: #444;
  color: white;
}

#contact input:focus, #contact textarea:focus {
  border-color: var(--dj-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 203, 85, 0.2);
}

#contact .bg-indigo-600 {
  background-color: var(--dj-accent) !important;
  color: black !important;
  font-weight: bold;
}

#contact .hover\:bg-indigo-700:hover {
  background-color: white !important;
  color: black !important;
}

#tech h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: black;
}

#tech h2 {
  margin-bottom: 50px;
}

/* Footer styling */
footer {
  background-color: black !important;
  color: white !important;
}

/* Footer section titles with Pixelify font and caff08 color */
footer h3 {
  font-family: 'Pixelify Sans', cursive !important;
  color: #caff08 !important;
  font-size: 1.5em !important;
}

footer .text-gray-400 {
  color: #cccccc !important;
}

footer a.text-gray-400:hover {
  color: var(--dj-accent) !important;
}

footer .border-gray-800 {
  border-color: #333 !important;
}

footer input {
  background-color: #222 !important;
  border-color: #333 !important;
  color: white !important;
}

footer input:focus {
  border-color: var(--dj-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 203, 85, 0.2) !important;
}

footer button.bg-indigo-600 {
  background-color: var(--dj-accent) !important;
  color: black !important;
  font-weight: bold !important;
  transition: all 0.3s ease;
}

footer button.hover\:bg-indigo-700:hover {
  background-color: #b8e607 !important;
  color: black !important;
}

/* ============================================= */
/*              New Lightbox Styles              */
/* ============================================= */
#new-lightbox.is-visible {
  opacity: 1;
}

/* Global button styles with Pixelify Sans */
button,
a[class*="btn"],
input[type="button"],
input[type="submit"],
.button {
  font-family: 'Pixelify Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2em !important;
}

/* Lightbox Container Border */
#new-lightbox .bg-neutral-900 {
  border: 4px solid #caff08 !important;
}

/* Lightbox Navigation Dots */
.lightbox-dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 4px;
  background-color: #0f5e20; /* dark green */
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.lightbox-dot:hover {
  background-color: #1a7d34; /* lighter green on hover */
}

.lightbox-dot.active {
  background-color: #caff08; /* yellow-green when active */
}

/* Lightbox Navigation Arrows */
#lightbox-prev svg,
#lightbox-next svg {
  color: #0f5e20 !important;
}

#lightbox-prev,
#lightbox-next {
  background-color: rgba(202, 255, 8, 0.9) !important;
}

#lightbox-prev:hover,
#lightbox-next:hover {
  background-color: #caff08 !important;
}

/* ============================================= */
/*           TV Glitch Animation Effects         */
/* ============================================= */

/* TV Glitch Title Animation - Applied to span inside h2 to avoid conflict with dividers */
.tv-glitch-title {
  position: relative;
  display: inline-block;
  animation: tvGlitch 6s ease-out infinite;
  animation-delay: 0.5s;
}


/* Create pseudo-elements for glitch layers on span, not h2 */
span.tv-glitch-title::before,
span.tv-glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

span.tv-glitch-title::before {
  animation: glitchTop 6s ease-out infinite;
  animation-delay: 0.5s;
  color: #caff08;
  z-index: -1;
}

span.tv-glitch-title::after {
  animation: glitchBottom 6s ease-out infinite;
  animation-delay: 0.5s;
  color: #0f5e20;
  z-index: -2;
}


/* Hero Glitch Animation - only moves text, always visible */
.changing-text.hero-glitch {
  position: relative;
  display: inline-block;
  animation: heroVisibleGlitch 4s ease-in-out infinite;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(to right, #caff08, #0f5e20);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glitch layers for hero text */
.changing-text.hero-glitch::before,
.changing-text.hero-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff6b00, #ff0033);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.changing-text.hero-glitch::before {
  animation: heroGlitchLayer1 4s ease-in-out infinite;
}

.changing-text.hero-glitch::after {
  animation: heroGlitchLayer2 4s ease-in-out infinite;
  background: linear-gradient(to right, #00ff00, #0099ff);
}

@keyframes heroGlitchLayer1 {
  0%, 40%, 50%, 70%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  42%, 44%, 46% {
    opacity: 0.3;
    transform: translateX(1px);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  }
  72%, 74% {
    opacity: 0.3;
    transform: translateX(-1px);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  }
}

@keyframes heroGlitchLayer2 {
  0%, 40%, 50%, 70%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  42%, 44%, 46% {
    opacity: 0.3;
    transform: translateX(-1px);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  }
  72%, 74% {
    opacity: 0.3;
    transform: translateX(1px);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  }
}

@keyframes heroVisibleGlitch {
  0%, 100% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
  5% {
    transform: translateX(-1px) translateY(0) skewX(0.2deg);
    opacity: 1;
    filter: hue-rotate(2deg);
  }
  10% {
    transform: translateX(1px) translateY(0) skewX(-0.2deg);
    opacity: 1;
    filter: hue-rotate(-2deg);
  }
  15% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
  40% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
  42% {
    transform: translateX(1px) translateY(0) skewX(0.3deg);
    opacity: 1;
    filter: brightness(1.05) contrast(1.02);
  }
  44% {
    transform: translateX(-1px) translateY(0) skewX(-0.3deg);
    opacity: 1;
    filter: brightness(0.98) saturate(1.05);
  }
  46% {
    transform: translateX(0.5px) translateY(0) skewX(0.1deg);
    opacity: 1;
    filter: hue-rotate(3deg);
  }
  48% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
  70% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
  72% {
    transform: translateX(-1px) translateY(0) skewX(-0.2deg);
    opacity: 1;
    filter: brightness(1.02) hue-rotate(-3deg);
  }
  74% {
    transform: translateX(1px) translateY(0) skewX(0.2deg);
    opacity: 1;
    filter: brightness(0.98) saturate(1.05);
  }
  76% {
    transform: translateX(0) translateY(0) skewX(0deg);
    opacity: 1;
    filter: none;
  }
}

/* Main TV Glitch Animation - loops every 6 seconds */
@keyframes tvGlitch {
  0%, 100% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: none;
    filter: none;
    transform: none;
  }
  /* Pause in Pixelify Sans state */
  50% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: none;
    filter: none;
    transform: none;
  }
  /* Start glitch to Roboto */
  52% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: 2px 0 #caff08, -2px 0 #0f5e20;
    filter: blur(0.5px);
  }
  54% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
    transform: skewX(-3deg);
  }
  56% {
    font-family: 'Roboto', sans-serif;
    text-shadow: 3px 0 #ff0000, -3px 0 #00ff00;
    transform: skewX(3deg);
    filter: contrast(2);
  }
  58% {
    font-family: 'Roboto', sans-serif;
    text-shadow: none;
    transform: skewX(0deg);
    filter: none;
  }
  /* Pause in Roboto state */
  75% {
    font-family: 'Roboto', sans-serif;
    text-shadow: none;
    filter: none;
  }
  /* Glitch back to Pixelify Sans */
  77% {
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
    filter: blur(0.5px);
  }
  79% {
    font-family: 'Roboto', sans-serif;
    text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
    transform: skewX(-5deg);
  }
  81% {
    text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
    transform: skewX(5deg);
    filter: blur(0);
  }
  83% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: 3px 0 #caff08, -3px 0 #0f5e20;
    filter: contrast(2);
  }
  85% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: 2px 0 #caff08;
    transform: translateX(2px);
  }
  87% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: -2px 0 #0f5e20;
    transform: translateX(-2px);
  }
  89% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: 1px 0 #caff08, -1px 0 #0f5e20;
    filter: brightness(1.5);
  }
  91% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: none;
    transform: translateX(0);
    filter: brightness(1);
  }
  93% {
    font-family: 'Pixelify Sans', cursive;
    text-shadow: none;
    transform: none;
    filter: none;
  }
}

/* Top Glitch Layer - loops with main animation */
@keyframes glitchTop {
  0%, 50%, 60%, 75%, 93%, 100% {
    opacity: 0;
  }
  52% {
    opacity: 0.7;
    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
    transform: translateX(-3px);
  }
  54% {
    opacity: 0.7;
    clip-path: polygon(0 25%, 100% 25%, 100% 50%, 0 50%);
    transform: translateX(3px);
  }
  56% {
    opacity: 0.7;
    clip-path: polygon(0 50%, 100% 50%, 100% 75%, 0 75%);
    transform: translateX(-2px);
  }
  77% {
    opacity: 0.7;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    transform: translateX(2px);
  }
  79% {
    opacity: 0.7;
    clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);
    transform: translateX(-3px);
  }
  81% {
    opacity: 0.7;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translateX(2px);
  }
}

/* Bottom Glitch Layer - loops with main animation */
@keyframes glitchBottom {
  0%, 50%, 60%, 75%, 93%, 100% {
    opacity: 0;
  }
  52% {
    opacity: 0.7;
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    transform: translateX(3px);
  }
  54% {
    opacity: 0.7;
    clip-path: polygon(0 50%, 100% 50%, 100% 75%, 0 75%);
    transform: translateX(-3px);
  }
  56% {
    opacity: 0.7;
    clip-path: polygon(0 25%, 100% 25%, 100% 50%, 0 50%);
    transform: translateX(2px);
  }
  77% {
    opacity: 0.7;
    clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
    transform: translateX(-2px);
  }
  79% {
    opacity: 0.7;
    clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
    transform: translateX(3px);
  }
  81% {
    opacity: 0.7;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    transform: translateX(-2px);
  }
}

/* Logo Glitch Animation */
.logo-glitch-wrapper {
  position: relative;
  display: inline-block;
}

.logo-glitch {
  animation: logoGlitch 8s ease-in-out infinite;
}

.logo-glitch-wrapper::before,
.logo-glitch-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/logo-white.svg') no-repeat center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

.logo-glitch-wrapper::before {
  animation: logoGlitchTop 8s ease-in-out infinite;
  filter: sepia(1) saturate(5) hue-rotate(15deg) brightness(1.5);
  mix-blend-mode: screen;
}

.logo-glitch-wrapper::after {
  animation: logoGlitchBottom 8s ease-in-out infinite;
  filter: sepia(1) saturate(8) hue-rotate(-15deg) brightness(1.2);
  mix-blend-mode: color-dodge;
}

/* Bottom Logo Section - Large Glitch Animation */
.bottom-logo-glitch-wrapper {
  position: relative;
  display: inline-block;
  width: 360px;
  height: auto;
}

.bottom-logo-glitch {
  width: 360px;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  animation: logoGlitch 8s ease-in-out infinite;
}

.bottom-logo-glitch-wrapper::before,
.bottom-logo-glitch-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 100%;
  background-image: url('img/logo-white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 360px auto;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.bottom-logo-glitch-wrapper::before {
  animation: logoGlitchTop 8s ease-in-out infinite;
  filter: sepia(1) saturate(5) hue-rotate(15deg) brightness(1.5);
  mix-blend-mode: screen;
}

.bottom-logo-glitch-wrapper::after {
  animation: logoGlitchBottom 8s ease-in-out infinite;
  filter: sepia(1) saturate(8) hue-rotate(-15deg) brightness(1.2);
  mix-blend-mode: color-dodge;
}

/* Footer Logo Glitch Animation - using img elements */
.footer-logo-glitch-container {
  position: relative;
  display: inline-block;
  max-width: 280px;
}

.footer-logo {
  position: relative;
  z-index: 2;
  display: block;
}

.footer-logo-glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 280px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.footer-logo-glitch-layer-1 {
  animation: footerGlitchLayer1 8s ease-in-out infinite;
  filter: brightness(2) sepia(1) saturate(5) hue-rotate(15deg);
}

.footer-logo-glitch-layer-2 {
  animation: footerGlitchLayer2 8s ease-in-out infinite;
  filter: brightness(1.5) sepia(1) saturate(8) hue-rotate(-15deg);
}

@keyframes footerGlitchLayer1 {
  0%, 45%, 55%, 70%, 90%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  47% {
    opacity: 0.6;
    transform: translateX(3px) translateY(-1px);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  }
  49% {
    opacity: 0.5;
    transform: translateX(-2px);
    clip-path: polygon(0 25%, 100% 25%, 100% 65%, 0 65%);
  }
  51% {
    opacity: 0;
  }
  72% {
    opacity: 0.4;
    transform: translateX(-2px) translateY(1px);
    clip-path: polygon(0 15%, 100% 15%, 100% 55%, 0 55%);
  }
  74% {
    opacity: 0.5;
    transform: translateX(2px);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  }
  76% {
    opacity: 0;
  }
}

@keyframes footerGlitchLayer2 {
  0%, 45%, 55%, 70%, 90%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  47% {
    opacity: 0.5;
    transform: translateX(-2px) translateY(1px);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  }
  49% {
    opacity: 0.6;
    transform: translateX(3px);
    clip-path: polygon(0 35%, 100% 35%, 100% 75%, 0 75%);
  }
  51% {
    opacity: 0;
  }
  72% {
    opacity: 0.5;
    transform: translateX(3px) translateY(-1px);
    clip-path: polygon(0 45%, 100% 45%, 100% 95%, 0 95%);
  }
  74% {
    opacity: 0.4;
    transform: translateX(-3px);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  }
  76% {
    opacity: 0;
  }
}

@keyframes logoGlitch {
  0%, 45%, 55%, 70%, 90%, 100% {
    transform: none;
    filter: none;
    opacity: 1;
  }
  47% {
    transform: translateX(-2px) scaleX(1.01);
    filter: brightness(1.1) contrast(1.2);
  }
  49% {
    transform: translateX(2px) scaleY(0.99);
    filter: brightness(0.9) contrast(1.1);
  }
  51% {
    transform: translateX(-1px);
    filter: brightness(1.05);
  }
  72% {
    transform: translateX(1px) scaleX(0.99);
    filter: brightness(1.08) saturate(1.2);
  }
  74% {
    transform: translateX(-2px);
    filter: brightness(0.95);
  }
}

@keyframes logoGlitchTop {
  0%, 45%, 55%, 70%, 90%, 100% {
    opacity: 0;
    transform: translateX(0);
    filter: sepia(1) saturate(5) hue-rotate(15deg) brightness(1.5);
  }
  47% {
    opacity: 0.6;
    transform: translateX(3px);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    filter: sepia(1) saturate(8) hue-rotate(10deg) brightness(1.8);
  }
  49% {
    opacity: 0.5;
    transform: translateX(-3px);
    clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
    filter: sepia(1) saturate(6) hue-rotate(25deg) brightness(1.6);
  }
  51% {
    opacity: 0;
  }
  72% {
    opacity: 0.5;
    transform: translateX(-2px);
    clip-path: polygon(0 10%, 100% 10%, 100% 50%, 0 50%);
    filter: sepia(1) saturate(7) hue-rotate(5deg) brightness(1.7);
  }
  74% {
    opacity: 0.4;
    transform: translateX(2px);
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    filter: sepia(1) saturate(9) hue-rotate(20deg) brightness(1.5);
  }
  76% {
    opacity: 0;
  }
}

@keyframes logoGlitchBottom {
  0%, 45%, 55%, 70%, 90%, 100% {
    opacity: 0;
    transform: translateX(0);
    filter: sepia(1) saturate(8) hue-rotate(-15deg) brightness(1.2);
  }
  47% {
    opacity: 0.5;
    transform: translateX(-2px);
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    filter: sepia(1) saturate(10) hue-rotate(-20deg) brightness(1.4);
  }
  49% {
    opacity: 0.6;
    transform: translateX(2px);
    clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);
    filter: sepia(1) saturate(6) hue-rotate(-5deg) brightness(1.3);
  }
  51% {
    opacity: 0;
  }
  72% {
    opacity: 0.5;
    transform: translateX(3px);
    clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%);
    filter: sepia(1) saturate(9) hue-rotate(-25deg) brightness(1.5);
  }
  74% {
    opacity: 0.6;
    transform: translateX(-3px);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    filter: sepia(1) saturate(7) hue-rotate(-10deg) brightness(1.4);
  }
  76% {
    opacity: 0;
  }
}

/* Static Noise Background Effect */
@keyframes staticNoise {
  0%, 100% {
    background-image:
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 2px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 2px
      );
  }
  50% {
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(255,255,255,0.03) 1px,
        rgba(255,255,255,0.03) 2px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 1px,
        rgba(255,255,255,0.03) 1px,
        rgba(255,255,255,0.03) 2px
      );
  }
}

/* Apply static noise to section during animation */
.tv-glitch-container {
  position: relative;
}

.tv-glitch-container::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: transparent;
  animation: staticNoise 0.1s infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.tv-glitch-title.animating ~ .tv-glitch-container::before {
  opacity: 0.5;
}

/* Stagger animation delays for each section title */
#spaces .tv-glitch-title { animation-delay: 0.5s; }
#equipment .tv-glitch-title { animation-delay: 1.2s; }
#gallery .tv-glitch-title { animation-delay: 1.9s; }
#book .tv-glitch-title { animation-delay: 2.6s; }
#contact .tv-glitch-title { animation-delay: 3.3s; }
#testimonials .tv-glitch-title { animation-delay: 4s; }

/* Special delays for Meet, Learn, Build words */
.tv-glitch-title[data-text="Meet"] {
  animation-delay: 0.3s !important;
  display: inline-block;
}
.tv-glitch-title[data-text="Learn"] {
  animation-delay: 0.8s !important;
  display: inline-block;
}
.tv-glitch-title[data-text="Build"] {
  animation-delay: 1.3s !important;
  display: inline-block;
}

/* Update pseudo-element delays to match - target span elements */
#spaces span.tv-glitch-title::before,
#spaces span.tv-glitch-title::after { animation-delay: 0.5s; }
#equipment span.tv-glitch-title::before,
#equipment span.tv-glitch-title::after { animation-delay: 1.2s; }
#gallery span.tv-glitch-title::before,
#gallery span.tv-glitch-title::after { animation-delay: 1.9s; }
#book span.tv-glitch-title::before,
#book span.tv-glitch-title::after { animation-delay: 2.6s; }
#contact span.tv-glitch-title::before,
#contact span.tv-glitch-title::after { animation-delay: 3.3s; }
#testimonials span.tv-glitch-title::before,
#testimonials span.tv-glitch-title::after { animation-delay: 4s; }

/* Special pseudo-element delays for Meet, Learn, Build */
span.tv-glitch-title[data-text="Meet"]::before,
span.tv-glitch-title[data-text="Meet"]::after { animation-delay: 0.3s !important; }
span.tv-glitch-title[data-text="Learn"]::before,
span.tv-glitch-title[data-text="Learn"]::after { animation-delay: 0.8s !important; }
span.tv-glitch-title[data-text="Build"]::before,
span.tv-glitch-title[data-text="Build"]::after { animation-delay: 1.3s !important; }

/* ============================================= */
/*           Moscone Center Badge                */
/* ============================================= */

/* Container positioning */
.moscone-badge-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 25;
}

/* Mobile: Different style and centered position */
@media (max-width: 1023px) {
  .moscone-badge-container {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
    width: auto;
    max-width: 100%;
    overflow: hidden;
  }

  .moscone-badge {
    width: 150px !important;
    height: 150px !important;
    border: 3px solid #caff08 !important;
    background-color: #0f5e20 !important;
  }

  .rotating-text {
    width: 150px !important;
    height: 150px !important;
  }

  .curved-text {
    font-size: 20px !important;
    letter-spacing: 3px !important;
    fill: #caff08 !important;
  }

  .moscone-center-text {
    top: 50% !important;
    left: 50% !important;
  }

  .moscone-line1, .moscone-line2 {
    font-size: 16px !important;
    color: #caff08 !important;
  }
}

/* The badge itself - increased by 15% (242px from 210px) */
.moscone-badge {
  width: 242px;
  height: 242px;
  background-color: #0f5e20;
  border: 5px solid #caff08;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 25px rgba(202, 255, 8, 0.4);
  animation: slowSpin 10s linear infinite;
}

/* Mobile size adjustment - increased by 15% (193px from 168px) */
@media (max-width: 1023px) {
  .moscone-badge {
    width: 193px;
    height: 193px;
    border: 4px solid #caff08;
  }
}

/* Rotating SVG text - spins with badge */
.moscone-badge .rotating-text {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Curved text styling - adjusted for longer text */
.curved-text {
  fill: #caff08;
  font-family: 'Pixelify Sans', cursive;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5.2px;
}

/* Center text container - stays fixed */
.moscone-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  animation: slowSpinReverse 10s linear infinite; /* Counter-rotate to stay fixed */
}

/* MOSCONE text - increased by 15% (29px from 25px) */
.moscone-line1 {
  font-family: 'Roboto', sans-serif;
  font-size: 29px;
  font-weight: 700;
  color: #caff08;
  display: block;
}

/* CENTER text - increased by 15% (29px from 25px) */
.moscone-line2 {
  font-family: 'Roboto', sans-serif;
  font-size: 29px;
  font-weight: 700;
  color: #caff08;
  display: block;
}

/* Mobile font size adjustment - adjusted for longer text */
@media (max-width: 1023px) {
  .curved-text {
    font-size: 18px;
    letter-spacing: 5.2px;
  }

  .moscone-line1,
  .moscone-line2 {
    font-size: 24px;
  }
}

/* Reverse spin animation to keep text fixed */
@keyframes slowSpinReverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Small screens - increased by 15% (161px from 140px) */
@media (max-width: 480px) {
  .moscone-badge {
    width: 161px;
    height: 161px;
    border: 3px solid #caff08;
  }

  .moscone-line1,
  .moscone-line2 {
    font-size: 21px;
  }

  .curved-text {
    font-size: 16px;
    letter-spacing: 5.2px;
  }
}