/* ==============================================================================
 * SNAPEVENT: STYLE.CSS
 * Luxury Dark Gold Aesthetic, Live Camera Filters, & Micro-Interactions
 * ============================================================================== */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #0A0A0D;
}

::-webkit-scrollbar-thumb {
  background: #272732;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Hide scrollbar utility for pills and frame selector */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Luxury Gold Gradients & Accents */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF1B0 0%, #D4AF37 50%, #AA8721 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #997F24 100%);
}

/* 1 Halaman Utuh (Zero-Scroll Mobile Layout Fit & Anti-Overlap Safe Padding) */
.camera-page-container:not(.hidden) {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  padding-bottom: 0.5rem !important;
  box-sizing: border-box !important;
  touch-action: manipulation !important;
}

#viewCamera.hidden,
.camera-page-container.hidden,
.hidden {
  display: none !important;
}

/* Lock scroll completely when in camera mode so mobile viewport fits 1 page */
body.camera-lock-scroll {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
}

body.camera-lock-scroll main {
  height: calc(100vh - 3.5rem - 4.25rem) !important;
  height: calc(100dvh - 3.5rem - 4.25rem - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100vh - 3.5rem - 4.25rem) !important;
  max-height: calc(100dvh - 3.5rem - 4.25rem - env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
}

body.camera-lock-scroll #viewCamera:not(.hidden) {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Full-bleed responsive viewfinder for mobile */
#viewfinderViewport {
  position: relative !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
}

#viewfinderViewport video#cameraVideo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
}

/* Centered Slideshow Stage */
.slideshow-centered-stage {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  padding: 1.5rem !important;
  pointer-events: none !important;
}

.slideshow-centered-stage img {
  pointer-events: auto !important;
}

/* Live Camera Filters (CSS Real-time Video Stream Preview) */
.filter-live-raw {
  filter: none;
  transition: filter 0.3s ease;
}

.filter-live-800t {
  filter: contrast(1.15) saturate(1.3) sepia(0.22) hue-rotate(-8deg);
  transition: filter 0.3s ease;
}

.filter-live-warm {
  filter: sepia(0.38) saturate(1.35) brightness(1.05) contrast(1.08);
  transition: filter 0.3s ease;
}

.filter-live-bw {
  filter: grayscale(1) contrast(1.4) brightness(0.92);
  transition: filter 0.3s ease;
}

/* Shutter Press Haptic Feel & Shutter Button Design */
.shutter-press:active {
  transform: scale(0.92);
}

.custom-shutter-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3.5px solid #d4af37;
  padding: 4.5px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.45), inset 0 0 10px rgba(212, 175, 55, 0.2);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.custom-shutter-btn:active {
  transform: scale(0.92);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.7);
}

.custom-shutter-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe684 0%, #d4af37 55%, #a87910 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, filter 0.15s ease;
}

.custom-shutter-btn:active .custom-shutter-core {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* Camera Blitz Flash Effect */
.flash-anim {
  animation: cameraFlash 0.35s ease-out forwards;
}

@keyframes cameraFlash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.95;
    background: white;
  }
  100% {
    opacity: 0;
  }
}

/* Subtle Film Grain */
.grain-overlay {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 4px 4px;
}

/* Ken Burns Slideshow Effect for Ballroom Projector */
@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }
  100% {
    transform: scale(1.03) translate(1%, 0);
  }
}

.ken-burns {
  animation: kenBurns 7s ease-in-out infinite alternate;
}

/* ==============================================================================
 * PODIUM & VOTING WINNERS SHOWCASE
 * ============================================================================== */
.podium-card-gold {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.15) 0%, rgba(20, 20, 26, 0.95) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
}

.podium-card-silver {
  background: linear-gradient(145deg, rgba(192, 192, 205, 0.12) 0%, rgba(20, 20, 26, 0.95) 100%);
  border: 1.5px solid rgba(192, 192, 205, 0.5);
  box-shadow: 0 0 18px rgba(192, 192, 205, 0.15);
}

.podium-card-bronze {
  background: linear-gradient(145deg, rgba(205, 127, 50, 0.12) 0%, rgba(20, 20, 26, 0.95) 100%);
  border: 1.5px solid rgba(205, 127, 50, 0.5);
  box-shadow: 0 0 18px rgba(205, 127, 50, 0.15);
}

.podium-card-gold, .podium-card-silver, .podium-card-bronze {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.podium-card-gold:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.4);
}

.podium-card-silver:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 25px rgba(192, 192, 205, 0.3);
}

.podium-card-bronze:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 25px rgba(205, 127, 50, 0.3);
}