* {
  font-family: "Inter", sans-serif;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.active {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.hero-3d-container {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  aspect-ratio: 1;
  max-width: 550px;
  width: 60vw;
  transform: translate(-10%, -85%);
  max-width: 1200px;
}

#hero-3d {
  transition-delay: calc(0.4s + var(--menu-follow-delay));
  position: relative;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 1;
}

#hero-3d canvas {
  width: 70rem !important;
  height: 70rem !important;
}

@media (max-width: 768px) {
  #hero-3d {
    display: none;
  }

  .hero-3d-container {
    position: relative;
    transform: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 2rem;
  }
}

/* Video section initial styles */
#video-section {
  padding: 5rem 1.5rem;
  /* background-color: rgb(243 244 246); */
}

#video-container {
  max-width: 72rem;
  transition: all 0.5s ease-out;
}

#video-wrapper {
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.5s ease-out;
}

/* Shopper Video section initial styles */
#shopper-video-section {
  padding: 5rem 1.5rem;
  background: #000;
  /* background: linear-gradient(to bottom, #ffffff, #fef3c7, #ffffff); */
}

#shopper-video-container {
  max-width: 72rem;
  transition: all 0.5s ease-out;
}

#shopper-video-wrapper {
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.5s ease-out;
  position: relative;
}

#shopper-video-wrapper:hover {
  transform: scale(1.02);
}

/* Marquee animations */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.animate-marquee-right {
  animation: scroll-right 30s linear infinite;
  display: flex;
  width: fit-content;
}

.animate-marquee-left {
  animation: scroll-left 30s linear infinite;
  display: flex;
  width: fit-content;
}

.marquee-row {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.marquee-row:hover .marquee-content {
  animation-play-state: paused;
}

/* Mobile menu animations */
#mobileMenu {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#mobileMenu.hidden {
  opacity: 0;
  visibility: hidden;
}

#mobileMenu:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#mobileMenu nav li {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
}

#mobileMenu nav li:nth-child(1) {
  animation-delay: 0.1s;
}

#mobileMenu nav li:nth-child(2) {
  animation-delay: 0.2s;
}

#mobileMenu nav li:nth-child(3) {
  animation-delay: 0.3s;
}

#mobileMenu nav li:nth-child(4) {
  animation-delay: 0.4s;
}

#mobileMenu nav li:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}