/* ==========================================================================
   CINE — el acomodo de las "entradas de película" (las mueven nucleo/cine.js y
   cine-cuento.js). Aquí solo va la colocación. Cómo se VEN el letrero, el
   estallido y el fondo lo pone cada tema en su tema.css.
   ========================================================================== */
/* (con #entrada para ganarle a los temas que acomodan a todos los hijos de la entrada) */
#entrada > .cine{
  position:absolute; inset:0; z-index:5;
  overflow:hidden;
  cursor:pointer;                 /* un toque se salta la escena */
  -webkit-tap-highlight-color:transparent;
}
/* El escenario limpio: tapa el letrero de "Para…" y el gancho. Aparece cuando el humo ya cubrió todo. */
.cine__fondo{ position:absolute; inset:0; opacity:0; background:var(--papel); }
.cine__fondo.listo{ opacity:1; }

/* ── escena "aparicion": la ilustración del festejado sin él, y encima un lienzo donde él aparece ── */
.cine__relleno{ position:absolute; inset:-34px; background:center / cover no-repeat; filter:blur(22px) brightness(.78); opacity:0; }
.cine__camara{ position:absolute; top:0; opacity:0; transform-origin:50% 40%; will-change:transform; }
.cine--listo .cine__relleno,.cine--listo .cine__camara{ opacity:1; }
.cine__plato,.cine__monito{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* escena "video": el clip llena la pantalla (en pantallas anchas se queda de pie, al centro) */
.cine__camara--video{ left:50%; width:min(100%, 56.25dvh + 40px); height:100%; transform:translateX(-50%); }
.cine__video{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }

/* aquí el festejado llena la pantalla: el letrero va ABAJO, a sus pies, y el estallido chico, en el cielo */
.cine--llegada .cine__cartel,.cine--cuento .cine__cartel{ top:auto; bottom:max(.8rem, env(safe-area-inset-bottom)); transform:translate(-50%,170%) rotate(-2deg); }
.cine--llegada .cine__cartel.listo,.cine--cuento .cine__cartel.listo{ transform:translate(-50%,0) rotate(-2deg); }
.cine--llegada .cine__grito{ width:100px; height:100px; }

.cine__humo{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* El estallido y el letrero: salen con el aterrizaje */
.cine__grito,.cine__cartel{ position:absolute; margin:0; opacity:0; pointer-events:none; }
.cine__grito{
  width:132px; height:132px;
  display:grid; place-items:center;
  transform:scale(.2) rotate(-30deg);
}
.cine__grito.listo{ opacity:1; transform:scale(1) rotate(-11deg); transition:transform .32s cubic-bezier(.2,1.7,.4,1), opacity .08s linear; }
.cine__cartel{
  left:50%; top:13%;
  width:max-content; max-width:86%;
  text-align:center;
  transform:translate(-50%,-140%) rotate(-3deg);
}
.cine__cartel.listo{ opacity:1; transform:translate(-50%,0) rotate(-3deg); transition:transform .45s cubic-bezier(.2,1.5,.4,1) .12s, opacity .12s linear .12s; }

/* La salida: la cámara se acerca mientras la entrada se desvanece y aparece la invitación */
.entrada.cine--sale{
  transform:scale(1.16);
  transition:transform .9s cubic-bezier(.3,0,.2,1), opacity .7s ease, visibility .7s;
}