/* =========================================
   NARRATIVA — escena 10 (e10)
   Base 375 × 6281. Tokens de e11 (no pisar e10: e9 ya usa escena-10).
   Stops INTENCIONALES. Al final: banda e10→e11.
   ========================================= */

.narrativa-e10 {
  aspect-ratio: 375 / 6281;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-11-fondo-a)) 0%,
    rgb(var(--efigie-escena-11-fondo-b)) 5.26%, /* 5.26% INTENCIONAL */
    rgb(var(--efigie-escena-11-fondo-b)) 12.63%, /* 12.63% INTENCIONAL */
    rgb(var(--efigie-escena-11-fondo-a)) 45.6%, /* 45.6% INTENCIONAL */
    rgb(var(--efigie-escena-11-fondo-b)) 79.62% /* 79.62% INTENCIONAL */
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 10
   ========================================= */

.e10-01 {
  left: 4.2667%;
  top: 0.2530%;
  width: 91.4667%;
  height: 8.1843%;
}

.e10-02 {
  left: 0;
  top: 7.4174%;
  width: 100%;
  height: 8.9636%;
}

.e10-03 {
  left: 8.5333%;
  top: 16.8965%;
  width: 82.9333%;
  height: 7.4351%;
}

.e10-04 {
  left: 8.5333%;
  top: 24.8571%;
  width: 82.9333%;
  height: 7.4351%;
}

.e10-llamada-01 {
  left: 18.6667%;
  top: 32.7801%;
  width: 62.6667%;
}

.e10-05 {
  left: 8.5333%;
  top: 34.1968%;
  width: 82.9333%;
  height: 4.8241%;
}

.e10-06 {
  left: -140.5333%;
  top: 39.5362%;
  width: 240.5333%;
  height: 9.4252%;
}

.e10-07 {
  left: 8.5333%;
  top: 49.4649%;
  width: 82.9333%;
  height: 3.3003%;
}

.e10-08 {
  left: 8.5333%;
  top: 53.2706%;
  width: 82.9333%;
  height: 5.2061%;
}

.e10-09 {
  left: 0;
  top: 58.9916%;
  width: 100%;
  height: 9.4252%;
}

.e10-10 {
  left: 8.5333%;
  top: 68.9203%;
  width: 82.9333%;
  height: 3.3003%;
}

.e10-11 {
  left: 8.5333%;
  top: 72.7459%;
  width: 82.9333%;
  height: 3.3003%;
}

.e10-12 {
  left: 28.8000%;
  top: 77.0652%;
  width: 41.4773%;
  height: 1.6506%;
}

.e10-13 {
  left: 4.2667%;
  top: 80.0541%;
  width: 91.4667%;
  height: 3.0664%;
}

.e10-14 {
  left: 8.5333%;
  top: 83.6225%;
  width: 82.9333%;
  height: 7.0372%;
}

.e10-15 {
  left: 0;
  top: 91.1801%;
  width: 100%;
  height: 8.8203%;
}

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

.e10-01 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-estandar);
  box-shadow: var(--sombra-narrativa);
}

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

.e10-03 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

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

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

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

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

.e10-08 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

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

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

.e10-11 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

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

.e10-13 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e10-14 {
  border-radius: var(--radio-mediano);
}

.e10-15 {
  border-radius: var(--radio-gigante) var(--radio-gigante) 0 0;
}

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   Loops (e10-06/12/13) sin trigger, como e2/e6.
   ========================================= */

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

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

@keyframes e10-03-opacity { from { opacity: 0; } }
@keyframes e10-03-translate { from { translate: 0 calc(167px * var(--escala-narrativa)); } }
@keyframes e10-03-scale { from { scale: 0.4; } }

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

@keyframes e10-04-opacity { from { opacity: 0; } }
@keyframes e10-04-translate { from { translate: 0 calc(-171px * var(--escala-narrativa)); } }
@keyframes e10-04-scale { from { scale: 0.4; } }

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

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

.e10-llamada-01.visible {
  animation:
    e10-llamada-01-opacity 0.31s cubic-bezier(0.42, 0, 0.58, 1) both,
    e10-llamada-01-translate 0.55s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e10-05-opacity { from { opacity: 0; } }
@keyframes e10-05-scale { from { scale: 1.4; } }

.e10-05.visible {
  animation:
    e10-05-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e10-05-scale 1s cubic-bezier(0.14, 1.66, 0.40, 1) both;
}

@keyframes e10-06-pingpong {
  from { translate: calc(527px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e10-06 {
  animation: e10-06-pingpong 6s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

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

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

@keyframes e10-08-opacity { from { opacity: 0; } }
@keyframes e10-08-translate { from { translate: calc(-343px * var(--escala-narrativa)) 0; } }

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

@keyframes e10-10-opacity { from { opacity: 0; } }
@keyframes e10-10-translate { from { translate: calc(-343px * var(--escala-narrativa)) 0; } }

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

@keyframes e10-11-opacity { from { opacity: 0; } }
@keyframes e10-11-translate { from { translate: calc(343px * var(--escala-narrativa)) 0; } }

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

@keyframes e10-12-giro {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

.e10-12 {
  animation: e10-12-giro 4s linear infinite;
}

@keyframes e10-13-giro {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.e10-13 {
  animation: e10-13-giro 4s linear infinite;
}

@keyframes e10-14-opacity { from { opacity: 0; } }
@keyframes e10-14-translate { from { translate: 0 calc(-142px * var(--escala-narrativa)); } }

.e10-14.visible {
  animation:
    e10-14-opacity 0.55s cubic-bezier(0.42, 0, 1, 1) both,
    e10-14-translate 1.5s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

/* =========================================
   TRANSICIÓN e10→e11 — 375×220
   Negro → --efigie-escena-12-fondo-a.
   Sin hijos. overflow hidden.
   ========================================= */

.transicion-interseccional--e10-e11 {
  height: auto;
  aspect-ratio: 375 / 220;
  overflow: hidden;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgb(0, 0, 0),
    rgb(var(--efigie-escena-12-fondo-a))
  );
}