/* Custom Style Festival Ruang Film Horor */

/* * {
  box-sizing: border-box;
  border: 1px solid red;
} */

body {
  font-family: "Inter", "Space Grotesk", sans-serif;
  background-color: #0f0f23;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Custom glassmorphism & glow effect */
.glass-card {
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 32px;
  box-shadow:
    0 20px 35px -12px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(139, 92, 246, 0.2);
  transition: all 0.3s ease;
}

.glass-card-light {
  background: rgba(24, 18, 43, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 28px;
}

.premium-glow {
  background: radial-gradient(
    circle at 30% 10%,
    rgba(109, 40, 217, 0.4),
    rgba(15, 15, 35, 0.9)
  );
}

/* Hover effect card board */
.board-card {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.3s ease;
}

.board-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 25px 40px -12px #6d28d9,
    0 0 0 1px rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
}

/* fade-up animation on scroll (Intersection Observer) */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    transform 0.9s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom scrollbar premium */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #18122b;
}

::-webkit-scrollbar-thumb {
  background: #6d28d9;
  border-radius: 20px;
}

/* custom button hover */
.btn-gradient {
  background: linear-gradient(95deg, #6d28d9 0%, #8b5cf6 100%);
  transition: all 0.25s ease;
  box-shadow: 0 8px 20px -8px #6d28d9;
}

.btn-gradient:hover {
  transform: scale(1.03);
  background: linear-gradient(95deg, #7c3aed, #a855f7);
  box-shadow: 0 12px 28px -6px #8b5cf6;
}

.nav-link {
  transition: 0.2s;
  position: relative;
}

.nav-link:hover {
  color: #c084fc;
}

/* tambahan efek glow background di hero */
.bg-glow-abstract {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(139, 92, 246, 0.3),
    transparent 70%
  );
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}

.sticky-nav {
  transition: all 0.3s;
}

/* responsive rounding touch */
@media (max-width: 768px) {
  .glass-card {
    border-radius: 28px;
  }
}

/* ======================== */
/* FOOTER */
/* ======================== */
/* Efek hover link navigasi */
.nav-footer-link {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  position: relative;
}

.nav-footer-link:hover {
  transform: translateX(6px);
}

.nav-footer-link:hover i {
  color: #c084fc;
}

/* Border left untuk heading */
.border-l-3 {
  border-left-width: 3px;
}

/* Efek glow halus pada contact item */
.contact-item {
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateX(4px);
}

/* Social icon base glass effect */
.social-icon {
  background: rgba(24, 18, 43, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Back to top button styling */
.back-to-top {
  background: rgba(24, 18, 43, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Footer fade-up animation */
.footer-section {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    transform 0.9s ease;
}

.footer-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-section .grid {
    gap: 2rem;
  }

  .back-to-top {
    width: 40px;
    height: 40px;
  }
}

/* Input email styling */
input::placeholder {
  color: rgba(156, 163, 175, 0.5);
}

input:focus {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* ======================== */
/* BLOCK EXPLORE FEST */
/* ======================== */

/* FIX CAROUSEL - ini yang paling penting */
#awardsCarouselTrack {
  display: flex;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 500ms ease-in-out;
}

.award-slide {
  width: 100%;
  flex-shrink: 0;
  min-width: 100%;
}

/* Pastikan parent tidak overflow */
.awards-carousel-section .relative.overflow-hidden {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Pastikan grid tidak overflow */
.grid {
  overflow-x: visible;
}

/* Efek fade smooth untuk slideshow */
.slideshow-img {
  transition: opacity 0.7s ease-in-out;
  will-change: opacity;
}

/* Pastikan container slideshow memiliki background yang rapi */
.slideshow-container {
  background: linear-gradient(135deg, #18122b 0%, #0f0f23 100%);
  position: relative;
}

/* Hover effect tetap terjaga */
.film-card:hover .glass-card-light {
  transform: scale(1.02);
}

/* Responsive adjustment untuk tablet dan mobile */
@media (max-width: 1024px) {
  .film-card .slideshow-container {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .film-card .slideshow-container {
    height: 260px;
  }
}

/* ======================== */
/* TIMELINE */
/* ======================== */
/* Garis timeline utama horizontal: berada di tengah card, disesuaikan dengan posisi indicator dots */
@media (min-width: 768px) {
  .timeline-line {
    top: 36px;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(109, 40, 217, 0.2) 0%,
      #8b5cf6 20%,
      #8b5cf6 80%,
      rgba(109, 40, 217, 0.2) 100%
    );
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  }

  /* setiap card wrapper memiliki posisi relatif untuk dot */
  .timeline-card-wrapper {
    position: relative;
  }

  /* dot indikator yang lebih premium dengan pulse effect */
  .timeline-card-wrapper .absolute {
    box-shadow:
      0 0 0 3px rgba(139, 92, 246, 0.3),
      0 0 0 6px rgba(109, 40, 217, 0.1);
    animation: pulse-glow 2s infinite;
  }
}

/* efek pulse pada indikator */
@keyframes pulse-glow {
  0% {
    box-shadow:
      0 0 0 0 rgba(139, 92, 246, 0.5),
      0 0 0 0 rgba(109, 40, 217, 0.2);
  }
  70% {
    box-shadow:
      0 0 0 6px rgba(139, 92, 246, 0.2),
      0 0 0 10px rgba(109, 40, 217, 0);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(139, 92, 246, 0),
      0 0 0 0 rgba(109, 40, 217, 0);
  }
}

/* Stagger animation untuk fade-up bertahap */
.stagger-1,
.stagger-2,
.stagger-3,
.stagger-4,
.stagger-5 {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fade-up.visible .stagger-1,
.fade-up.visible .stagger-2,
.fade-up.visible .stagger-3,
.fade-up.visible .stagger-4,
.fade-up.visible .stagger-5 {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.visible .stagger-1 {
  transition-delay: 0.1s;
}
.fade-up.visible .stagger-2 {
  transition-delay: 0.2s;
}
.fade-up.visible .stagger-3 {
  transition-delay: 0.3s;
}
.fade-up.visible .stagger-4 {
  transition-delay: 0.4s;
}
.fade-up.visible .stagger-5 {
  transition-delay: 0.5s;
}

/* premium glow saat hover pada card */
.glass-card-light {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.3s ease,
    background 0.2s;
}

.glass-card-light:hover {
  background: rgba(35, 25, 65, 0.75);
  border-color: rgba(139, 92, 246, 0.5);
}

/* typography tambahan */
.timeline-section .text-purple-300 {
  letter-spacing: 0.05em;
}

/* responsive padding for better mobile experience */
@media (max-width: 640px) {
  .timeline-card-wrapper .glass-card-light {
    padding: 1.25rem;
  }
}

/* ======================== */
/* Kompetisi FILM */
/* ======================== */
/* Competition card hover effects yang lebih halus */
.competition-card {
  will-change: transform;
}

.competition-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.competition-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, #8b5cf6, transparent);
  transition: width 0.3s ease;
}

.competition-card:hover .competition-btn::after {
  width: 100%;
}

/* Glass card hover efek tambahan */
.glass-card-light {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.4s ease,
    background 0.3s ease;
}

/* Efek glow untuk counter */
.counter-value {
  display: inline-block;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* Responsive adjustment untuk mobile */
@media (max-width: 640px) {
  .competition-section .glass-card {
    padding: 1.5rem;
  }

  .competition-card .glass-card-light {
    border-radius: 1rem;
  }
}

/* Hover shadow yang smooth */
.glass-card {
  transition:
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

.glass-card:hover {
  box-shadow: 0 20px 40px -20px rgba(109, 40, 217, 0.4);
}

/* ======================== */
/* MERCHANDISE */
/* ======================== */
/* Merchandise card hover effects yang seamless */
.merchandise-card {
  will-change: transform;
}

/* Glass card hover efek tambahan */
.merchandise-card .glass-card-light {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.4s ease,
    background 0.3s ease;
}

/* Harga dan icon shopping bag efek hover */
.merchandise-card:hover .fas.fa-shopping-bag {
  transform: translateX(3px);
}

/* Responsive adjustment untuk mobile */
@media (max-width: 640px) {
  .merchandise-section .glass-card {
    padding: 1.25rem;
  }

  .merchandise-card .glass-card-light {
    border-radius: 1rem;
  }
}

/* Efek glow untuk container utama */
.merchandise-section .glass-card {
  transition:
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

/* Subtle badge animation */
.merchandise-card .absolute {
  transition: all 0.3s ease;
}

.merchandise-card:hover .absolute {
  transform: translateY(-2px);
}

/* ======================== */
/* WISATA */
/* ======================== */
/* Tourism card hover effects yang seamless */
.tourism-card {
  will-change: transform;
}

/* Glass card hover efek tambahan */
.tourism-card .glass-card-light {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    box-shadow 0.4s ease,
    background 0.3s ease;
}

/* Responsive adjustment untuk mobile */
@media (max-width: 640px) {
  .tourism-section .glass-card {
    padding: 1.25rem;
  }

  .tourism-card .glass-card-light {
    border-radius: 1rem;
  }
}

/* Efek glow untuk container utama */
.tourism-section .glass-card {
  transition:
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

/* Overlay cinematic yang lebih dramatis */
.tourism-card .absolute.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.3)
  );
}

/* Aspect ratio cinematic landscape */
.tourism-card .aspect-\[4\/3\] {
  aspect-ratio: 4 / 3;
}

/* ======================== */
/* Register */
/* ======================== */
/* Tooltip styling premium */
.tooltip-text {
  z-index: 50;
  font-weight: 500;
  letter-spacing: 0.3px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(139, 92, 246, 0.3);
}

/* Efek transisi untuk tombol */
.registration-btn {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  position: relative;
  overflow: hidden;
}

/* Efek ripple saat hover (opsional) */
.registration-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease;
}

.registration-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Icon transisi yang halus */
.registration-btn i {
  transition: all 0.3s ease;
}

/* Hover effect untuk container glass-card */
.cta-registration-section .glass-card {
  transition:
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

/* Responsive adjustment untuk mobile */
@media (max-width: 768px) {
  .tooltip-text {
    white-space: nowrap;
    font-size: 10px;
    top: -45px;
  }

  .registration-btn {
    padding: 0.875rem 2rem;
  }
}

/* Efek glow pada judul saat hover section */
.cta-registration-section:hover .glass-card {
  box-shadow: 0 20px 40px -20px rgba(109, 40, 217, 0.5);
}

/* ======================== */
/* Sponsor */
/* ======================== */
.marquee-wrapper {
  position: relative;
}

.marquee-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.marquee-container::-webkit-scrollbar {
  display: none;
}

.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: fit-content;
  will-change: transform;
}

@media (min-width: 768px) {
  .marquee-track {
    gap: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .marquee-track {
    gap: 2rem;
  }
}

.sponsor-logo {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  backdrop-filter: blur(8px);
  background: rgba(190, 177, 231, 0.36);
  border: 1px solid rgba(139, 92, 246, 0.2);
  width: 150px;
  height: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  padding: 1rem;
}

.sponsor-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(109, 40, 217, 0.5);
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(35, 25, 65, 0.8);
}

.sponsor-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.sponsor-logo:hover img {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

@media (max-width: 768px) {
  .sponsor-logo {
    width: 120px !important;
    height: 80px !important;
    padding: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .sponsor-logo {
    width: 100px !important;
    height: 70px !important;
    padding: 0.5rem !important;
  }

  .marquee-track {
    gap: 1rem !important;
  }
}

/* ======================== */
/* FAQ */
/* ======================== */
/* Transition smooth untuk accordion */
.faq-answer {
  transition:
    max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.4s ease-in-out,
    padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  opacity: 1;
}

.faq-item.active .faq-icon i {
  transform: rotate(45deg);
}

.faq-item.active {
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
}

/* Hover efek pada item */
.faq-item {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Icon plus/minus smooth */
.faq-icon i {
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Fade-up animation */
.faq-section .fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    transform 0.9s ease;
}

.faq-section .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustment */
@media (max-width: 640px) {
  .faq-question span {
    font-size: 0.9rem;
  }

  .faq-icon {
    width: 32px;
    height: 32px;
  }
}

/* ======================== */
/* KATEGORI UMUM DESKRIPSI */
/* ======================== */
/* Tab styles */
.tab-btn {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.tab-btn.active {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Tab content transition */
.tab-pane {
  transition:
    opacity 0.4s ease,
    transform 0.3s ease;
}

.tab-pane:not(.active) {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.tab-pane.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Card hover effect */
.hover-card-glow {
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.hover-card-glow:hover {
  box-shadow: 0 0 25px rgba(109, 40, 217, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}

/* Button glass style */
.btn-glass {
  background: rgba(24, 18, 43, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.btn-glass:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
}

/* Fade-up animation */
.competition-detail-section .fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1),
    transform 0.9s ease;
}

.competition-detail-section .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Registration Card Hover Effects */
.registration-card {
  text-decoration: none;
}

.registration-card .glass-card-light {
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Tombol Glass untuk Unduh */
.btn-glass {
  background: rgba(24, 18, 43, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  cursor: pointer;
}

.btn-glass:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
}

/* Responsive adjustment untuk mobile */
@media (max-width: 768px) {
  .registration-card .glass-card-light {
    padding: 1.5rem;
  }

  .registration-card .w-16.h-16 {
    width: 56px;
    height: 56px;
  }

  .registration-card .text-2xl {
    font-size: 1.5rem;
  }
}

/* Animasi fade untuk tombol */
.btn-glass i,
.registration-card .fas.fa-arrow-right {
  transition: transform 0.3s ease;
}