/* #################### Sebastian #################### */

*,
body {
  font-family: 'Boehringer Forward Text';
}

body {
  overflow-x: hidden;
}

.scroll-block {
  overflow: hidden;
  touch-action: none;
  height: 100%;
}

/* Popup container generico per entrambi i tipi */
#slidesPopup,
#lloSlidesPopup,
#heaSlidesPopup {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  z-index: 200;

  background-color: rgba(0, 0, 0, 0.50);
  transition: all .2s;
}

/* Container delle slides generico per entrambi i tipi */
#slidesContainer,
#lloSlidesContainer,
#heaSlidesContainer {
  position: absolute;
  top: 0;
  left: 10%;

  height: 100%;
  width: 35%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  gap: 10px;

  padding-top: 2%;
  padding-bottom: 2%;

  box-sizing: border-box;
}

#slidesContainer p,
#lloSlidesContainer p,
#heaSlidesContainer p {
  background-color: white;
  color: #08312a;

  border-radius: 500px;
  height: fit-content;
  padding: 2.5% 5%;
  font-weight: bold;

  /* MODIFICA 3: Assicura che il testo prenda lo spazio che serve senza andare a capo */
  white-space: nowrap;
  opacity: 0;

  transition: all .2s;
}

#slidesContainer div:hover p,
#lloSlidesContainer div:hover p,
#heaSlidesContainer div:hover p {
  opacity: 1;
}

#slidesContainer div,
#lloSlidesContainer div,
#heaSlidesContainer div {
  position: relative;
  height: 17.5%;
  background-size: cover;
  transition: scale .3s ease-in-out;

  display: flex;
  flex-direction: row;

  justify-content: flex-end;
  align-items: center;
  gap: 5%;
  text-align: center;
}

#slidesContainer div div,
#lloSlidesContainer div div,
#heaSlidesContainer div div {
  aspect-ratio: 16/9;
  height: 100%;
  background-size: cover;
}

.previewContainer:hover {
  scale: 1.2;
  z-index: 10;
  transition: scale 0.2s;
}

.disabled {
  opacity: 0;
  pointer-events: none;
}

/* LLO e HEA Popup */
#llo-popup,
#hea-popup {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;

  z-index: 199;

  transition: all .3s ease-in-out;
}

#popup-scroll {
  height: 100%;
  overflow-y: auto;
}

#llo-popup section,
#hea-popup section {
  width: 100%;
  height: 100%;
}

.backToHome {
  position: fixed;
  top: 5.7%;
  left: 27%;

  width: fit-content;
  height: 5%;

  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;

  z-index: 9999;
}

.backToHome img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.navarrows {
  position: fixed;
  top: 50%;

  aspect-ratio: 1/1;
  height: 7%;

  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: translateX(-50%);
  z-index: 9999;
  rotate: 90deg;
}

.navarrows.arrowPrev {
  left: 2.5%;
}

.navarrows.arrowNext {
  right: 2.5%;
  height: 10%;
}

/* Stili comuni per tutte le slide */
.llo-slide,
.hea-slide {
  background-color: #e5e3de;
  overflow-x: hidden;
  margin: 0;
  overflow: hidden;

  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.llo-slide hr,
.hea-slide hr {
  position: absolute;
  bottom: 15%;

  justify-self: center;

  margin: 0;

  border: 1px #385852 solid;
  width: 95%;
  z-index: 10;
}

.slideNumber {
  position: absolute;
  text-align: left;
  left: 2.5%;
  top: 20%;
  font-size: 80px;
  margin: 0;
  font-weight: normal;
  color: #08312a;
}

.llo-slide .titleContainer,
.hea-slide .titleContainer {
  position: absolute;

  width: 40%;
  right: 3%;
  top: 5%;

  color: #08312a;

  font-size: 30px;
  line-height: 1.2;
}

.titleContainer .period {
  font-style: italic;

  margin: 0;
}

.titleContainer .title {
  font-weight: bold;
  font-size: 40px;

  margin: 0;
}

.bottom-text {
  /* position: absolute; */
  font-size: 22px;
  margin-top: 10px;
}

/* LLO Slides */
#llo-1 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 60%;

  object-fit: contain;
}

#llo-1 .ragazzo {
  left: 49%;
  height: 70%;

  transform: scale(100%);
}

#llo-1 .ragazza {
  right: 49%;

  transform: scale(100%);

  z-index: 30;
}

#llo-2 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#llo-2 .ragazzo {
  left: 40%;
  height: 70%;

  z-index: 30;
}

#llo-2 .ragazza {
  right: 50%;

  z-index: 30;
}

#llo-2 .computer {
  right: 54.5%;
  z-index: 50;
  height: 15.7%;
  z-index: 40;
}

#llo-2 .bottom-text {
  left: 2.5%;
  top: 86%;
}

#llo-3 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#llo-3 .uomo {
  left: 30%;
  bottom: 5%;
  height: 70%;

  z-index: 30;
}

#llo-3 .sedia {
  left: 52%;
  height: 45%;
  bottom: 15%;

  z-index: 10;
}

#llo-3 .computer {
  left: 11.5%;
  z-index: 50;
  height: 25%;
  z-index: 40;
  bottom: 2.5%;
}

