/* =========================================
   NARRATIVA — escena 9 (e9)
   Base 375 × 1940. Fondo --efigie-escena-10-fondo (no pisar e9: e8 ya usa escena-9).
   Al final: banda e9→e10. e9-01 = marco con padding (no border-image).
   ========================================= */

.narrativa-e9 {
  aspect-ratio: 375 / 1940;
  overflow: visible;
  background-color: rgb(var(--efigie-escena-10-fondo));
}

/* =========================================
   POSICIONAMIENTO — Escena 9
   ========================================= */

.e9-01 {
  position: absolute;
  left: 8.5333%;
  top: 2.0371%;
  width: 66.1333%;
  height: 12.7835%;
}

.e9-02 {
  left: 0;
  top: 13.5979%;
  width: 100%;
  height: 14.7773%;
}

.e9-03 {
  left: 0;
  top: 28.3175%;
  width: 100%;
  height: 29.0206%;
}

.e9-04 {
  left: 8.5333%;
  top: 59.0392%;
  width: 82.6667%;
  height: 14.1753%;
}

.e9-05 {
  left: 4.2667%;
  top: 71.5649%;
  width: 25.3333%;
  height: 13.0412%;
}

.e9-06 {
  left: 37.3333%;
  top: 76.1010%;
  width: 25.3333%;
  height: 13.0412%;
}

.e9-07 {
  left: 70.4000%;
  top: 86.1010%;
  width: 25.3333%;
  height: 13.0412%;
}

.e9-llamada-01 {
  left: 45.6000%;
  top: 51.6062%;
  width: 42.9333%;
}

/* =========================================
   PATRONES VISUALES
   ========================================= */

/* Único borde degradado de la narrativa: el marco es el
   gradiente; la foto llena desde el outline (no border-image). */
.e9-01 {
  background-image: linear-gradient(
    to top,
    var(--color-alto-contraste-claro),
    var(--color-contraste-oscuro)
  );
  padding: var(--stroke-llamadas);
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
}

.e9-01__foto {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radio-mediano) - var(--stroke-llamadas));
}

.e9-02 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e9-03 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e9-04 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
}

.e9-05,
.e9-06,
.e9-07 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   ========================================= */

@keyframes e9-01-opacity { from { opacity: 0; } }
@keyframes e9-01-translate { from { translate: 0 calc(40px * var(--escala-narrativa)); } }

.e9-01.visible {
  animation:
    e9-01-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-01-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-02-opacity { from { opacity: 0; } }
@keyframes e9-02-translate { from { translate: 0 calc(51px * var(--escala-narrativa)); } }

.e9-02.visible {
  animation:
    e9-02-opacity 0.31s cubic-bezier(0, 0, 0.58, 1) both,
    e9-02-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-04-opacity { from { opacity: 0; } }
@keyframes e9-04-translate { from { translate: 0 calc(49px * var(--escala-narrativa)); } }

.e9-04.visible {
  animation:
    e9-04-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-04-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-05-opacity { from { opacity: 0; } }
@keyframes e9-05-translate { from { translate: 0 calc(-65px * var(--escala-narrativa)); } }

.e9-05.visible {
  animation:
    e9-05-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-05-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-06-opacity { from { opacity: 0; } }
@keyframes e9-06-translate { from { translate: 0 calc(-65px * var(--escala-narrativa)); } }

.e9-06.visible {
  animation:
    e9-06-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-06-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-07-opacity { from { opacity: 0; } }
@keyframes e9-07-translate { from { translate: 0 calc(-65px * var(--escala-narrativa)); } }

.e9-07.visible {
  animation:
    e9-07-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-07-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e9-llamada-01-opacity { from { opacity: 0; } }
@keyframes e9-llamada-01-scale { from { scale: 1.4; } }

.e9-llamada-01.visible {
  animation:
    e9-llamada-01-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-llamada-01-scale 1s cubic-bezier(0.12, 1.80, 0.32, 1) both;
}

/* =========================================
   TRANSICIÓN e9→e10 — 375×208
   Degradado gris oscuro → gris medio.
   overflow hidden. Una llamada regular.
   ========================================= */

.transicion-interseccional--e9-e10 {
  --escala-narrativa: 1;
  position: relative;
  height: auto;
  aspect-ratio: 375 / 208;
  overflow: hidden;
  pointer-events: auto;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-10-fondo)) 5%,
    rgb(var(--efigie-escena-11-fondo-a)) 90%
  );
}

.e9-llamada-02 {
  left: 28.8000%;
  top: 33.1731%;
  width: 42.4000%;
}

@keyframes e9-llamada-02-opacity { from { opacity: 0; } }
@keyframes e9-llamada-02-translate { from { translate: 0 calc(-25px * var(--escala-narrativa)); } }

.e9-llamada-02.visible {
  animation:
    e9-llamada-02-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e9-llamada-02-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}