/* ===========================================================================
   The film of estudio.html («Quiénes somos»): «Así hablamos» (FE), beside the
   three ways of speaking (.voz .trio), each one marked while the film tells it.
   Drawing: generador/peliculas/asi-hablamos.html; camera, cards, pills and
   hand: vibilog-paginas.css; the piece: vibilog-pieza.css. Played by
   vibilog-peliculas.js: ONE 15 s cycle, infinite (1 % = 150 ms). The base
   style is the frame at data-rest (13.5 s = 90 %): the three cards at once, a
   summary of the whole. The piece appears once and clicks once (in «Claro»):
   halves close in 1.08 % (162 ms), overshoot at T, settle at T+.42 %; edge
   from T−.12 % to T+.24 %, back at T+2.7 %.
     0–10    close on «Lo que suele oírse: automatización del flujo documental»
     11–15   a pill goes into the piece while the camera follows it · 16 click
     17      out comes «Dicho en claro: las facturas pasan a tu programa…»
     31→36   the numbers: 37 before 12 h · 42 after 3 h · 48 «9 h al mes»
     64→69   the conversation: 67 «¿Y si una factura viene mal?» · 72 the answer
     76→80   the invoice waits «pendiente» · the hand presses «Revisar» · 81 «revisada por ti ✓»
     82.4    «Tú decides» takes the button's place
     84→89   wide: the three together
   Shots (X, Y, S): jargon 24,14,2.1 · clear 70,14,1.7 · numbers 50,37,1.05 ·
   conversation 50,61.5,1.05 · wide
   =========================================================================== */
