/* ═══════════════════════════════════════════════════════════
   OUTDOOR MOVIE NIGHTS — Animations
   ═══════════════════════════════════════════════════════════ */

/* ── Starfield Canvas ── */
#starfield-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Projector Beam ── */
.projector-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 80vh solid rgba(245,200,100,0.04);
  pointer-events: none;
  z-index: 1;
  filter: blur(30px);
  animation: beam-breathe 6s ease-in-out infinite;
}

.projector-beam::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 50vh solid rgba(232,0,28,0.03);
  filter: blur(20px);
}

@keyframes beam-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Hero Text Reveal ── */
@keyframes hero-line-in {
  0%   { opacity: 0; transform: translateY(60px) skewY(3deg); clip-path: inset(100% 0 0 0); }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); clip-path: inset(0% 0 0 0); }
}

.hero-line {
  display: block;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-line.animate {
  animation: hero-line-in 0.9s var(--ease-smooth) both;
}
.hero-line.animate:nth-child(1) { animation-delay: 0.05s; }
.hero-line.animate:nth-child(2) { animation-delay: 0.2s; }
.hero-line.animate:nth-child(3) { animation-delay: 0.35s; }

/* Mobile: simpler fade-up, no clip-path or skew */
@media (max-width: 768px) {
  @keyframes hero-line-in {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .hero-line.animate { animation-duration: 0.45s; animation-timing-function: ease-out; }
  .hero-line.animate:nth-child(1) { animation-delay: 0s; }
  .hero-line.animate:nth-child(2) { animation-delay: 0.1s; }
  .hero-line.animate:nth-child(3) { animation-delay: 0.2s; }
}

/* ── Floating Cards ── */
@keyframes float-a {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(0.5deg); }
  66%       { transform: translateY(-6px) rotate(-0.3deg); }
}
@keyframes float-b {
  0%, 100% { transform: translateY(-8px) rotate(-0.3deg); }
  50%       { transform: translateY(8px) rotate(0.4deg); }
}
@keyframes float-c {
  0%, 100% { transform: translateY(4px) rotate(0.2deg); }
  50%       { transform: translateY(-10px) rotate(-0.5deg); }
}

.float-a { animation: float-a 8s ease-in-out infinite; }
.float-b { animation: float-b 10s ease-in-out infinite; }
.float-c { animation: float-c 7s ease-in-out infinite; }

/* ── Counter Animation ── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-number {
  display: inline-block;
  animation: count-up 0.6s var(--ease-smooth) both;
}

/* ── Marquee ── */
.marquee-track {
  display: flex;
  gap: 20px;
  padding: 4px 2px;
}

/* ── Shimmer Loading ── */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ── Glow Pulse ── */
@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 20px rgba(232,0,28,0.3); }
  50%       { box-shadow: 0 0 60px rgba(232,0,28,0.6), 0 0 120px rgba(232,0,28,0.2); }
}

@keyframes glow-amber {
  0%, 100% { box-shadow: 0 0 20px rgba(245,166,35,0.3); }
  50%       { box-shadow: 0 0 60px rgba(245,166,35,0.6), 0 0 120px rgba(245,166,35,0.2); }
}

.glow-red   { animation: glow-red 3s ease-in-out infinite; }
.glow-amber { animation: glow-amber 3s ease-in-out infinite; }

/* ── Screen Flicker (subtle realism) ── */
@keyframes screen-flicker {
  0%, 98%, 100% { opacity: 1; }
  99% { opacity: 0.92; }
}

.screen-effect { animation: screen-flicker 8s infinite; }

/* ── Grain overlay ── */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  animation: grain-drift 0.5s steps(2) infinite;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -3%); }
  50%  { transform: translate(3%, 1%); }
  75%  { transform: translate(-1%, 4%); }
  100% { transform: translate(2%, -2%); }
}

/* ── Card Flip ── */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-lg);
}
.flip-card-back { transform: rotateY(180deg); }

/* ── Progress Steps ── */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
}

.step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.step-dot.active {
  background: var(--c-red);
  border-color: var(--c-red);
  box-shadow: 0 0 20px var(--c-red-glow);
}

.step-dot.done {
  background: rgba(34,197,94,0.2);
  border-color: var(--c-green);
  color: var(--c-green);
}

.step-line {
  flex: 1;
  height: 1.5px;
  background: var(--glass-border);
  transition: background 0.3s ease;
}

.step-line.done { background: var(--c-green); }

/* ── Countdown ── */
.countdown-unit {
  text-align: center;
  position: relative;
}

.countdown-digit {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--c-white) 0%, rgba(240,240,245,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  min-width: 2ch;
}

.countdown-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 6px;
}

/* ── Lightbox ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,4,8,0.95);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--r-md);
  box-shadow: 0 40px 120px rgba(0,0,0,0.8);
  transform: scale(0.95);
  transition: transform 0.3s var(--ease-glass);
}

.lightbox-overlay.open .lightbox-img { transform: scale(1); }

/* ── Accordion ── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-smooth);
}
.accordion-content.open { max-height: 600px; }

/* ── Tab System ── */
.tab-btn {
  padding: 10px 24px;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-muted);
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.tab-btn.active {
  background: var(--glass-bg-mid);
  border-color: var(--glass-border);
  color: var(--c-white);
  backdrop-filter: var(--glass-blur-sm);
}

.tab-btn:hover:not(.active) { color: var(--c-white); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: page-enter 0.4s var(--ease-smooth); }

/* ── Scroll Indicator ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.5; }
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: scroll-bounce 2s ease-in-out infinite;
}

/* ── Aurora Background ── */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: aurora-drift 20s ease-in-out infinite alternate;
}

.aurora-orb:nth-child(1) {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--c-red), transparent);
  top: -200px; left: -100px;
  animation-duration: 18s;
}

.aurora-orb:nth-child(2) {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--c-amber), transparent);
  top: 20%; right: -100px;
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

.aurora-orb:nth-child(3) {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(100,150,255,0.8), transparent);
  bottom: -100px; left: 30%;
  animation-duration: 25s;
}

@keyframes aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.1); }
  66%  { transform: translate(-40px, 60px) scale(0.9); }
  100% { transform: translate(80px, 20px) scale(1.05); }
}