/*
Theme Name: Villa Jacaranda
*/

/* base */
@import url("./base/variables.css");
@import url("./base/reset-set.css");

/* layout */
@import url("./layout/header.css");
@import url("./layout/header-default.css");
@import url("./layout/header-centered.css");
@import url("./layout/header-image.css");
@import url("./layout/afbeelding-tekst.css");
@import url("./layout/afbeelding-tekst-compact.css");
@import url("./layout/vrije-inhoud.css");
@import url("./layout/quote.css");
@import url("./layout/highlights.css");
@import url("./layout/lijst.css");
@import url("./layout/faq.css");
@import url("./layout/prijzen-verblijf.css");
@import url("./layout/centraal-info.css");
@import url("./layout/fotoslinger.css");
@import url("./layout/afbeelding-carousel.css");
@import url("./layout/testimonials.css");
@import url("./layout/contact.css");
@import url("./layout/contact-formulier.css");
@import url("./layout/boekingsformulier.css");
@import url("./layout/404.css");
@import url("./layout/footer.css");

/* Responsive */
@import url("./responsive/responsive.css");

html,
body {
  overflow-x: clip;
}

.contact-blok-card {
  box-sizing: border-box;
}

.reveal-block {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
  will-change: opacity, transform;
}

.reveal-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-block .highlight-titel::after {
  transform: scaleX(0);
}

.reveal-block.is-visible .highlight-titel::after {
  transform: scaleX(1);
  transition-delay: 500ms;
}

.reveal-block .image-illustratie-container > svg,
.reveal-block .image-illustratie-container > img {
  opacity: 0;
  transform: translateX(-8px) rotate(-4deg) scale(0.72);
  transform-origin: center;
  will-change: opacity, transform;
}

.reveal-block.is-visible .image-illustratie-container > svg,
.reveal-block.is-visible .image-illustratie-container > img {
  animation: vj-illustration-stopmotion 1.5s steps(7, end) 0.5s both;
}

@keyframes vj-illustration-stopmotion {
  0% {
    opacity: 0;
    transform: translateX(-8px) rotate(-4deg) scale(0.72);
  }

  18% {
    opacity: 1;
    transform: translateX(6px) rotate(3deg) scale(0.82);
  }

  36% {
    transform: translateX(-5px) rotate(-3deg) scale(0.9);
  }

  54% {
    transform: translateX(4px) rotate(2deg) scale(0.96);
  }

  72% {
    transform: translateX(-2px) rotate(-1deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-block {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-block .highlight-titel::after {
    transform: scaleX(1);
    transition: none;
  }

  .reveal-block .image-illustratie-container > svg,
  .reveal-block .image-illustratie-container > img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}