/* Align card width to the legacy cards width */

:root {
  --card-width: 360px;
  --card-margin-bottom: 40px;
  --card-text-alignment: left;
  --card-padding-top: 32px;
  --card-labels-gap: 16px;
  --card-labels-margin-bottom: 16px;
  --card-logo-width: 300px;
  --card-text-margin: 20px 24px 32px 24px;
  --carousel-item-width: 200px;
  --carousel-item-height: 433px;
}

@media (min-width: 368px) {
  :root {
    --card-width: 368px;
  }
}

@media (min-width: 480px) {
  :root {
    --card-width: 480px;
  }
}

@media (min-width: 488px) {
  :root {
    --card-width: 488px;
  }
}

@media (min-width: 640px) {
  :root {
    --card-width: 600px;
    --card-margin-bottom: 60px;
    --card-text-alignment: center;
    --card-padding-top: 60px;
    --card-labels-gap: 24px;
    --card-labels-margin-bottom: 20px;
    --card-logo-width: 100%;
    --card-text-margin: 24px 40px 60px 40px;
    --carousel-item-width: 280px;
    --carousel-item-height: 607px;
  }
}

@media (min-width: 960px) {
  :root {
    --card-width: 940px;
  }
}

@media (min-width: 1200px) {
  :root {
    --card-width: 960px;
  }
}

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

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--card-margin-bottom);
  padding-top: var(--card-padding-top);
  width: var(--card-width);
  height: auto;
  background: #D7DFFF;
  -webkit-mask-box-image: url("../images/mask.svg") 80 fill stretch;
  mask-border: url("../images/mask.svg") 80 fill stretch;
  opacity: 0;
  animation: fadeInUp .5s ease-out .4s forwards;
}

.card__labels {
  display: flex;
  align-items: center;
  margin-bottom: var(--card-labels-margin-bottom);
  gap: var(--card-labels-gap);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

.card__labels a {
  color: #000 !important;
  text-decoration: underline !important;
}

.card__labels a:active { color: #0033FF !important; }
@media (hover:hover) and (pointer:fine){
  .card__labels a:hover { color: #0033FF !important; }
}

.card__logo {
  display: flex;
  justify-content: center;
}

.card__logo img {
  display: block;
  max-width: var(--card-logo-width);
  height: auto;
}

.card__text {
  max-width: 680px;
  margin: var(--card-text-margin);
  text-align: var(--card-text-alignment);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.card__carousel-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 20px;
}

.card__carousel-fade {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}

.card__carousel-fade--left {
  left: 0;
  background: linear-gradient(to right, #D7DFFF, transparent);
}

.card__carousel-fade--right {
  right: 0;
  background: linear-gradient(to right, transparent, #D7DFFF);
}

.card__carousel {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none; /* Prevent page jump on scrollLeft changes */
  cursor: grab;
  scrollbar-width: none; /* Firefox */
}

.card__carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.card__carousel.is-dragging {
  cursor: grabbing;
}

.carousel__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-right: 40px;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.carousel__item {
  flex: 0 0 auto;
  width: var(--carousel-item-width);
  height: var(--carousel-item-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 18px;
}

/* Waitlist Modal */
.waitlist-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s;
}
.waitlist-modal.is-open { opacity: 1; visibility: visible; }
.waitlist-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
}
.waitlist-modal.is-open .waitlist-modal__content { visibility: visible; }
.waitlist-modal__logo {
  width: 260px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition-delay: 0.4s;
}
.waitlist-modal.is-open .waitlist-modal__logo { opacity: 1; transform: translateY(0); }
.waitlist-modal__form {
  margin-top: 16px;
  width: 300px;
  height: 56px;
  font-weight: 700;
  border: 2.5px solid black;
  border-radius: 28px;
  display: flex;
  align-items: center;
  padding: 4px 2.5px 4px 16px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition-delay: 0.5s;
}
.waitlist-modal.is-open .waitlist-modal__form { opacity: 1; transform: translateY(0); }
.waitlist-modal__input {
  flex: 1;
  border: none;
  outline: none;
  font: 18px 'Manrope', sans-serif;
  font-weight: 500;
  min-width: 0;
}
.waitlist-modal__input::placeholder { color: #999; }
.waitlist-modal__button {
  height: 48px;
  padding: 0 24px;
  background: black;
  color: white;
  border: none;
  border-radius: 24px;
  font: 600 18px 'Manrope', sans-serif;
  cursor: pointer;
  transition: transform 0.1s ease-out;
}
.waitlist-modal__button:active { transform: scale(0.9); }
.waitlist-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waitlist-modal__close::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.1s ease-out;
}
.waitlist-modal__close:active::before { background: #EEE; }
@media (hover:hover) and (pointer:fine){
  .waitlist-modal__close:hover::before { background: #EEE; }
}
.waitlist-modal__close:active::before { transform: scale(0.9); }
.waitlist-modal__close img { width: 20px; height: 20px; position: relative; transition: transform 0.1s ease-out; }
.waitlist-modal__close:active img { transform: scale(0.9); }
.waitlist-modal.is-open .waitlist-modal__close { opacity: 1; }

/* Success state */
.waitlist-modal__success {
  position: absolute;
  font: 900 36px/42px 'Manrope', sans-serif;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  visibility: hidden;
}
.waitlist-modal.is-success .waitlist-modal__success {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0.3s;
}
.waitlist-modal__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Closing animation */
.waitlist-modal.is-closing .waitlist-modal__content,
.waitlist-modal.is-success .waitlist-modal__content {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.waitlist-modal.is-closing .waitlist-modal__close { opacity: 0; transition-delay: 0s; }