/*
 * Adjustments of the clone. The real CSS is the original's
 * (/_nuxt/*.css + the <style> blocks that come in each page).
 *
 * Only what Vue's runtime used to make visible goes here. Everything the original
 * hides while it waits for its JS has to stay visible through CSS: if it depended
 * on clone.js, a JS failure would leave the page blank.
 */

/* --- Content hidden while it waits for the entrance observer ------------------ */
/* .fade-in[data-v-*] { opacity: 0 } wraps the content of 28 pages. Visible by
   default; clone.js brings the animation back when it can. */
.fade-in {
  opacity: 1 !important;
}

/* --- Carousels ----------------------------------------------------------- */
/* .splide { visibility: hidden } until Splide starts. */
.splide {
  visibility: visible !important;
}

.splide__list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.splide__list::-webkit-scrollbar {
  display: none;
}

/* Splide gives each slide the width of the track (1000px in the testimonials);
   with flex:auto they were 880px, the width of the content. */
.splide__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  opacity: 1 !important;
}

.splide__arrow {
  cursor: pointer;
}

/* The mobile menu is absolute with opacity:0. On the original GSAP starts it at
   display:none and clone.js opens it; without this rule it stayed invisible but on
   top of the content, swallowing taps at the top of the page. */
.navigation-mobile-wrapper {
  display: none;
}

/* Blocks the Astro pages render hidden and clone.js shows. The original CSS's
   display beats the browser's [hidden], hence the !important. */
.products-items[hidden],
.show-more-integrations > [hidden] {
  display: none !important;
}

/* --- Hero preview -------------------------------------------------------- */
/* The images stack up and only the active one carries .show. Without JS, the first. */
.preview img:first-of-type {
  visibility: visible;
}

/* --- Video --------------------------------------------------------------- */
/* The Cloudinary player is replaced by a native <video>. */
.video-container.hidden {
  visibility: visible;
}

.cld-video-player video,
.video-container video {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Entrance animation -------------------------------------------------- */
/* clone.js lowers the opacity and raises it on entering the viewport. If it does
   not run, the final state is already the visible one above. */
.clone-fade {
  opacity: 0 !important;
  transform: translateY(1.6rem);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.clone-fade.clone-fade--in {
  opacity: 1 !important;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .clone-fade,
  .clone-fade.clone-fade--in {
    opacity: 1 !important;
    transform: none;
    transition: none;
  }
}

/* The footer wordmark is lazy-loaded; until it loads it has no height, so the page
   grows when it arrives. Reserve its 1440x236 box (same final size, no shift). */
.footer-container > img[src$="/footer-atlas-logo.svg"] {
  aspect-ratio: 1440 / 236;
}