.film-canvas{--f: 33.333ms;--exit: .12s;--cut: var(--exit);--beat: .6s;--handoff: calc(26 * var(--f));--film-out: cubic-bezier(.23, 1, .32, 1);--film-move: cubic-bezier(.77, 0, .175, 1);--film-spring: cubic-bezier(.3, 1.45, .55, 1);--film-ink: #f9f8f6;position:absolute;left:50%;top:50%;width:1920px;height:1280px;transform:translate(-50%,-50%) scale(var(--film-scale, 1));contain:layout paint}.film-art,.film-line{position:absolute;display:block}.film-line{color:#f7f7f7;font:500 44px/1.15 Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:-1.7px;white-space:nowrap}.fe{opacity:0;translate:var(--from-translate, 0 0);scale:var(--from-scale, 1);rotate:var(--from-rotate, 0deg);transition:opacity var(--exit) ease-out,translate 0s linear var(--exit),scale 0s linear var(--exit),rotate 0s linear var(--exit)}.film-canvas[data-step="0"] .fe[data-steps~="0"],.film-canvas[data-step="1"] .fe[data-steps~="1"],.film-canvas[data-step="2"] .fe[data-steps~="2"],.film-canvas[data-step="3"] .fe[data-steps~="3"],.film-canvas[data-step="4"] .fe[data-steps~="4"],.film-canvas[data-step="5"] .fe[data-steps~="5"],.film-canvas[data-step="6"] .fe[data-steps~="6"],.film-canvas[data-step="7"] .fe[data-steps~="7"],.film-canvas[data-step="8"] .fe[data-steps~="8"],.film-canvas[data-step="9"] .fe[data-steps~="9"]{opacity:var(--to-opacity, 1);translate:var(--to-translate, 0 0);scale:1;rotate:0deg;transition:opacity var(--fade, calc(8 * var(--f))) var(--film-out) calc(var(--cut) + var(--fade-delay, 0ms)),translate var(--settle, calc(16 * var(--f))) var(--settle-ease, var(--film-out)) calc(var(--cut) + var(--settle-delay, 0ms)),scale var(--settle, calc(16 * var(--f))) var(--settle-ease, var(--film-out)) calc(var(--cut) + var(--settle-delay, 0ms)),rotate var(--settle, calc(16 * var(--f))) var(--settle-ease, var(--film-out)) calc(var(--cut) + var(--settle-delay, 0ms))}.art-phone-opening{border-radius:100px 100px 0 0;filter:drop-shadow(-24px 26px 32px rgb(0 0 0 / .25));--from-translate: 0 180px;--settle: calc(18 * var(--f));--settle-delay: calc(2 * var(--f));--fade-delay: calc(2 * var(--f))}.line-trust-a{--fade: calc(10 * var(--f))}.art-imessage{clip-path:inset(1px round 16px);--from-scale: .95;--fade-delay: calc(4 * var(--f));--settle-delay: calc(4 * var(--f));--settle: calc(14 * var(--f))}.line-trust-b{--fade-delay: calc(8 * var(--f));--fade: calc(10 * var(--f))}.film-canvas[data-step="1"] .art-imessage{--to-translate: -150px -24px;--to-opacity: 0;--cut: 0ms;--settle: calc(8 * var(--f));--settle-delay: 0ms;--settle-ease: var(--film-move);--fade-delay: calc(8 * var(--f));--fade: calc(2 * var(--f));z-index:1}.film-canvas[data-step="0"] .art-notification{--from-translate: 0 0;--from-scale: 1}.film-canvas[data-step="1"][data-from="0"] .art-notification{animation:film-card-in calc(6 * var(--f)) var(--film-out) calc(5 * var(--f)) both}.film-canvas[data-step="1"][data-from="0"] .line-one{--fade-delay: calc(10 * var(--f))}.film-canvas[data-step="1"][data-from="0"] .line-manageable{--fade-delay: calc(13 * var(--f))}@keyframes film-card-in{0%{opacity:0;translate:16px 0}to{opacity:1;translate:0 0}}.line-one,.line-but-as{--fade-delay: calc(4 * var(--f))}.line-manageable{--fade-delay: calc(8 * var(--f))}.line-grows{--fade-delay: calc(6 * var(--f));--fade: calc(10 * var(--f))}.art-notification{border-radius:38px;--from-translate: 0 35px;--from-scale: .95}.art-notifications{--from-scale: 1 0;--settle: calc(26 * var(--f));--fade: calc(4 * var(--f));transform-origin:323px 286px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='579' viewBox='0 0 650 579'%3E%3Cg fill='white'%3E%3Crect x='90' y='15' width='464' height='130' rx='32'/%3E%3Crect x='62' y='88' width='520' height='130' rx='35'/%3E%3Crect x='35' y='159' width='574' height='130' rx='36'/%3E%3Crect x='11' y='222' width='624' height='128' rx='38'/%3E%3Crect x='35' y='290' width='574' height='132' rx='36'/%3E%3Crect x='62' y='360' width='520' height='132' rx='35'/%3E%3Crect x='90' y='430' width='464' height='135' rx='32'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}.line-become{--fade: calc(10 * var(--f))}.line-the{--fade-delay: calc(2 * var(--f));--fade: calc(10 * var(--f))}.line-bottleneck{width:650px;text-align:center;font-size:88px;letter-spacing:-4px;transform-origin:center bottom;--fade-delay: calc(10 * var(--f))}.film-canvas[data-step="3"] .line-bottleneck{animation:film-slam calc(16 * var(--f)) linear calc(var(--cut) + 10 * var(--f)) both}.film-canvas[data-step="3"] :is(.art-notifications,.art-notification){animation:film-jam calc(16 * var(--f)) var(--film-out) calc(var(--cut) + 16 * var(--f))}@keyframes film-slam{0%{opacity:0;translate:0 -120px;scale:1.35;animation-timing-function:cubic-bezier(.55,0,1,.45)}38%{opacity:1;translate:0 0;scale:1;animation-timing-function:var(--film-out)}52%{scale:1.06 .9}70%{scale:.98 1.03}to{opacity:1;translate:0 0;scale:1}}@keyframes film-jam{15%{translate:0 14px}35%{translate:-10px 4px}52%{translate:8px 0}68%{translate:-5px 0}84%{translate:2px 0}}.film-compare{position:absolute;inset:0;clip-path:inset(560px 0 630px 0);--fade: calc(4 * var(--f))}.film-compare-roll{position:absolute;inset:0;translate:0 70px;transition:translate 0s linear var(--exit)}.film-compare-line{left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px}.film-canvas[data-step="4"] .film-compare-roll{translate:0 0;transition:translate calc(12 * var(--f)) var(--film-out) var(--cut)}.film-canvas[data-step="5"] .film-compare-roll{translate:0 -110px;transition:translate calc(16 * var(--f)) var(--film-move)}.film-phone{position:absolute;inset:0;--from-translate: 0 140px;--from-rotate: -1.5deg;--from-scale: .96;--settle: calc(18 * var(--f))}.art-phone{border-radius:82px;filter:drop-shadow(-24px 26px 32px rgb(0 0 0 / .25))}.film-phone-dim{position:absolute;left:753px;top:190px;width:404px;height:839px;border-radius:68px;background:#000;--to-opacity: .62;--cut: 0ms;--fade-delay: var(--beat);--fade: calc(10 * var(--f))}.line-screenshots{--cut: 0ms;--fade-delay: calc(var(--beat) + 8 * var(--f))}.line-send{--fade-delay: calc(var(--beat) + 4 * var(--f))}.film-shot{position:absolute;left:1160px;top:314px;width:274px;height:592px;--from-translate: -345px 28px;--from-rotate: 2deg;--from-scale: .95;--to-translate: -345px 0;--fade-delay: calc(var(--beat) + 4 * var(--f));--fade: calc(6 * var(--f));--settle-delay: calc(var(--beat) + 4 * var(--f))}.film-shot-art{transition:translate calc(16 * var(--f)) var(--film-move),scale calc(16 * var(--f)) var(--film-move)}.film-canvas[data-step="7"] .film-phone{--to-translate: -960px 0;--to-opacity: 0;--cut: 0ms;--settle: calc(26 * var(--f));--settle-ease: var(--film-move);--fade-delay: calc(30 * var(--f));--fade: calc(11 * var(--f))}.film-canvas[data-step="7"] .line-screenshots{--fade-delay: 0ms}.film-canvas[data-step="7"] .film-shot{--to-translate: 0 0;--cut: 0ms;--settle-delay: 0ms;--settle: calc(26 * var(--f));--settle-ease: var(--film-move);animation:film-arc calc(26 * var(--f)) linear}.film-canvas[data-step="7"] .film-shot-art{translate:-210px -120px;scale:.45;transition:translate calc(18 * var(--f)) var(--film-move) var(--handoff),scale calc(18 * var(--f)) var(--film-move) var(--handoff)}@keyframes film-arc{50%{rotate:-2deg}}.art-recipient{--cut: var(--handoff)}.art-request,.art-reply{--from-scale: .95;--from-translate: 0 24px;--fade: calc(6 * var(--f));--settle: calc(14 * var(--f))}.art-request{clip-path:path("M 34 0 H 334 Q 370 0 370 34 V 135 Q 370 158 354 166 Q 355 174 365 178 Q 350 180 335 168 H 34 Q 0 168 0 134 V 34 Q 0 0 34 0 Z");transform-origin:right bottom;--cut: calc(var(--handoff) + 14 * var(--f))}.art-reply{clip-path:path("M 35 0 H 335 Q 372 0 372 35 V 135 Q 372 172 335 172 H 33 L 9 182 L 13 168 Q 0 160 0 135 V 35 Q 0 0 35 0 Z");transform-origin:left bottom;--cut: calc(var(--handoff) + 26 * var(--f))}.line-lack{--cut: calc(var(--handoff) + 36 * var(--f));--fade: calc(10 * var(--f))}.line-context{--cut: calc(var(--handoff) + 40 * var(--f));--fade: calc(10 * var(--f))}.film-canvas[data-step="9"] .line-coop{translate:0 -28px;transition:opacity calc(10 * var(--f)) var(--film-out),translate calc(14 * var(--f)) var(--film-out)}.film-dots{position:absolute;inset:0;--fade-delay: calc(4 * var(--f))}.film-dots span{position:absolute;top:640px;width:10px;height:10px;border-radius:50%;background:var(--film-ink);translate:-50% -50%}.film-dots .film-fill{left:1211px;width:2400px;height:2400px;scale:calc(10 / 2400);transition:scale calc(18 * var(--f)) var(--film-move)}.film-canvas[data-step="9"] .film-dots{--to-translate: -251px 0;--cut: 0ms;--settle: calc(18 * var(--f));--settle-ease: var(--film-move)}.film-canvas[data-step="9"] .film-fill{scale:1;transition:scale calc(24 * var(--f)) var(--film-move) calc(8 * var(--f))}.film-canvas .fe[data-enter=back],.film-canvas .fe[data-enter=back] *{transition:opacity .2s var(--film-out)!important;animation:none!important}@media(prefers-reduced-motion:reduce){.film-canvas,.film-canvas *{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}}.pf-canvas{contain:layout;top:var(--film-top);width:390px;height:844px}.pf-line{left:0;width:390px;text-align:center;font-size:30px;letter-spacing:-1.1px}.pf-line em{font-style:italic}.pf-trust-a,.pf-trust-b,.pf-trust-c{--from-translate: 0 14px;--fade: calc(10 * var(--f))}.pf-trust-b{display:flex;align-items:center;justify-content:center;gap:12px;height:40px;--fade-delay: calc(5 * var(--f));--settle-delay: calc(5 * var(--f))}.pf-trust-c{--fade-delay: calc(10 * var(--f));--settle-delay: calc(10 * var(--f))}.pf-imessage{width:40px;height:40px;border-radius:10px;--from-scale: .6;--from-rotate: -12deg;--fade-delay: calc(7 * var(--f));--settle-delay: calc(7 * var(--f));--settle: .6s;--settle-ease: var(--film-spring)}.pf-phone-opening{border-radius:62px 62px 0 0;mask:linear-gradient(black 25%,transparent 62%);filter:drop-shadow(-14px 16px 20px rgb(0 0 0 / .25));--from-translate: 0 160px;--settle: calc(20 * var(--f));--settle-delay: calc(8 * var(--f));--fade-delay: calc(8 * var(--f))}.pf-one{--fade-delay: calc(2 * var(--f))}.pf-manageable{--fade-delay: calc(12 * var(--f))}.pf-notification{border-radius:21px;--from-translate: 0 -48px;--from-scale: .92;--fade: calc(6 * var(--f));--fade-delay: calc(4 * var(--f));--settle-delay: calc(4 * var(--f));--settle: .56s;--settle-ease: var(--film-spring)}.pf-notifications{--from-scale: 1 0;--settle: calc(26 * var(--f));--fade: calc(4 * var(--f));transform-origin:182px 160px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='579' viewBox='0 0 650 579'%3E%3Cg fill='white'%3E%3Crect x='90' y='15' width='464' height='130' rx='32'/%3E%3Crect x='62' y='88' width='520' height='130' rx='35'/%3E%3Crect x='35' y='159' width='574' height='130' rx='36'/%3E%3Crect x='11' y='222' width='624' height='128' rx='38'/%3E%3Crect x='35' y='290' width='574' height='132' rx='36'/%3E%3Crect x='62' y='360' width='520' height='132' rx='35'/%3E%3Crect x='90' y='430' width='464' height='135' rx='32'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}.pf-but-as{--fade-delay: calc(4 * var(--f))}.pf-grows{--from-translate: 0 12px;--fade-delay: calc(12 * var(--f));--settle-delay: calc(12 * var(--f));--fade: calc(10 * var(--f))}.pf-become{--fade: calc(10 * var(--f))}.pf-bottleneck{font-size:66px;letter-spacing:-3px;transform-origin:center bottom;--from-translate: 0 24px;--from-scale: .9;--from-rotate: -4deg;--fade-delay: calc(8 * var(--f));--settle-delay: calc(8 * var(--f));--settle: .7s;--settle-ease: var(--film-spring)}.film-canvas[data-step="3"] .pf-notifications{animation:pf-crowd .52s var(--film-out) calc(var(--cut) + 14 * var(--f))}@keyframes pf-crowd{30%{translate:-5px 0}60%{translate:4px 0}80%{translate:-2px 0}}.pf-compare{position:absolute;inset:0;clip-path:inset(388px 0 388px 0);--fade: calc(4 * var(--f))}.pf-compare-roll{position:absolute;inset:0;translate:0 70px;transition:translate 0s linear var(--exit)}.pf-compare-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:25px;letter-spacing:-.9px}.film-canvas[data-step="4"] .pf-compare-roll{translate:0 0;transition:translate calc(12 * var(--f)) var(--film-out) var(--cut)}.film-canvas[data-step="5"] .pf-compare-roll{translate:0 -110px;transition:translate calc(16 * var(--f)) var(--film-move)}.pf-phone{position:absolute;inset:0;--from-translate: 0 120px;--from-rotate: -1.5deg;--from-scale: .96;--settle: calc(18 * var(--f))}.pf-phone-art{border-radius:50px;filter:drop-shadow(-14px 16px 20px rgb(0 0 0 / .25))}.pf-phone-dim,.pf-flash{position:absolute;left:69px;top:163px;width:249px;height:517px;border-radius:42px}.pf-phone-dim{background:#000;--to-opacity: .62;--cut: 0ms;--fade-delay: calc(var(--beat) + 4 * var(--f));--fade: calc(10 * var(--f))}.pf-flash{background:#fff;--to-opacity: 0}.film-canvas[data-step="6"] .pf-flash{animation:pf-shutter calc(10 * var(--f)) ease-out var(--beat)}@keyframes pf-shutter{0%{opacity:0}20%{opacity:.9}to{opacity:0}}.pf-screenshots{--cut: 0ms;--from-translate: 0 12px;--fade-delay: calc(var(--beat) + 12 * var(--f));--settle-delay: calc(var(--beat) + 12 * var(--f))}.pf-send{--fade-delay: calc(var(--beat) + 6 * var(--f))}.pf-shot{position:absolute;left:110px;top:240px;width:169px;height:365px;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .35));--from-translate: 0 18px;--from-rotate: 2deg;--from-scale: .92;--to-translate: 0 -12px;--fade-delay: calc(var(--beat) + 4 * var(--f));--fade: calc(6 * var(--f));--settle-delay: calc(var(--beat) + 4 * var(--f));--settle: .6s;--settle-ease: var(--film-spring)}.pf-shot-art{transform-origin:0 0;transition:translate calc(16 * var(--f)) var(--film-move),scale calc(16 * var(--f)) var(--film-move)}.film-canvas[data-step="7"] .pf-phone{--to-translate: -420px 0;--to-opacity: 0;--cut: 0ms;--settle: calc(26 * var(--f));--settle-ease: var(--film-move);--fade-delay: calc(20 * var(--f));--fade: calc(10 * var(--f))}.film-canvas[data-step="7"] .pf-screenshots{--fade-delay: 0ms}.film-canvas[data-step="7"] .pf-shot{--to-translate: 0 0;--cut: 0ms;--settle-delay: 0ms;--settle: calc(14 * var(--f));animation:film-arc calc(26 * var(--f)) linear}.film-canvas[data-step="7"] .pf-shot-art{translate:188px -22px;scale:.4;transition:translate calc(18 * var(--f)) var(--film-move) calc(10 * var(--f)),scale calc(18 * var(--f)) var(--film-move) calc(10 * var(--f))}.pf-recipient{--from-translate: 0 -12px;--cut: calc(var(--handoff) - 4 * var(--f))}.pf-bubble{position:absolute}.pf-bubble img{transform:scale(.676);transform-origin:0 0}.pf-request{transform-origin:right bottom;--from-scale: .9;--from-translate: 0 20px;--fade: calc(6 * var(--f));--settle: .56s;--settle-ease: var(--film-spring);--cut: calc(var(--handoff) + 10 * var(--f))}.pf-reply{transform-origin:left bottom;--from-scale: .9;--from-translate: 0 20px;--fade: calc(6 * var(--f));--settle: .56s;--settle-ease: var(--film-spring);--cut: calc(var(--handoff) + 24 * var(--f))}.pf-lack{--cut: calc(var(--handoff) + 36 * var(--f));--fade: calc(10 * var(--f))}.pf-context{--cut: calc(var(--handoff) + 40 * var(--f));--fade: calc(10 * var(--f))}.pf-coop{left:auto;right:118px;width:auto;text-align:right;line-height:1.15;--from-translate: 0 10px}.film-canvas[data-step="9"] .pf-coop{translate:0 -24px;transition:opacity calc(10 * var(--f)) var(--film-out),translate calc(14 * var(--f)) var(--film-out)}.pf-dots{position:absolute;inset:0;--fade-delay: calc(6 * var(--f))}.pf-dots span{position:absolute;top:447px;width:8px;height:8px;border-radius:50%;background:var(--film-ink);translate:-50% -50%}.film-canvas[data-step="8"] .pf-dots span:not(.pf-fill){animation:pf-typing 1.2s ease-in-out calc(12 * var(--f)) infinite}.film-canvas[data-step="8"] .pf-dots span:nth-child(2){animation-delay:calc(12 * var(--f) + .15s)}.film-canvas[data-step="8"] .pf-dots span:nth-child(3){animation-delay:calc(12 * var(--f) + .3s)}@keyframes pf-typing{0%,60%,to{translate:-50% -50%;opacity:1}30%{translate:-50% calc(-50% - 5px);opacity:.55}}.pf-dots .pf-fill{left:294px;width:3200px;height:3200px;border-radius:0;clip-path:circle(4px);transition:clip-path calc(18 * var(--f)) var(--film-move)}.film-canvas[data-step="9"] .pf-dots{--to-translate: -99px -25px;--cut: 0ms;--settle: calc(18 * var(--f));--settle-ease: var(--film-move)}.film-canvas[data-step="9"] .pf-fill{clip-path:circle(1600px);transition:clip-path calc(24 * var(--f)) var(--film-move) calc(8 * var(--f))}
