/* Blurry edges for Lady Woo MC image */
.blurry-edges {
  -webkit-mask-image: radial-gradient(circle, white 60%, transparent 100%);
  mask-image: radial-gradient(circle, white 60%, transparent 100%);
}
/* Custom styles for the landing page */
:root {
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-800: #ffb612;
  --maroon-500: #7a132f;
  --maroon-600: #6b0f2a;
  --maroon-800: #76132e;
}

@font-face {
  font-family: 'Moontime';
  src: url('/fonts/moon-time-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inter", sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom color for Alabama A&M (maroon) */
.bg-maroon-500 {
  background-color: #7a132f;
}
.bg-maroon-600 {
  background-color: #6b0f2a;
}
.bg-maroon-800 {
  background-color: #7a132f;
}

.text-amber-500 {
  color: #f59e0b;
}
.text-amber-600 {
  color: #d97706;
}
.text-amber-800 {
  color: #ffb612;
}

.bg-amber-500 {
  background-color: #f59e0b;
}

.bg-amber-600 {
  background-color: #d97706;
}

.bg-amber-800 {
  background-color: #ffb612;
}

.bg-gray-800 {
  background-color: #404041;
}

#classic-cocktails {
  overflow: hidden;
}

.font-cocktails {
  font-family: 'Moontime', serif;
  font-size: 7rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom styles for the countdown timer */
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: var(--amber-500);
}
.countdown span {
  margin: 0 10px;
  padding: 10px;
  background-color: var(--maroon-800);
  border-radius: 5px;
}
/* Custom styles for the playlist progress bar */
.playlist-progress {
  width: 100%;
  height: 10px;
  background-color: #e5e7eb; /* Light gray */
  border-radius: 5px;
  overflow: hidden;
}
.playlist-progress .progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--amber-500);
  border-radius: 5px;
}
/* Custom styles for the playlist */
.playlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background-color: #f3f4f6; /* Light gray */
  border-radius: 10px;
}
/* Custom styles for the playlist item */
.playlist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff; /* White */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Custom styles for the playlist item title */
.playlist-item-title {
  font-weight: 600;
  color: var(--maroon-800);
}

/* Custom styles for the playlist item artist */
.playlist-item-artist {
  color: var(--amber-600);
}
/* Custom styles for the playlist item duration */
.playlist-item-duration {
  color: var(--amber-800);
}
/* Custom styles for the playlist item button */
.playlist-item-button {
  background-color: var(--amber-500);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-item-button:hover {
  background-color: var(--amber-600);
}
/* Custom styles for the playlist item button disabled state */
.playlist-item-button:disabled {
  background-color: #d1d5db; /* Gray */
  cursor: not-allowed;
}
/* Custom styles for the playlist item button active state */
.playlist-item-button:active {
  background-color: var(--amber-800);
}
/* Custom styles for the playlist item button active state */
.playlist-item-button.active {
  background-color: var(--amber-600);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Custom styles for the playlist item button loading state */
.playlist-item-button.loading {
  background-color: #d1d5db; /* Gray */
  cursor: not-allowed;
  position: relative;
}
.playlist-item-button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Custom styles for the playlist item button disabled state */
.playlist-item-button.disabled {
  background-color: #d1d5db; /* Gray */
  cursor: not-allowed;
  opacity: 0.5;
}
/* Custom styles for the playlist item button active state */
.playlist-item-button.active {
  background-color: var(--amber-600);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Animation for the playlist progress bar */
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}

.animate-progress {
  animation: progress 180s linear;
}

/* Animations */
.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Scale animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Lightbox styles */
#lightbox {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#lightbox.active {
  display: flex;
  opacity: 1;
}

/* Accordion styles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.active {
  max-height: 500px;
}

/* Tab styles */
.tab-button.active {
  background-color: #f59e0b;
  color: black;
}

.tab-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline item animation */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ticket card hover effect */
.ticket-card {
  transition: all 0.3s ease;
}

.ticket-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* DJ image spin effect on hover */
.dj-spin {
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.dj-spin:hover {
  transform: rotate(720deg);
}

/* Custom styles for Classic Cocktails event page */

.card-hover-effect {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.5s cubic-bezier(0.4,0,0.2,1);
}
.card-hover-effect:hover {
  transform: scale(1.15) rotate(-2deg);
  box-shadow: 0 10px 40px 0 rgba(0,0,0,0.7);
  filter: brightness(1.3) contrast(1.1);
  z-index: 10;
}

/* Force EventBrite link styles to apply */
    a.text-amber-500 {
      color: #f59e42 !important;
    }
    a.text-amber-500:hover,
    a.text-amber-500:focus {
      text-decoration: underline !important;
    }
    @keyframes sponsor-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
    .animate-sponsor-scroll {
      animation: sponsor-scroll 36s linear infinite;
      will-change: transform;
    }
    .sponsor-logo-bw {
      filter: grayscale(1) brightness(1.1) contrast(1.2);
      width: 420px;
      height: 180px;
      object-fit: contain;
      transition: filter 0.3s, transform 0.3s;
      display: block;
      margin: 0 auto;
      background: transparent;
    }
    .sponsor-logo-bw:hover {
      filter: grayscale(0) brightness(1.1) contrast(1.2) drop-shadow(0 0 8px #fff8);
      transform: scale(1.07);
    }
    @media (max-width: 768px) {
      .animate-sponsor-scroll > div { min-width: 180px; }
      .sponsor-logo-bw { max-width: 240px; max-height: 60px; }
    }