@import url("/assets/actiontext-2541ac0d.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap");

/* Shop bag animation */
@keyframes bag-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.animate-bag-bounce {
  display: inline-block;
  animation: bag-bounce 0.3s ease-in-out;
}

/* Dark Landing Page Header Transitions */
.header-transparent {
  @apply bg-transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.header-scrolled {
  @apply bg-neutral-950/95 backdrop-blur-sm;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Scroll-triggered animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.animate-scroll-bounce {
  animation: scrollBounce 2s infinite;
}

/* Video hero gradient overlay */
.video-gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    rgba(10, 10, 10, 0.8) 100%
  );
}

/* Animated gradient background (placeholder for video) */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-bg {
  background: linear-gradient(
    135deg,
    #0a0a0a 0%,
    #171717 25%,
    #1f1f1f 50%,
    #171717 75%,
    #0a0a0a 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* Hotwire Combobox Full Width Styles */
@layer components {
  /* Ensure Hotwire Combobox takes full width in form containers */
  [data-controller*="hw-combobox"] {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] .hw-combobox__main__wrapper {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] input[role="combobox"] {
    @apply w-full;
  }
  
  /* Ensure dropdown listbox takes full width */
  [data-controller*="hw-combobox"] [role="listbox"] {
    @apply w-full;
    min-width: 100%;
  }
  
  /* Allow options to wrap text instead of truncating */
  [data-controller*="hw-combobox"] [role="option"],
  .hw-combobox__option {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    @apply text-sm;
  }
  
  /* Ensure the dropdown dialog is wide enough */
  [data-controller*="hw-combobox"] .hw-combobox__listbox {
    @apply w-full;
    min-width: 100%;
  }
}