/* «La verónica», escena de la página en construcción de El Torito.
   🎬 Vídeos • Torito, 28-oct-2026. Contrato: _entregas/mediosmarlen/torito/2026-10-28-ENCARGO-construccion-web-videos.md,
   con su adenda.

   Este CSS pinta el estado final por sí solo: sin JavaScript se ve la pintura quieta, y los dos
   textos quedan como los pone la página. La animación solo existe mientras escena.js pone en
   #cx-pagina la clase .cx-armada (primer fotograma, en pausa) o .cx-corriendo (en marcha); al acabar
   o con final() las quita, y cada fotograma clave termina en el mismo valor que el estado final.

   Capas: la pintura (#cx-cuadro) vive en la celda #cx-escena. La tela (#cx-tela) es una capa fija
   que cubre la ventana entera en z 2: por encima de la pintura y de los dos textos, y por debajo
   del logo, el enlace y el botón de la página (z 10). Ningún ancestro de #cx-tela puede llevar
   transform, filter, perspective ni contain, porque romperían el position: fixed.
   De los textos solo se animan opacity y transform: su sitio, su color y su tamaño son de la página. */

#cx-escena{position:relative;overflow:hidden}
#cx-escena #cx-cuadro{position:absolute;inset:0;transform-origin:62% 70%;pointer-events:none}
/* El mismo encuadre que el cartel quieto de la página: en teléfono la pintura entera apoyada abajo;
   en dos columnas, a sangre. */
#cx-escena #cx-torero{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%}
@media (min-width:768px),(orientation:landscape) and (min-width:560px){
  #cx-escena #cx-torero{object-fit:cover;object-position:50% 40%}
}

/* La tela no existe en el estado final. */
#cx-escena #cx-tela{display:none;position:fixed;inset:0;height:100dvh;z-index:2;overflow:hidden;pointer-events:none;perspective:1100px}
#cx-escena .cx-pano{position:absolute;top:-18%;bottom:-18%;left:-12%;right:-12%;display:flex;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Cada franja enseña su trozo de la misma textura, así que juntas forman una sola tela. */
#cx-escena .cx-f{position:relative;flex:1 1 0;margin-right:-2px;background-repeat:no-repeat;background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--i) / (var(--n) - 1) * 100%) 0}
/* Detrás de las franjas, el color de su cara: por la rendija entre dos franjas no asoma el fondo. */
#cx-escena #cx-rosa{--cx-sombra:.55;background-color:#6E1424}
#cx-escena #cx-amarilla{--cx-sombra:.35;background-color:#C98A32}
#cx-escena #cx-rosa .cx-f{background-image:url(assets/tela-rosa.webp);background-color:#6E1424}
#cx-escena #cx-amarilla .cx-f{background-image:url(assets/tela-amarilla.webp);background-color:#C98A32}
/* El pliegue: cada franja se oscurece cuando la onda la aleja. */
#cx-escena .cx-f::after{content:"";position:absolute;inset:0;background:#1F1A18;opacity:0}

/* Armada o corriendo: la misma animación; armada la deja en pausa en su primer fotograma. */
#cx-pagina.cx-armada #cx-tela,#cx-pagina.cx-corriendo #cx-tela{display:block}
#cx-pagina.cx-armada #cx-cuadro,#cx-pagina.cx-corriendo #cx-cuadro{animation:cx-cuadro 6s linear both}
#cx-pagina.cx-armada #cx-rosa,#cx-pagina.cx-corriendo #cx-rosa{animation:cx-rosa 6s linear both}
#cx-pagina.cx-armada #cx-amarilla,#cx-pagina.cx-corriendo #cx-amarilla{animation:cx-amarilla 6s linear both}
#cx-pagina.cx-armada #cx-titulo,#cx-pagina.cx-corriendo #cx-titulo{animation:cx-titulo 6s linear both}
#cx-pagina.cx-armada #cx-vuelva,#cx-pagina.cx-corriendo #cx-vuelva{animation:cx-vuelva 6s linear both}
#cx-pagina.cx-armada #cx-escena .cx-f,#cx-pagina.cx-corriendo #cx-escena .cx-f{animation:cx-onda 1s ease-in-out calc(var(--i) * -.07s) infinite alternate both}
#cx-pagina.cx-armada #cx-escena .cx-f::after,#cx-pagina.cx-corriendo #cx-escena .cx-f::after{animation:cx-pliegue 1s ease-in-out calc(var(--i) * -.07s) infinite alternate both}
#cx-pagina.cx-armada #cx-cuadro,#cx-pagina.cx-armada #cx-rosa,#cx-pagina.cx-armada #cx-amarilla,#cx-pagina.cx-armada #cx-titulo,#cx-pagina.cx-armada #cx-vuelva,#cx-pagina.cx-armada #cx-escena .cx-f,#cx-pagina.cx-armada #cx-escena .cx-f::after{animation-play-state:paused}

