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

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

.prof-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2500 / 13767;
  min-height: calc(100vw * 5.507);
  background: url("../assets/personaggi/professori-pc1.jpeg") center top / 100% auto no-repeat;
  overflow: hidden;
}

.prof-title {
  position: absolute;
  top: 2.6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 74vw);
  margin: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  z-index: 3;
}

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

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

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

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

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

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

.prof-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);
}

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

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

.prof-character__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, min(260px, 46vw));
  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;
}

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

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

@media (max-width: 767px) {
  .prof-instruction {
    top: 90%;
    width: min(260px, 42vw);
    font-size: 0.9rem;
  }

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

@media (max-width: 600px) {
  .prof-title {
    width: 60%;
    top: 2%;
  }

  .prof-instruction {
    font-size: 0.85rem;
  }

  .prof-cta {
    width: min(136px, 65vw);
    transform: translate(-137%, 124%);
    top: 83%;
  }

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


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

  .prof-stage {
    background: url("../assets/personaggi/prof-mobile1.jpg") center top / 100% auto no-repeat;
    aspect-ratio: 2500 / 18960;
  }

  main{
    margin-top: -30px;
  }

  .sierge{
    width: 16.4% !important;
  }

  .dino{
    left: 32% !important;
    width: 20.48% !important;
  }

  .maccio{
    top: 95.5% !important;
  }

  .fraudo{
    left: 37% !important;
    top: 95.5% !important;
  }

  .donata{
    left: 33% !important;
  }

  .enza{
    left: 72% !important;
  }

  .gianni-ot{
    left:60% !important;
  }

  .peppa{
    left: 28% !important;
    top: 83.5% !important;
  }

  .vaccangelo{
    left: 47% !important;
    width: 34.84% !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;
}

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

.prof-body .site-footer {
  margin-top: clamp(-200px, -10vw, -110px);
  position: relative;
  z-index: 5;
}

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