/* Wanderlust Theatre 81 — hand-written styles that live outside Tailwind's
   utility set (keyframe animations, texture overlays, the <dialog> reset). */

@font-face {
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #120d0b;
}

/* Subtle film-grain / vignette used behind the hero section */
.film-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18vw 4vw rgba(0, 0, 0, 0.75);
}

/* Rotating marquee quote fade */
.quote-fade {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.quote-fade.is-hidden {
  opacity: 0;
  transform: translateY(6px);
}

/* Marquee light-bulb border used around the hero title, cinema-sign style */
.marquee-border {
  position: relative;
}
.marquee-border::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 1.5rem;
  background-image: radial-gradient(circle, #d4af37 2px, transparent 2.5px);
  background-size: 22px 22px;
  opacity: 0.35;
  animation: marquee-twinkle 3s linear infinite;
}
@keyframes marquee-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.animate-bounce-soft {
  animation: bounce-soft 2s ease-in-out infinite;
}

/* Seat button states */
.seat-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.seat-btn:not(:disabled):hover {
  transform: translateY(-2px);
}
.seat-btn:not(:disabled):active {
  transform: translateY(0);
}

/* Native <dialog> reset so we can style it with Tailwind utility classes */
dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
}
dialog::backdrop {
  background: rgba(6, 4, 3, 0.72);
  backdrop-filter: blur(2px);
}

/* Skeleton loading shimmer for the Letterboxd catalog */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: skeleton-shimmer 1.6s infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* Slim gold scrollbar for a nicer feel in the catalog row on desktop */
.gold-scrollbar::-webkit-scrollbar {
  height: 8px;
}
.gold-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(212, 175, 55, 0.4);
  border-radius: 9999px;
}
.gold-scrollbar::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.04);
}