/* =========================================
   NARRATIVA — escena 2 (e2)
   Base 375 × 3849. Fondo sólido escena-3. Sin transición hacia e3.
   HTML: narrativa-e2.ejs. Triggers de llamadas y e2-04: ajustes a mano.
   ========================================= */

.narrativa-e2 {
  aspect-ratio: 375 / 3849;
  overflow: visible;
  background-color: rgb(var(--efigie-escena-3-fondo));
}

/* =========================================
   POSICIONAMIENTO — Escena 2
   ========================================= */

.e2-01 {
  left: 0%;
  top: -0.02%;
  width: 100%;
  height: 14.6%;
}

.e2-llamada-01 {
  left: 45.33%;
  top: 11.1%;
  width: 42.4%;
  transform-origin: 100% 50%;
}

.e2-02 {
  left: 0%;
  top: 29.44%;
  width: 100%;
  height: 11.95%;
}

.e2-03 {
  left: 4.27%;
  top: 13.98%;
  width: 91.47%;
  height: 15.82%;
}

.e2-llamada-02 {
  left: -0.53%;
  top: 27.83%;
  width: 36%;
  translate: calc(-133px * var(--escala-narrativa)) 0;
}

.e2-05,
.e2-06 {
  left: -128.53%;
  top: 52.1%;
  width: 357.07%;
  height: 34.79%;
}

.e2-04 {
  left: 3.95%;
  top: 41.0%;
  width: 82.93%;
  height: 12.12%;
  rotate: 30deg;
}

.e2-llamada-03 {
  left: 69.6%;
  top: 53.55%;
  width: 30.93%;
  translate: calc(114px * var(--escala-narrativa)) 0;
}

.e2-llamada-03 .llamada__texto {
  white-space: pre-line;
}

.e2-o01 {
  left: 11.2%;
  top: 65.74%;
  width: 77.87%;
  height: 7.48%;
}

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

.e2-01 {
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

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

.e2-05,
.e2-06 {
  border-radius: 50%;
  overflow: hidden;
}

.e2-06 {
  opacity: 0.5;
  mix-blend-mode: darken;
}

.e2-o01 {
  border: var(--stroke-llamadas) solid var(--color-alto-contraste-claro);
  border-radius: 50%;
  overflow: hidden;
}

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

@keyframes e2-llamada-01-opacity { from { opacity: 0; } }
@keyframes e2-llamada-01-rotate { from { rotate: -15deg; } }

.e2-llamada-01.visible {
  animation:
    e2-llamada-01-opacity 0.55s cubic-bezier(0.42, 0, 1, 1) both,
    e2-llamada-01-rotate 1s cubic-bezier(0.34, 1.30, 0.64, 1) both;
}

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

.e2-02.visible {
  animation:
    e2-02-opacity 0.403s cubic-bezier(0.5, 0, 0.5, 1) both,
    e2-02-translate 0.55s cubic-bezier(0, 0, 0.58, 1) both;
}

@keyframes e2-03-opacity { from { opacity: 0; } }
@keyframes e2-03-scale { from { scale: 1.2; } }

.e2-03.visible {
  animation:
    e2-03-opacity 0.501s cubic-bezier(0.5, 0, 0.5, 1) both,
    e2-03-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e2-llamada-02-translate {
  from { translate: calc(-133px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e2-llamada-02.visible {
  animation: e2-llamada-02-translate 0.55s cubic-bezier(0.42, 0, 0.58, 1) both;
}

@keyframes e2-05-loop {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

.e2-05 {
  animation: e2-05-loop 10s linear infinite;
}

@keyframes e2-04-opacity { from { opacity: 0; } }
@keyframes e2-04-rotate {
  from { rotate: 60deg; }
  to { rotate: 30deg; }
}

.e2-04.visible {
  animation:
    e2-04-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e2-04-rotate 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes e2-06-loop {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.e2-06 {
  animation: e2-06-loop 9s linear infinite;
}

@keyframes e2-llamada-03-translate {
  from { translate: calc(114px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e2-llamada-03.visible {
  animation: e2-llamada-03-translate 0.55s cubic-bezier(0.42, 0, 0.58, 1) both;
}

@keyframes e2-o01-loop {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.e2-o01 {
  animation: e2-o01-loop 6s linear infinite;
}