/* Los tiempos, en segundos de los 6: 0 a 0,8 el torero cita y la cámara se acerca; 0,8 a 1,75 la
   cara rosa barre la pantalla desde el lado del torero; 1,75 a 2,6 la tela gira y enseña la cara
   amarilla, que respira hasta 3,1; 3,1 a 4,2 media verónica: la tela vuelve hacia el torero y
   descubre en su sitio, primero, «Página en construcción» (de 3,5 a 4 s) y después al torero
   quieto; 4,4 a 5 entra «Vuelva pronto.»; de 5 a 6 el final quieto. El título se enciende a las
   2,65 s, ya tapado por la tela amarilla: lo que lo enseña es la tela al irse. */
@keyframes cx-cuadro{
  0%{transform:scale(1);animation-timing-function:cubic-bezier(.3,0,.2,1)}
  25%{transform:scale(1.045)}
  51.67%{transform:scale(1.02);animation-timing-function:cubic-bezier(.2,0,0,1)}
  83.33%,100%{transform:scale(1)}
}
@keyframes cx-rosa{
  0%,13.33%{opacity:1;transform:translateX(175vw) rotateY(-20deg) rotateZ(-3deg) skewX(-12deg);animation-timing-function:cubic-bezier(.45,.05,.3,1)}
  29.17%{opacity:1;transform:translateX(0) rotateY(-4deg) rotateZ(0deg) skewX(0deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  36.67%{opacity:1;transform:translateX(-3vw) rotateY(90deg) rotateZ(0deg) skewX(0deg)}
  36.68%,100%{opacity:0;transform:translateX(-3vw) rotateY(90deg) rotateZ(0deg) skewX(0deg)}
}
@keyframes cx-amarilla{
  0%,36.67%{opacity:0;transform:translateX(-3vw) rotateY(-90deg) rotateZ(0deg) skewX(0deg)}
  36.68%{opacity:1;transform:translateX(-3vw) rotateY(-90deg) rotateZ(0deg) skewX(0deg);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  43.33%{opacity:1;transform:translateX(0) rotateY(0deg) rotateZ(0deg) skewX(0deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  51.67%{opacity:1;transform:translateX(-3vw) rotateY(-4deg) rotateZ(0deg) skewX(0deg);animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  70%,100%{opacity:1;transform:translateX(175vw) rotateY(-10deg) rotateZ(-3deg) skewX(12deg)}
}
@keyframes cx-titulo{
  0%,44.17%{opacity:0;transform:translateY(.25em)}
  45.83%{opacity:1;transform:translateY(.25em);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  66.67%,100%{opacity:1;transform:translateY(0)}
}
@keyframes cx-vuelva{
  0%,73.33%{opacity:0;transform:translateY(.5em);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  83.33%,100%{opacity:1;transform:translateY(0)}
}
@keyframes cx-onda{from{transform:translateY(-2%)}to{transform:translateY(2%)}}
@keyframes cx-pliegue{from{opacity:0}to{opacity:var(--cx-sombra)}}

@media (prefers-reduced-motion:reduce){
  #cx-pagina.cx-armada #cx-tela,#cx-pagina.cx-corriendo #cx-tela{display:none}
  #cx-pagina.cx-armada #cx-cuadro,#cx-pagina.cx-corriendo #cx-cuadro,#cx-pagina.cx-armada #cx-titulo,#cx-pagina.cx-corriendo #cx-titulo,#cx-pagina.cx-armada #cx-vuelva,#cx-pagina.cx-corriendo #cx-vuelva{animation:none}
}