.loop-film.is-playing .film-stage *,.loop-film.is-playing .loop-cap span,.lf-asi-hablamos.is-playing .trio li::before{animation-duration:15s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,0,0,1)}
@keyframes lf-fade{0%{opacity:0}2.5%,96%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.loop-film *,.loop-film *::before{animation:none!important}}
@media print{.loop-film *,.loop-film *::before{animation:none!important}}
.film-asi-hablamos{--film-bg:#e3eaf6;--film-dot:#c6d2e8}
.e-jerga,.e-claro{top:6cqw;width:40cqw;height:17cqw}
.e-jerga{left:4cqw}.e-claro{left:56cqw}
.e-jerga .lf-lab,.e-claro .lf-lab,.e-num .lf-lab,.e-chat .lf-lab{left:2.6cqw;top:2.6cqw}
.rw .e-jerga b,.rw .e-claro b{left:2.6cqw;top:5.4cqw;width:34cqw;white-space:normal;font-size:2.35cqw;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.e-jerga b{color:#9aa4b2;text-decoration:line-through;text-decoration-color:#c2c9d4;text-decoration-thickness:.18cqw}
.e-claro b{color:#17202b}
.e-claro .lf-lab{color:#1f3fb8}
.e-vb{left:46.7cqw;top:11.2cqw;width:6.6cqw;border-radius:1.5cqw}
.e-p1{left:40.6cqw;top:13.8cqw}
.e-num{left:4cqw;top:28cqw;width:92cqw;height:20cqw}
.e-bl{left:2.6cqw;font-size:1.7cqw;color:#5d6b82}
.e-bl.b1{top:6.6cqw}.e-bl.b2{top:12.4cqw}
.e-bar{left:13cqw;height:3cqw;border-radius:.8cqw;transform-origin:0 50%}
.e-bar.r1{top:6.2cqw;width:44cqw;background:#e9b766}
.e-bar.r2{top:12cqw;width:11cqw;background:#2453ec}
.e-bv{font-size:2.1cqw;font-weight:800;font-variant-numeric:tabular-nums}
.e-bv.v1{left:58.6cqw;top:6.4cqw;color:#93600f}.e-bv.v2{left:25.6cqw;top:12.2cqw;color:#1f3fb8}
.e-sep{left:66cqw;top:4cqw;width:1px;height:12cqw;background:#e3e8ef}
.e-win{left:69.5cqw;top:4.4cqw;font-size:6.4cqw;font-weight:800;letter-spacing:-.04em;color:#1f3fb8;font-variant-numeric:tabular-nums}
.e-wl{left:69.5cqw;top:12.8cqw;font-size:1.8cqw;font-weight:650;color:#17202b}
.e-chat{left:4cqw;top:52cqw;width:92cqw;height:19cqw}
.e-msg{top:6cqw;padding:1.3cqw 2cqw;border-radius:2cqw;font-size:1.9cqw;font-weight:550;letter-spacing:-.01em}
.e-msg.m1{left:2.6cqw;background:#f1f3f8;color:#27364a;border-bottom-left-radius:.5cqw}
.e-msg.m2{right:2.6cqw;top:10.8cqw;background:#2453ec;color:#fff;border-bottom-right-radius:.5cqw}
.e-inv{left:2.6cqw;top:12.8cqw;height:3.8cqw}
.e-inv span{left:0;top:0;height:3.8cqw;padding:0 1.4cqw;border-radius:1.9cqw;font-size:1.5cqw;font-weight:650;line-height:3.8cqw}
.e-inv .p0{background:#fdf1dc;color:#7a4f0c;box-shadow:inset 0 0 0 .16cqw #ecc27f;opacity:0}
.e-inv .p1{background:#eaf0ff;color:#1f3fb8;box-shadow:inset 0 0 0 .16cqw #c3d2f7}
.e-btn{left:32.4cqw;top:12.8cqw;width:10.4cqw;height:3.8cqw;border-radius:1.9cqw;background:#17202b;text-align:center;font-size:1.5cqw;font-weight:700;line-height:3.8cqw;color:#fff;opacity:0}
.e-tag{left:32.4cqw;top:13.5cqw;font-size:1.8cqw;font-weight:750;color:#1f3fb8}
.e-cur{left:0;top:0}

.lf-asi-hablamos.is-playing .rw{animation-name:fe-cam,lf-fade}
.lf-asi-hablamos.is-playing .e-jerga b{animation-name:fe-jerga}
.lf-asi-hablamos.is-playing .e-p1{animation-name:fe-p1}
.lf-asi-hablamos.is-playing .e-vb{animation-name:fe-edge}
.lf-asi-hablamos.is-playing .e-vb .vb-l{animation-name:fe-l}
.lf-asi-hablamos.is-playing .e-vb .vb-r{animation-name:fe-r}
.lf-asi-hablamos.is-playing .e-claro{animation-name:fe-claro}
.lf-asi-hablamos.is-playing .e-num{animation-name:fe-num}
.lf-asi-hablamos.is-playing .e-bar.r1{animation-name:fe-r1}
.lf-asi-hablamos.is-playing .e-bv.v1{animation-name:fe-v1}
.lf-asi-hablamos.is-playing .e-bar.r2{animation-name:fe-r2}
.lf-asi-hablamos.is-playing .e-bv.v2{animation-name:fe-v2}
.lf-asi-hablamos.is-playing .e-win,.lf-asi-hablamos.is-playing .e-wl,.lf-asi-hablamos.is-playing .e-sep{animation-name:fe-win}
.lf-asi-hablamos.is-playing .e-chat{animation-name:fe-chat}
.lf-asi-hablamos.is-playing .e-msg.m1{animation-name:fe-m1}
.lf-asi-hablamos.is-playing .e-msg.m2{animation-name:fe-m2}
.lf-asi-hablamos.is-playing .e-btn{animation-name:fe-btn}
.lf-asi-hablamos.is-playing .e-inv .p0{animation-name:fe-q0}
.lf-asi-hablamos.is-playing .e-inv .p1{animation-name:fe-q1}
.lf-asi-hablamos.is-playing .e-tag{animation-name:fe-tag}
.lf-asi-hablamos.is-playing .e-cur{animation-name:fe-cur}
.lf-asi-hablamos.is-playing .loop-cap span:nth-child(1){animation-name:fe-c1}
.lf-asi-hablamos.is-playing .loop-cap span:nth-child(2){animation-name:fe-c2}
.lf-asi-hablamos.is-playing .loop-cap span:nth-child(3){animation-name:fe-c3}
.lf-asi-hablamos.is-playing .trio li:nth-child(1)::before{animation-name:fe-k1}
.lf-asi-hablamos.is-playing .trio li:nth-child(2)::before{animation-name:fe-k2}
.lf-asi-hablamos.is-playing .trio li:nth-child(3)::before{animation-name:fe-k3}

@keyframes fe-cam{
  0%,10%{transform:translate(50cqw,37.5cqw) scale(2.1) translate(-24cqw,-14.5cqw);animation-timing-function:cubic-bezier(.45,0,.35,1)}
  17%,31%{transform:translate(50cqw,37.5cqw) scale(1.7) translate(-70cqw,-14.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  36%,64%{transform:translate(50cqw,37.5cqw) scale(1.05) translate(-50cqw,-38cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  69%,84%{transform:translate(50cqw,37.5cqw) scale(1.05) translate(-50cqw,-61.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  89%,100%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-37.5cqw)}}
/* the jargon, then crossed out once it has been said in plain words */
@keyframes fe-jerga{0%,1.5%{opacity:0;color:#17202b;text-decoration-color:transparent}4%,17%{opacity:1;color:#17202b;text-decoration-color:transparent}20%,100%{opacity:1;color:#9aa4b2;text-decoration-color:#c2c9d4}}
@keyframes fe-p1{0%,10.5%{opacity:0;transform:none}11.3%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}14.6%{opacity:1;transform:translateX(7.6cqw)}15%,100%{opacity:0;transform:translateX(7.6cqw)}}
@keyframes fe-l{0%,14.92%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}16%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}16.42%,100%{transform:none}}
@keyframes fe-r{0%,14.92%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}16%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}16.42%,100%{transform:none}}
@keyframes fe-edge{0%,15.88%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}16.24%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}18.7%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes fe-claro{0%,16.8%{opacity:0;transform:translateX(-5cqw) scale(.92)}20%,100%{opacity:1;transform:none}}
@keyframes fe-num{0%,33%{opacity:0;transform:translateY(1.2cqw)}36.5%,100%{opacity:1;transform:none}}
@keyframes fe-r1{0%,37%{transform:scaleX(0)}41%,100%{transform:none}}
@keyframes fe-v1{0%,40%{opacity:0}42%,100%{opacity:1}}
@keyframes fe-r2{0%,43%{transform:scaleX(0)}46%,100%{transform:none}}
@keyframes fe-v2{0%,45.5%{opacity:0}47.5%,100%{opacity:1}}
@keyframes fe-win{0%,48%{opacity:0;transform:translateY(.8cqw)}51%,100%{opacity:1;transform:none}}
@keyframes fe-chat{0%,65%{opacity:0;transform:translateY(1.2cqw)}68%,100%{opacity:1;transform:none}}
@keyframes fe-m1{0%,67%{opacity:0;transform:translateY(.8cqw) scale(.96)}70%,100%{opacity:1;transform:none}}
@keyframes fe-m2{0%,72%{opacity:0;transform:translateY(.8cqw) scale(.96)}75%,100%{opacity:1;transform:none}}
/* the person decides: the hand presses «Revisar» */
/* the invoice waits «pendiente» with its button; the person reviews it, the button goes */
@keyframes fe-btn{0%,75.5%{opacity:0;transform:none}77%,80%{opacity:1;transform:none}80.6%{opacity:1;transform:scale(.94)}81.2%{opacity:1;transform:none}82.4%,100%{opacity:0;transform:none}}
@keyframes fe-q0{0%,75%{opacity:0}76.5%,80.8%{opacity:1}81.1%,100%{opacity:0}}
@keyframes fe-q1{0%,80.9%{opacity:0}81.4%,100%{opacity:1}}
@keyframes fe-tag{0%,82.4%{opacity:0;transform:translateX(-1cqw)}84.5%,100%{opacity:1;transform:none}}
@keyframes fe-cur{0%,76.5%{opacity:0;transform:translate(24cqw,74cqw)}77.5%{opacity:1;transform:translate(24cqw,74cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}80%,81.2%{opacity:1;transform:translate(40.9cqw,65.8cqw)}83.5%{opacity:0;transform:translate(41.5cqw,68cqw)}84%,100%{opacity:0;transform:translate(41.5cqw,68cqw)}}
@keyframes fe-c1{0%,30%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fe-c2{0%,31.5%{opacity:0;transform:translateY(4px)}33.5%,63%{opacity:1;transform:none}65%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fe-c3{0%,64.5%{opacity:0;transform:translateY(4px)}66.5%,100%{opacity:1;transform:none}}
@keyframes fe-k1{0%,1%{transform:scaleY(0)}3%,31%{transform:none}33%,100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes fe-k2{0%,32%{transform:scaleY(0)}34%,64%{transform:none}66%,100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes fe-k3{0%,65%{transform:scaleY(0)}67%,86%{transform:none}88%,100%{transform:scaleY(0);transform-origin:50% 100%}}

/* On a phone (~360 px): its own camera, closer and one card at a time (Codex, 28-sep), and the rest
   frame on «Dicho en claro», the heart of how we speak. Same timing as the desktop camera. */
@media(max-width:760px){
  .film-asi-hablamos .rw{transform:translate(50cqw,37.5cqw) scale(1.8) translate(-74cqw,-14.5cqw)}
  .lf-asi-hablamos.is-playing .rw{animation-name:fe-cam-m,lf-fade}
  .e-num,.e-chat{opacity:0}
  .lf-asi-hablamos.is-playing .e-num{animation-name:fe-num-m}
  .lf-asi-hablamos.is-playing .e-chat{animation-name:fe-chat-m}
  /* the conversation stacked, so the close shot holds it whole */
  .e-chat{top:50cqw;height:25cqw}
  .rw .e-msg.m2{right:auto;left:8cqw;top:11.8cqw;width:36cqw;white-space:normal;line-height:1.3}
  .e-inv,.e-btn{top:20.2cqw}.e-tag{top:20.9cqw}
  .lf-asi-hablamos.is-playing .e-cur{animation-name:fe-cur-m}
}
@keyframes fe-cur-m{0%,76.5%{opacity:0;transform:translate(24cqw,76cqw)}77.5%{opacity:1;transform:translate(24cqw,76cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}80%,81.2%{opacity:1;transform:translate(40.9cqw,71.6cqw)}83.5%{opacity:0;transform:translate(41.5cqw,73.4cqw)}84%,100%{opacity:0;transform:translate(41.5cqw,73.4cqw)}}
@keyframes fe-num-m{0%,33%{opacity:0;transform:translateY(1.2cqw)}36.5%,64%{opacity:1;transform:none}68%,100%{opacity:0;transform:none}}
@keyframes fe-chat-m{0%,65%{opacity:0;transform:translateY(1.2cqw)}68%,86%{opacity:1;transform:none}89%,100%{opacity:0;transform:none}}
@keyframes fe-cam-m{
  0%,10%{transform:translate(50cqw,37.5cqw) scale(2.1) translate(-24cqw,-14.5cqw);animation-timing-function:cubic-bezier(.45,0,.35,1)}
  17%,31%{transform:translate(50cqw,37.5cqw) scale(1.8) translate(-74cqw,-14.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  36%,46%{transform:translate(50cqw,37.5cqw) scale(1.6) translate(-36cqw,-38cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  50%,64%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-83cqw,-38cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  69%,86%{transform:translate(50cqw,37.5cqw) scale(1.9) translate(-30cqw,-62.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  90%,100%{transform:translate(50cqw,37.5cqw) scale(1.8) translate(-74cqw,-14.5cqw)}}