/* =========================================
   NARRATIVA — escena 7 (e7)
   Base 375 × 2571. Fondo = --efigie-escena-8-fondo (no pisar tokens de e7: e6 los usa).
   Al final: banda e7→e8 (HTML al final de narrativa-e7.ejs).
   ========================================= */

.narrativa-e7 {
  aspect-ratio: 375 / 2571;
  overflow: visible;
  background-color: rgb(var(--efigie-escena-8-fondo));
}

/* =========================================
   POSICIONAMIENTO — Escena 7
   ========================================= */

.e7-01 {
  left: 8.533%;
  top: 1.245%;
  width: 82.933%;
  height: 6.804%;
}

.e7-02 {
  left: 0;
  top: 9.527%;
  width: 100%;
  height: 28.436%;
}

.e7-llamada-01 {
  left: 24%;
  top: 9.851%;
  width: 52%;
}

.e7-04 {
  left: 8.533%;
  top: 45.124%;
  width: 82.933%;
  height: 18.149%;
}

.e7-03 {
  left: 17.867%;
  top: 36.682%;
  width: 64.267%;
  height: 9.374%;
  rotate: 45deg;
  transform-origin: center center;
}

.e7-05 {
  left: 49.067%;
  top: 60.957%;
  width: 50.933%;
  height: 7.430%;
}

.e7-06 {
  left: 0;
  top: 67.023%;
  width: 82.933%;
  height: 12.096%;
}

.e7-07 {
  left: 4.267%;
  top: 79.741%;
  width: 91.467%;
  height: 20.017%;
  transform-origin: center center;
}

.e7-llamada-02 {
  left: 12.800%;
  top: 95.806%;
  width: 34.400%;
}

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

.e7-01 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
}

.e7-03 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
}

.e7-04 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
}

.e7-05 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-right: none;
  border-radius: var(--radio-mediano) 0 0 var(--radio-mediano);
}

.e7-06 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-left: none;
  border-radius: 0 var(--radio-mediano) var(--radio-mediano) 0;
}

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

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   e7-03 queda diamante (45deg). e7-07: opacity con delay 0.167s.
   ========================================= */

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

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

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

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

@keyframes e7-03-opacity { from { opacity: 0; } }
@keyframes e7-03-rotate { from { rotate: 135deg; } to { rotate: 45deg; } }

.e7-03.visible {
  animation:
    e7-03-opacity 0.75s cubic-bezier(0.42, 0, 1, 1) both,
    e7-03-rotate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e7-04-opacity { from { opacity: 0; } }
@keyframes e7-04-scale { from { scale: 0.7; } }

.e7-04.visible {
  animation:
    e7-04-opacity 0.315s cubic-bezier(0, 0, 0.58, 1) both,
    e7-04-scale 0.75s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e7-05-opacity { from { opacity: 0; } }
@keyframes e7-05-scale { from { scale: 1.3; } }

.e7-05.visible {
  animation:
    e7-05-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e7-05-scale 0.75s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e7-06-opacity { from { opacity: 0; } }
@keyframes e7-06-scale { from { scale: 0.7; } }

.e7-06.visible {
  animation:
    e7-06-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e7-06-scale 0.75s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e7-07-opacity { from { opacity: 0; } }
@keyframes e7-07-rotate { from { rotate: -45deg; } to { rotate: 0deg; } }
@keyframes e7-07-translate { from { translate: calc(-30px * var(--escala-narrativa)) calc(44px * var(--escala-narrativa)); } }
@keyframes e7-07-scale { from { scale: 0.72; } }

.e7-07.visible {
  animation:
    e7-07-opacity 0.5s cubic-bezier(0.42, 0, 1, 1) 0.167s both,
    e7-07-rotate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e7-07-translate 1s cubic-bezier(0.175, 1.40, 0.55, 1) both,
    e7-07-scale 0.667s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

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

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

/* =========================================
   TRANSICIÓN e7→e8 — 375×503
   Degradado blanco → gris. overflow hidden
   (clipsContent). e7-08 encima de e7-09.
   ========================================= */

.transicion-interseccional--e7-e8 {
  --escala-narrativa: 1;
  position: relative;
  height: auto;
  aspect-ratio: 375 / 503;
  overflow: hidden;
  pointer-events: auto;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-8-fondo)),
    rgb(var(--efigie-escena-9-fondo))
  );
}

.e7-09 {
  left: 46.133%;
  top: 44.135%;
  width: 45.333%;
  height: 50.696%;
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
}

.e7-08 {
  left: 4.267%;
  top: 15.418%;
  width: 41.867%;
  height: 21.670%;
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: var(--radio-mediano);
}

@keyframes e7-09-opacity { from { opacity: 0; } }
@keyframes e7-09-translate { from { translate: 0 calc(-63px * var(--escala-narrativa)); } }

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

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

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