:root {
  --alunni-sky: #33b6f5;
  --alunni-soil: #3b2411;
}

.alunni-page {
  background: var(--black);
}

.alunni-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2500 / 9177;
  min-height: calc(100vw * 3.671);
  --alunni-crop-top: clamp(60px, 6vw, 180px);
  margin-top: calc(-1 * var(--alunni-crop-top));
  background: url(../assets/personaggi/alunni-pc.jpeg) center top / 100% auto no-repeat;
  overflow: hidden;
}

.alunni-title {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Matcha Vibes", "Trebuchet MS", sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--yellow);
  text-shadow: 0 6px 0 #1a1a1a, 0 10px 18px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.alunni-instruction {
  position: absolute;
  top: 15%;
  left: 8%;
  width: min(280px, 46vw);
  margin: 0;
  font-family: "MAIAN", "Trebuchet MS", sans-serif;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  line-height: 1.3;
  color: #162233;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 3;
}

.alunni-cta {
  position: absolute;
  left: 50%;
  top: 92%;
  transform: translate(257%, 93%);
  display: block;
  width: min(180px, 55vw);
  z-index: 5;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.alunni-cta img {
  width: 100%;
  height: auto;
  display: block;
}

.alunni-cta:hover img,
.alunni-cta:focus-visible img {
  content: url("../assets/personaggi/tasto%20prof%20hover.png");
}

.alunni-cta:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

.alunni-characters {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.alunni-character {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(
    calc(-50% + var(--offset-x, 0px)),
    calc(-50% + var(--offset-y, 0px))
  );
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: var(--z, 1);
}

.alunni-character:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

.alunni-character__img {
  width: 100%;
  height: auto;
  display: block;
}

.alunni-character__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, min(240px, 42vw));
  opacity: 0;
  transform: translate(
      calc(-50% + var(--card-x, 140%)),
      calc(-50% + var(--card-y, 0%))
    )
    translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.alunni-character.is-active {
  z-index: 8;
}

.alunni-character.is-active .alunni-character__card {
  opacity: 1;
  transform: translate(
      calc(-50% + var(--card-x, 140%)),
      calc(-50% + var(--card-y, 0%))
    )
    translateY(0);
}

@media (max-width: 767px) {
  .alunni-instruction {
    top: 14%;
    left: 6%;
    width: min(240px, 60vw);
    font-size: 0.9rem;
  }

  .alunni-character__card {
    width: var(--card-w, min(220px, 60vw));
  }
}

@media (max-width: 600px) {
  .alunni-title {
    width: 55%;
    top: 3.5%;
    font-size: clamp(2rem, 8vw, 3.2rem);
  }

  .alunni-instruction {
    top: 12%;
    font-size: 0.85rem;
  }

  .alunni-cta {
    width: min(117px, 65vw);
    left: 70%;
    top: 85%;
    transform: none;
  }

  .alunni-stage{
    background: url(../assets/personaggi/alunni-mobile.jpeg) center top / 100% auto no-repeat;
    margin-top: 7%;
    min-height: calc(100vw * 4.44);
  }

  .bombolo{
    top: 16.88% !important;
  }

  .ciro{
    top: 16% !important;
    left: 73% !important;
    height: 11% !important;
  }

  .kolemani{
    left: 71% !important;
    width: 20% !important;
  }

  .michele{
    top: 93.5% !important;
  }

  .alex{
    left: 60% !important;
    width: 17% !important;
  }

  .alunni-character__card {
    width: var(--card-w, min(200px, 70vw));
  }

  .character-modal__video {
    width: auto !important;
    height: 50vh !important;
  }
}

.character-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.character-modal.is-open {
  display: flex;
}

.character-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.character-modal__content {
  position: relative;
  z-index: 1;
  width: min(960px, 92vw);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-modal__video {
  width: 100%;
  height: auto;
  max-height: 88vh;
  border-radius: 12px;
  background: transparent;
}

.character-modal__close {
  z-index: 2;
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.character-modal__close:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.alunni-body.is-modal-open {
  overflow: hidden;
}

.alunni-body .site-footer {
  margin-top: clamp(-220px, -11vw, -93px);
  position: relative;
  z-index: 5;
}

.alunni-body .back-to-top:hover img,
.alunni-body .back-to-top:focus-visible img {
  content: unset;
}