/* =========================================
   NARRATIVA — escena 8 (e8)
   Base 375 × 2370. Fondo escena-9 (no pisar escena-8: e7 lo usa).
   Sin banda desde e7. e8-o01: recorrido en JS; no pisar top CSS. rotate 135 INTENCIONAL.
   ========================================= */

.narrativa-e8 {
  aspect-ratio: 375 / 2370;
  overflow: visible;
  z-index: 1;
  background-color: rgb(var(--efigie-escena-9-fondo));
}

/* =========================================
   POSICIONAMIENTO — Escena 8
   ========================================= */

.e8-03 {
  left: 0;
  top: 43.762%;
  width: 100%;
  height: 28.210%;
}

.e8-02 {
  left: -0.531%;
  top: 17.963%;
  width: 101.064%;
  height: 28.428%;
  rotate: 15deg;
  transform-origin: center center;
}

.e8-01 {
  left: 4.267%;
  top: 0.344%;
  width: 91.467%;
  height: 21.730%;
}

.e8-llamada-01 {
  left: 49.333%;
  top: 1.695%;
  width: 37.867%;
}

.e8-04 {
  left: 0;
  top: 71.863%;
  width: 100%;
  height: 28.143%;
}

.e8-o01 {
  left: 67.467%;
  top: 73.3444%;
  width: 24%;
  height: 3.797%;
  rotate: 135deg;
  transform-origin: center center;
}

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

.e8-01 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e8-02 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e8-03 {
  border-top: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-bottom: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
}

.e8-04 {
  border-top: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-bottom: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
}

.e8-o01 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   e8-02 queda a 15deg. e8-o01 recorre con translate Y y rotate.
   ========================================= */

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

.e8-01.visible {
  animation:
    e8-01-opacity 0.42s cubic-bezier(0.42, 0, 0.58, 1) both,
    e8-01-translate 1s cubic-bezier(0.50, 0, 0.15, 1) both;
}

@keyframes e8-02-opacity { from { opacity: 0; } }
@keyframes e8-02-rotate { from { rotate: -30deg; } to { rotate: 15deg; } }
@keyframes e8-02-translate {
  from { translate: calc(1px * var(--escala-narrativa)) calc(82px * var(--escala-narrativa)); }
}
@keyframes e8-02-scale { from { scale: 1.2; } }

.e8-02.visible {
  animation:
    e8-02-opacity 0.75s cubic-bezier(0.5, 0, 0.5, 1) both,
    e8-02-rotate 1.5s cubic-bezier(0.175, 1.40, 0.55, 1) both,
    e8-02-translate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e8-02-scale 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

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

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

.e8-o01.visible {
  opacity: 1;
}