/* System and proof chapters, slides 16-26. */

/* Slide 17: the decision. A pool narrows both ways to one introduction, then the place is checked. */
.al{height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;column-gap:3vw}
.al-stage{align-self:stretch}
.al-field{position:absolute;inset:0}
.al-dot{--x:var(--bx);--y:var(--by);width:5.2cqh;height:5.2cqh;border-radius:50%;display:grid;place-items:center;--o:1;transition-duration:.9s,.5s,.6s}
.al-dot svg{width:62%;height:62%;fill:none;stroke:rgba(48,47,43,.55);stroke-width:1.8;stroke-linecap:round}
.scene.active .al-dot{animation:al-in .9s var(--spring-bounce) calc(.2s + var(--d) * 3) both}
@keyframes al-in{from{scale:0}}
.scene[data-step="1"] .al-dot.f1,.scene[data-step="2"] .al-dot,.scene[data-step="3"] .al-dot{--o:0;--s:.4;--b:3px;--y:48}
.scene[data-step="1"] .al-dot.f2{box-shadow:0 0 0 2px var(--ink)}
.al-me{--x:-40;--y:0}
.al-me,.al-alex{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.al-me img,.al-alex img{width:20cqh;height:20cqh;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 5px var(--paper),0 24px 40px -20px rgba(48,47,43,.6)}
.al-me figcaption,.al-alex figcaption{font-family:Coolvetica,Arial,sans-serif;font-size:22px}
.al-alex{--x:22;--y:4;--s:.26;--o:0}
.scene[data-step="2"] .al-alex,.scene[data-step="3"] .al-alex{--x:32;--y:0;--s:1;--o:1;--d:.35s}
.scene[data-step="2"] .al-me,.scene[data-step="3"] .al-me{--x:-32}
.scene[data-step="3"] .al-me,.scene[data-step="3"] .al-alex{--y:-26;--s:.62}
.al-link{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.al-link path{fill:none;stroke:var(--coral);stroke-width:.45;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--spring-soft) .7s,opacity .4s}
.scene[data-step="2"] .al-link path{stroke-dashoffset:0}
.al-link{opacity:0;transition:opacity .3s}
.scene[data-step="2"] .al-link{opacity:1}
.al-tag{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(18px,1.5vw,22px);padding:9px 16px;border-radius:30px;background:#fff;box-shadow:0 14px 30px -16px rgba(48,47,43,.5);--o:0;--s:.5}
.al-t1{--x:-14;--y:-26}.al-t2{--x:14;--y:-26}
.scene[data-step="2"] .al-tag{--o:1;--s:1;--d:1s}
.scene[data-step="2"] .al-t2{--d:1.2s;background:var(--coral)}
.al-sweep{width:2px;height:90cqh;background:linear-gradient(transparent,var(--coral),transparent);--o:0;--x:-30}
.scene[data-step="1"] .al-sweep{animation:al-sweep 1.6s cubic-bezier(.6,0,.3,1) .15s both}
@keyframes al-sweep{0%{opacity:0;translate:-20cqw 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;translate:60cqw 0}}
.al-venue{display:grid;grid-template-columns:34cqh 1fr;gap:18px;align-items:center;width:min(560px,92cqw);padding:14px;border-radius:24px;background:#fff;box-shadow:0 40px 70px -40px rgba(48,47,43,.6);--y:24;--o:0;--s:.8}
.al-venue img{width:100%;height:24cqh;border-radius:14px;object-fit:cover}
.al-venue b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(22px,2vw,30px);margin-bottom:8px}
.al-chk{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.9;opacity:.25;transition:opacity .4s}
.al-chk .x-ico{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--stone);transition:background .4s,color .4s}
.scene[data-step="3"] .al-venue{--y:22;--o:1;--s:1;--d:.3s}
.scene[data-step="3"] .al-chk{opacity:1;transition-delay:calc(1s + var(--k) * .35s)}
.scene[data-step="3"] .al-chk .x-ico{background:var(--coral);transition-delay:calc(1s + var(--k) * .35s)}

/* Slide 18: signals. Each action drops into its own tray. */
.sg{height:100%;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;column-gap:3vw}
.sg-stage{align-self:stretch}
.sg-card{z-index:2;display:flex;align-items:center;gap:14px;width:min(420px,60cqw);padding:14px 20px 14px 14px;border-radius:20px;background:#fff;box-shadow:0 24px 46px -26px rgba(48,47,43,.6);transition-property:transform,opacity,filter,width,padding,box-shadow;transition-duration:1.1s,.55s,.6s,.9s,.9s,.5s}
.sg-card b{font-size:clamp(15px,1.25vw,18px)}
.sg-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--stone);transition:background .5s}
.sg-c0{--y:-34;--d:0s}.sg-c1{--y:-21;--d:.06s}.sg-c2{--y:-8;--d:.12s}
.scene.active .sg-card{animation:sg-in 1s var(--spring-snap) calc(.3s + var(--d) * 3) both}
@keyframes sg-in{from{translate:0 -60px;opacity:0}}
.sg-bin{width:29cqw;height:36cqh;padding:18px 18px 20px;border-radius:24px;background:rgba(48,47,43,.05);box-shadow:inset 0 0 0 1.5px rgba(48,47,43,.12);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;--y:27}
.sg-b0{--x:-33}.sg-b1{--x:0}.sg-b2{--x:33}
.sg-bin small{font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.sg-bin p{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(18px,1.6vw,24px);line-height:1.08;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .8s var(--spring-snap)}
.scene[data-step="1"] .sg-c0,.scene[data-step="2"] .sg-c0,.scene[data-step="3"] .sg-c0{--x:-33;--y:15.5;--d:0s}
.scene[data-step="2"] .sg-c1,.scene[data-step="3"] .sg-c1{--x:0;--y:15.5;--d:0s}
.scene[data-step="3"] .sg-c2{--x:33;--y:15.5;--d:0s}
.scene[data-step="1"] .sg-c0,.scene[data-step="2"] :is(.sg-c0,.sg-c1),.scene[data-step="3"] .sg-card{width:25.5cqw;padding:10px 12px;box-shadow:0 0 0 1px rgba(48,47,43,.08)}
.scene[data-step="1"] .sg-c0 b,.scene[data-step="2"] :is(.sg-c0,.sg-c1) b,.scene[data-step="3"] .sg-card b{font-size:14px;line-height:1.25}
.scene[data-step="1"] .sg-c0 .sg-ic,.scene[data-step="2"] :is(.sg-c0,.sg-c1) .sg-ic,.scene[data-step="3"] .sg-card .sg-ic{background:var(--coral)}
.scene[data-step="1"] .sg-b0,.scene[data-step="2"] :is(.sg-b0,.sg-b1),.scene[data-step="3"] .sg-bin{background:#fff;box-shadow:0 30px 60px -36px rgba(48,47,43,.55)}
.scene[data-step="1"] .sg-b0 p,.scene[data-step="2"] :is(.sg-b0,.sg-b1) p,.scene[data-step="3"] .sg-bin p{opacity:1;transform:none;transition-delay:.6s}
.scene[data-step="1"] .sg-b0{--s:1.03}.scene[data-step="2"] .sg-b1{--s:1.03}.scene[data-step="3"] .sg-b2{--s:1.03}
.sg-foot{white-space:nowrap;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(20px,1.7vw,26px);--y:-22;--o:0}
.scene[data-step="3"] .sg-foot{--o:1;--d:1.2s}

/* Slide 19: landscape. Three separate tiles slide together into one thread. */
.ls{height:100%;display:grid;grid-template-rows:auto 1fr;row-gap:1vh}
.ls-stage{}
.ls-tile{width:30cqw;padding:12px 12px 20px;border-radius:26px;background:#fff;box-shadow:0 40px 70px -40px rgba(48,47,43,.6),0 0 0 1px rgba(48,47,43,.04);--o:0;--s:.82;--y:-2;transition-property:transform,opacity,filter,border-radius,box-shadow;transition-duration:1.1s,.55s,.6s,.8s,.6s}
.ls-tile small{display:block;margin:16px 8px 3px;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ls-tile b{display:block;margin:0 8px;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(22px,2vw,32px);line-height:1.05}
.ls-art{position:relative;height:46cqh;border-radius:16px;overflow:hidden;display:grid;place-items:center;transition:border-radius .8s}
.ls-art img{width:100%;height:100%;object-fit:cover}
.ls-art-0 img{object-position:50% 20%;transition:transform 6s ease-out}
.scene.active .ls-art-0 img{transform:scale(1.06)}
.ls-art-0 span{position:absolute;left:16px;bottom:14px;color:#fff;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(24px,2vw,32px);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.ls-art-1{background:linear-gradient(160deg,#d6ecf6,#f6e6dc)}
.ls-art-1 .live{position:absolute;left:50%;top:52%;width:150%;translate:-50% -50%}
.ls-art-2 img{object-position:50% 60%}
.ls-t0{--x:-34;--r:-3deg}.ls-t1{--x:0;--r:1.5deg}.ls-t2{--x:34;--r:-1.5deg}
.scene[data-step="0"] .ls-t0,.scene[data-step="1"] :is(.ls-t0,.ls-t1),.scene[data-step="2"] .ls-tile{--o:1;--s:1}
.scene[data-step="1"] .ls-t0,.scene[data-step="2"] :is(.ls-t0,.ls-t1){--s:.94;--o:.75}
.scene[data-step="0"] .ls-t0,.scene[data-step="1"] .ls-t1,.scene[data-step="2"] .ls-t2{--y:-4;--s:1.04;box-shadow:0 60px 90px -40px rgba(48,47,43,.7),0 0 0 2px var(--coral)}
.scene[data-step="3"] .ls-tile{--o:1;--s:1;--r:0deg;--y:-8}
.scene[data-step="3"] .ls-t0{--x:-30;--d:.05s;border-radius:26px 0 0 26px}
.scene[data-step="3"] .ls-t1{border-radius:0}
.scene[data-step="3"] .ls-t2{--x:30;--d:.05s;border-radius:0 26px 26px 0}
.scene[data-step="3"] .ls-tile{box-shadow:0 50px 80px -46px rgba(48,47,43,.55)}
.ls-thread{position:absolute;left:15cqw;width:70cqw;top:calc(50% + 33.6cqh - 10px);height:20px;overflow:visible}
.ls-thread path{fill:none;stroke:var(--coral);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) .8s}
.scene[data-step="3"] .ls-thread path{stroke-dashoffset:0}
.ls-node{width:16px;height:16px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px var(--blue);--y:33.6;--o:0;--s:0}
.ls-n0{--x:-30}.ls-n1{--x:0}.ls-n2{--x:30}
.scene[data-step="3"] .ls-node{--o:1;--s:1}
.scene[data-step="3"] .ls-n0{--d:.9s}.scene[data-step="3"] .ls-n1{--d:1.3s}.scene[data-step="3"] .ls-n2{--d:1.7s}
.ls-label{display:flex;align-items:center;gap:12px;white-space:nowrap;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(20px,1.7vw,26px);--y:42;--o:0}
.scene[data-step="3"] .ls-label{--o:1;--y:41;--d:1.9s}
.ls-logo{display:flex}.ls-logo i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink)}.ls-logo i+i{margin-left:-9px;background:var(--coral);border:none;mix-blend-mode:multiply}

/* Slide 20: evidence. Two conditions, a qualitative meter and our own question. */
.ev{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:3vw}
.ev-stage{align-self:stretch}
.ev-src{display:flex;gap:10px;white-space:nowrap;--y:-42}
.ev-src span{font:700 12px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;border-radius:30px;background:var(--ink);color:var(--paper)}
.ev-src span+span{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.scene.active .ev-src{animation:sg-in .9s var(--spring-snap) .3s both}
.ev-card{width:34cqw;padding:12px 12px 20px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -36px rgba(48,47,43,.6);--y:2;--o:0;--s:.8}
.ev-a{--x:-21;--r:-2deg}.ev-b{--x:21;--r:2deg}
.ev-card small{display:block;margin:14px 6px 2px;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ev-card b{display:block;margin:0 6px 14px;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(20px,1.8vw,28px);line-height:1.05}
.ev-art{height:30cqh;border-radius:16px;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.ev-profile{display:flex;flex-direction:column;align-items:center;gap:8px;width:52%}
.ev-profile img{width:13cqh;height:13cqh;border-radius:50%;object-fit:cover;object-position:50% 25%}
.ev-profile i{display:block;height:8px;border-radius:6px;background:rgba(48,47,43,.12);width:100%}.ev-profile i:last-child{width:65%}
.ev-art-b{background:linear-gradient(160deg,#d6ecf6,#f6e6dc)}
.ev-scene{width:84%;height:auto}
.ev-meter{margin:0 6px;height:12px;border-radius:12px;background:rgba(48,47,43,.08);overflow:hidden}
.ev-meter i{display:block;height:100%;border-radius:12px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--spring-soft)}
.ev-b .ev-meter i{background:var(--coral)}
.ev-vs{font-family:Coolvetica,Arial,sans-serif;font-size:28px;color:var(--muted);--o:0}
.scene:not([data-step="0"]) .ev-card{--o:1;--s:1}
.scene:not([data-step="0"]) .ev-b{--d:.15s}
.scene:not([data-step="0"]) .ev-vs{--o:1;--d:.4s}
.scene[data-step="2"] .ev-a .ev-meter i,.scene[data-step="3"] .ev-a .ev-meter i{transform:scaleX(.45);transition-delay:.3s}
.scene[data-step="2"] .ev-b .ev-meter i,.scene[data-step="3"] .ev-b .ev-meter i{transform:scaleX(.72);transition-delay:.55s}
.ev-find{white-space:nowrap;font-size:15px;color:var(--muted);--y:35;--o:0}
.scene[data-step="2"] .ev-find{--o:1;--d:.9s}
.scene[data-step="3"] :is(.ev-card,.ev-vs){--o:.25;--b:4px;--s:.94}
.ev-ask{width:min(560px,80cqw);padding:30px 34px 34px;border-radius:28px;background:var(--ink);color:var(--paper);box-shadow:0 50px 90px -40px rgba(48,47,43,.8);--y:6;--o:0;--s:.7}
.ev-ask small{display:block;font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.ev-ask b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(28px,2.6vw,42px);line-height:1.05}
.scene[data-step="3"] .ev-ask{--o:1;--s:1;--d:.25s}

.ev .hd h2{font-size:clamp(40px,4vw,68px)}

/* Slide 21: pilot. A map of Barcelona; the camera flies into Gràcia, venues drop in, people appear, two routes meet at the café. */
@property --zs{syntax:'<number>';inherits:true;initial-value:1}
@property --zx{syntax:'<number>';inherits:true;initial-value:50}
@property --zy{syntax:'<number>';inherits:true;initial-value:50}
.pl{height:100%;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;column-gap:3vw}
.pl-stage{display:grid;place-items:center}
.pl-card{position:relative;width:min(100%,calc((100vh - 250px) * 1.4286));aspect-ratio:1000/700;border-radius:28px;overflow:hidden;background:#f3ede1;box-shadow:0 60px 100px -50px rgba(48,47,43,.55),0 0 0 1px rgba(48,47,43,.08);container-type:size}
.pl-cam{position:absolute;inset:0;transform-origin:0 0;transform:translate(50%,50%) scale(var(--zs)) translate(calc(var(--zx) * -1%),calc(var(--zy) * -1%));--zs:2.15;--zx:44.6;--zy:25.5;transition:--zs 1.8s cubic-bezier(.6,0,.15,1),--zx 1.8s cubic-bezier(.6,0,.15,1),--zy 1.8s cubic-bezier(.6,0,.15,1)}
.scene.active[data-step="0"] .pl-cam{animation:pl-cam0 3.6s cubic-bezier(.6,0,.15,1) both}
@keyframes pl-cam0{0%,22%{--zs:1;--zx:50;--zy:50}100%{--zs:2.15;--zx:44.6;--zy:25.5}}
.scene[data-step="3"] .pl-cam{--zs:2.8;--zx:45.6;--zy:24.4}
.pl-svg{position:absolute;inset:0;width:100%;height:100%}
.pl-land{fill:#f3ede1}
.pl-sea{fill:#b7dbee}
.pl-waves path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.55}
.pl-shore{fill:none;stroke:#fff;stroke-width:3}
.pl-parks path{fill:#cfe2bd}
.pl-trees circle{fill:#a9c995}
.pl-b-eix path{fill:#e7dfcf}.pl-b-out path{fill:#ebe4d6}.pl-b-old path{fill:#e3d8c4}
.pl-gra-ground{fill:#f3ede1;transition:fill 1s}
.pl-b-gra path{fill:#e2d4bd;transition:fill 1s}
.pl-road-c{fill:none;stroke:#e2d7c3;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pl-road{fill:none;stroke:#fffdf8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.pl-sf path{fill:#c9b79a}
.pl-labels text{font-family:Arial,sans-serif;font-weight:700;text-anchor:middle;fill:#9a8f7e;letter-spacing:.14em;text-transform:uppercase}
.pl-l{font-size:11px}.pl-l-big{font-size:15px}
.pl-l-sea{font-size:15px;font-style:italic;font-weight:400!important;fill:#6d9db5!important;letter-spacing:.3em!important}
.pl-dim{fill:rgba(60,55,48,.22);opacity:0;transition:opacity 1s}
.scene.active .pl-dim{opacity:1;transition-delay:2.4s}
.scene.active:not([data-step="0"]) .pl-dim{transition-delay:0s}
.scene.active .pl-gra-ground{fill:#fffaf1;transition-delay:2.4s}
.scene.active .pl-b-gra path{fill:#efd6b8;transition-delay:2.4s}
.scene.active:not([data-step="0"]) :is(.pl-gra-ground,.pl-b-gra path){transition-delay:0s}
.pl-hood{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round}
.scene.active .pl-hood{animation:pl-draw 1.4s cubic-bezier(.6,0,.2,1) 2.2s both}
.scene.active:not([data-step="0"]) .pl-hood{animation:none;stroke-dashoffset:0}
@keyframes pl-draw{to{stroke-dashoffset:0}}
.pl-hood-t{font-family:Coolvetica,Arial,sans-serif;font-size:15px;text-anchor:middle;fill:#bd4127;opacity:0;transition:opacity .6s}
.scene.active .pl-hood-t{opacity:1;transition-delay:3s}
.scene.active:not([data-step="0"]) .pl-hood-t{transition-delay:0s}
.pl-route{fill:none;stroke-linecap:round}
.pl-route-c{stroke:#fff;stroke-width:4.2;opacity:0;transition:opacity .4s}
.pl-rm,.pl-ra{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1}
.pl-ra{stroke:#4f9fc4}.pl-rm{stroke:var(--coral)}
.scene[data-step="3"] .pl-route-c{opacity:1}
.scene[data-step="3"] .pl-rm{animation:pl-draw 1.9s cubic-bezier(.45,0,.55,1) .76s both}
.scene[data-step="3"] .pl-ra{animation:pl-draw 1.9s cubic-bezier(.45,0,.55,1) .84s both}

/* Everything pinned to the map keeps its screen size while the camera zooms. */
.pl-pin,.pl-p,.pl-pair{position:absolute;--k:calc(1 / var(--zs))}
.pl-pin{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transform:translate(-50%,-100%) scale(calc(var(--k) * 0));transition:transform .9s var(--spring-bounce) var(--pd,0s)}
.pl-pin b{display:flex;align-items:center;gap:.4em;white-space:nowrap;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(14px,2.6cqw,22px);padding:.4em .75em .4em .45em;border-radius:2em;background:#fff;color:var(--ink);box-shadow:0 .5em 1.2em -.4em rgba(48,47,43,.5)}
.pl-pin svg{width:1.35em;height:1.35em;padding:.2em;border-radius:50%;background:var(--ink);fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-pin i{width:2px;height:clamp(10px,2cqw,16px);background:var(--ink)}
.pl-pin:after{content:'';width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,104,64,.25)}
.pl-pin0 svg{background:var(--coral);stroke:var(--ink)}
.scene:not([data-step="0"]) .pl-pin{transform:translate(-50%,-100%) scale(var(--k))}
.scene[data-step="1"] .pl-pin1{--pd:.25s}.scene[data-step="1"] .pl-pin2{--pd:.5s}
.scene[data-step="3"] :is(.pl-pin1,.pl-pin2){opacity:.45;transition:transform .9s var(--spring-bounce),opacity .6s}
.pl-p{width:12px;height:12px;margin:-6px;border-radius:50%;box-shadow:0 0 0 2.5px #fff;transform:scale(calc(var(--k) * 0));transition:transform .8s var(--spring-bounce) var(--d),opacity .6s}
.pl-p:after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.pl-local{background:#2f6f8f}.pl-new{background:var(--coral)}.pl-expat{background:#8a7a4a}
.scene[data-step="2"] .pl-p,.scene[data-step="3"] .pl-p{transform:scale(var(--k))}
.scene[data-step="2"] .pl-p:after{animation:pl-ping 2s ease-out calc(1s + var(--d)) infinite}
.scene[data-step="3"] .pl-p{opacity:.3}
@keyframes pl-ping{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(3)}}
.pl-pair{z-index:2;width:44px;height:44px;margin:-22px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #fff,0 8px 16px -6px rgba(48,47,43,.6);transform:scale(calc(var(--k) * 0));transition:transform .7s var(--spring-bounce)}
.pl-pair img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pl-pm{left:33.2%;top:33.71%;box-shadow:0 0 0 3px var(--coral),0 8px 16px -6px rgba(48,47,43,.6)}
.pl-pa{left:57.4%;top:25.43%;box-shadow:0 0 0 3px #4f9fc4,0 8px 16px -6px rgba(48,47,43,.6)}
.scene[data-step="3"] .pl-pair{transform:scale(var(--k))}
.scene[data-step="3"] .pl-pm{animation:pl-walk-m 3.8s cubic-bezier(.45,0,.55,1) both}
.scene[data-step="3"] .pl-pa{animation:pl-walk-a 3.8s cubic-bezier(.45,0,.55,1) both}
.scene[data-step="3"] .pl-pin0{transition-delay:0s}
@keyframes pl-walk-m{0%,20%{left:33.20%;top:33.71%}23.1%{left:34.27%;top:32.56%}26.2%{left:35.36%;top:31.46%}29.4%{left:36.48%;top:30.42%}32.5%{left:37.60%;top:29.43%}35.6%{left:38.72%;top:28.49%}38.8%{left:39.84%;top:27.61%}41.9%{left:40.93%;top:26.78%}45.0%{left:42.00%;top:26.00%}48.1%{left:42.77%;top:25.37%}51.2%{left:43.30%;top:24.77%}54.4%{left:43.64%;top:24.20%}57.5%{left:43.84%;top:23.66%}60.6%{left:43.94%;top:23.16%}63.8%{left:43.98%;top:22.69%}66.9%{left:44.02%;top:22.25%}70.0%{left:44.10%;top:21.86%}100%{left:44.10%;top:21.86%}}
@keyframes pl-walk-a{0%,22%{left:57.40%;top:25.43%}25.1%{left:56.42%;top:25.30%}28.2%{left:55.42%;top:25.11%}31.4%{left:54.43%;top:24.88%}34.5%{left:53.45%;top:24.61%}37.6%{left:52.49%;top:24.29%}40.8%{left:51.55%;top:23.94%}43.9%{left:50.65%;top:23.56%}47.0%{left:49.80%;top:23.14%}50.1%{left:49.03%;top:22.85%}53.2%{left:48.36%;top:22.60%}56.4%{left:47.79%;top:22.40%}59.5%{left:47.31%;top:22.23%}62.6%{left:46.91%;top:22.10%}65.8%{left:46.58%;top:22.00%}68.9%{left:46.31%;top:21.92%}72.0%{left:46.10%;top:21.86%}100%{left:46.10%;top:21.86%}}

/* Map chrome that stays put */
.pl-ui{position:absolute;inset:0;pointer-events:none}
.pl-search{position:absolute;left:3cqw;top:3cqw;display:flex;align-items:center;gap:.5em;font-size:clamp(13px,2.1cqw,17px);font-weight:700;padding:.6em 1.1em .6em .8em;border-radius:2em;background:rgba(255,255,255,.92);box-shadow:0 .6em 1.4em -.6em rgba(48,47,43,.45)}
.pl-search svg{width:1.2em;height:1.2em;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.pl-zoom{position:absolute;right:3cqw;top:3cqw;display:flex;flex-direction:column;border-radius:.8em;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:0 .6em 1.4em -.6em rgba(48,47,43,.45)}
.pl-zoom i{width:2.1em;height:2.1em;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:clamp(13px,2cqw,17px)}
.pl-zoom i+i{border-top:1px solid rgba(48,47,43,.1)}
.scene.active[data-step="0"] .pl-zoom i:first-child{animation:pl-tap .5s ease 1s both}
@keyframes pl-tap{50%{background:rgba(255,104,64,.3)}}
.pl-legend{position:absolute;left:3cqw;bottom:3cqw;display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;padding:.6em 1em;border-radius:2em;background:rgba(255,255,255,.92);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .7s var(--spring-snap)}
.pl-legend span{width:10px;height:10px;border-radius:50%;margin-left:8px}
.pl-legend span:first-child{margin-left:0}
.scene[data-step="2"] .pl-legend{opacity:1;transform:none}
.pl-note{position:absolute;right:3cqw;bottom:3cqw;font-size:12px;padding:.5em .9em;border-radius:2em;background:rgba(255,255,255,.85);color:var(--muted);opacity:0;transition:opacity .5s}
.scene:not([data-step="0"]) .pl-note{opacity:1}
.scene[data-step="3"] .pl-note{opacity:0}
.pl-done{position:absolute;left:50%;bottom:4cqw;display:flex;align-items:center;gap:12px;padding:12px 22px 12px 12px;border-radius:22px;background:#fff;box-shadow:0 24px 50px -24px rgba(48,47,43,.6);transform:translate(-50%,160%);transition:transform .9s var(--spring-snap)}
.pl-done .x-ico{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--coral)}
.pl-done b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(18px,2.6cqw,24px);line-height:1}
.pl-done span span,.pl-done span{font-size:13px;color:var(--muted)}
.pl-done b{color:var(--ink)}
.scene[data-step="3"] .pl-done{transform:translate(-50%,0);transition-delay:2.85s}
body.motion-paused :is(.pl-cam,.pl-hood,.pl-rm,.pl-ra,.pl-pm,.pl-pa,.pl-p:after,.pl-zoom i){animation:none!important}
body.motion-paused .scene[data-step="3"] :is(.pl-rm,.pl-ra){stroke-dashoffset:0}
body.motion-paused .scene[data-step="3"] .pl-pm{left:44.1%;top:21.86%}
body.motion-paused .scene[data-step="3"] .pl-pa{left:46.1%;top:21.86%}

/* Slide 22: experiments. Two lanes of pairs flow into the same measure. */
.ex{height:100%;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;column-gap:3vw}
.ex-stage{align-self:stretch}
.ex-watch{display:flex;align-items:center;gap:16px;width:max-content;white-space:nowrap;padding:18px 22px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -34px rgba(48,47,43,.6);--y:-2;--s:1}
.ex-watch .x-ico{width:46px;height:46px;padding:10px;border-radius:50%;background:var(--blue)}
.ex-watch span{font-size:15px;color:var(--muted);line-height:1.35}
.ex-watch b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(22px,1.9vw,30px);color:var(--ink)}
.scene.active[data-step="0"] .ex-watch .x-ico{animation:ex-blink 3s ease 1s infinite}
@keyframes ex-blink{0%,40%,50%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
.scene:not([data-step="0"]) .ex-watch{--y:-40;--s:.7;--o:.5}
.ex-lane{display:grid;grid-template-columns:44px auto 1fr;align-items:center;gap:16px;width:66cqw;height:15cqh;padding:0 18px;border-radius:999px;background:rgba(48,47,43,.05);box-shadow:inset 0 0 0 1.5px rgba(48,47,43,.1);--x:-12;--o:0;--s:.9}
.ex-la{--y:-14}.ex-lb{--y:8}
.ex-tag{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:Coolvetica,Arial,sans-serif;font-size:24px;background:var(--ink);color:var(--paper)}
.ex-lb .ex-tag{background:var(--coral);color:var(--ink)}
.ex-msg{font-size:15px;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;white-space:nowrap}
.ex-scene{width:13cqh;height:10cqh;border-radius:12px;background:linear-gradient(160deg,#d6ecf6,#f6e6dc);display:grid;place-items:center;overflow:hidden}
.ex-scene img{width:120%;height:auto}
.ex-flow{position:relative;height:100%}
.ex-flow i{position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ink);opacity:0}
.ex-lb .ex-flow i{background:var(--coral)}
.scene[data-step="1"] .ex-la,.scene[data-step="2"] .ex-la,.scene[data-step="3"] .ex-la,.scene[data-step="2"] .ex-lb,.scene[data-step="3"] .ex-lb{--o:1;--s:1}
.scene[data-step="1"] .ex-la .ex-flow i,.scene[data-step="2"] .ex-lb .ex-flow i,.scene[data-step="3"] .ex-flow i{animation:ex-run 2.6s cubic-bezier(.45,0,.55,1) calc(var(--k) * .4s) infinite}
@keyframes ex-run{0%{left:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.ex-gate{width:28cqw;padding:22px 22px 24px;border-radius:24px;background:var(--ink);color:var(--paper);box-shadow:0 40px 70px -40px rgba(48,47,43,.8);--x:34;--y:-3;--o:0;--s:.7}
.ex-gate small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.ex-gate b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(22px,1.9vw,30px);line-height:1.05}
.ex-gate span{display:block;margin-top:10px;font-size:14px;color:#c8c8be}
.scene[data-step="3"] .ex-gate{--o:1;--s:1;--d:.2s}
.scene[data-step="3"] .ex-lane{--x:-18;width:52cqw}

/* Slide 23: build. Three glass layers fly in exploded, then compress into one product; light rises through them. */
.bd{height:100%;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;column-gap:1vw}
.bx-stage{position:relative;align-self:stretch;perspective:2000px;perspective-origin:50% 30%;container-type:size}
.bx-iso{--gap:1;position:absolute;left:47%;top:60%;width:min(66cqh,40cqw);aspect-ratio:1;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(56deg) rotateZ(-36deg);transition:transform 1.6s var(--spring-soft)}
.scene.active .bx-iso{animation:bx-in 1.6s var(--spring-soft) both}
@keyframes bx-in{from{transform:translate(-50%,-30%) rotateX(56deg) rotateZ(-110deg) scale(.4)}}
.scene[data-step="3"] .bx-iso{transform:translate(-64%,-46%) rotateX(52deg) rotateZ(-30deg) scale(.92)}
.bx-floor{position:absolute;inset:-14%;border-radius:40px;background:radial-gradient(closest-side,rgba(48,47,43,.18),transparent);transform:translateZ(-2px);filter:blur(10px)}

/* Layers: frosted glass slabs with a thick edge; each holds a small working UI. */
.bx-layer{--z:0px;position:absolute;inset:0;border-radius:28px;transform-style:preserve-3d;transform:translateZ(var(--z));opacity:0;transition:transform 1.25s var(--spring-snap),opacity .45s,box-shadow .6s}
.bx-layer:before{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.45);transform:translateZ(-14px);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.bx-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:5%;padding:7%;font-size:min(2.6cqh,1.6cqw)!important;border-radius:inherit;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(253,250,246,.86));box-shadow:0 0 0 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(48,47,43,.06),-24px 34px 60px -24px rgba(48,47,43,.35);font-size:min(2.1cqh,1.35cqw)}
.bx-head{display:flex;align-items:center;gap:.6em}
.bx-head b{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;font:700 .9em Arial,sans-serif;background:var(--ink);color:var(--paper)}
.bx-head span{font-family:Coolvetica,Arial,sans-serif;font-size:1.6em}
.bx-foot{margin-top:auto;font-size:1.05em;color:var(--muted)}
/* Layer content */
.bx-people{flex:1;display:flex;align-items:center;justify-content:center;gap:6%}
.bx-people figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.4em;font-family:Coolvetica,Arial,sans-serif;font-size:1.2em}
.bx-people img{width:5.8em;height:5.8em;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 .3em #fff,0 .8em 1.4em -.6em rgba(48,47,43,.5)}
.bx-heart{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:var(--coral);font-size:1.3em;scale:0;transition:scale .8s var(--spring-bounce) .9s}
.bx-scene{flex:1;min-height:0;border-radius:1.4em;overflow:hidden;background:linear-gradient(160deg,#d6ecf6,#f6e6dc);display:grid;place-items:center}
.bx-scene .live{width:118%}
.bx-date{flex:1;min-height:0;display:grid;grid-template-rows:1fr auto;border-radius:1.4em;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.06)}
.bx-date img{width:100%;height:100%;min-height:0;object-fit:cover}
.bx-date>div{padding:.8em 1em}
.bx-date small{font:700 .8em Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#bd4127}
.bx-date b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:2.2em;line-height:1}
.bx-ok{display:inline-flex;align-items:center;gap:.4em;margin-top:.3em;font-size:.95em;color:#2d7a4b}
.bx-ok .x-ico{width:1.3em;height:1.3em;padding:.15em;border-radius:50%;background:#2d7a4b;color:#fff;scale:0;transition:scale .7s var(--spring-bounce) 1s}

/* Choreography: each beat drops the next layer from above with a spring; the stack is exploded while building
   and compresses into one product at the end. */
.bx-l0{--z:0px}
.bx-l1{--z:calc(110px * var(--gap) + 260px)}
.bx-l2{--z:calc(220px * var(--gap) + 360px)}
.scene.active .bx-l0{opacity:1}
.scene.active .bx-l0 .bx-heart{scale:1}
.scene:not([data-step="0"]) .bx-l1{opacity:1;--z:calc(110px * var(--gap))}
.scene[data-step="2"] .bx-l2,.scene[data-step="3"] .bx-l2{opacity:1;--z:calc(220px * var(--gap))}
.scene[data-step="2"] .bx-ok .x-ico,.scene[data-step="3"] .bx-ok .x-ico{scale:1}
.scene[data-step="3"] .bx-iso{--gap:.3}
.scene[data-step="0"] .bx-l0 .bx-face,.scene[data-step="1"] .bx-l1 .bx-face,.scene[data-step="2"] .bx-l2 .bx-face{box-shadow:0 0 0 2px var(--coral),-24px 34px 60px -24px rgba(48,47,43,.35)}
.scene:not([data-step="1"]):not([data-step="3"]) .bx-l1 .live *{animation-play-state:paused!important}

/* Light rising through the stack */
.bx-beam{position:absolute;inset:-6%;border-radius:36px;background:transparent;box-shadow:0 0 0 3px var(--coral),0 0 40px 6px rgba(255,104,64,.55);transform-style:preserve-3d;opacity:0}
.scene[data-step="3"] .bx-beam{animation:bx-beam 1.8s cubic-bezier(.4,0,.2,1) .9s infinite}
@keyframes bx-beam{0%{opacity:0;transform:translateZ(-20px) scale(.9)}25%{opacity:1}100%{opacity:0;transform:translateZ(120px) scale(1.04)}}

/* Feedback loop */
.bx-loop{position:absolute;right:13%;top:10%;height:78%;width:auto;overflow:visible;opacity:0;transition:opacity .5s}
.bx-loop path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.bx-loop circle{fill:var(--coral)}
.scene[data-step="3"] .bx-loop{opacity:1;transition-delay:.9s}
.scene[data-step="3"] .bx-loop path{animation:pl-draw 1.2s cubic-bezier(.6,0,.2,1) 1s both}
.bx-loop-t{position:absolute;right:0;top:50%;translate:0 -50%;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:#fff;box-shadow:0 24px 50px -26px rgba(48,47,43,.6);opacity:0;scale:.6;transition:opacity .3s,scale .9s var(--spring-bounce)}
.bx-loop-t .x-ico{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--coral)}
.bx-loop-t b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1}
.bx-loop-t span{font-size:13px;color:var(--muted)}
.bx-loop-t span b{color:var(--ink)}
.scene[data-step="3"] .bx-loop-t{opacity:1;scale:1;transition-delay:1.7s}
body.motion-paused :is(.bx-iso,.bx-beam,.bx-loop path){animation:none!important}
body.motion-paused .bx-loop circle{display:none}

/* Slide 24: business. The package screen builds itself, then the button is pressed. */
.bz{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6vw}
.bz-q{margin-top:clamp(30px,6vh,60px);font-family:Coolvetica,Arial,sans-serif;font-size:clamp(26px,2.4vw,38px);line-height:1.05;max-width:520px}
.bz-q small{display:block;font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;margin-bottom:10px}
.bz-device{--ph:clamp(430px,calc(100vh - 270px),660px);perspective:1500px;margin-right:4vw}
.bz-tilt{transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(5deg);transition:transform 1.4s var(--spring-soft)}
.scene[data-step="3"] .bz-tilt{transform:rotateY(-4deg) rotateX(2deg) scale(1.03)}
.scene.active .bz-tilt .phone{animation:dd-phone-in 1.5s var(--spring-soft) .1s both}
.bz-hero{position:relative;height:11em;border-radius:1.3em;overflow:hidden}
.bz-hero img{width:100%;height:100%;object-fit:cover}
.bz-slot{position:absolute;left:.7em;bottom:.7em;font-size:.86em;font-weight:700;padding:.45em .8em;border-radius:2em;background:rgba(253,252,248,.92)}
.bz-title{font-family:Coolvetica,Arial,sans-serif;font-size:1.7em;line-height:1.05;margin:.6em 0 .5em}
.bz-row{display:grid;grid-template-columns:2.6em 1fr;gap:.8em;align-items:center;padding:.7em .8em;border-radius:1.1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.08);opacity:.25;transform:translateX(-1em);transition:opacity .5s,transform .8s var(--spring-snap)}
.bz-ic{width:2.6em;height:2.6em;border-radius:.8em;display:grid;place-items:center;background:var(--coral)}
.bz-row b{display:block;font-size:1em}.bz-row small{display:block;font-size:.82em;color:var(--muted)}
.scene:not([data-step="0"]) .bz-row{opacity:1;transform:none}
.bz-terms{margin-top:.7em}
.bz-terms p{display:flex;align-items:center;gap:.5em;font-size:.94em;line-height:2;opacity:.22;transition:opacity .4s}
.bz-terms .x-ico{width:1.4em;height:1.4em;padding:.2em;border-radius:50%;background:var(--stone);transition:background .4s}
.scene[data-step="2"] .bz-terms p,.scene[data-step="3"] .bz-terms p{opacity:1;transition-delay:calc(.3s + var(--k) * .35s)}
.scene[data-step="2"] .bz-terms .x-ico,.scene[data-step="3"] .bz-terms .x-ico{background:var(--coral);transition-delay:calc(.3s + var(--k) * .35s)}
.bz-cta{opacity:.4;transition:opacity .5s}
.scene[data-step="3"] .bz-cta{opacity:1;animation:dd-press .5s ease 1s both}
.scene[data-step="3"] .bz-cta .ui-tap{animation:ui-tap 1.4s cubic-bezier(.2,.7,.2,1) .8s both}

/* Slide 26: the measure as a pair-tracking product screen. A stack of pilot pairs rises in; the front pair moves
   through four milestones, each expanding with its evidence; the last unseals two private answers into a mutual yes. */
.tk{height:100%;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;column-gap:3vw}
.tk-metric{margin-top:clamp(26px,5vh,48px);max-width:420px;padding:20px 22px 22px;border-radius:22px;background:var(--ink);color:var(--paper);box-shadow:0 40px 70px -40px rgba(48,47,43,.8);opacity:.0;transform:translateY(24px) scale(.96);transition:opacity .4s,transform .9s var(--spring-snap)}
.tk-metric small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.tk-metric b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(24px,2.1vw,32px);line-height:1.05}
.tk-metric span{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:#c8c8be}
.scene[data-step="3"] .tk-metric{opacity:1;transform:none;transition-delay:2.9s}

/* Stage: the front panel and two other pilot pairs peeking out behind it */
.tk-stage{position:relative;display:grid;place-items:center;perspective:1600px;font-size:clamp(13px,min(1.4vw,2.15vh),26px);padding-top:4.5em}
.tk-panel,.tk-ghost{grid-area:1/1;width:min(100%,33em)}
.tk-panel{position:relative;z-index:3;padding:1.15em 1.2em 1.2em;border-radius:1.6em;background:#fff;box-shadow:0 3em 5em -2.6em rgba(48,47,43,.55),0 0 0 1px rgba(48,47,43,.06)}
.tk-ghost{align-self:start;height:12em;border-radius:1.6em;background:rgba(255,255,255,.6);box-shadow:0 1.5em 3em -2em rgba(48,47,43,.4),0 0 0 1px rgba(255,255,255,.7)}
.tk-g1{z-index:2;translate:0 -2.6em;scale:.94}
.tk-g2{z-index:1;translate:0 -5em;scale:.88;opacity:.6}
.tk-gh{display:flex;align-items:center;gap:.45em;padding:.75em 1.1em}
.tk-gi{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font:700 .62em/1 Arial,sans-serif;color:#fff;background:#9db8c6}
.tk-gi+.tk-gi{margin-left:-.7em;background:#d6a48f}
.tk-gh i{flex:1;height:.55em;max-width:7em;margin-left:.4em;border-radius:1em;background:rgba(48,47,43,.12)}
.tk-gh em{margin-left:auto;width:5.5em;height:1.5em;border-radius:1em;background:rgba(48,47,43,.08)}
.scene.active .tk-panel{animation:tk-rise 1.3s var(--spring-soft) .3s both}
.scene.active .tk-g1{animation:tk-rise 1.3s var(--spring-soft) .16s both}
.scene.active .tk-g2{animation:tk-rise 1.3s var(--spring-soft) .02s both}
@keyframes tk-rise{from{transform:translateY(80vh) rotateX(24deg)}}

/* Header with a status pill that rolls to the current milestone */
.tk-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8em;padding:0 .2em 1em;border-bottom:1px solid rgba(48,47,43,.08)}
.tk-head .ui-avatar{width:2.6em;height:2.6em}
.tk-head b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.35em;line-height:1}
.tk-head small{font-size:.8em;color:var(--muted)}
.tk-status{position:relative;display:block;height:2em;min-width:8.6em;overflow:hidden;padding:0 1em 0 2em;border-radius:2em;background:var(--paper);font-size:.82em;font-weight:700;line-height:2em;transition:background .6s}
.tk-status>i{position:absolute;left:.85em;top:50%;width:.6em;height:.6em;margin-top:-.3em;border-radius:50%;background:#e0a33a;animation:ob-rec 1.2s ease-in-out infinite}
.tk-status-in{display:block;transition:transform .7s var(--spring-snap) .45s}
.tk-status-in span{display:block}
.scene[data-step="3"] .tk-status{background:var(--coral);transition-delay:2.5s}
.scene[data-step="3"] .tk-status-in{transition-delay:2.5s}
.scene[data-step="3"] .tk-status>i{background:var(--ink);animation:none}

/* Milestones */
.tk-list{margin-top:.8em;display:flex;flex-direction:column}
.tk-row{--done:0;position:relative;display:grid;grid-template-columns:2.4em 1fr;column-gap:.9em;padding:.55em .6em .55em .45em;border-radius:1em;transition:opacity .5s,background .5s}
.tk-row.is-current{background:#faf6ef}
.tk-row:not(:last-child):after,.tk-row:not(:last-child):before{content:'';position:absolute;left:calc(.45em + 1.2em - 1px);top:calc(.55em + 2.4em + .2em);bottom:calc(-.55em + .2em);width:2px;border-radius:2px;background:rgba(48,47,43,.12)}
.tk-row:not(:last-child):before{z-index:1;background:var(--coral);transform-origin:top;transform:scaleY(var(--done));transition:transform .6s cubic-bezier(.6,0,.2,1)}
.tk-node{position:relative;z-index:2;width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px rgba(48,47,43,.18);color:var(--muted);font:700 .9em Arial,sans-serif;transition:background .45s,box-shadow .45s,color .45s,transform .7s var(--spring-bounce)}
.tk-node em,.tk-node .x-ico{grid-area:1/1;font-style:normal;transition:opacity .3s,transform .5s var(--spring-bounce)}
.tk-node .x-ico{width:1.15em;height:1.15em;stroke-width:2.6;opacity:0;transform:scale(.3)}
.tk-row.is-current .tk-node{background:var(--coral);color:var(--ink);box-shadow:none;transform:scale(1.08);transition-delay:.55s}
.tk-row.is-current .tk-node:after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--coral);animation:tk-ping 1.6s ease-out .9s infinite}
@keyframes tk-ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
.scene[data-step="0"] .tk-r1{opacity:.42}
.scene[data-step="0"] .tk-r2{opacity:.42}
.scene[data-step="0"] .tk-r3{opacity:.42}
.scene[data-step="0"] .tk-status-in{transform:translateY(0em)}
.scene[data-step="1"] .tk-r0{--done:1}
.scene[data-step="1"] .tk-r2{opacity:.42}
.scene[data-step="1"] .tk-r3{opacity:.42}
.scene[data-step="1"] .tk-status-in{transform:translateY(-2em)}
.scene[data-step="2"] .tk-r0{--done:1}
.scene[data-step="2"] .tk-r1{--done:1}
.scene[data-step="2"] .tk-r3{opacity:.42}
.scene[data-step="2"] .tk-status-in{transform:translateY(-4em)}
.scene[data-step="3"] .tk-r0{--done:1}
.scene[data-step="3"] .tk-r1{--done:1}
.scene[data-step="3"] .tk-r2{--done:1}
.scene[data-step="3"] .tk-status-in{transform:translateY(-6em)}
.tk-row{--done:0}
.scene[data-step="1"] .tk-r0 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="1"] .tk-r0 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="1"] .tk-r0 .tk-node .x-ico{opacity:1;transform:none}
.scene[data-step="2"] .tk-r0 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="2"] .tk-r0 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="2"] .tk-r0 .tk-node .x-ico{opacity:1;transform:none}
.scene[data-step="2"] .tk-r1 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="2"] .tk-r1 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="2"] .tk-r1 .tk-node .x-ico{opacity:1;transform:none}
.scene[data-step="3"] .tk-r0 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="3"] .tk-r0 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="3"] .tk-r0 .tk-node .x-ico{opacity:1;transform:none}
.scene[data-step="3"] .tk-r1 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="3"] .tk-r1 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="3"] .tk-r1 .tk-node .x-ico{opacity:1;transform:none}
.scene[data-step="3"] .tk-r2 .tk-node{background:var(--ink);color:var(--paper);box-shadow:none}
.scene[data-step="3"] .tk-r2 .tk-node em{opacity:0;transform:scale(.3)}
.scene[data-step="3"] .tk-r2 .tk-node .x-ico{opacity:1;transform:none}
.tk-row:not(.is-current) .tk-node{transition-delay:0s}
.tk-main{min-width:0}
.tk-line{display:flex;align-items:center;justify-content:space-between;gap:1em;min-height:2.4em}
.tk-line b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.22em}
.tk-line time{font-size:.8em;color:var(--muted);font-variant-numeric:tabular-nums}
.tk-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.3,.8,.2,1)}
.tk-detail>div{min-height:0;overflow:hidden;padding:3px 4px 5px;margin:-3px -4px -5px}
.tk-row.is-current .tk-detail{grid-template-rows:1fr;transition-delay:.35s}
.tk-sub{margin:.1em 0 .6em;font-size:.86em;color:var(--muted)}
.tk-row.is-current .tk-detail>div>*:not(.tk-sub){animation:j-slide .8s var(--spring-snap) .7s both}

/* Evidence */
.tk-chips{display:flex;flex-wrap:wrap;gap:.45em;padding-bottom:.35em}
.tk-chips span{display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em .3em .3em;border-radius:2em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.1);font-size:.9em;font-weight:700}
.tk-chips img{width:1.7em;height:1.7em;border-radius:50%;object-fit:cover;object-position:50% 25%}
.tk-chips .x-ico{width:1.05em;height:1.05em;stroke-width:2.6;color:#2d7a4b}
.tk-in span{padding-left:.6em}
.tk-in .x-ico{color:var(--coral);stroke-width:2}
.tk-ticket{display:grid;grid-template-columns:3.6em 1fr auto;align-items:center;gap:.8em;padding:.45em .6em .45em .45em;margin-bottom:.35em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.1)}
.tk-ticket img{width:3.6em;height:2.7em;border-radius:.6em;object-fit:cover}
.tk-ticket b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.1em}
.tk-ticket span{font-size:.82em;color:var(--muted)}
.tk-ticket em{font-style:normal;font-size:.78em;font-weight:700;padding:.35em .7em;border-radius:2em;background:#e6f2ea;color:#245c3b}
.tk-seal{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.tk-ans{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55em;padding:.6em .7em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.1);overflow:hidden;transition:background .5s,box-shadow .5s}
.tk-ans img{width:2em;height:2em;border-radius:50%;object-fit:cover;object-position:50% 25%}
.tk-ans span{font-size:.9em;font-weight:700}
.tk-ans b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.25em;filter:blur(7px);opacity:.6;transition:filter .6s,opacity .6s}
.tk-lock{position:absolute;right:.6em;top:50%;width:2em;height:2em;margin-top:-1em;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);transition:transform .6s var(--spring-bounce),opacity .4s}
.tk-lock .x-ico{width:1.05em;height:1.05em}
.tk-r3.is-current .tk-ans b{filter:none;opacity:1;transition-delay:1.75s}
.tk-r3.is-current .tk-ans+.tk-ans b{transition-delay:2.05s}
.tk-r3.is-current .tk-lock{transform:scale(0) rotate(-30deg);opacity:0;transition-delay:1.55s}
.tk-r3.is-current .tk-ans+.tk-ans .tk-lock{transition-delay:1.85s}
.tk-r3.is-current .tk-ans{background:#fff4ef;box-shadow:0 0 0 1.5px var(--coral);transition-delay:1.7s}
.tk-badge{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;margin:.6em 0 .3em;padding:.65em 1em;border-radius:2em;background:var(--coral);font-weight:700;font-size:.95em;opacity:0;transform:scale(.6);transition:opacity .3s,transform .9s var(--spring-bounce)}
.tk-badge>.x-ico{width:1.2em;height:1.2em;stroke-width:2.6}
.tk-r3.is-current .tk-badge{opacity:1;transform:none;transition-delay:2.5s}
.tk-spark{position:absolute;left:50%;top:50%;width:0;height:0}
.tk-spark i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--coral);opacity:0}
.tk-spark i:nth-child(even){background:#add9ed}
.tk-r3.is-current .tk-spark i{animation:tk-burst 1.1s cubic-bezier(.2,.7,.2,1) 2.6s both}
@keyframes tk-burst{0%{opacity:1;transform:rotate(var(--r)) translateY(0)}100%{opacity:0;transform:rotate(var(--r)) translateY(-5.5em) scale(.5)}}
body.motion-paused :is(.tk-panel,.tk-g1,.tk-g2,.tk-status>i,.tk-node:after,.tk-spark i,.tk-detail>div>*){animation:none!important}

/* Slide 26: closing. The two portraits become the logo while the story is told in four lines. */
.cl{height:100%;display:flex;flex-direction:column;justify-content:center}
.cl-stage{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:5vw}
.cl-logo{--d:min(30vh,18vw);position:relative;width:calc(var(--d) * 1.55);height:var(--d)}
.cl-c{position:absolute;top:0;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;box-shadow:0 0 0 5px var(--paper);transition:left 1.2s var(--spring-soft),filter 1s,box-shadow 1s}
.cl-c img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:opacity 1s}
.cl-cm{left:calc(var(--d) * -.3)}.cl-ca{left:calc(var(--d) * .85)}
.scene:not([data-step="0"]) .cl-cm{left:0}.scene:not([data-step="0"]) .cl-ca{left:calc(var(--d) * .55)}
.cl-ca{mix-blend-mode:multiply}
.scene[data-step="3"] .cl-c{box-shadow:0 0 0 3px var(--ink)}
.scene[data-step="3"] .cl-c img{opacity:0}
.scene[data-step="3"] .cl-ca{background:var(--paper)}
.scene[data-step="3"] .cl-cm{background:transparent}
.scene.active .cl-cm{animation:c-in-l 1.4s var(--spring-soft) .1s both}
.scene.active .cl-ca{animation:c-in-r 1.4s var(--spring-soft) .2s both}
.cl-lines{position:relative;height:min(32vh,240px);font-size:clamp(60px,7.2vw,124px);line-height:.92;letter-spacing:-.045em}
.cl-line{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0;transition:opacity .3s .2s}
.cl-line.is-shown{opacity:1;transition-delay:0s}
.cl-line:not(.is-shown) .rw>span{animation:none!important;transform:translateY(-112%) rotate(-4deg);transition:transform .5s cubic-bezier(.5,0,.75,0)}
.cl-last{font-size:.82em}
.cl-credit{margin-top:clamp(30px,7vh,70px);font-size:15px;letter-spacing:.02em}

body.motion-paused :is(.al-dot,.al-sweep,.sg-card,.ev-src,.pl-hood,.ex-flow i,.ex-watch .x-ico,.bz-tilt .phone,.bz-cta,.cl-cm,.cl-ca){animation:none!important}

/* Slide 16: the AI as a pipeline. People in, a matching engine, three results out; each beat resolves one result. */
.ai-hd{flex:none}
.scene .scene-content:has(> .ai-hd){gap:clamp(10px,2.4vh,26px);justify-content:center}
.aip{position:relative;flex:none;width:min(100%,calc((100vh - 320px) * 2.2));aspect-ratio:1100/500;margin:0 auto;container-type:size}
.aip>*{font-size:1.62cqw}
.aip>*{position:absolute}
.aip-wires{inset:0;width:100%;height:100%;overflow:visible}
.aip-track{fill:none;stroke:rgba(48,47,43,.14);stroke-width:2}
.aip-flow{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
.aip-dots circle{fill:var(--coral)}
.aip-dots{opacity:0;transition:opacity .4s}
.scene:not([data-step="0"]) :is(.aip-wm,.aip-wa){stroke-dashoffset:0}
.scene:not([data-step="0"]) .aip-d-in{opacity:1}
.scene[data-step="1"] .aip-w1,.scene[data-step="2"] :is(.aip-w1,.aip-w2),.scene[data-step="3"] :is(.aip-w1,.aip-w2,.aip-w3){stroke-dashoffset:0;transition-delay:.5s}
.scene[data-step="1"] .aip-d1,.scene[data-step="2"] .aip-d2,.scene[data-step="3"] .aip-d3{opacity:1;transition-delay:1s}
.scene[data-step="2"] .aip-w1,.scene[data-step="3"] :is(.aip-w1,.aip-w2){transition-delay:0s;stroke:rgba(255,104,64,.45)}

/* Inputs */
.aip-card{width:27.3cqw;padding:1em 1.1em 1.1em;border-radius:1.3em;background:#fff;box-shadow:0 1.6em 3em -1.8em rgba(48,47,43,.55),0 0 0 1px rgba(48,47,43,.05)}
.aip-m{left:0;top:10%}.aip-a{left:0;top:58%}
.scene.active .aip-in{animation:aip-in .9s var(--spring-snap) both}
.scene.active .aip-a{animation-delay:.12s}
@keyframes aip-in{from{opacity:0;transform:translateX(-2.4em)}}
.aip-who{display:grid;grid-template-columns:2.8em 1fr;column-gap:.7em;align-items:center}
.aip-who img{grid-row:span 2;width:2.8em;height:2.8em;border-radius:50%;object-fit:cover;object-position:50% 25%}
.aip-who b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.35em;line-height:1}
.aip-who small{font-size:.78em;color:var(--muted)}
.aip-chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.8em}
.aip-chip{font-size:.82em;white-space:nowrap;padding:.42em .8em;border-radius:2em;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(48,47,43,.1);transition:background .5s,color .5s,box-shadow .5s,transform .7s var(--spring-bounce)}
.scene.active .aip-chip{animation:dd-pop .7s var(--spring-bounce) calc(.45s + var(--k) * .09s) both}
.scene:not([data-step="0"]) .aip-match{background:var(--coral);box-shadow:0 .4em 1em -.4em rgba(255,104,64,.8);transform:scale(1.06)}

/* The matching engine */
.aip-core{left:50%;top:50%;width:14.5cqw;height:14.5cqw;translate:-50% -50%;display:grid;place-items:center}
.aip-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(48,47,43,.25);animation:aip-spin 22s linear infinite}
.aip-r2{inset:14%;border-style:solid;border-color:rgba(255,104,64,.35);border-top-color:transparent;border-bottom-color:transparent;animation-duration:9s;animation-direction:reverse}
.aip-orb{position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 10%,transparent 44%),conic-gradient(from 0deg,#add9ed,#ff6840,#f7c6b3,#add9ed);box-shadow:inset 0 -.8em 1.4em rgba(48,47,43,.2),0 1.2em 2.4em -.8em rgba(255,104,64,.6);animation:aip-spin 8s linear infinite}
.aip-pulse{position:absolute;inset:27%;border-radius:50%;box-shadow:0 0 0 2px var(--coral);opacity:0}
.scene:not([data-step="0"]) .aip-orb{animation-duration:2.4s}
.scene:not([data-step="0"]) .aip-r1{animation-duration:8s}
.scene:not([data-step="0"]) .aip-pulse{animation:aip-pulse 1.6s cubic-bezier(.2,.7,.2,1) .6s infinite}
.aip-core span{position:absolute;top:100%;margin-top:.6em;white-space:nowrap;font:700 .72em Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@keyframes aip-spin{to{rotate:360deg}}
@keyframes aip-pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.3)}}

/* Outputs: a skeleton until their beat, then the result settles in with a spring. */
.aip-out{right:0;width:30cqw;height:29cqh;border-radius:1.3em;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(48,47,43,.08);transition:background .5s,box-shadow .5s,transform .8s var(--spring-snap)}
.aip-o1{top:1%}.aip-o2{top:35.5%}.aip-o3{top:70%}
.aip-skel{position:absolute;inset:1em 1.1em;display:flex;flex-direction:column;gap:.55em;transition:opacity .35s}
.aip-skel i{display:block;height:.75em;border-radius:1em;background:linear-gradient(100deg,rgba(48,47,43,.06) 30%,rgba(48,47,43,.13) 50%,rgba(48,47,43,.06) 70%) 0 0/250% 100%;animation:ob-shimmer 1.6s linear infinite}
.aip-skel i:nth-child(1){width:34%}.aip-skel i:nth-child(2){width:78%;height:1.2em}.aip-skel i:nth-child(3){width:56%}
.aip-res{position:absolute;inset:0;padding:1em 1.25em;display:flex;flex-direction:column;justify-content:center;gap:.6em;opacity:0;filter:blur(8px);transform:translateX(-1.6em) scale(.96);transition:opacity .45s,filter .5s,transform .9s var(--spring-snap)}
.aip-res small{font:700 .68em Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.aip-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85em}
.aip-row .ui-avatar{width:2.2em;height:2.2em}
.aip-row div>b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.2em;line-height:1.1}
.aip-row div>span{display:block;font-size:.82em;line-height:1.35;color:var(--muted);margin-top:.3em}
.aip-row>div{min-width:0}
.aip-thumb{width:3.6em;height:2.7em;border-radius:.6em;object-fit:cover}
.aip-ok{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);scale:0;transition:scale .7s var(--spring-bounce) .55s}
.aip-ok .x-ico{width:1em;height:1em}
.aip-quote{font-family:Coolvetica,Arial,sans-serif;font-size:1.3em;line-height:1.15}
.aip-btn{align-self:flex-start;margin-top:.15em;font-size:.78em;font-weight:700;padding:.45em .9em;border-radius:2em;background:var(--ink);color:var(--paper)}
.scene[data-step="1"] .aip-o1,.scene[data-step="2"] :is(.aip-o1,.aip-o2),.scene[data-step="3"] .aip-out{background:#fff;box-shadow:0 1.6em 3em -1.8em rgba(48,47,43,.55),0 0 0 1px rgba(48,47,43,.05)}
.scene[data-step="1"] .aip-o1 .aip-skel,.scene[data-step="2"] :is(.aip-o1,.aip-o2) .aip-skel,.scene[data-step="3"] .aip-out .aip-skel{opacity:0}
.scene[data-step="1"] .aip-o1 .aip-res,.scene[data-step="2"] :is(.aip-o1,.aip-o2) .aip-res,.scene[data-step="3"] .aip-out .aip-res{opacity:1;filter:none;transform:none;transition-delay:1.2s}
.scene[data-step="1"] .aip-o1 .aip-ok,.scene[data-step="2"] :is(.aip-o1,.aip-o2) .aip-ok,.scene[data-step="3"] .aip-out .aip-ok{scale:1;transition-delay:1.75s}
.aip-out.is-current{transform:scale(1.04);box-shadow:0 2em 3.4em -1.8em rgba(48,47,43,.6),0 0 0 2px var(--coral)!important}
.scene[data-step="3"] .aip-o3{background:var(--coral)!important}
.scene[data-step="3"] .aip-o3 small{color:var(--ink)}
body.motion-paused :is(.aip-in,.aip-chip,.aip-ring,.aip-orb,.aip-pulse,.aip-skel i){animation:none!important}
body.motion-paused .aip-dots{display:none}