/* ===========================
   Menu & Form Modals
=========================== */
#contactFormContainer,
#contactFormContainer2,
#menuContainer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#contactFormContainer.visible,
#contactFormContainer2.visible,
#menuContainer.visible {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   Animations
=========================== */

/* Entrada desde arriba */
@keyframes slideInFromTop {
    0% {
        top: -8%;
    }
    100% {
        top: 2%;
    }
}

#animatedDiv {
    animation: slideInFromTop 0.7s ease-in-out forwards;
}

/* Fade + slide combinado */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#animated {
    animation: slideInFromTop 1s ease-out forwards, fadeIn 1s ease-out forwards;
}

/* ===========================
   Carousel
=========================== */

#carouselContainer,
#carouselContainer1,
#carouselContainer2,
#carouselContainer3 {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    transition: transform 1.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: url('/assets/icons/arrow-slider.svg'), auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#carouselContainer::-webkit-scrollbar,
#carouselContainer1::-webkit-scrollbar,
#carouselContainer2::-webkit-scrollbar,
#carouselContainer3::-webkit-scrollbar {
    display: none;
}

/* Bloquear scroll */
.no-scroll {
    overflow: hidden;
}


/* ===========================
   Progress Bar
=========================== */
#progressBarContainer {
    z-index: 1;
}

#progressBar {
    width: 0%;
}

/* Añadir animación suave al progress bar */
#progressBar {
  transition: width 0.4s ease; /* Añadimos transición suave al cambio de width */
}


/* ===========================
   Sticky Headers
=========================== */
#main-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    background: white;
    z-index: 9999999999999999999999999;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-header.hide {
    transform: translateY(-100px);
}

#main-header2 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-header2.hide {
    transform: translateY(100px);
    transition: transform 0.8s ease;
}

#overlay {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#modal {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* el translateY inicial está en translate-y-full en Tailwind, 
     que equivale a 100% (alto total del elemento) */
  /* Para que sea más recorrido y suave, podemos crear una clase personalizada */
}

/* Clase personalizada para desplazamiento mayor y opacidad */
/* Desde abajo 200px y opacidad 0 */
.modal-closed {
  transform: translateY(200px);
  opacity: 0;
}

/* Cuando está abierto, en posición normal y opacidad 1 */
.modal-open {
  transform: translateY(0);
  opacity: 1;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.6s;
}

html {
  scroll-behavior: smooth;
}