/* ===========================================================================
   «Lo que repites cada día también tiene un coste» · del desorden al centro.
   Six tools piled up, crooked and shaking, tangled in amber lines, a clock
   racing and «6 h 25 min a la semana». The Vibilog piece drops on the pile and
   clicks; the tools fly out to a ring around it, blue links draw from it to
   each one, the amber times turn into green ticks, the clock stops and the
   week reads «~~6 h 25 min~~ → 35 min». Data pulses run along the links while
   it holds; then the scene fades out and the loop starts again.

   Played like the folder films: CSS keyframes that exist only under
   .cost-film.is-playing, driven through getAnimations() by vibilog-peliculas.js (data-rest="6000").
   ONE 10 s cycle, iteration-count infinite (1 % = 100 ms).
   EXCEPTION to the folder rule «100 % = base»: here 100 % is the fade to empty
   (so the jump back to 0 % never shows). The BASE style is the ordered rest,
   i.e. the 60–88 % hold: that is what shows without JS, with reduced motion,
   in print, and where the script starts when the scene is already on screen.
   NO animation-delay anywhere: every stagger lives inside its own keyframe, so
   seeking every clip to one time (0 or 6000 ms) keeps them all in phase.
   Geometry: the stage is 100 × 75 cqw and the SVG viewBox is 0 0 100 75, so one
   SVG unit is one cqw. Only <path> with pathLength=1 is drawn by dashoffset.

     0–4      fade in from empty
     0–30     chaos: tools shake, the knot crawls, the clock races, amber times
     26–33    the piece drops · click T = 34 % · ring 34–44
     34–38    the knot fades
     36–52    each tool flies to its place (0.6 % apart), settling with a hair of overshoot
     44–55    blue links draw OUT of the piece, one after another (1.2 % apart);
              each tool's amber time turns into a green tick as its link arrives
     55–61    the clock stops · «perdidas» → «→ 35 min»
     60–88    ordered hold, a pulse runs twice along each link (1 % apart)
     90–100   fade to empty
   =========================================================================== */

