/* =========================================================
  SADO
   HTML-слои:
   .sado__base       -> sado.png
   .sado__pupil      -> pupil.png
   .sado__lashes     -> lashes.png
   .sado__closed-eye -> closed_eye.png
   ========================================================= */

.sado-bottom {
  margin: 0;
}

/* Общий контейнер персонажа */
.sado {
  position: relative;

  width: min(100%, 700px);
  margin: 0 auto;

  line-height: 0;
  container-type: inline-size;
}


/* Общие параметры всех изображений */
.sado img {
  display: block;
  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;
}


/* ---------------------------------------------------------
   ОСНОВНОЙ СЛОЙ
   Задаёт реальный размер контейнера.
   --------------------------------------------------------- */

.sado__base {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   НАЛОЖЕННЫЕ СЛОИ
   Все изображения имеют тот же размер холста, что sado.png.
   --------------------------------------------------------- */

.sado__pupil,
.sado__lashes,
.sado__closed-eye {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}


/* Зрачок */
.sado__pupil {
  z-index: 2;

  transform: translate(0, 0);
  animation: sado-look 13s steps(1, end) infinite;
}


/* Ресницы */
.sado__lashes {
  z-index: 3;

  opacity: 1;
  animation: sado-lashes-blink 35s steps(1, end) infinite;
}


/* Закрытый глаз */
.sado__closed-eye {
  z-index: 4;

  opacity: 0;
  animation: sado-eye-blink 35s steps(1, end) infinite;
}



/* =========================================================
   МОРГАНИЕ

   Во время моргания:
   - lashes.png исчезает;
   - closed_eye.png появляется.

   Анимация зрачка при этом продолжает работать независимо.
   ========================================================= */

@keyframes sado-eye-blink {

  0%, 10% {
    opacity: 0;
  }

  /* Моргание 1 — около 0.25 с */
  10.1%, 10.725% {
    opacity: 1;
  }

  10.825%, 38% {
    opacity: 0;
  }

  /* Моргание 2 — около 0.25 с */
  38.1%, 38.725% {
    opacity: 1;
  }

  38.825%, 78% {
    opacity: 0;
  }

  /* Моргание 3 — около 0.25 с */
  78.1%, 78.725% {
    opacity: 1;
  }

  78.825%, 100% {
    opacity: 0;
  }
}


@keyframes sado-lashes-blink {

  0%, 10% {
    opacity: 1;
  }

  10.1%, 10.725% {
    opacity: 0;
  }

  10.825%, 38% {
    opacity: 1;
  }

  38.1%, 38.725% {
    opacity: 0;
  }

  38.825%, 78% {
    opacity: 1;
  }

  78.1%, 78.725% {
    opacity: 0;
  }

  78.825%, 100% {
    opacity: 1;
  }
}


/* =========================================================
   SADO — РОТ И РЕЧЕВОЙ БАБЛ
   ========================================================= */


/* ---------------------------------------------------------
   ДОПОЛНИТЕЛЬНЫЕ КАДРЫ РТА
   --------------------------------------------------------- */

.sado__mouth {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 5;

  opacity: 0;

  pointer-events: none;
  user-select: none;
}

.sado__mouth.is-active {
  opacity: 1;
}


/* ---------------------------------------------------------
   РЕЧЕВОЙ БАБЛ
   --------------------------------------------------------- */

.sado__speech {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 6;

  opacity: 0;

  pointer-events: none;
}


/* Бабл появился */
.sado--speech-visible .sado__speech {
  opacity: 1;
}


/* Плавное исчезновение бабла и текста */
.sado--speech-fading .sado__speech {
  opacity: 0;
  transition: opacity 1200ms ease;
}


/* Изображение бабла */
.sado__bubble {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;

  pointer-events: none;
  user-select: none;
}


/* ---------------------------------------------------------
   ОБЛАСТЬ ТЕКСТА ВНУТРИ БАБЛА
   --------------------------------------------------------- */
.sado__speech-content {
  width: 100%;
  text-align: center;
}

.sado__speech-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sado__speech-text {
  position: absolute;
  color: #1a1a1a;

  left: 13%;
  top: 71.5%;

  width: 51%;
  height: 26%;

  z-index: 2;

  box-sizing: border-box;
  padding: 1em;

  display: flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  font-size: clamp(8px, 2.5cqw, 18px);
  line-height: 1.35;

  text-align: center;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;

  pointer-events: none;
}

.sado__speech-text a {
  color: #b51f32;
}


/* Когда реплика видима — текст и ссылки становятся кликабельными */
.sado--speech-visible .sado__speech-text {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sado__pupil,
  .sado__lashes,
  .sado__closed-eye,
  .sado__speech,
  .sado__mouth {
    transition: none;
    animation: none;
  }

  .sado__pupil {
    transform: translate(0, 0);
  }

  .sado__lashes {
    opacity: 1;
  }

  .sado__closed-eye {
    opacity: 0;
  }
}