/* ==========================================================================
   CHAPITO FEST 2026 - DIGITAL INVITATION & FESTIVAL EXPERIENCE STYLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --fest-dark: #05070f;
  --fest-dark-card: #0c1222;
  --fest-cyan: #00f0ff;
  --fest-blue: #0070f3;
  --fest-neon-blue: #00b4d8;
  --fest-violet: #7928ca;
  --fest-gold: #ffbe0b;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  background-color: var(--fest-dark);
  color: #f1f5f9;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #05070f;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Typography styles */
.font-festival {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
}

.font-mono-code {
  font-family: 'Space Grotesk', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #05070f;
}
::-webkit-scrollbar-thumb {
  background: #0ea5e9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(12, 18, 34, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.65), 0 0 15px rgba(0, 240, 255, 0.07);
}

.glass-panel-vip {
  background: linear-gradient(135deg, rgba(14, 23, 47, 0.88) 0%, rgba(6, 10, 23, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 180, 216, 0.25);
}

/* Glowing text and buttons */
.neon-text-blue {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.7), 0 0 20px rgba(0, 112, 243, 0.5);
}

.neon-text-gold {
  text-shadow: 0 0 8px rgba(255, 190, 11, 0.7), 0 0 20px rgba(255, 190, 11, 0.4);
}

.neon-box-glow {
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.3), inset 0 0 15px rgba(0, 240, 255, 0.15);
}

.neon-box-glow-strong {
  box-shadow: 0 0 40px rgba(0, 180, 216, 0.45), 0 0 80px rgba(14, 165, 233, 0.2);
}

/* Pulse animation for access button */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 112, 243, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.85), 0 0 60px rgba(0, 180, 216, 0.6);
    transform: scale(1.02);
  }
}

.animate-glow-pulse {
  animation: glowPulse 2.4s infinite ease-in-out;
}

/* Festival Stage Spotlights */
.spotlight-beam-left {
  position: absolute;
  top: -20%;
  left: 10%;
  width: 280px;
  height: 900px;
  background: conic-gradient(from 180deg at 50% 0%, rgba(0, 240, 255, 0.22) 0deg, rgba(0, 112, 243, 0.08) 35deg, transparent 60deg);
  transform-origin: top center;
  filter: blur(28px);
  animation: sweepLeft 9s infinite ease-in-out alternate;
  pointer-events: none;
}

.spotlight-beam-right {
  position: absolute;
  top: -20%;
  right: 10%;
  width: 280px;
  height: 900px;
  background: conic-gradient(from 180deg at 50% 0%, rgba(121, 40, 202, 0.25) 0deg, rgba(0, 240, 255, 0.12) 35deg, transparent 60deg);
  transform-origin: top center;
  filter: blur(28px);
  animation: sweepRight 11s infinite ease-in-out alternate;
  pointer-events: none;
}

@keyframes sweepLeft {
  0% { transform: rotate(-28deg); opacity: 0.5; }
  50% { opacity: 0.85; }
  100% { transform: rotate(18deg); opacity: 0.6; }
}

@keyframes sweepRight {
  0% { transform: rotate(25deg); opacity: 0.6; }
  50% { opacity: 0.9; }
  100% { transform: rotate(-22deg); opacity: 0.5; }
}

/* Equalizer Visualizer Bars */
.equalizer-bar {
  display: inline-block;
  width: 3.5px;
  background: linear-gradient(to top, #0070f3, #00f0ff);
  border-radius: 2px;
  margin: 0 1.5px;
  transition: height 0.2s ease;
}

.equalizer-playing .bar-1 { animation: eqJump 0.8s infinite ease-in-out 0.1s alternate; }
.equalizer-playing .bar-2 { animation: eqJump 1.1s infinite ease-in-out 0.3s alternate; }
.equalizer-playing .bar-3 { animation: eqJump 0.7s infinite ease-in-out 0.05s alternate; }
.equalizer-playing .bar-4 { animation: eqJump 0.95s infinite ease-in-out 0.25s alternate; }
.equalizer-playing .bar-5 { animation: eqJump 0.85s infinite ease-in-out 0.15s alternate; }

.equalizer-paused .equalizer-bar {
  height: 4px !important;
  opacity: 0.45;
}

@keyframes eqJump {
  0% { height: 4px; }
  50% { height: 18px; }
  100% { height: 8px; }
}

/* Ticket Scan Line Effect */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f0ff, #fff, #00f0ff, transparent);
  box-shadow: 0 0 12px #00f0ff;
  animation: scanTicket 3s ease-in-out infinite;
}

@keyframes scanTicket {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Hologram foil shimmer on Ticket */
.ticket-hologram {
  position: relative;
  overflow: hidden;
}

.ticket-hologram::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(0, 240, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(121, 40, 202, 0.12) 55%,
    transparent 70%
  );
  transform: rotate(25deg);
  animation: holoSheen 6s infinite linear;
  pointer-events: none;
}

@keyframes holoSheen {
  0% { transform: translateY(-70%) rotate(25deg); }
  100% { transform: translateY(70%) rotate(25deg); }
}

/* Barcode CSS */
.barcode-stripes {
  background: repeating-linear-gradient(
    90deg,
    #ffffff 0px,
    #ffffff 2px,
    transparent 2px,
    transparent 4px,
    #ffffff 4px,
    #ffffff 7px,
    transparent 7px,
    transparent 9px,
    #ffffff 9px,
    #ffffff 10px,
    transparent 10px,
    transparent 13px,
    #ffffff 13px,
    #ffffff 16px,
    transparent 16px,
    transparent 18px
  );
}

/* Floating dust particles background */
.dust-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.8) 0%, rgba(0, 112, 243, 0) 70%);
  pointer-events: none;
  animation: floatDust 12s infinite ease-in-out;
}

@keyframes floatDust {
  0% { transform: translateY(0) translateX(0); opacity: 0.2; }
  50% { transform: translateY(-70px) translateX(25px); opacity: 0.75; }
  100% { transform: translateY(-140px) translateX(-15px); opacity: 0; }
}

/* Ticket open transition */
.ticket-opening-transition {
  animation: ticketDissolve 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ticketDissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.04);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
    filter: blur(14px);
    pointer-events: none;
    visibility: hidden;
  }
}

/* Fade in up animations on scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Toast Notification */
#toast-notification {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

#toast-notification.toast-active {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#toast-notification.toast-hidden {
  transform: translateY(80px) scale(0.95);
  opacity: 0;
  pointer-events: none;
}

/* Fullscreen Video Modal Viewport Stability (Zero Shake / 100dvh Lock) */
#fullscreen-video-modal {
  height: 100vh;
  height: 100dvh;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.video-frame-container {
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 175px);
  max-width: calc((100dvh - 175px) * (9 / 16));
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.45), 0 0 80px rgba(0, 112, 243, 0.25);
}

@media (max-height: 700px) {
  .video-frame-container {
    max-height: calc(100dvh - 145px);
    max-width: calc((100dvh - 145px) * (9 / 16));
  }
}