#llo-3 .bottom-text {
  right: 2.5%;
  top: 86%;
}

.bounce {
  animation: bounce 1600ms infinite;
}

#llo-4 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#llo-4 .uomo {
  left: 20%;
  height: 62.7%;
  bottom: 15%;

  z-index: 30;
}

#llo-4 .table {
  right: 18.5%;
  z-index: 50;
  height: 64%;
  z-index: 20;
}

#llo-4 .open-popup {
  position: absolute;
  right: 28%;
  top: 33%;

  border: none;
  border-radius: 100px;

  background-image: url(../images/svgs/openpopup-btn.svg);
  background-color: transparent;

  aspect-ratio: 1/1;
  height: 75px;

  z-index: 30;
}

#llo-4 .bottom-text {
  left: 2.5%;
  top: 86%;
}

#llo-5 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#llo-5 .lavagna {
  left: 35%;
  height: 60%;
  bottom: 10.4%;

  z-index: 30;
}

#llo-5 .donna1 {
  left: 20%;
  height: 62%;
  bottom: 7%;

  z-index: 30;
}

#llo-5 .donna2 {
  left: 41%;
  height: 62%;
  bottom: 4.5%;

  z-index: 30;
}

#llo-5 .uomo {
  right: 26%;
  height: 67%;
  bottom: 3%;

  z-index: 30;
}

#llo-5 .bottom-text {
  left: 2.5%;
  top: 86%;
}

/* HEA Slides - Duplicazione degli stili LLO con ID HEA */
#hea-1 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 60%;

  object-fit: contain;
}

#hea-1 .ragazzo {
  left: 35%;
  height: 70%;

  /* transform: scale(100%); */
}

#hea-1 .ragazza {
  right: 62.5%;

  /* transform: scale(100%); */

  z-index: 30;
}

#hea-1 .buttons-container {
  position: absolute;

  left: 65%;
  bottom: 50%;
  height: 12%;
  width: 18%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#hea-1 .buttons-container button {
  opacity: 1;
  background-color: #00e47c;
  color: #08312a;
  /* position: absolute; */

  width: 100%;
  aspect-ratio: 20/3;

  border-radius: 100px;
  border: none;
  transition: all .2s ease-in-out;
  font-size: 1.5rem;
  z-index: 50;
}

#hea-1 .buttons-container button:hover {
  cursor: pointer;
  background-color: #08312a;
  color: #00e47c;
}

#hea-2 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#hea-2 .ragazzo {
  left: 40%;
  height: 70%;

  z-index: 30;
}

#hea-2 .ragazza {
  right: 50%;

  z-index: 30;
}

#hea-2 .computer {
  right: 54.5%;
  z-index: 50;
  height: 15.7%;
  z-index: 40;
}

#hea-2 .bottom-text {
  left: 2.5%;
  top: 86%;
}

#hea-3 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  /* transform-origin: bottom center; */

  height: 54%;
  object-fit: contain;
}

#hea-3 .uomo {
  left: 30%;
  bottom: 5%;
  height: 70%;

  z-index: 30;
}

#hea-3 .tutto {
  left: 20%;
  height: 60%;
  bottom: 5%;

  z-index: 20;
}

#hea-3 .bottom-text {
  right: 2.5%;
  top: 86%;
}

#hea-4 img {
  position: absolute;
  bottom: 0;
  z-index: 20;
  transform-origin: bottom center;

  height: 54%;
  object-fit: contain;
}

#hea-4 .table {
  left: 12.5%;
  z-index: 50;
  height: 45%;
  z-index: 50;
}

#hea-4 .donna {
  right: 23%;
  height: 55%;
  bottom: 15%;

  z-index: 40;
}

#hea-4 .uomo {
  left: 30%;
  height: 60%;
  bottom: 25%;

  transform-origin: center center;
  z-index: 30;
}

#hea-4 .pubblico {
  left: 10%;
  height: 50%;
  bottom: 10.7%;

  z-index: 30;
}

/* Animazioni */
@keyframes bounce {
  0% {
    translate: 0 -15px;
    animation-timing-function: ease-in;
  }

  60% {
    translate: 0 0;
    animation-timing-function: ease-out;
  }

  100% {
    translate: 0 -15px;
  }
}

#text-popup {
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;

  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);

  transition: all .2s ease-in-out;
}

#text-popup p {
  position: relative;
  background-color: #08352ce0;
  color: white;
  max-width: 50%;

  padding: 3.5%;

  border-radius: 15px;

  font-size: 1.5em;
  font-weight: normal;

  backdrop-filter: blur(6px);
}

#text-popup p button {
  position: absolute;
  top: 0px;
  right: 0px;

  aspect-ratio: 1/1;
  height: 75px;
  cursor: pointer;

  border: none;
  border-radius: 100px;

  background-color: transparent;
  background-image: url(../images/svgs/close-btn.svg);

  color: white;
  text-align: center;

  transform: translate(50%, -50%);
  transform-origin: top right;

  transition: all .2s ease-in-out;
}

#text-popup p button:hover {
  scale: 1.1;
}

.pulse {
  animation: pulse 1600ms infinite;
}

@keyframes pulse {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }

  100% {
    scale: 1;
  }
}

/* #################### Sebastian #################### */