@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap');

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background: linear-gradient(to right, #0a0a0a, #111 50%, #000);
  color: #00abf0;
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
header {
  width: 100%;
  text-align: center;
  padding: 0 20px;
}
header p {
  color: white;
  padding-top: 50px;
}
.logo-thrive {
  filter: invert();
  max-width: 200px;
}
.external {
  overflow: hidden;
  height: 100vh;
}

/* scroll info */
.scroll-info {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
}
.icon img {
  width: 50px;
  padding-right: 10px;
}

/* ---------- DESKTOP: scroll vertical simulează orizontal ---------- */
.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
  transform: rotate(-90deg) translate3d(0, -100vh, 0);
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vw;
  perspective: 1px;
  transform-style: preserve-3d;
  padding-bottom: 10rem;
}
.img-wrapper {
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  transform-origin: center;
  transition: 1s;
}
.img-wrapper:hover {
  min-height: 65vh;
}

/* efecte parallax */
.slower {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateY(-10vh);
}
.slower1 {
  transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateY(8vh);
}
.slower2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateY(2vh);
}
.slower-down {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateY(16vh);
}
.faster {
  transform: rotate(90deg) translateZ(.15px) scale(0.8) translateY(14vh);
}
.faster1 {
  transform: rotate(90deg) translateZ(.05px) scale(0.8) translateY(10vh);
}
.fastest {
  transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}
.vertical {
  transform: rotate(90deg) translateZ(-.15px) scale(1.15);
}
.last {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}

.img-wrapper a {
  overflow: hidden;
  display: block;
  padding: 1vh;
  background: #efecdb;
  box-shadow: 0 10px 50px #5f2f1182;
}
.img-wrapper img {
  max-width: 45vh;
  max-height: 50vh;
  transition: 0.5s;
  vertical-align: top;
  filter: saturate(40%) hue-rotate(5deg);
}
a:hover img {
  filter: none;
}

/* ----------- MOBILE: scroll orizontal normal ----------- */
@media (max-width: 768px) {
  .horizontal-scroll-wrapper {
    transform: none !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1rem;
    scroll-snap-type: x mandatory;
    gap: 1rem;
  }

  .img-wrapper {
    transform: none !important;
    flex: 0 0 auto;
    min-height: auto;
    scroll-snap-align: center;
  }
  .img-wrapper:hover {
    min-height: unset;
  }
  

  .img-wrapper img {
    max-width: 80vw;
    max-height: 50vh;
    filter: none;
  }

  .scroll-info {
    display: none;
  }
}
@media (min-width: 769px) {
  .horizontal-scroll-wrapper {
    scrollbar-width: none; /* Firefox */
  }

  .horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
}