@import url('./cards.css');
@import url('./scroll-brands.css');
@import url('./carousel.css');
@import url('./output.css');

* {
  scroll-behavior: smooth;
}

body {
  overflow: hidden auto;
}

.fadein {
  animation: fadeIn .1s ease-in-out;
  animation-timeline: view();
  animation-range: 0 50%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.zoom {
  animation: zoom .1s ease-in-out;
  animation-timeline: view();
  animation-range: 0 50%;
}

@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.squares div {
  animation: square .1s ease-in-out;
  animation-timeline: view();
  animation-range: 0 50%;
}

@keyframes square {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

#text-about p {
  line-height: 2;
}

.cards-differentials p {
  line-height: 1.7;
}

@media (max-width: 767px) {
  .carousel-home video.panelvideo {
    max-height: auto;
  }

  .carousel-home video.backvideo {
    display: none;
  }
}

@media (min-width: 768px) {
  .carousel-home video.panelvideo {
    position: relative;
    width: 100%;
    max-height: 60dvh;
    object-fit: contain;
  }

  .carousel-home video.backvideo {
    position: absolute;
    width: 100%;
    max-height: 60dvh;
    object-fit: cover;
    top: 0;
    left: 0;
    filter: blur(10px);
  }
}