.cost-film{margin:0;min-width:0;max-width:520px;width:100%;justify-self:end}
.cost-stage{aspect-ratio:4/3;font-size:15px;line-height:1.3;border-radius:14px;--film-bg:#e3eaf6;--film-dot:#c6d2e8}
.cost-scene{position:absolute;inset:0}
.cost-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cost-knot{fill:none;stroke:#dca24a;stroke-width:.45;stroke-linecap:round;stroke-dasharray:1.6 1.1;opacity:0}
.cost-link{fill:none;stroke:#7d97ef;stroke-width:.4;stroke-dasharray:1;stroke-dashoffset:0}
.cost-pulse{fill:none;stroke:#244ce8;stroke-width:.9;stroke-linecap:round;stroke-dasharray:.08 1.2;stroke-dashoffset:.08}

.cost-tile{position:absolute;z-index:1;width:20cqw;height:14cqw;border-radius:2cqw;background:#fff;box-shadow:0 .2cqw .5cqw #17202b12,0 2.2cqw 4cqw -2cqw #243f7352}
.cost-tile.t1{left:7cqw;top:6cqw}.cost-tile.t2{left:73cqw;top:6cqw}
.cost-tile.t3{left:2cqw;top:29cqw}.cost-tile.t4{left:78cqw;top:29cqw}
.cost-tile.t5{left:7cqw;top:51cqw}.cost-tile.t6{left:73cqw;top:51cqw}
.cost-tin{display:grid;place-items:center;align-content:center;gap:.8cqw;height:100%}
.cost-tin svg{width:5.4cqw;height:5.4cqw;fill:none;stroke:#5d6b82;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cost-name{font-size:clamp(9.5px,2.6cqw,13px);font-weight:600;color:#27364a;white-space:nowrap}
.cost-t,.cost-ok{position:absolute;top:-1.6cqw;right:-1.6cqw}
.cost-t{padding:.5cqw 1.2cqw;border-radius:99px;font-size:clamp(8.5px,2.1cqw,11px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:#8a5a10;background:#fdf1dc;box-shadow:inset 0 0 0 1px #ecc27f;opacity:0}
.cost-ok{display:grid;place-items:center;width:max(16px,4.6cqw);aspect-ratio:1;border-radius:50%;background:#2f8a5b;box-shadow:0 0 0 .5cqw #e3eaf6}
.cost-ok svg{width:62%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.cost-vb{z-index:3;left:42cqw;top:27cqw;width:16cqw}
.cost-ring{position:absolute;z-index:2;left:42cqw;top:27cqw;width:16cqw;height:16cqw;border-radius:50%;box-shadow:inset 0 0 0 .5cqw #244ce8;opacity:0}

.cost-total{position:absolute;left:0;right:0;bottom:2.4cqw;margin:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.4em .45em;font-size:clamp(12px,3.4cqw,17px);font-weight:600;color:#27364a}
.cost-clock svg{display:block;width:1.25em;height:1.25em;fill:none;stroke:#5d6b82;stroke-width:1.8;stroke-linecap:round}
.cost-clock path{transform-box:view-box;transform-origin:50% 50%}
.cost-hh{transform:rotate(90deg)}.cost-mh{transform:rotate(60deg)}
.cost-was{position:relative;text-decoration:none;color:#8a95a6}
.cost-was::after{content:"";position:absolute;left:-.1em;right:-.1em;top:52%;height:2px;border-radius:2px;background:currentColor;transform-origin:left}
/* one slot, two words stacked: «perdidas» in the chaos, «→ 35 min» once ordered, so the line never changes width */
.cost-slot{display:inline-grid}
.cost-slot>*{grid-area:1/1;justify-self:start;white-space:nowrap}
.cost-lost{color:#a8660c;opacity:0}
.cost-now{color:#2f8a5b;font-weight:700}
.cost-per{color:#5d6b82;font-weight:500}

.cost-foot{display:flex;align-items:center;gap:12px;margin-top:12px}
.cost-cap{margin:0;font-size:12px;color:#606976}

@container (max-width:400px){
  .t3 .cost-t,.t4 .cost-t,.t6 .cost-t{visibility:hidden}
  .cost-tin{gap:.4cqw}
}
@media(max-width:1100px){.cost-film{justify-self:start}}

/* ------------------------------------------------------------------ motion */
.cost-film.is-playing *,.cost-film.is-playing *::before,.cost-film.is-playing *::after{animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,0,0,1)}
.cost-film.is-playing .cost-scene{animation-name:cost-dip;animation-timing-function:linear}
.cost-film.is-playing .cost-knot{animation-name:cost-knot;animation-timing-function:linear}
.cost-film.is-playing .cost-link{animation-timing-function:cubic-bezier(.4,0,.2,1)}
.cost-film.is-playing .l1{animation-name:cost-l1}.cost-film.is-playing .l2{animation-name:cost-l2}.cost-film.is-playing .l3{animation-name:cost-l3}
.cost-film.is-playing .l4{animation-name:cost-l4}.cost-film.is-playing .l5{animation-name:cost-l5}.cost-film.is-playing .l6{animation-name:cost-l6}
.cost-film.is-playing .t1 .cost-t{animation-name:cost-amb1}.cost-film.is-playing .t1 .cost-ok{animation-name:cost-ok1}
.cost-film.is-playing .t2 .cost-t{animation-name:cost-amb2}.cost-film.is-playing .t2 .cost-ok{animation-name:cost-ok2}
.cost-film.is-playing .t3 .cost-t{animation-name:cost-amb3}.cost-film.is-playing .t3 .cost-ok{animation-name:cost-ok3}
.cost-film.is-playing .t4 .cost-t{animation-name:cost-amb4}.cost-film.is-playing .t4 .cost-ok{animation-name:cost-ok4}
.cost-film.is-playing .t5 .cost-t{animation-name:cost-amb5}.cost-film.is-playing .t5 .cost-ok{animation-name:cost-ok5}
.cost-film.is-playing .t6 .cost-t{animation-name:cost-amb6}.cost-film.is-playing .t6 .cost-ok{animation-name:cost-ok6}
.cost-film.is-playing .cost-pulse{animation-timing-function:linear}
.cost-film.is-playing .p1{animation-name:cost-p1}.cost-film.is-playing .p2{animation-name:cost-p2}.cost-film.is-playing .p3{animation-name:cost-p3}
.cost-film.is-playing .p4{animation-name:cost-p4}.cost-film.is-playing .p5{animation-name:cost-p5}.cost-film.is-playing .p6{animation-name:cost-p6}
.cost-film.is-playing .t1{animation-name:cost-t1}.cost-film.is-playing .t2{animation-name:cost-t2}.cost-film.is-playing .t3{animation-name:cost-t3}
.cost-film.is-playing .t4{animation-name:cost-t4}.cost-film.is-playing .t5{animation-name:cost-t5}.cost-film.is-playing .t6{animation-name:cost-t6}
.cost-film.is-playing .t1 .cost-tin,.cost-film.is-playing .t3 .cost-tin,.cost-film.is-playing .t5 .cost-tin{animation-name:cost-shake-a;animation-timing-function:ease-in-out}
.cost-film.is-playing .t2 .cost-tin,.cost-film.is-playing .t4 .cost-tin,.cost-film.is-playing .t6 .cost-tin{animation-name:cost-shake-b;animation-timing-function:ease-in-out}
.cost-film.is-playing .cost-vb{animation-name:cost-vb,cost-edge}
.cost-film.is-playing .cost-vb .vb-l{animation-name:cost-l}
.cost-film.is-playing .cost-vb .vb-r{animation-name:cost-r}
.cost-film.is-playing .cost-ring{animation-name:cost-ring}
.cost-film.is-playing .cost-hh{animation-name:cost-hh}
.cost-film.is-playing .cost-mh{animation-name:cost-mh}
.cost-film.is-playing .cost-was{animation-name:cost-was}
.cost-film.is-playing .cost-was::after{animation-name:cost-strike}
.cost-film.is-playing .cost-now{animation-name:cost-now}
.cost-film.is-playing .cost-lost{animation-name:cost-lost}

@keyframes cost-dip{0%{opacity:0}4%,90%{opacity:1}100%{opacity:0}}
@keyframes cost-knot{0%{opacity:1;stroke-dashoffset:0}32%{opacity:1;stroke-dashoffset:-9}38%,100%{opacity:0;stroke-dashoffset:-11}}
@keyframes cost-l1{0%,44%{stroke-dashoffset:1}49%,100%{stroke-dashoffset:0}}
@keyframes cost-l2{0%,45.2%{stroke-dashoffset:1}50.2%,100%{stroke-dashoffset:0}}
@keyframes cost-l3{0%,46.4%{stroke-dashoffset:1}51.4%,100%{stroke-dashoffset:0}}
@keyframes cost-l4{0%,47.6%{stroke-dashoffset:1}52.6%,100%{stroke-dashoffset:0}}
@keyframes cost-l5{0%,48.8%{stroke-dashoffset:1}53.8%,100%{stroke-dashoffset:0}}
@keyframes cost-l6{0%,50%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes cost-p1{0%,60%{stroke-dashoffset:.08}68%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}68.1%,74%{stroke-dashoffset:.08}82%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}82.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-p2{0%,61%{stroke-dashoffset:.08}69%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}69.1%,75%{stroke-dashoffset:.08}83%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}83.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-p3{0%,62%{stroke-dashoffset:.08}70%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}70.1%,76%{stroke-dashoffset:.08}84%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}84.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-p4{0%,63%{stroke-dashoffset:.08}71%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}71.1%,77%{stroke-dashoffset:.08}85%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}85.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-p5{0%,64%{stroke-dashoffset:.08}72%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}72.1%,78%{stroke-dashoffset:.08}86%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}86.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-p6{0%,65%{stroke-dashoffset:.08}73%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}73.1%,79%{stroke-dashoffset:.08}87%{stroke-dashoffset:-1;animation-timing-function:steps(1,end)}87.1%,100%{stroke-dashoffset:.08}}
@keyframes cost-t1{0%,36%{transform:translate(25cqw,17cqw) rotate(-10deg)}45%{transform:translate(-.5cqw,-.4cqw) rotate(-.8deg)}49%,100%{transform:none}}
@keyframes cost-t2{0%,36.6%{transform:translate(-26cqw,13cqw) rotate(13deg)}45.6%{transform:translate(.5cqw,-.3cqw) rotate(.8deg)}49.6%,100%{transform:none}}
@keyframes cost-t3{0%,37.2%{transform:translate(28cqw,8cqw) rotate(6deg)}46.2%{transform:translate(-.5cqw,-.2cqw) rotate(-.6deg)}50.2%,100%{transform:none}}
@keyframes cost-t4{0%,37.8%{transform:translate(-28cqw,6cqw) rotate(-12deg)}46.8%{transform:translate(.5cqw,-.2cqw) rotate(.8deg)}50.8%,100%{transform:none}}
@keyframes cost-t5{0%,38.4%{transform:translate(30cqw,-8cqw) rotate(9deg)}47.4%{transform:translate(-.5cqw,.2cqw) rotate(-.6deg)}51.4%,100%{transform:none}}
@keyframes cost-t6{0%,39%{transform:translate(-29cqw,-22cqw) rotate(-5deg)}48%{transform:translate(.5cqw,.4cqw) rotate(.5deg)}52%,100%{transform:none}}
@keyframes cost-shake-a{0%{transform:none}5%{transform:rotate(2.2deg)}10%{transform:rotate(-1.8deg)}15%{transform:rotate(2deg)}20%{transform:rotate(-2.2deg)}25%{transform:rotate(1.6deg)}30%,100%{transform:none}}
@keyframes cost-shake-b{0%{transform:none}5%{transform:rotate(-2deg)}10%{transform:rotate(2.2deg)}15%{transform:rotate(-1.6deg)}20%{transform:rotate(2deg)}25%{transform:rotate(-1.8deg)}30%,100%{transform:none}}
@keyframes cost-amb1{0%,47.5%{opacity:1;transform:none}49.5%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-amb2{0%,48.7%{opacity:1;transform:none}50.7%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-amb3{0%,49.9%{opacity:1;transform:none}51.9%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-amb4{0%,51.1%{opacity:1;transform:none}53.1%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-amb5{0%,52.3%{opacity:1;transform:none}54.3%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-amb6{0%,53.5%{opacity:1;transform:none}55.5%,100%{opacity:0;transform:scale(.7)}}
@keyframes cost-ok1{0%,48.5%{opacity:0;transform:scale(.4)}50.5%{opacity:1;transform:scale(1.12)}52%,100%{opacity:1;transform:none}}
@keyframes cost-ok2{0%,49.7%{opacity:0;transform:scale(.4)}51.7%{opacity:1;transform:scale(1.12)}53.2%,100%{opacity:1;transform:none}}
@keyframes cost-ok3{0%,50.9%{opacity:0;transform:scale(.4)}52.9%{opacity:1;transform:scale(1.12)}54.4%,100%{opacity:1;transform:none}}
@keyframes cost-ok4{0%,52.1%{opacity:0;transform:scale(.4)}54.1%{opacity:1;transform:scale(1.12)}55.6%,100%{opacity:1;transform:none}}
@keyframes cost-ok5{0%,53.3%{opacity:0;transform:scale(.4)}55.3%{opacity:1;transform:scale(1.12)}56.8%,100%{opacity:1;transform:none}}
@keyframes cost-ok6{0%,54.5%{opacity:0;transform:scale(.4)}56.5%{opacity:1;transform:scale(1.12)}58%,100%{opacity:1;transform:none}}
@keyframes cost-vb{0%,26%{opacity:0;transform:translateY(-14cqw) scale(.8)}26.6%{opacity:1;transform:translateY(-13cqw) scale(.81)}31%{opacity:1;transform:translateY(.5cqw) scale(1.02)}33%,100%{opacity:1;transform:none}}
@keyframes cost-edge{0%,33.8%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}34.4%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}38.5%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes cost-l{0%,32.2%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}34%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}34.7%,100%{transform:none}}
@keyframes cost-r{0%,32.2%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}34%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}34.7%,100%{transform:none}}
@keyframes cost-ring{0%,34%{opacity:0;transform:scale(.6)}35%{opacity:.6;transform:scale(.8)}44%,100%{opacity:0;transform:scale(3.4)}}
@keyframes cost-hh{0%{transform:rotate(0deg);animation-timing-function:linear}34%{transform:rotate(2160deg);animation-timing-function:cubic-bezier(.2,0,0,1)}56%,100%{transform:rotate(2250deg)}}
@keyframes cost-mh{0%{transform:rotate(0deg);animation-timing-function:linear}34%{transform:rotate(4320deg);animation-timing-function:cubic-bezier(.2,0,0,1)}56%,100%{transform:rotate(4380deg)}}
@keyframes cost-was{0%,56%{color:#a8660c}59%,100%{color:#8a95a6}}
@keyframes cost-strike{0%,56%{transform:scaleX(0)}59%,100%{transform:none}}
@keyframes cost-now{0%,58%{opacity:0;transform:translateX(-1cqw)}61%,100%{opacity:1;transform:none}}
@keyframes cost-lost{0%,55%{opacity:1}57.5%,100%{opacity:0}}

@media print{.cost-film *,.cost-film *::before,.cost-film *::after{animation:none!important}}