/* =====================================================================
   INDEX — ESCENARIO FIJO DEL PERSONAJE
   Personaje y botón independientes. Ningún estado altera geometría.
   Para cambiar el tamaño general, editar --pk-index-character-width.
   ===================================================================== */

body.pk-index {
  --pk-index-character-width: 460px;
  --pk-index-controls-height: 120px;
  --pk-index-controls-gap: 135px;
}

body.pk-index .copy,
body.pk-index .copy > div,
body.pk-index .nova-guide {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* La entrada animada global no debe mover ni escalar el personaje. */
body.pk-index .copy,
body.pk-index .copy.pk-reveal-pending,
body.pk-index .copy.pk-reveal-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.pk-index .nova-guide {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Zona exclusiva del personaje. */
body.pk-index .pk-character-stage {
  position: absolute !important;
  inset:
    0
    0
    calc(var(--pk-index-controls-height) + var(--pk-index-controls-gap))
    0 !important;

  overflow: visible !important;
  pointer-events: none !important;
}

body.pk-index #characterHolder {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: 0 !important;
  height: 100% !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  overflow: visible !important;

  transform: translateX(-50%) !important;
  animation: none !important;
  transition: none !important;
}

/* ================================================================
   PERSONAJE SIMPLE
   Esta regla se aplica solamente cuando no está activo el sistema dual.
   Así evitamos que pise las transformaciones independientes.
   ================================================================ */

body.pk-index
#characterHolder:not(.pk-character-dual)
#mainCharacter,

body.pk-index
#characterHolder:not(.pk-character-dual)
#mainCharacter.character-speaking,

body.pk-index
#characterHolder:not(.pk-character-dual)
#mainCharacter.character-listening,

body.pk-index
#characterHolder:not(.pk-character-dual)
img,

body.pk-index
#characterHolder:not(.pk-character-dual)
video {
  position: relative !important;
  display: block !important;

  flex: 0 0 auto !important;

  width: var(--pk-index-character-width) !important;
  min-width: var(--pk-index-character-width) !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: center bottom !important;

  animation: none !important;
  transition: none !important;

  will-change: auto !important;

  filter:
    drop-shadow(0 28px 38px rgba(0, 0, 0, 0.38)) !important;
}

/* ================================================================
   INDEX — DOS WEBP SUPERPUESTOS
   Ambos archivos permanecen cargados.
   El estado cambia únicamente opacity y visibility.
   ================================================================ */

body.pk-index #characterHolder.pk-character-dual {
  display: block !important;
}

/* Caja común e idéntica para las cuatro animaciones. */
body.pk-index
#characterHolder.pk-character-dual
[data-pk-character-layer] {
  position: absolute !important;

  left: 50% !important;
  bottom: 0 !important;

  display: block !important;

  width: var(--pk-index-character-width) !important;
  min-width: var(--pk-index-character-width) !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform:
    translate3d(
      calc(-50% + var(--pk-file-x, 0px)),
      var(--pk-file-y, 0px),
      0
    )
    scale(var(--pk-file-scale, 1)) !important;

  transform-origin: center bottom !important;

  animation: none !important;

  /*
    Importante:
    no usar transition: all ni transition de transform.
    Solamente puede suavizarse la opacidad.
  */
  transition:
    opacity 80ms linear,
    visibility 0s linear 80ms !important;

  will-change: opacity !important;

  filter:
    drop-shadow(0 28px 38px rgba(0, 0, 0, 0.38)) !important;
}

/* Capa visible. */
body.pk-index
#characterHolder.pk-character-dual
[data-pk-character-layer].is-visible {
  opacity: 1 !important;
  visibility: visible !important;

  transition:
    opacity 80ms linear,
    visibility 0s linear 0s !important;
}

/* ================================================================
   CALIBRACIÓN INDEPENDIENTE DE CADA WEBP

   X:
   positivo = derecha
   negativo = izquierda

   Y:
   positivo = abajo
   negativo = arriba

   Scale:
   menor que 1 = más chico
   mayor que 1 = más grande
   ================================================================ */

/* LUMI — escuchar queda como referencia. */
body.pk-index .lumi-escucha-webp {
  --pk-file-scale: 1;
  --pk-file-x: 0px;
  --pk-file-y: 0px;
}

/*
  Lumi al hablar parecía acercarse y agrandarse.
  Primera compensación: 3% más chica y 2px más abajo.
*/
body.pk-index .lumi-habla-webp {
  --pk-file-scale: 0.97;
  --pk-file-x: 0px;
  --pk-file-y: 2px;
}

/* ROKI — escuchar queda como referencia. */
body.pk-index .roki-escucha-webp {
  --pk-file-scale: 1;
  --pk-file-x: 0px;
  --pk-file-y: 0px;
}

/*
  Roki al hablar recibe inicialmente la misma compensación.
  Después podemos afinarlo de manera independiente.
*/
body.pk-index .roki-habla-webp {
  --pk-file-scale: 0.96;
  --pk-file-x: 0px;
  --pk-file-y: -7px;
}

/* ================================================================
   ZONA EXCLUSIVA DEL BOTÓN
   Siempre por encima del footer.
   ================================================================ */

body.pk-index .pk-assistant-controls,
body.pk-index #novaAssistant {
  position: absolute !important;

  left: 50% !important;
  bottom: var(--pk-index-controls-gap) !important;

  width: max-content !important;
  height: var(--pk-index-controls-height) !important;

  margin: 0 !important;
  padding: 0 !important;

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

  transform: translateX(-50%) !important;

  animation: none !important;
  transition: none !important;

  z-index: 100 !important;

  pointer-events: none !important;
}

body.pk-index #novaWakeBtn {
  position: relative !important;

  margin: 0 !important;

  transform: none !important;

  pointer-events: auto !important;
}

body.pk-index #novaWakeBtn[hidden],
body.pk-index #novaWakeBtn.is-startup-suppressed {
  display: none !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Notebook */
@media (min-width: 901px) and (max-width: 1199px) {
  body.pk-index {
    --pk-index-character-width: 620px;
    --pk-index-controls-height: 68px;
    --pk-index-controls-gap: 10px;
  }
}

/* Tablet y móvil */
@media (max-width: 900px) {
  body.pk-index {
    --pk-index-character-width: min(620px, 92vw);
    --pk-index-controls-height: 64px;
    --pk-index-controls-gap: 8px;
  }
}

@media (max-width: 620px) {
  body.pk-index {
    --pk-index-character-width: min(500px, 96vw);
    --pk-index-controls-height: 58px;
    --pk-index-controls-gap: 6px;
  }
}