/* ========== Base ========== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ========== Scrollbar hide for screenshot carousel ========== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ========== Navbar state ========== */
#navbar {
  background: transparent;
}
#navbar.scrolled {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
#navbar.scrolled .nav-text-color {
  color: #1e1b4b; /* primary-950 */
}
#navbar.scrolled .nav-link-color {
  color: #6b7280;
}
#navbar.scrolled .nav-link-color:hover {
  color: #4f46e5;
}
#navbar.scrolled .nav-icon-color {
  color: #374151;
}

/* ========== Concours tabs ========== */
.concours-tab {
  color: #6b7280;
  background: transparent;
}
.concours-tab.active {
  color: white;
  background: #4f46e5;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

/* ========== FAQ ========== */
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-content {
  max-height: 200px;
}

/* ========== Fade-up animation ========== */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--delay, 0s);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Hero animations ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}
.delay-100 {
  animation-delay: 0.1s;
  opacity: 0;
}
.delay-200 {
  animation-delay: 0.2s;
  opacity: 0;
}
.delay-300 {
  animation-delay: 0.3s;
  opacity: 0;
}

/* ========== Concours toggle chevron ========== */
.concours-toggle.expanded svg {
  transform: rotate(180deg);
}