.intro-classroom {
  position: relative;
  overflow: hidden;
  z-index: 2;
  margin-top: -9vw;
}


.intro-classroom::before {
  content: none;
}
.intro-classroom__video {
  width: 100%;
  height: auto;
  display: block;
}



.intro,
.classroom {
  position: relative;
  z-index: 1;
}

.classroom {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(5rem, 12vw, 9rem);
  overflow: hidden;
}

.classroom__accent {
  position: absolute;
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%) translate3d(0, var(--parallax-y, 0), 0);
}

.classroom__splash {
  background-image: url("../assets/macchia-bianchi-1.png");
  opacity: 0.8;
}

.classroom__glow {
  background-image: url("../assets/macchia-bianchi-2.png");
  opacity: 0.45;
}

.classroom__accent--row1-left {
  width: clamp(254px, 64vw, 884px);
  left: 18%;
  top: 78%;
  z-index: 4;
}

.classroom__accent--row1-right {
  width: clamp(240px, 73vw, 778px);
  left: 44%;
  top: 79%;
  z-index: 4;
}

.classroom__accent--row2-left {
  width: clamp(210px, 34vw, 520px);
  left: 66%;
  top: 48%;
  z-index: 2;
}

.classroom__accent--row2-right {
  width: clamp(210px, 51vw, 490px);
  left: 85%;
  top: 50%;
  z-index: 2;
}

.classroom__accent--row3-left {
  width: clamp(180px, 22vw, 320px);
  left: 78%;
  top: 24%;
  z-index: 0;
}

.classroom__accent--row3-right {
  width: clamp(180px, 22vw, 320px);
  left: 93%;
  top: 30%;
  z-index: 0;
}

.classroom__stage {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  min-height: clamp(360px, 60vw, 560px);
}

.classroom__desk {
  position: absolute;
  bottom: 0;
  will-change: transform, opacity;
}

.classroom__desk--front {
  width: min(936px, 70vw);
  left: 0;
  bottom: -47%;
  z-index: 5;
}

.classroom__desk--mid {
  width: min(820px, 60vw);
  right: 4px;
  bottom: -17%;
  z-index: 3;
}

.classroom__desk--back {
  width: min(483px, 55vw);
  right: 2%;
  bottom: 18%;
  z-index: 1;
}

.cta-band {
  position: relative;
  text-align: center;
  color: var(--white);
  --cta-pad-top: clamp(2rem, 5vw, 3.2rem);
  --cta-pad-bottom: clamp(1.8rem, 4vw, 2.8rem);
  --tear-overlap: clamp(55px, 10vw, 220px);
  padding: calc(var(--cta-pad-top) + var(--tear-overlap)) 0
    calc(var(--cta-pad-bottom) + var(--tear-overlap));

  z-index: 5;
  margin-top: -10vw;
}

.cta-band.tear-band::before {
  background-image: url("../assets/strappo%20di%20sopra%20pi%C3%B9%20PICCOLO.png");
  background-size: 100% auto;
}
.cta-band .container {
  position: relative;
  z-index: 2;
}

.cta-band__text {
  margin: 0 auto;
  font-family: "Matcha Vibes", "Trebuchet MS", sans-serif;
  font-size: clamp(1rem, 2.5vw, 2.2rem);
}

.cta-band__button {
  display: inline-block;
  width: clamp(140px, 20vw, 190px);
  aspect-ratio: 366 / 236;
  background: url("../assets/tasto-1.png") center/contain no-repeat;
  transition: transform 0.2s ease, filter 0.2s ease;
  margin-top: -3%;
}

.cta-band__button:hover,
.cta-band__button:focus-visible {
  background-image: url("../assets/tasto-1-hover.png");
  transform: translate3d(0, var(--parallax-y, 0), 0) translateY(-2px)
    scale(1.02);
  filter: drop-shadow(0 0 22px rgba(248, 255, 51, 0.4));
}

@media (min-width: 835px) and (max-width: 1024px) {
  .cta-band{
    margin-top: -15vw;
  }
}


@media (max-width: 768px) {
  .cta-band {
    margin-top: -25vw;
  }

  .cta-band.tear-band::before {
    background-size: cover;
  }
 .classroom__stage {
    min-height: 520px;
  }

  .classroom__desk--front {
    width: 85vw;
    left: -8%;
  }

  .classroom__desk--mid {
    width: 72vw;
    left: 12%;
    bottom: 10%;
  }

  .classroom__desk--back {
    width: 65vw;
    right: -10%;
    bottom: 18%;
  }

  .classroom__accent--row1-left {
    left: 22%;
    top: 62%;
  }

  .classroom__accent--row1-right {
    left: 52%;
    top: 64%;
  }

  .classroom__accent--row2-left {
    left: 58%;
    top: 44%;
  }

  .classroom__accent--row2-right {
    left: 78%;
    top: 46%;
  }

  .classroom__accent--row3-left {
    left: 70%;
    top: 22%;
  }

  .classroom__accent--row3-right {
    left: 86%;
    top: 20%;
  }
}





@media (max-width: 600px) {
  .cta-band {
    --cta-pad-top: clamp(1.6rem, 13vw, 3.6rem);
    --cta-pad-bottom: clamp(1.4rem, 7vw, 2.2rem);
    --tear-overlap: clamp(45px, 12vw, 90px);
  }

  .cta-band__text {
    transform: translateY(20px);
    font-size: clamp(1rem, 4vw, 1.4rem);
  }

  .cta-band__button {
    width: clamp(130px, 38vw, 170px);
  }
}


@media (max-width: 540px) {
  .classroom {
    padding: 2.5rem 0 6rem;
  }

  .classroom__stage {
    min-height: 460px;
  }

  .classroom__desk--front {
    width: 98vw;
    left: -1%;
    bottom: -17%;
  }

  .classroom__desk--mid {
    width: 82vw;
    left: 15%;
    bottom: 19%;
  }

  .classroom__desk--back {
    width: 70vw;
    right: -8%;
    bottom: 40%;
  }

  .classroom__accent--row1-left {
    left: 26%;
    top: 60%;
  }

  .classroom__accent--row1-right {
    left: 56%;
    top: 62%;
  }

  .classroom__accent--row2-left {
    left: 54%;
    top: 42%;
  }

  .classroom__accent--row2-right {
    left: 76%;
    top: 44%;
  }

  .classroom__accent--row3-left {
    left: 68%;
    top: 20%;
  }

  .classroom__accent--row3-right {
    left: 84%;
    top: 19%;
  }
}