/* KDB loader - everything the component needs to render. Paths are relative to this stylesheet, so the folder can be dropped anywhere. */ :root{ --kdb-frame:url('./kdb-logo-outer-square.svg'); /* container silhouette */ --kdb-counters:url('./kdb-logo-counters.svg'); /* the K/D/B end mark */ } .kdb-loader{position:fixed;inset:0;z-index:9999;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; will-change:transform;transition:transform .95s cubic-bezier(.76,0,.24,1)} .kdb-loader.kdb-out{transform:translateY(-100%);pointer-events:none} /* scaled as one unit for the push-in; transform-origin is set in JS to the head anchor so his head never moves while the frame breathes */ .kdb-push{position:absolute;inset:0;will-change:transform} /* the container. Its silhouette is the KDB logo's outer contour adapted to a square: corner curvature kept at its original scale, the extra height taken up by the straight runs, and the four corners left deliberately unequal. */ .kdb-stage{position:absolute;overflow:hidden;background:#fff; -webkit-mask:var(--kdb-frame) center/contain no-repeat; mask:var(--kdb-frame) center/contain no-repeat; transition:opacity .30s cubic-bezier(.4,0,.2,1)} .kdb-stage .kdb-f{position:absolute;opacity:0;transition:opacity .06s linear} .kdb-stage .kdb-f.on{opacity:1} /* Baked builds need neither of these - the edge fill is painted into each frame. They are kept so the same file also drives an unbaked source set. */ .kdb-blur{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover; filter:blur(30px) saturate(1.25) brightness(1.06);z-index:0} .kdb-tile{position:absolute;inset:0;z-index:0;pointer-events:none} .kdb-tile .kdb-t{position:absolute;display:block} .kdb-loader[data-fill=mirror] .kdb-blur{display:none} .kdb-loader[data-fill=blur] .kdb-tile{display:none} .kdb-loader[data-fill=none] .kdb-blur, .kdb-loader[data-fill=none] .kdb-tile{display:none} /* The mark: the K/D/B counters, each its own masked layer so they can be tossed in one at a time. All four SVGs share the logo's viewBox, so at rest they compose back into exactly the original mark. */ .kdb-logo{position:absolute;transform:translate(-50%,-50%); opacity:0;pointer-events:none;transition:opacity .26s linear} .kdb-loader.kdb-filled .kdb-logo{opacity:1} .kdb-c{position:absolute;inset:0;display:block;background:#000; transform-origin:50% 100%; /* contact edge is the base */ -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; opacity:0;will-change:transform,opacity} /* one hand, one sweep: same direction for all, only the amount varies */ .kdb-c:nth-child(1){--spin:1.00} .kdb-c:nth-child(2){--spin:0.78} .kdb-c:nth-child(3){--spin:1.34} .kdb-c:nth-child(4){--spin:1.12} .kdb-c-k {-webkit-mask-image:url('./kdb-counter-k.svg') ;mask-image:url('./kdb-counter-k.svg')} .kdb-c-d {-webkit-mask-image:url('./kdb-counter-d.svg') ;mask-image:url('./kdb-counter-d.svg')} .kdb-c-b1{-webkit-mask-image:url('./kdb-counter-b1.svg');mask-image:url('./kdb-counter-b1.svg')} .kdb-c-b2{-webkit-mask-image:url('./kdb-counter-b2.svg');mask-image:url('./kdb-counter-b2.svg')} /* Rolled in from the left, like a die across a table. The read comes from rotation being COUPLED to travel - it turns because it is moving, not because it is being pulled - and from the turn rate decaying as it loses speed. It crosses with about 1.5 turns, drops onto the line, tumbles twice with shrinking hops, tips once more, and stops square. Pivot is the base, not the centre, so each tip rocks over an edge rather than spinning in air. */ /* Three fall profiles. Every keyframe below is SAMPLED FROM A SIMULATION - constant gravity, a coefficient of restitution at each contact, friction on the horizontal, damping on the rotation - not hand-tuned beziers. That is why the timing function is linear: the curve is already in the numbers. Swap profiles with data-mark on .kdb-loader. press e=0.045 one contact - letterpress type. The weight reads as a refusal to bounce. chip e=0.28 two contacts - poker chip: one bounce, a small second, then it slides a little as it seats. stone e=0.42 three - a stone skipping lightly into place. */ @keyframes kdb-press{ 0%{opacity:0; transform:translate3d(0.00%,-61.99%,0)} 6%{opacity:1} 2.2%{transform:translate3d(0.00%,-61.57%,0)} 4.6%{transform:translate3d(0.00%,-60.38%,0)} 6.7%{transform:translate3d(0.00%,-58.68%,0)} 9.2%{transform:translate3d(0.00%,-56.05%,0)} 11.6%{transform:translate3d(0.00%,-52.65%,0)} 13.7%{transform:translate3d(0.00%,-48.99%,0)} 16.2%{transform:translate3d(0.00%,-44.14%,0)} 18.6%{transform:translate3d(0.00%,-38.53%,0)} 20.8%{transform:translate3d(0.00%,-32.90%,0)} 23.2%{transform:translate3d(0.00%,-25.85%,0)} 25.3%{transform:translate3d(0.00%,-18.93%,0)} 27.8%{transform:translate3d(0.00%,-10.43%,0)} 30.2%{transform:translate3d(0.00%,-1.17%,0)} 32.3%{transform:translate3d(0.00%,-0.09%,0)} 100.0%{opacity:1; transform:translate3d(0,0,0)} } @keyframes kdb-chip{ 0%{opacity:0; transform:translate3d(0.02%,-57.99%,0) rotate(-4.95deg)} 6%{opacity:1} 2.3%{transform:translate3d(0.20%,-57.15%,0) rotate(-4.34deg)} 4.6%{transform:translate3d(0.36%,-54.96%,0) rotate(-3.81deg)} 6.9%{transform:translate3d(0.50%,-51.39%,0) rotate(-3.34deg)} 9.1%{transform:translate3d(0.63%,-46.47%,0) rotate(-2.94deg)} 11.6%{transform:translate3d(0.75%,-39.65%,0) rotate(-2.55deg)} 13.9%{transform:translate3d(0.85%,-31.90%,0) rotate(-2.24deg)} 16.2%{transform:translate3d(0.94%,-22.79%,0) rotate(-1.96deg)} 18.5%{transform:translate3d(1.02%,-12.32%,0) rotate(-1.72deg)} 20.9%{transform:translate3d(1.09%,0.00%,0) rotate(-0.82deg)} 23.2%{transform:translate3d(1.15%,-2.79%,0) rotate(-0.72deg)} 25.5%{transform:translate3d(1.19%,-4.21%,0) rotate(-0.63deg)} 27.8%{transform:translate3d(1.24%,-4.27%,0) rotate(-0.56deg)} 30.2%{transform:translate3d(1.27%,-2.82%,0) rotate(-0.48deg)} 32.5%{transform:translate3d(1.31%,-0.05%,0) rotate(-0.42deg)} 34.8%{transform:translate3d(1.33%,-0.28%,0) rotate(-0.20deg)} 100.0%{opacity:1; transform:translate3d(0,0,0)} } @keyframes kdb-stone{ 0%{opacity:0; transform:translate3d(0.02%,-69.99%,0) rotate(-8.94deg)} 6%{opacity:1} 2.3%{transform:translate3d(0.40%,-68.81%,0) rotate(-7.93deg)} 4.5%{transform:translate3d(0.73%,-65.62%,0) rotate(-7.04deg)} 6.9%{transform:translate3d(1.04%,-60.06%,0) rotate(-6.20deg)} 9.2%{transform:translate3d(1.31%,-52.74%,0) rotate(-5.50deg)} 11.6%{transform:translate3d(1.56%,-42.81%,0) rotate(-4.85deg)} 13.9%{transform:translate3d(1.77%,-31.35%,0) rotate(-4.30deg)} 16.2%{transform:translate3d(1.95%,-17.90%,0) rotate(-3.82deg)} 18.6%{transform:translate3d(2.13%,-1.46%,0) rotate(-3.37deg)} 20.8%{transform:translate3d(2.26%,-5.38%,0) rotate(-1.64deg)} 23.2%{transform:translate3d(2.38%,-9.77%,0) rotate(-1.45deg)} 25.5%{transform:translate3d(2.48%,-11.85%,0) rotate(-1.28deg)} 27.9%{transform:translate3d(2.57%,-11.87%,0) rotate(-1.13deg)} 30.2%{transform:translate3d(2.65%,-9.82%,0) rotate(-1.00deg)} 32.4%{transform:translate3d(2.72%,-5.77%,0) rotate(-0.89deg)} 34.8%{transform:translate3d(2.79%,-0.17%,0) rotate(-0.43deg)} 37.1%{transform:translate3d(2.84%,-1.93%,0) rotate(-0.38deg)} 39.5%{transform:translate3d(2.88%,-1.61%,0) rotate(-0.34deg)} 41.8%{transform:translate3d(2.92%,-0.21%,0) rotate(-0.16deg)} 44.1%{transform:translate3d(2.95%,-0.02%,0) rotate(-0.08deg)} 100.0%{opacity:1; transform:translate3d(0,0,0)} } /* Four throws that do not resemble each other. Entry angle, distance, release height, bounciness and tilt are all pulled apart, so one comes in flat and skimming, one is lobbed high and steep, one is short and dead, one is lively. Same hand, same direction of spin - four different objects. */ /* toss 0: 15deg entry, 52% out, 9% up, e=0.46, -14deg tilt, 4 bounces, at rest by 62%. */ @keyframes kdb-toss-0{ 0%{opacity:0; transform:translate3d(-52.00%,-9.04%,0) rotate(-13.91deg)} 8%{opacity:1} 1.37%{transform:translate3d(-50.72%,-9.22%,0) rotate(-13.47deg)} 3.00%{transform:translate3d(-49.18%,-9.34%,0) rotate(-12.95deg)} 4.37%{transform:translate3d(-47.90%,-9.36%,0) rotate(-12.51deg)} 6.01%{transform:translate3d(-46.37%,-9.29%,0) rotate(-11.99deg)} 7.37%{transform:translate3d(-45.09%,-9.15%,0) rotate(-11.56deg)} 9.01%{transform:translate3d(-43.55%,-8.90%,0) rotate(-11.05deg)} 10.38%{transform:translate3d(-42.27%,-8.61%,0) rotate(-10.62deg)} 12.02%{transform:translate3d(-40.74%,-8.16%,0) rotate(-10.11deg)} 13.38%{transform:translate3d(-39.46%,-7.71%,0) rotate(-9.69deg)} 15.02%{transform:translate3d(-37.92%,-7.08%,0) rotate(-9.19deg)} 16.39%{transform:translate3d(-36.64%,-6.48%,0) rotate(-8.77deg)} 18.03%{transform:translate3d(-35.11%,-5.66%,0) rotate(-8.28deg)} 19.39%{transform:translate3d(-33.83%,-4.90%,0) rotate(-7.86deg)} 21.03%{transform:translate3d(-32.29%,-3.89%,0) rotate(-7.37deg)} 22.67%{transform:translate3d(-30.75%,-2.78%,0) rotate(-6.88deg)} 24.04%{transform:translate3d(-29.47%,-1.78%,0) rotate(-6.48deg)} 25.67%{transform:translate3d(-27.94%,-0.49%,0) rotate(-6.00deg)} 27.04%{transform:translate3d(-26.72%,-0.20%,0) rotate(-5.64deg)} 28.68%{transform:translate3d(-25.37%,-0.75%,0) rotate(-5.31deg)} 30.04%{transform:translate3d(-24.24%,-1.13%,0) rotate(-5.03deg)} 31.68%{transform:translate3d(-22.89%,-1.48%,0) rotate(-4.70deg)} 33.05%{transform:translate3d(-21.76%,-1.71%,0) rotate(-4.43deg)} 34.69%{transform:translate3d(-20.41%,-1.88%,0) rotate(-4.10deg)} 36.05%{transform:translate3d(-19.29%,-1.94%,0) rotate(-3.83deg)} 37.69%{transform:translate3d(-17.94%,-1.92%,0) rotate(-3.50deg)} 39.06%{transform:translate3d(-16.81%,-1.83%,0) rotate(-3.24deg)} 40.70%{transform:translate3d(-15.46%,-1.63%,0) rotate(-2.91deg)} 42.33%{transform:translate3d(-14.11%,-1.32%,0) rotate(-2.60deg)} 43.70%{transform:translate3d(-12.98%,-0.99%,0) rotate(-2.33deg)} 45.34%{transform:translate3d(-11.63%,-0.49%,0) rotate(-2.02deg)} 46.70%{transform:translate3d(-10.50%,-0.00%,0) rotate(-1.76deg)} 48.34%{transform:translate3d(-9.29%,-0.20%,0) rotate(-1.52deg)} 49.71%{transform:translate3d(-8.29%,-0.33%,0) rotate(-1.34deg)} 51.35%{transform:translate3d(-7.11%,-0.40%,0) rotate(-1.13deg)} 52.71%{transform:translate3d(-6.11%,-0.37%,0) rotate(-0.95deg)} 54.35%{transform:translate3d(-4.93%,-0.25%,0) rotate(-0.74deg)} 55.72%{transform:translate3d(-3.93%,-0.07%,0) rotate(-0.56deg)} 57.36%{transform:translate3d(-2.84%,-0.06%,0) rotate(-0.39deg)} 58.72%{transform:translate3d(-1.97%,-0.07%,0) rotate(-0.27deg)} 60.36%{transform:translate3d(-0.92%,0.00%,0) rotate(-0.12deg)} 62.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* toss 1: 64deg entry, 19% out, 26% up, e=0.28, -40deg tilt, 3 bounces, at rest by 50%. */ @keyframes kdb-toss-1{ 0%{opacity:0; transform:translate3d(-19.00%,-26.13%,0) rotate(-39.82deg)} 8%{opacity:1} 1.19%{transform:translate3d(-18.48%,-26.95%,0) rotate(-38.59deg)} 2.39%{transform:translate3d(-17.97%,-27.63%,0) rotate(-37.36deg)} 3.58%{transform:translate3d(-17.45%,-28.17%,0) rotate(-36.14deg)} 4.78%{transform:translate3d(-16.94%,-28.57%,0) rotate(-34.93deg)} 5.97%{transform:translate3d(-16.42%,-28.83%,0) rotate(-33.72deg)} 7.17%{transform:translate3d(-15.90%,-28.95%,0) rotate(-32.53deg)} 8.53%{transform:translate3d(-15.31%,-28.92%,0) rotate(-31.18deg)} 9.73%{transform:translate3d(-14.80%,-28.75%,0) rotate(-30.00deg)} 10.92%{transform:translate3d(-14.28%,-28.43%,0) rotate(-28.83deg)} 12.12%{transform:translate3d(-13.76%,-27.98%,0) rotate(-27.67deg)} 13.31%{transform:translate3d(-13.25%,-27.38%,0) rotate(-26.52deg)} 14.51%{transform:translate3d(-12.73%,-26.65%,0) rotate(-25.38deg)} 15.70%{transform:translate3d(-12.22%,-25.78%,0) rotate(-24.24deg)} 17.06%{transform:translate3d(-11.63%,-24.62%,0) rotate(-22.95deg)} 18.26%{transform:translate3d(-11.11%,-23.45%,0) rotate(-21.83deg)} 19.45%{transform:translate3d(-10.59%,-22.14%,0) rotate(-20.72deg)} 20.65%{transform:translate3d(-10.08%,-20.69%,0) rotate(-19.62deg)} 21.84%{transform:translate3d(-9.56%,-19.10%,0) rotate(-18.52deg)} 23.04%{transform:translate3d(-9.04%,-17.38%,0) rotate(-17.43deg)} 24.23%{transform:translate3d(-8.53%,-15.51%,0) rotate(-16.35deg)} 25.60%{transform:translate3d(-7.94%,-13.21%,0) rotate(-15.13deg)} 26.79%{transform:translate3d(-7.42%,-11.05%,0) rotate(-14.06deg)} 27.99%{transform:translate3d(-6.91%,-8.75%,0) rotate(-13.01deg)} 29.18%{transform:translate3d(-6.39%,-6.30%,0) rotate(-11.96deg)} 30.38%{transform:translate3d(-5.87%,-3.72%,0) rotate(-10.92deg)} 31.57%{transform:translate3d(-5.36%,-1.00%,0) rotate(-9.88deg)} 32.76%{transform:translate3d(-4.92%,-0.43%,0) rotate(-9.03deg)} 34.13%{transform:translate3d(-4.50%,-1.14%,0) rotate(-8.21deg)} 35.32%{transform:translate3d(-4.13%,-1.62%,0) rotate(-7.50deg)} 36.52%{transform:translate3d(-3.75%,-1.96%,0) rotate(-6.80deg)} 37.71%{transform:translate3d(-3.38%,-2.15%,0) rotate(-6.10deg)} 38.91%{transform:translate3d(-3.01%,-2.21%,0) rotate(-5.41deg)} 40.10%{transform:translate3d(-2.64%,-2.13%,0) rotate(-4.72deg)} 41.30%{transform:translate3d(-2.27%,-1.92%,0) rotate(-4.03deg)} 42.66%{transform:translate3d(-1.84%,-1.49%,0) rotate(-3.26deg)} 43.86%{transform:translate3d(-1.47%,-0.98%,0) rotate(-2.58deg)} 45.05%{transform:translate3d(-1.10%,-0.32%,0) rotate(-1.91deg)} 46.25%{transform:translate3d(-0.79%,-0.10%,0) rotate(-1.36deg)} 47.44%{transform:translate3d(-0.52%,-0.15%,0) rotate(-0.90deg)} 48.63%{transform:translate3d(-0.25%,-0.07%,0) rotate(-0.44deg)} 50.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* toss 2: 30deg entry, 41% out, 17% up, e=0.55, -25deg tilt, 6 bounces, at rest by 95%. */ @keyframes kdb-toss-2{ 0%{opacity:0; transform:translate3d(-41.00%,-17.08%,0) rotate(-24.90deg)} 8%{opacity:1} 2.12%{transform:translate3d(-39.87%,-17.64%,0) rotate(-23.97deg)} 4.47%{transform:translate3d(-38.61%,-18.00%,0) rotate(-22.95deg)} 6.82%{transform:translate3d(-37.35%,-18.08%,0) rotate(-21.93deg)} 9.17%{transform:translate3d(-36.09%,-17.87%,0) rotate(-20.93deg)} 11.52%{transform:translate3d(-34.84%,-17.38%,0) rotate(-19.94deg)} 13.87%{transform:translate3d(-33.58%,-16.60%,0) rotate(-18.96deg)} 15.99%{transform:translate3d(-32.45%,-15.66%,0) rotate(-18.08deg)} 18.34%{transform:translate3d(-31.19%,-14.35%,0) rotate(-17.12deg)} 20.69%{transform:translate3d(-29.93%,-12.75%,0) rotate(-16.17deg)} 23.04%{transform:translate3d(-28.67%,-10.86%,0) rotate(-15.22deg)} 25.40%{transform:translate3d(-27.42%,-8.70%,0) rotate(-14.29deg)} 27.75%{transform:translate3d(-26.16%,-6.25%,0) rotate(-13.36deg)} 30.10%{transform:translate3d(-24.90%,-3.51%,0) rotate(-12.45deg)} 32.22%{transform:translate3d(-23.77%,-0.81%,0) rotate(-11.63deg)} 34.57%{transform:translate3d(-22.66%,-1.15%,0) rotate(-10.92deg)} 36.92%{transform:translate3d(-21.62%,-2.56%,0) rotate(-10.30deg)} 39.27%{transform:translate3d(-20.57%,-3.68%,0) rotate(-9.68deg)} 41.62%{transform:translate3d(-19.53%,-4.52%,0) rotate(-9.07deg)} 43.97%{transform:translate3d(-18.49%,-5.08%,0) rotate(-8.47deg)} 46.32%{transform:translate3d(-17.44%,-5.35%,0) rotate(-7.87deg)} 48.44%{transform:translate3d(-16.50%,-5.35%,0) rotate(-7.33deg)} 50.79%{transform:translate3d(-15.46%,-5.08%,0) rotate(-6.75deg)} 53.14%{transform:translate3d(-14.41%,-4.53%,0) rotate(-6.16deg)} 55.50%{transform:translate3d(-13.37%,-3.69%,0) rotate(-5.59deg)} 57.85%{transform:translate3d(-12.33%,-2.57%,0) rotate(-5.02deg)} 60.20%{transform:translate3d(-11.28%,-1.17%,0) rotate(-4.46deg)} 62.55%{transform:translate3d(-10.27%,-0.18%,0) rotate(-3.93deg)} 64.67%{transform:translate3d(-9.49%,-0.88%,0) rotate(-3.58deg)} 67.02%{transform:translate3d(-8.63%,-1.38%,0) rotate(-3.20deg)} 69.37%{transform:translate3d(-7.76%,-1.59%,0) rotate(-2.82deg)} 71.72%{transform:translate3d(-6.90%,-1.52%,0) rotate(-2.44deg)} 74.07%{transform:translate3d(-6.03%,-1.17%,0) rotate(-2.07deg)} 76.42%{transform:translate3d(-5.16%,-0.53%,0) rotate(-1.70deg)} 78.77%{transform:translate3d(-4.34%,-0.14%,0) rotate(-1.37deg)} 80.89%{transform:translate3d(-3.69%,-0.41%,0) rotate(-1.14deg)} 83.24%{transform:translate3d(-2.97%,-0.45%,0) rotate(-0.89deg)} 85.59%{transform:translate3d(-2.25%,-0.20%,0) rotate(-0.64deg)} 87.95%{transform:translate3d(-1.60%,-0.10%,0) rotate(-0.43deg)} 90.30%{transform:translate3d(-1.00%,-0.09%,0) rotate(-0.26deg)} 92.65%{transform:translate3d(-0.45%,-0.03%,0) rotate(-0.12deg)} 95.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* toss 3: 58deg entry, 28% out, 33% up, e=0.36, -52deg tilt, 4 bounces, at rest by 77%. */ @keyframes kdb-toss-3{ 0%{opacity:0; transform:translate3d(-28.00%,-33.15%,0) rotate(-51.81deg)} 8%{opacity:1} 1.80%{transform:translate3d(-27.25%,-34.33%,0) rotate(-50.09deg)} 3.59%{transform:translate3d(-26.49%,-35.29%,0) rotate(-48.40deg)} 5.59%{transform:translate3d(-25.66%,-36.08%,0) rotate(-46.53deg)} 7.38%{transform:translate3d(-24.91%,-36.55%,0) rotate(-44.86deg)} 9.38%{transform:translate3d(-24.07%,-36.81%,0) rotate(-43.02deg)} 11.17%{transform:translate3d(-23.32%,-36.79%,0) rotate(-41.39deg)} 12.97%{transform:translate3d(-22.56%,-36.55%,0) rotate(-39.77deg)} 14.96%{transform:translate3d(-21.73%,-36.01%,0) rotate(-37.98deg)} 16.76%{transform:translate3d(-20.97%,-35.28%,0) rotate(-36.39deg)} 18.75%{transform:translate3d(-20.14%,-34.20%,0) rotate(-34.64deg)} 20.55%{transform:translate3d(-19.39%,-32.98%,0) rotate(-33.08deg)} 22.34%{transform:translate3d(-18.63%,-31.54%,0) rotate(-31.54deg)} 24.34%{transform:translate3d(-17.80%,-29.66%,0) rotate(-29.83deg)} 26.13%{transform:translate3d(-17.04%,-27.73%,0) rotate(-28.32deg)} 28.13%{transform:translate3d(-16.21%,-25.31%,0) rotate(-26.65deg)} 29.92%{transform:translate3d(-15.45%,-22.90%,0) rotate(-25.16deg)} 31.92%{transform:translate3d(-14.62%,-19.94%,0) rotate(-23.52deg)} 33.71%{transform:translate3d(-13.86%,-17.04%,0) rotate(-22.06deg)} 35.51%{transform:translate3d(-13.11%,-13.91%,0) rotate(-20.61deg)} 37.50%{transform:translate3d(-12.28%,-10.16%,0) rotate(-19.02deg)} 39.30%{transform:translate3d(-11.52%,-6.54%,0) rotate(-17.60deg)} 41.29%{transform:translate3d(-10.69%,-2.25%,0) rotate(-16.04deg)} 43.09%{transform:translate3d(-10.01%,-0.63%,0) rotate(-14.83deg)} 44.88%{transform:translate3d(-9.42%,-1.88%,0) rotate(-13.86deg)} 46.88%{transform:translate3d(-8.77%,-2.99%,0) rotate(-12.80deg)} 48.67%{transform:translate3d(-8.18%,-3.75%,0) rotate(-11.85deg)} 50.67%{transform:translate3d(-7.53%,-4.33%,0) rotate(-10.80deg)} 52.46%{transform:translate3d(-6.94%,-4.61%,0) rotate(-9.87deg)} 54.46%{transform:translate3d(-6.29%,-4.64%,0) rotate(-8.85deg)} 56.25%{transform:translate3d(-5.70%,-4.43%,0) rotate(-7.94deg)} 58.05%{transform:translate3d(-5.11%,-3.99%,0) rotate(-7.03deg)} 60.04%{transform:translate3d(-4.46%,-3.24%,0) rotate(-6.04deg)} 61.84%{transform:translate3d(-3.87%,-2.31%,0) rotate(-5.15deg)} 63.83%{transform:translate3d(-3.22%,-1.01%,0) rotate(-4.17deg)} 65.63%{transform:translate3d(-2.66%,-0.11%,0) rotate(-3.36deg)} 67.42%{transform:translate3d(-2.21%,-0.46%,0) rotate(-2.75deg)} 69.42%{transform:translate3d(-1.70%,-0.57%,0) rotate(-2.09deg)} 71.22%{transform:translate3d(-1.24%,-0.43%,0) rotate(-1.49deg)} 73.21%{transform:translate3d(-0.73%,-0.01%,0) rotate(-0.84deg)} 75.01%{transform:translate3d(-0.36%,-0.06%,0) rotate(-0.41deg)} 77.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* VOLLEY - the kicker. Falls in softly, then the free-kick-2 shape from 20%. */ @keyframes kdb-vl-k{ 0.00%{opacity:0; transform:translate3d(0,-13.00%,0) rotate(-14.87deg)} 0.00%{transform:translate3d(0,-13.00%,0) rotate(-14.87deg)} 0.69%{transform:translate3d(0,-12.92%,0) rotate(-14.12deg)} 1.37%{transform:translate3d(0,-12.74%,0) rotate(-13.38deg)} 2.06%{transform:translate3d(0,-12.46%,0) rotate(-12.64deg)} 2.74%{transform:translate3d(0,-12.08%,0) rotate(-11.90deg)} 3.43%{transform:translate3d(0,-11.59%,0) rotate(-11.17deg)} 3.60%{opacity:1; transform:translate3d(0,-12.74%,0) rotate(-13.38deg)} 4.11%{transform:translate3d(0,-11.00%,0) rotate(-10.44deg)} 4.80%{transform:translate3d(0,-10.31%,0) rotate(-9.72deg)} 5.49%{transform:translate3d(0,-9.52%,0) rotate(-9.00deg)} 6.17%{transform:translate3d(0,-8.63%,0) rotate(-8.28deg)} 6.86%{transform:translate3d(0,-7.63%,0) rotate(-7.57deg)} 7.54%{transform:translate3d(0,-6.53%,0) rotate(-6.87deg)} 8.23%{transform:translate3d(0,-5.33%,0) rotate(-6.16deg)} 8.91%{transform:translate3d(0,-4.03%,0) rotate(-5.47deg)} 9.60%{transform:translate3d(0,-2.62%,0) rotate(-4.77deg)} 10.29%{transform:translate3d(0,-1.11%,0) rotate(-4.08deg)} 10.97%{transform:translate3d(0,-0.06%,0) rotate(-3.44deg)} 11.66%{transform:translate3d(0,-0.34%,0) rotate(-2.99deg)} 12.00%{transform:translate3d(0,-0.00%,0) rotate(-0.00deg)} 12.55%{transform:translate3d(0,-0.21%,0) rotate(-0.24deg)} 13.09%{transform:translate3d(0,-0.68%,0) rotate(-0.90deg)} 13.64%{transform:translate3d(0,-1.35%,0) rotate(-1.92deg)} 14.18%{transform:translate3d(0,-2.15%,0) rotate(-3.23deg)} 14.73%{transform:translate3d(0,-3.05%,0) rotate(-4.74deg)} 15.27%{transform:translate3d(0,-4.01%,0) rotate(-6.40deg)} 15.82%{transform:translate3d(0,-5.00%,0) rotate(-8.12deg)} 16.36%{transform:translate3d(0,-6.00%,0) rotate(-9.84deg)} 16.91%{transform:translate3d(0,-6.97%,0) rotate(-11.48deg)} 17.45%{transform:translate3d(0,-7.91%,0) rotate(-12.97deg)} 18.00%{transform:translate3d(0,-8.78%,0) rotate(-14.24deg)} 18.54%{transform:translate3d(0,-9.58%,0) rotate(-15.21deg)} 19.09%{transform:translate3d(0,-10.28%,0) rotate(-15.82deg)} 19.64%{transform:translate3d(0,-10.88%,0) rotate(-16.00deg)} 20.18%{transform:translate3d(0,-11.36%,0) rotate(-15.84deg)} 20.73%{transform:translate3d(0,-11.71%,0) rotate(-15.45deg)} 21.27%{transform:translate3d(0,-11.93%,0) rotate(-14.85deg)} 21.82%{transform:translate3d(0,-12.00%,0) rotate(-14.08deg)} 22.36%{transform:translate3d(0,-11.93%,0) rotate(-13.16deg)} 22.91%{transform:translate3d(0,-11.70%,0) rotate(-12.12deg)} 23.46%{transform:translate3d(0,-11.33%,0) rotate(-10.98deg)} 24.00%{transform:translate3d(0,-10.81%,0) rotate(-9.78deg)} 24.55%{transform:translate3d(0,-10.15%,0) rotate(-8.54deg)} 25.09%{transform:translate3d(0,-9.36%,0) rotate(-7.28deg)} 25.64%{transform:translate3d(0,-8.44%,0) rotate(-6.05deg)} 26.18%{transform:translate3d(0,-7.41%,0) rotate(-4.85deg)} 26.73%{transform:translate3d(0,-6.30%,0) rotate(-3.73deg)} 27.27%{transform:translate3d(0,-5.11%,0) rotate(-2.70deg)} 27.82%{transform:translate3d(0,-3.90%,0) rotate(-1.80deg)} 28.36%{transform:translate3d(0,-2.69%,0) rotate(-1.06deg)} 28.91%{transform:translate3d(0,-1.55%,0) rotate(-0.49deg)} 29.45%{transform:translate3d(0,-0.58%,0) rotate(-0.13deg)} 30.00%{transform:translate3d(0,-0.00%,0) rotate(0.00deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* VOLLEY - the wall just falls in and stands. It never jumps. */ @keyframes kdb-vl-d{ 0.00%{opacity:0; transform:translate3d(0,-13.00%,0) rotate(-15.88deg)} 0.00%{transform:translate3d(0,-13.00%,0) rotate(-15.88deg)} 0.87%{transform:translate3d(0,-12.92%,0) rotate(-15.17deg)} 1.74%{transform:translate3d(0,-12.74%,0) rotate(-14.47deg)} 2.62%{transform:translate3d(0,-12.46%,0) rotate(-13.77deg)} 3.49%{transform:translate3d(0,-12.08%,0) rotate(-13.07deg)} 4.36%{transform:translate3d(0,-11.59%,0) rotate(-12.38deg)} 5.23%{transform:translate3d(0,-11.00%,0) rotate(-11.69deg)} 6.00%{opacity:1; transform:translate3d(0,-12.74%,0) rotate(-14.47deg)} 6.10%{transform:translate3d(0,-10.31%,0) rotate(-11.00deg)} 6.98%{transform:translate3d(0,-9.52%,0) rotate(-10.32deg)} 7.85%{transform:translate3d(0,-8.63%,0) rotate(-9.65deg)} 8.72%{transform:translate3d(0,-7.63%,0) rotate(-8.97deg)} 9.59%{transform:translate3d(0,-6.53%,0) rotate(-8.31deg)} 10.47%{transform:translate3d(0,-5.33%,0) rotate(-7.64deg)} 11.34%{transform:translate3d(0,-4.03%,0) rotate(-6.98deg)} 12.21%{transform:translate3d(0,-2.62%,0) rotate(-6.33deg)} 13.08%{transform:translate3d(0,-1.11%,0) rotate(-5.67deg)} 13.95%{transform:translate3d(0,-0.08%,0) rotate(-5.06deg)} 14.83%{transform:translate3d(0,-0.49%,0) rotate(-4.61deg)} 15.70%{transform:translate3d(0,-0.80%,0) rotate(-4.16deg)} 16.57%{transform:translate3d(0,-1.01%,0) rotate(-3.71deg)} 17.44%{transform:translate3d(0,-1.12%,0) rotate(-3.27deg)} 18.31%{transform:translate3d(0,-1.13%,0) rotate(-2.83deg)} 19.19%{transform:translate3d(0,-1.03%,0) rotate(-2.39deg)} 20.06%{transform:translate3d(0,-0.83%,0) rotate(-1.96deg)} 20.93%{transform:translate3d(0,-0.53%,0) rotate(-1.52deg)} 21.80%{transform:translate3d(0,-0.12%,0) rotate(-1.09deg)} 22.67%{transform:translate3d(0,-0.07%,0) rotate(-0.75deg)} 23.55%{transform:translate3d(0,-0.08%,0) rotate(-0.45deg)} 24.42%{transform:translate3d(0,0.00%,0) rotate(-0.16deg)} 25.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* VOLLEY - the low ball falls into place with everything else. No kick. */ @keyframes kdb-vl-b1{ 0.00%{opacity:0; transform:translate3d(0,-20.00%,0) rotate(-32.85deg)} 0.00%{transform:translate3d(0,-20.00%,0) rotate(-32.85deg)} 1.33%{transform:translate3d(0,-19.70%,0) rotate(-30.85deg)} 2.67%{transform:translate3d(0,-18.93%,0) rotate(-28.88deg)} 4.00%{transform:translate3d(0,-17.67%,0) rotate(-26.93deg)} 5.34%{transform:translate3d(0,-15.94%,0) rotate(-25.01deg)} 6.00%{opacity:1; transform:translate3d(0,-18.93%,0) rotate(-28.88deg)} 6.67%{transform:translate3d(0,-13.72%,0) rotate(-23.12deg)} 8.01%{transform:translate3d(0,-11.03%,0) rotate(-21.25deg)} 9.34%{transform:translate3d(0,-7.85%,0) rotate(-19.40deg)} 10.67%{transform:translate3d(0,-4.20%,0) rotate(-17.58deg)} 12.01%{transform:translate3d(0,-0.06%,0) rotate(-15.78deg)} 13.34%{transform:translate3d(0,-1.81%,0) rotate(-14.49deg)} 14.68%{transform:translate3d(0,-3.30%,0) rotate(-13.27deg)} 16.01%{transform:translate3d(0,-4.32%,0) rotate(-12.06deg)} 17.35%{transform:translate3d(0,-4.85%,0) rotate(-10.86deg)} 18.68%{transform:translate3d(0,-4.91%,0) rotate(-9.68deg)} 20.01%{transform:translate3d(0,-4.48%,0) rotate(-8.52deg)} 21.35%{transform:translate3d(0,-3.58%,0) rotate(-7.37deg)} 22.68%{transform:translate3d(0,-2.19%,0) rotate(-6.23deg)} 24.02%{transform:translate3d(0,-0.33%,0) rotate(-5.11deg)} 25.35%{transform:translate3d(0,-0.73%,0) rotate(-4.29deg)} 26.69%{transform:translate3d(0,-1.14%,0) rotate(-3.52deg)} 28.02%{transform:translate3d(0,-1.08%,0) rotate(-2.77deg)} 29.35%{transform:translate3d(0,-0.53%,0) rotate(-2.02deg)} 30.69%{transform:translate3d(0,-0.16%,0) rotate(-1.37deg)} 32.02%{transform:translate3d(0,-0.25%,0) rotate(-0.86deg)} 33.36%{transform:translate3d(0,-0.04%,0) rotate(-0.40deg)} 34.69%{transform:translate3d(0,-0.01%,0) rotate(-0.08deg)} 35.00%{transform:translate3d(0,0,0) rotate(0deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* VOLLEY, the ball - tuned in REAL TIME, not in timeline-%. markDur here is 1150ms, and the free kick's is 1700ms against the volley's 1150ms - so an identical %-per-1% is a 1.48x different speed on screen. That mismatch, not the curve, is why these two read so differently. Contact speed 9.0%/1% = 0.78 mark-heights per ms; outgoing flight 10.5% = 121ms. g = 0.460, released at 5.22% from y -107 (at 0% already at -100), revealed at 15.00% at y -85 doing 4.5%/1%. Same path and pace as before, only revealed later and lower, and eased back a touch from 10.0. */ @keyframes kdb-vl-b2{ 0.00%{opacity:0; transform:translate3d(-51.01%,-106.73%,0)} 5.22%{opacity:0; transform:translate3d(-51.01%,-106.73%,0)} 5.94%{opacity:0; transform:translate3d(-51.01%,-106.61%,0)} 6.67%{opacity:0; transform:translate3d(-51.01%,-106.25%,0)} 7.39%{opacity:0; transform:translate3d(-51.01%,-105.65%,0)} 8.12%{opacity:0; transform:translate3d(-51.01%,-104.80%,0)} 8.84%{opacity:0; transform:translate3d(-51.01%,-103.72%,0)} 9.57%{opacity:0; transform:translate3d(-51.01%,-102.38%,0)} 10.29%{opacity:0; transform:translate3d(-51.01%,-100.82%,0)} 11.02%{opacity:0; transform:translate3d(-51.01%,-98.99%,0)} 11.74%{opacity:0; transform:translate3d(-51.01%,-96.95%,0)} 12.46%{opacity:0; transform:translate3d(-51.01%,-94.67%,0)} 13.19%{opacity:0; transform:translate3d(-51.01%,-92.12%,0)} 13.91%{opacity:0; transform:translate3d(-51.01%,-89.36%,0)} 14.64%{opacity:0; transform:translate3d(-51.01%,-86.32%,0)} 15.00%{opacity:0; transform:translate3d(-51.01%,-84.73%,0)} 15.36%{transform:translate3d(-51.01%,-83.08%,0)} 15.90%{opacity:0.5; transform:translate3d(-51.01%,-80.49%,0)} 16.09%{transform:translate3d(-51.01%,-79.55%,0)} 16.80%{opacity:1; transform:translate3d(-51.01%,-75.88%,0)} 16.81%{opacity:1; transform:translate3d(-51.01%,-75.83%,0)} 17.54%{transform:translate3d(-51.01%,-71.81%,0)} 18.26%{transform:translate3d(-51.01%,-67.61%,0)} 18.98%{transform:translate3d(-51.01%,-63.17%,0)} 19.71%{transform:translate3d(-51.01%,-58.43%,0)} 20.43%{transform:translate3d(-51.01%,-53.51%,0)} 21.16%{transform:translate3d(-51.01%,-48.28%,0)} 21.88%{transform:translate3d(-51.01%,-42.88%,0)} 22.61%{transform:translate3d(-51.01%,-37.16%,0)} 23.33%{transform:translate3d(-51.01%,-31.28%,0)} 24.06%{transform:translate3d(-51.01%,-25.07%,0)} 24.78%{transform:translate3d(-51.01%,-18.71%,0)} 24.97%{transform:translate3d(-50.09%,-19.27%,0)} 25.16%{transform:translate3d(-49.16%,-19.80%,0)} 25.35%{transform:translate3d(-48.23%,-20.29%,0)} 25.54%{transform:translate3d(-47.30%,-20.75%,0)} 25.73%{transform:translate3d(-46.38%,-21.18%,0)} 25.93%{transform:translate3d(-45.45%,-21.58%,0)} 26.12%{transform:translate3d(-44.52%,-21.94%,0)} 26.31%{transform:translate3d(-43.59%,-22.26%,0)} 26.50%{transform:translate3d(-42.67%,-22.56%,0)} 26.69%{transform:translate3d(-41.74%,-22.82%,0)} 26.88%{transform:translate3d(-40.81%,-23.05%,0)} 27.07%{transform:translate3d(-39.88%,-23.24%,0)} 27.26%{transform:translate3d(-38.96%,-23.40%,0)} 27.45%{transform:translate3d(-38.03%,-23.53%,0)} 27.64%{transform:translate3d(-37.10%,-23.62%,0)} 27.83%{transform:translate3d(-36.17%,-23.68%,0)} 28.03%{transform:translate3d(-35.25%,-23.71%,0)} 28.22%{transform:translate3d(-34.32%,-23.70%,0)} 28.41%{transform:translate3d(-33.39%,-23.66%,0)} 28.60%{transform:translate3d(-32.46%,-23.59%,0)} 28.79%{transform:translate3d(-31.54%,-23.48%,0)} 28.98%{transform:translate3d(-30.61%,-23.34%,0)} 29.17%{transform:translate3d(-29.68%,-23.17%,0)} 29.36%{transform:translate3d(-28.75%,-22.96%,0)} 29.55%{transform:translate3d(-27.83%,-22.72%,0)} 29.74%{transform:translate3d(-26.90%,-22.45%,0)} 29.93%{transform:translate3d(-25.97%,-22.14%,0)} 30.13%{transform:translate3d(-25.04%,-21.80%,0)} 30.32%{transform:translate3d(-24.12%,-21.43%,0)} 30.51%{transform:translate3d(-23.19%,-21.02%,0)} 30.70%{transform:translate3d(-22.26%,-20.58%,0)} 30.89%{transform:translate3d(-21.33%,-20.11%,0)} 31.08%{transform:translate3d(-20.41%,-19.60%,0)} 31.27%{transform:translate3d(-19.48%,-19.06%,0)} 31.46%{transform:translate3d(-18.55%,-18.49%,0)} 31.65%{transform:translate3d(-17.62%,-17.88%,0)} 31.84%{transform:translate3d(-16.70%,-17.24%,0)} 32.03%{transform:translate3d(-15.77%,-16.56%,0)} 32.23%{transform:translate3d(-14.84%,-15.86%,0)} 32.42%{transform:translate3d(-13.91%,-15.12%,0)} 32.61%{transform:translate3d(-12.99%,-14.34%,0)} 32.80%{transform:translate3d(-12.06%,-13.53%,0)} 32.99%{transform:translate3d(-11.13%,-12.69%,0)} 33.18%{transform:translate3d(-10.20%,-11.82%,0)} 33.37%{transform:translate3d(-9.28%,-10.91%,0)} 33.56%{transform:translate3d(-8.35%,-9.97%,0)} 33.75%{transform:translate3d(-7.42%,-9.00%,0)} 33.94%{transform:translate3d(-6.49%,-7.99%,0)} 34.13%{transform:translate3d(-5.57%,-6.95%,0)} 34.33%{transform:translate3d(-4.64%,-5.87%,0)} 34.52%{transform:translate3d(-3.71%,-4.77%,0)} 34.71%{transform:translate3d(-2.78%,-3.62%,0)} 34.90%{transform:translate3d(-1.86%,-2.45%,0)} 35.09%{transform:translate3d(-0.93%,-1.24%,0)} 35.28%{transform:translate3d(0.00%,0.00%,0)} 38.28%{transform:translate3d(0,0,0)} 100.00%{opacity:1; transform:translate3d(0,0,0)} } /* FREE KICK - the kicker, addressed in milliseconds at markDur 483ms. Kick 1 comes in quick and eases out through the ball: touch 107ms, ball away 132ms, the slide finally at rest 298ms. The jump for kick 2 no longer waits for that - it starts at 204ms and OVERLAPS the slide's last 94ms, so the K is loading while it is still gliding forward. That is what moves everything after it earlier: contact 2 at 314ms rather than 412. Jump length 161ms, matching the volley. */ @keyframes kdb-fk-k{ 0.00%{opacity:1; transform:translate3d(-34%,0,0) rotate(2deg)} 3.52%{transform:translate3d(-31.00%,0.00%,0) rotate(3.00deg)} 7.04%{transform:translate3d(-28.01%,0.00%,0) rotate(4.00deg)} 10.56%{transform:translate3d(-25.01%,0.00%,0) rotate(5.00deg)} 14.08%{transform:translate3d(-22.02%,0.00%,0) rotate(6.00deg)} 17.60%{transform:translate3d(-19.02%,0.00%,0) rotate(7.00deg)} 18.10%{transform:translate3d(-18.60%,0.00%,0) rotate(5.05deg)} 18.61%{transform:translate3d(-18.16%,0.00%,0) rotate(0.08deg)} 19.11%{transform:translate3d(-17.73%,0.00%,0) rotate(0.00deg)} 19.61%{transform:translate3d(-17.31%,0.00%,0) rotate(0.00deg)} 20.12%{transform:translate3d(-16.87%,0.00%,0) rotate(0.00deg)} 20.62%{transform:translate3d(-16.45%,0.00%,0) rotate(0.00deg)} 21.14%{transform:translate3d(-16.01%,0.00%,0) rotate(0.00deg)} 21.64%{transform:translate3d(-15.58%,0.00%,0) rotate(0.00deg)} 22.13%{transform:translate3d(-15.16%,0.00%,0) rotate(0.00deg)} 23.17%{transform:translate3d(-14.30%,0.00%,0) rotate(0.00deg)} 24.20%{transform:translate3d(-13.47%,0.00%,0) rotate(0.00deg)} 25.24%{transform:translate3d(-12.66%,0.00%,0) rotate(0.00deg)} 26.27%{transform:translate3d(-11.88%,0.00%,0) rotate(0.00deg)} 27.31%{transform:translate3d(-11.13%,0.00%,0) rotate(0.00deg)} 29.44%{transform:translate3d(-9.66%,0.00%,0) rotate(0.00deg)} 31.57%{transform:translate3d(-8.31%,0.00%,0) rotate(0.00deg)} 33.71%{transform:translate3d(-7.06%,0.00%,0) rotate(0.00deg)} 35.84%{transform:translate3d(-5.93%,0.00%,0) rotate(0.00deg)} 37.97%{transform:translate3d(-4.90%,0.00%,0) rotate(0.00deg)} 40.10%{transform:translate3d(-3.98%,0.00%,0) rotate(0.00deg)} 42.24%{transform:translate3d(-3.16%,-0.00%,0) rotate(-0.00deg)} 45.47%{transform:translate3d(-2.12%,-1.50%,0) rotate(-2.16deg)} 48.70%{transform:translate3d(-1.30%,-4.40%,0) rotate(-7.08deg)} 51.93%{transform:translate3d(-0.69%,-7.53%,0) rotate(-12.38deg)} 55.13%{transform:translate3d(-0.28%,-10.13%,0) rotate(-15.72deg)} 58.36%{transform:translate3d(-0.06%,-11.70%,0) rotate(-15.46deg)} 61.59%{transform:translate3d(0.00%,-11.90%,0) rotate(-12.99deg)} 62.53%{transform:translate3d(0.00%,-11.68%,0) rotate(-12.02deg)} 63.46%{transform:translate3d(0.00%,-11.33%,0) rotate(-10.97deg)} 64.39%{transform:translate3d(0.00%,-10.85%,0) rotate(-9.86deg)} 65.32%{transform:translate3d(0.00%,-10.26%,0) rotate(-8.72deg)} 66.25%{transform:translate3d(0.00%,-9.55%,0) rotate(-7.57deg)} 67.18%{transform:translate3d(0.00%,-8.73%,0) rotate(-6.42deg)} 68.12%{transform:translate3d(0.00%,-7.82%,0) rotate(-5.30deg)} 69.05%{transform:translate3d(0.00%,-6.82%,0) rotate(-4.23deg)} 69.98%{transform:translate3d(0.00%,-5.75%,0) rotate(-3.24deg)} 70.91%{transform:translate3d(0.00%,-4.65%,0) rotate(-2.34deg)} 71.84%{transform:translate3d(0.00%,-3.52%,0) rotate(-1.55deg)} 72.77%{transform:translate3d(0.00%,-2.42%,0) rotate(-0.91deg)} 73.71%{transform:translate3d(0.00%,-1.39%,0) rotate(-0.42deg)} 74.64%{transform:translate3d(0.00%,-0.52%,0) rotate(-0.11deg)} 75.57%{transform:translate3d(0.00%,-0.00%,0) rotate(0.00deg)} 100.00%{opacity:1; transform:translate3d(0,0,0) rotate(0deg)} } /* FREE KICK - the wall. Crouches, launches 26ms, at full height by 109ms; the K does not reach the ball until 107ms. Lands 264ms. */ @keyframes kdb-fk-d{ 0.00%{opacity:1; transform:translate3d(0,0,0)} 1.76%{transform:translate3d(0,0.78%,0)} 5.28%{transform:translate3d(0,-0.00%,0)} 7.87%{transform:translate3d(0,-5.54%,0)} 10.48%{transform:translate3d(0,-10.50%,0)} 13.06%{transform:translate3d(0,-14.81%,0)} 15.65%{transform:translate3d(0,-18.50%,0)} 18.24%{transform:translate3d(0,-21.58%,0)} 20.85%{transform:translate3d(0,-24.06%,0)} 23.44%{transform:translate3d(0,-25.90%,0)} 26.02%{transform:translate3d(0,-27.14%,0)} 28.61%{transform:translate3d(0,-27.75%,0)} 31.22%{transform:translate3d(0,-27.75%,0)} 33.81%{transform:translate3d(0,-27.14%,0)} 36.40%{transform:translate3d(0,-25.90%,0)} 38.99%{transform:translate3d(0,-24.06%,0)} 41.59%{transform:translate3d(0,-21.58%,0)} 44.18%{transform:translate3d(0,-18.50%,0)} 46.77%{transform:translate3d(0,-14.81%,0)} 49.36%{transform:translate3d(0,-10.50%,0)} 51.97%{transform:translate3d(0,-5.54%,0)} 54.55%{transform:translate3d(0,-0.00%,0)} 58.78%{transform:translate3d(0,1.60%,0)} 69.34%{transform:translate3d(0,0.00%,0)} 100.00%{opacity:1; transform:translate3d(0,0,0)} } /* FREE KICK - first ball. Rests at 24.0, untouched until 107ms, moving from the first frame of contact, away at 132ms, 196ms of flight, landing 327ms. Ball 2's drop is already under way before it gets there. */ @keyframes kdb-fk-b1{ 0.00%{opacity:1; transform:translate3d(-57.78%,0,0)} 22.14%{transform:translate3d(-57.78%,0,0)} 22.63%{transform:translate3d(-57.53%,0,0)} 23.12%{transform:translate3d(-57.29%,0,0)} 23.62%{transform:translate3d(-57.05%,0,0)} 24.11%{transform:translate3d(-56.81%,0,0)} 24.60%{transform:translate3d(-56.58%,0,0)} 25.09%{transform:translate3d(-56.35%,0,0)} 25.58%{transform:translate3d(-56.12%,0,0)} 26.09%{transform:translate3d(-55.90%,0,0)} 26.58%{transform:translate3d(-55.68%,0,0)} 27.07%{transform:translate3d(-55.47%,0,0)} 27.31%{transform:translate3d(-55.37%,-0.00%,0)} 28.08%{transform:translate3d(-53.10%,-0.47%,0)} 28.84%{transform:translate3d(-50.88%,-0.90%,0)} 29.60%{transform:translate3d(-48.71%,-1.29%,0)} 30.37%{transform:translate3d(-46.59%,-1.65%,0)} 31.13%{transform:translate3d(-44.53%,-1.96%,0)} 31.89%{transform:translate3d(-42.51%,-2.23%,0)} 32.66%{transform:translate3d(-40.55%,-2.46%,0)} 33.42%{transform:translate3d(-38.63%,-2.65%,0)} 34.19%{transform:translate3d(-36.77%,-2.79%,0)} 34.95%{transform:translate3d(-34.96%,-2.90%,0)} 35.71%{transform:translate3d(-33.19%,-2.97%,0)} 36.48%{transform:translate3d(-31.48%,-3.00%,0)} 37.24%{transform:translate3d(-29.81%,-2.99%,0)} 38.00%{transform:translate3d(-28.20%,-2.93%,0)} 38.77%{transform:translate3d(-26.63%,-2.84%,0)} 39.53%{transform:translate3d(-25.12%,-2.71%,0)} 40.30%{transform:translate3d(-23.65%,-2.53%,0)} 41.06%{transform:translate3d(-22.22%,-2.32%,0)} 41.82%{transform:translate3d(-20.85%,-2.06%,0)} 42.59%{transform:translate3d(-19.53%,-1.77%,0)} 43.35%{transform:translate3d(-18.25%,-1.43%,0)} 44.11%{transform:translate3d(-17.02%,-1.06%,0)} 44.88%{transform:translate3d(-15.83%,-0.64%,0)} 45.64%{transform:translate3d(-14.69%,-0.18%,0)} 46.41%{transform:translate3d(-13.60%,-0.24%,0)} 47.17%{transform:translate3d(-12.56%,-0.58%,0)} 47.93%{transform:translate3d(-11.56%,-0.86%,0)} 48.70%{transform:translate3d(-10.60%,-1.08%,0)} 49.46%{transform:translate3d(-9.69%,-1.25%,0)} 50.22%{transform:translate3d(-8.82%,-1.35%,0)} 50.99%{transform:translate3d(-8.00%,-1.40%,0)} 51.75%{transform:translate3d(-7.22%,-1.38%,0)} 52.51%{transform:translate3d(-6.49%,-1.31%,0)} 53.28%{transform:translate3d(-5.80%,-1.18%,0)} 54.04%{transform:translate3d(-5.15%,-0.99%,0)} 54.81%{transform:translate3d(-4.54%,-0.74%,0)} 55.57%{transform:translate3d(-3.97%,-0.43%,0)} 56.33%{transform:translate3d(-3.45%,-0.06%,0)} 57.10%{transform:translate3d(-2.96%,-0.18%,0)} 57.86%{transform:translate3d(-2.52%,-0.34%,0)} 58.62%{transform:translate3d(-2.11%,-0.45%,0)} 59.39%{transform:translate3d(-1.74%,-0.50%,0)} 60.15%{transform:translate3d(-1.41%,-0.49%,0)} 60.92%{transform:translate3d(-1.12%,-0.43%,0)} 61.68%{transform:translate3d(-0.86%,-0.31%,0)} 62.44%{transform:translate3d(-0.64%,-0.14%,0)} 63.21%{transform:translate3d(-0.46%,0.00%,0)} 63.97%{transform:translate3d(-0.31%,0.00%,0)} 64.73%{transform:translate3d(-0.19%,0.00%,0)} 65.50%{transform:translate3d(-0.10%,0.00%,0)} 66.26%{transform:translate3d(-0.04%,0.00%,0)} 67.03%{transform:translate3d(-0.01%,0.00%,0)} 67.79%{transform:translate3d(0.00%,0.00%,0)} 100.00%{opacity:1; transform:translate3d(0,0,0)} } /* FREE KICK, second ball - shown sooner and from higher: revealed 174ms at y -94.2, against 299ms at -84.7. Same gravity (0.00348 mark-heights per ms squared) and the same arrival speed; the fall is simply watched for 140ms instead of 112, which puts the reveal earlier and higher on the same curve. Entering at 0.296 heights per ms. It appears while ball 1 is still in the air. */ @keyframes kdb-fk-b2{ 0.00%{opacity:0; transform:translate3d(-51.01%,-106.73%,0)} 18.49%{opacity:0; transform:translate3d(-51.01%,-106.73%,0)} 20.35%{opacity:0; transform:translate3d(-51.01%,-106.59%,0)} 22.22%{opacity:0; transform:translate3d(-51.01%,-106.17%,0)} 24.08%{opacity:0; transform:translate3d(-51.01%,-105.46%,0)} 25.94%{opacity:0; transform:translate3d(-51.01%,-104.47%,0)} 27.81%{opacity:0; transform:translate3d(-51.01%,-103.21%,0)} 29.67%{opacity:0; transform:translate3d(-51.01%,-101.65%,0)} 31.53%{opacity:0; transform:translate3d(-51.01%,-99.82%,0)} 33.40%{opacity:0; transform:translate3d(-51.01%,-97.71%,0)} 35.26%{opacity:0; transform:translate3d(-51.01%,-95.31%,0)} 36.07%{opacity:0; transform:translate3d(-51.01%,-94.19%,0)} 37.12%{transform:translate3d(-51.01%,-92.63%,0)} 38.22%{opacity:0.5; transform:translate3d(-51.01%,-90.92%,0)} 38.96%{transform:translate3d(-51.01%,-89.71%,0)} 40.35%{opacity:1; transform:translate3d(-51.01%,-87.32%,0)} 40.83%{transform:translate3d(-51.01%,-86.47%,0)} 42.69%{transform:translate3d(-51.01%,-82.95%,0)} 44.55%{transform:translate3d(-51.01%,-79.15%,0)} 46.42%{transform:translate3d(-51.01%,-75.06%,0)} 48.28%{transform:translate3d(-51.01%,-70.70%,0)} 50.14%{transform:translate3d(-51.01%,-66.05%,0)} 52.01%{transform:translate3d(-51.01%,-61.12%,0)} 53.87%{transform:translate3d(-51.01%,-55.91%,0)} 55.73%{transform:translate3d(-51.01%,-50.42%,0)} 57.60%{transform:translate3d(-51.01%,-44.64%,0)} 59.46%{transform:translate3d(-51.01%,-38.59%,0)} 61.33%{transform:translate3d(-51.01%,-32.25%,0)} 63.19%{transform:translate3d(-51.01%,-25.63%,0)} 65.05%{transform:translate3d(-51.01%,-18.73%,0)} 65.06%{transform:translate3d(-51.01%,-18.71%,0)} 65.57%{transform:translate3d(-49.97%,-19.34%,0)} 66.08%{transform:translate3d(-48.93%,-19.92%,0)} 66.59%{transform:translate3d(-47.89%,-20.47%,0)} 67.10%{transform:translate3d(-46.85%,-20.97%,0)} 67.61%{transform:translate3d(-45.81%,-21.43%,0)} 68.12%{transform:translate3d(-44.77%,-21.84%,0)} 68.63%{transform:translate3d(-43.73%,-22.22%,0)} 69.14%{transform:translate3d(-42.69%,-22.55%,0)} 69.65%{transform:translate3d(-41.64%,-22.84%,0)} 70.16%{transform:translate3d(-40.60%,-23.09%,0)} 70.67%{transform:translate3d(-39.56%,-23.30%,0)} 71.18%{transform:translate3d(-38.52%,-23.46%,0)} 71.69%{transform:translate3d(-37.48%,-23.59%,0)} 72.20%{transform:translate3d(-36.44%,-23.67%,0)} 72.71%{transform:translate3d(-35.40%,-23.71%,0)} 73.22%{transform:translate3d(-34.36%,-23.70%,0)} 73.73%{transform:translate3d(-33.32%,-23.66%,0)} 74.24%{transform:translate3d(-32.27%,-23.57%,0)} 74.75%{transform:translate3d(-31.23%,-23.44%,0)} 75.26%{transform:translate3d(-30.19%,-23.27%,0)} 75.77%{transform:translate3d(-29.15%,-23.06%,0)} 76.28%{transform:translate3d(-28.11%,-22.80%,0)} 76.79%{transform:translate3d(-27.07%,-22.50%,0)} 77.30%{transform:translate3d(-26.03%,-22.16%,0)} 77.81%{transform:translate3d(-24.99%,-21.78%,0)} 78.32%{transform:translate3d(-23.95%,-21.36%,0)} 78.83%{transform:translate3d(-22.90%,-20.89%,0)} 79.34%{transform:translate3d(-21.86%,-20.38%,0)} 79.85%{transform:translate3d(-20.82%,-19.83%,0)} 80.36%{transform:translate3d(-19.78%,-19.24%,0)} 80.87%{transform:translate3d(-18.74%,-18.61%,0)} 81.38%{transform:translate3d(-17.70%,-17.93%,0)} 81.89%{transform:translate3d(-16.66%,-17.21%,0)} 82.40%{transform:translate3d(-15.62%,-16.45%,0)} 82.91%{transform:translate3d(-14.58%,-15.65%,0)} 83.42%{transform:translate3d(-13.53%,-14.80%,0)} 83.93%{transform:translate3d(-12.49%,-13.92%,0)} 84.44%{transform:translate3d(-11.45%,-12.99%,0)} 84.95%{transform:translate3d(-10.41%,-12.02%,0)} 85.46%{transform:translate3d(-9.37%,-11.01%,0)} 85.97%{transform:translate3d(-8.33%,-9.95%,0)} 86.48%{transform:translate3d(-7.29%,-8.85%,0)} 86.99%{transform:translate3d(-6.25%,-7.72%,0)} 87.51%{transform:translate3d(-5.21%,-6.54%,0)} 88.02%{transform:translate3d(-4.16%,-5.31%,0)} 88.53%{transform:translate3d(-3.12%,-4.05%,0)} 89.04%{transform:translate3d(-2.08%,-2.74%,0)} 89.55%{transform:translate3d(-1.04%,-1.39%,0)} 90.06%{transform:translate3d(0.00%,0.00%,0)} 92.06%{transform:translate3d(0,0,0)} 100.00%{opacity:1; transform:translate3d(0,0,0)} } .kdb-loader.kdb-filled .kdb-c{ animation-timing-function:linear; /* the curve lives in the keyframes */ animation-fill-mode:both} .kdb-loader.kdb-filled[data-mark=press] .kdb-c{animation-name:kdb-press} .kdb-loader.kdb-filled[data-mark=chip] .kdb-c{animation-name:kdb-chip} .kdb-loader.kdb-filled[data-mark=stone] .kdb-c{animation-name:kdb-stone} /* each counter has its own throw */ .kdb-loader.kdb-filled[data-mark=toss] .kdb-c:nth-child(1){animation-name:kdb-toss-0} .kdb-loader.kdb-filled[data-mark=toss] .kdb-c:nth-child(2){animation-name:kdb-toss-1} .kdb-loader.kdb-filled[data-mark=toss] .kdb-c:nth-child(3){animation-name:kdb-toss-2} .kdb-loader.kdb-filled[data-mark=toss] .kdb-c:nth-child(4){animation-name:kdb-toss-3} /* free kick: one timeline per counter, all sharing a duration so the beats line up */ .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c:nth-child(1){animation-name:kdb-fk-k} .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c:nth-child(2){animation-name:kdb-fk-d} .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c:nth-child(3){animation-name:kdb-fk-b1} .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c:nth-child(4){animation-name:kdb-fk-b2} .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c{transform-origin:50% 100%} /* the kicker pivots at the TOP - a leg swings from the hip, so the foot travels and the head stays put. Pivoting at the base did the reverse. */ .kdb-loader.kdb-filled[data-mark=freekick] .kdb-c:nth-child(1){transform-origin:50% 100%} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c{transform-origin:50% 100%} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c:nth-child(1){transform-origin:50% 100%} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c:nth-child(1){animation-name:kdb-vl-k} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c:nth-child(2){animation-name:kdb-vl-d} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c:nth-child(3){animation-name:kdb-vl-b1} .kdb-loader.kdb-filled[data-mark=volley] .kdb-c:nth-child(4){animation-name:kdb-vl-b2} .kdb-loader.kdb-filled:not([data-mark]) .kdb-c{animation-name:kdb-press} /* anyone who asked for less motion just gets the fade */ @media (prefers-reduced-motion:reduce){ .kdb-loader.kdb-filled .kdb-c{animation:none;opacity:1;transform:none} } .kdb-loader.kdb-filled .kdb-stage{opacity:0} /* the count. `top` is set in JS so it tracks the container, not the viewport, and it leaves on the same cue as the photo it belongs to. */ .kdb-meta{position:absolute;left:0;right:0;text-align:center; font-size:11px;letter-spacing:.2em;color:#4A4A46;font-variant-numeric:tabular-nums; z-index:6;pointer-events:none;transition:opacity .30s cubic-bezier(.4,0,.2,1)} .kdb-loader.kdb-out .kdb-meta, .kdb-loader.kdb-filled .kdb-meta{opacity:0} .kdb-pct:after{content:"%";opacity:.45;margin-left:2px} /* a hairline directly under the container, exactly as wide as it, with the count beneath. left/top/width are set in JS off the same numbers as the square, so it tracks the container instead of the viewport. It leaves on the same cue as the photo and the count. Colour comes from the KDB system rather than being picked: the fill encodes the load, so by D3 it is a data mark, and a data mark is --kdb-accent-mark (ice-60 #3A8DBE, 3.66:1 on white - above the 3:1 WCAG 1.4.11 floor for a meaningful non-text graphic). ice-45 #74B4D8 is the signature value but is banned as a mark colour, and the terracotta this used to be is not in the palette at all. The track is a rule, not a mark: --kdb-border-hairline (neutral-20 #D9DDE3). Literal hex because the loader ships standalone and does not import tokens.css - keep these two in step with it. */ .kdb-bar{position:absolute;height:1px;background:#D9DDE3;z-index:6; pointer-events:none;transition:opacity .30s cubic-bezier(.4,0,.2,1)} .kdb-bar i{display:block;height:100%;width:0;background:#3A8DBE; transition:width .12s linear} .kdb-loader.kdb-out .kdb-bar, .kdb-loader.kdb-filled .kdb-bar{opacity:0}