.film-wrap{position:relative;width:calc(390px * var(--film));height:calc(360px * var(--film));overflow:visible;cursor:pointer}.film{--glow-60: color-mix(in srgb, var(--lglow) 60%, transparent);--glow-20: color-mix(in srgb, var(--lglow) 20%, transparent);--glow-16: color-mix(in srgb, var(--lglow) 16%, transparent);--glow-7: color-mix(in srgb, var(--lglow) 7%, transparent);--glow-6: color-mix(in srgb, var(--lglow) 5.5%, transparent);--glow-12: color-mix(in srgb, var(--lglow) 12%, transparent);--glow-4: color-mix(in srgb, var(--lglow) 4%, transparent);--ring: color-mix(in srgb, var(--ledge) 55%, transparent);position:absolute;left:0;top:0;width:390px;height:360px;transform:scale(var(--film));transform-origin:0 0}.film *{box-sizing:border-box}:where(.film) .warm{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:0;pointer-events:none}:where(.film) .warm.l,:where(.film) .warm.r{width:460px;height:460px;top:-50px;background:radial-gradient(circle closest-side,var(--glow-16),var(--glow-6) 46%,transparent 72%)}:where(.film) .warm.l{left:calc(50% - 302px);animation:to-1 1.2s cubic-bezier(.4,0,.2,1) 2.9s forwards}:where(.film) .warm.r{left:calc(50% - 158px);animation:to-1 1.2s cubic-bezier(.4,0,.2,1) 3.55s forwards}:where(.film) .warm.t{width:620px;height:620px;left:calc(50% - 310px);top:-130px;background:radial-gradient(circle closest-side,var(--glow-20),var(--glow-7) 50%,transparent 76%);animation:to-1 .9s cubic-bezier(.4,0,.2,1) 4.45s forwards,to-0 1.2s cubic-bezier(.4,0,.2,1) 6.6s forwards}:where(.film) .slot{position:absolute;top:180px;width:0;height:0;z-index:1}:where(.film) .slot.l{left:calc(50% - 72px)}:where(.film) .slot.r{left:calc(50% + 72px)}:where(.film) .slot.c{left:50%}:where(.film) .lamp{--d: 96px;position:absolute;width:var(--d);height:var(--d);left:calc(var(--d) / -2);top:calc(var(--d) / -2)}:where(.film) .lamp>i,:where(.film) .lamp i i{position:absolute;display:block;border-radius:50%}:where(.film) .lamp .halo{inset:calc(var(--d) * -1.15);background:radial-gradient(circle,var(--glow-60) 0%,transparent 58%);mix-blend-mode:screen;opacity:0}:where(.film) .lamp .bw{inset:0;opacity:0;mix-blend-mode:screen}:where(.film) .lamp .bloom{inset:calc(var(--d) * -.48);background:radial-gradient(circle,var(--lbloom) 0%,transparent 64%);filter:blur(calc(var(--d) * .22));opacity:.47;animation:breathe 3.6s ease-in-out infinite}:where(.film) .lamp .body{inset:0;background:radial-gradient(circle at 50% 50%,var(--glow-12) 0%,var(--glow-4) 30%,transparent 48%),radial-gradient(circle at 50% 40%,var(--coal),var(--coal-2) 90%);box-shadow:inset 0 1px #ffffff1a,inset 0 -10px 18px #0000004d,inset 0 0 0 1px #ffffff12}:where(.film) .lamp .hw{inset:0;mix-blend-mode:plus-lighter}:where(.film) .lamp .heart{width:30%;height:30%;left:35%;top:35%;background:radial-gradient(circle,var(--heart-core) 0%,#b8763c 28%,var(--heart) 52%,transparent 72%);animation:heart 5s ease-in-out infinite}:where(.film) .lamp.late .heart{animation-delay:-2.5s}:where(.film) .lamp.late .bloom{animation-delay:-1.8s}:where(.film) .lamp .lit{inset:0;opacity:0;background:radial-gradient(circle at 50% 42%,var(--lcore) 0%,var(--lbody) 62%,var(--ledge) 100%);box-shadow:inset -3px -5px 9px #00000017;mask-image:radial-gradient(circle closest-side,#000 70%,transparent 100%);mask-position:center;mask-repeat:no-repeat;mask-size:142% 142%}:where(.film) .lamp .ring{inset:calc(var(--d) * -.1);border:2px solid var(--ring);opacity:0}:where(.film) .lamp.on .lit,:where(.film) .lamp.on .bw{opacity:1}:where(.film) .lamp.on .halo{opacity:.22}:where(.film) .lamp.on .hw{opacity:0}:where(.film) .lamp.on.own .ring{opacity:1}@keyframes breathe{0%,to{opacity:.42}50%{opacity:.52}}@keyframes heart{0%,to{opacity:.45;transform:scale(.96)}50%{opacity:.8;transform:scale(1.08)}}:where(.film) .b{position:absolute;top:var(--y);height:36px;padding:0 14px;border-radius:18px;display:flex;align-items:center;white-space:nowrap;font-size:16px;line-height:20px;color:var(--text);opacity:0;z-index:2}:where(.film) .b.t{left:24px;background:var(--coal);border-bottom-left-radius:6px;animation:bubble-in .24s cubic-bezier(.2,.7,.3,1) var(--t) forwards,fold-l .72s cubic-bezier(.5,0,.3,1) calc(2.1s + var(--k)) forwards}:where(.film) .b.y{right:24px;background:var(--border);border-bottom-right-radius:6px;animation:bubble-in .24s cubic-bezier(.2,.7,.3,1) var(--t) forwards,fold-r .72s cubic-bezier(.5,0,.3,1) calc(2.1s + var(--k)) forwards}:where(.film) .b.dots{gap:5px}:where(.film) .b.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot .9s ease-in-out infinite}:where(.film) .b.dots i:nth-child(2){animation-delay:.15s}:where(.film) .b.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,to{opacity:.35}40%{opacity:1}}@keyframes bubble-in{0%{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}@keyframes fold-l{0%{left:24px;top:var(--y);transform:translate(0) scale(1);opacity:1;filter:blur(0)}55%{opacity:.9;filter:blur(0)}to{left:calc(50% - 72px);top:180px;transform:translate(-50%,-50%) scale(.1);opacity:0;filter:blur(4px)}}@keyframes fold-r{0%{right:24px;top:var(--y);transform:translate(0) scale(1);opacity:1;filter:blur(0)}55%{opacity:.9;filter:blur(0)}to{right:calc(50% - 72px);top:180px;transform:translate(50%,-50%) scale(.1);opacity:0;filter:blur(4px)}}:where(.film) .pair .lamp{animation:ember-in .56s cubic-bezier(.2,.7,.3,1) 2.3s both}:where(.film) .pair .lamp .lit{animation:ignite .52s cubic-bezier(.22,.7,.3,1) var(--on) both}:where(.film) .pair .lamp .halo{animation:to-22 .4s linear calc(var(--on) + .16s) both}:where(.film) .pair .lamp .bw{animation:to-1 .4s linear calc(var(--on) + .16s) both}:where(.film) .pair .lamp .hw{animation:to-0 .24s linear var(--on) both}:where(.film) .pair.own .lamp .ring{animation:to-1 .28s ease-out calc(var(--on) + .14s) both}:where(.film) .slot.pair{mix-blend-mode:lighten}:where(.film) .slot.pair.l{animation:carry-l .5s cubic-bezier(.4,0,.2,1) 4.05s both,to-0 .52s ease-out 4.63s forwards}:where(.film) .slot.pair.r{animation:carry-r .5s cubic-bezier(.4,0,.2,1) 4.05s both,to-0 .52s ease-out 4.63s forwards}@keyframes ember-in{0%{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}@keyframes ignite{0%{opacity:0;mask-size:36% 36%}12%{opacity:1}to{opacity:1;mask-size:142% 142%}}@keyframes to-22{0%{opacity:0}to{opacity:.22}}@keyframes to-1{0%{opacity:0}to{opacity:1}}@keyframes to-0{0%{opacity:1}to{opacity:0}}@keyframes carry-l{0%{transform:translate(0)}to{transform:translate(72px)}}@keyframes carry-r{0%{transform:translate(0)}to{transform:translate(-72px)}}:where(.film) .merged .lamp{--d: 128px}:where(.film) .merged .lamp .lit{opacity:1;background:radial-gradient(circle at 50% 42%,#fff 0%,var(--hearth) 45%,var(--lbody) 80%,var(--ledge) 100%)}:where(.film) .merged .lamp .halo{inset:calc(var(--d) * -1.6);opacity:.34}:where(.film) .merged .lamp .bw{opacity:1}:where(.film) .merged .lamp .bloom{opacity:.55;animation:none}:where(.film) .slot.merged{opacity:0;z-index:2;animation:merged-in .76s cubic-bezier(.2,.9,.3,1.12) 4.55s forwards,merged-out .45s ease-in 6.6s forwards}@keyframes merged-in{0%{opacity:0;transform:scale(.75)}11%{opacity:1}to{opacity:1;transform:scale(1)}}@keyframes merged-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}:where(.film) .pulse{position:absolute;left:0;top:0;box-sizing:border-box;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid var(--hearth);opacity:0;animation:pulse 1s cubic-bezier(.2,.7,.3,1) 4.55s forwards}@keyframes pulse{0%{opacity:.6;width:96px;height:96px;margin:-48px 0 0 -48px;border-width:2px}to{opacity:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-width:.75px}}:where(.film) .moment{position:absolute;left:0;right:0;top:272px;margin:0;text-align:center;font-size:32px;line-height:36px;font-weight:600;letter-spacing:-.7px;color:var(--text);opacity:0;z-index:3;animation:ink-in .2s ease-out 4.85s forwards,ink-out .14s ease-in 6.6s forwards}@keyframes ink-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ink-out{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}:where(.film) .slot.rest{opacity:0;animation:to-1 .7s cubic-bezier(.2,.7,.3,1) 6.98s forwards}@media(prefers-reduced-motion:reduce){.film .b,.film .pair,.film .merged,.film .moment,.film .warm.t{display:none}.film-wrap{cursor:default}.film .slot.rest,.film .warm{animation:none;opacity:1}.film .bloom,.film .heart{animation:none}}