/* The WebSwan · Midnight Glide: pure CSS.
   Timed to Jimmy's jingle "The WebSwan Takeoff" (66s): calm intro, build at 24s, peak 40-55s, ends at 64s.
   The big swan takes off on the 40s peak; --show brings the replay card in as the music ends. */
:root{
  --show:63.5s;
  --navy:#0b1d59; --ink:#04112d; --cream:#f3f7ff;
  --b1:#3898f5; --b2:#6aa8e6; --b3:#48d6fa;
  --brand:linear-gradient(90deg,var(--b1),var(--b2),var(--b3));
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#02040c;color:var(--cream)}
body{font-family:'Space Mono',ui-monospace,monospace}

.scene{position:relative;height:100vh;height:100dvh;overflow:hidden;container-type:size;
  background:radial-gradient(ellipse at 50% 30%,#0a1846,#02040c 70%)}
.switch{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* ===== THE STAGE (16:9, covers the screen like a video) ===== */
.stage{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100cqw,calc(100cqh*16/9));
  aspect-ratio:16/9;overflow:hidden;container-type:inline-size}
@container (max-aspect-ratio:5/4){
  .stage{width:190cqw;-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
}
.stage>*{position:absolute}

.sky{inset:0;background:linear-gradient(180deg,#02040e 0%,#06103a 32%,var(--navy) 52%,#1a4a8f 60%,#0c2350 60.5%)}
.stars{inset:0 0 45% 0;opacity:.9;animation:twinkle 4s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.5px 1.5px at 6% 14%,#fff,transparent),radial-gradient(1px 1px at 13% 32%,#cfe3ff,transparent),
    radial-gradient(1.5px 1.5px at 21% 8%,#fff,transparent),radial-gradient(1px 1px at 27% 24%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 36% 12%,#d6f3ff,transparent),radial-gradient(1px 1px at 44% 30%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 52% 6%,#fff,transparent),radial-gradient(1px 1px at 58% 20%,#cfe3ff,transparent),
    radial-gradient(1px 1px at 66% 34%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 9%,#fff,transparent),
    radial-gradient(1px 1px at 88% 28%,#d6f3ff,transparent),radial-gradient(1.5px 1.5px at 94% 15%,#fff,transparent)}
.stars-2{animation-delay:-2s;animation-duration:5.5s;transform:translate(3%,4%) scale(.96);opacity:.6}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.moon{top:9%;right:13%;width:5.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fffef4,#efe9cf 55%,#cfc7a4);
  box-shadow:0 0 2.2cqw 0.6cqw rgba(255,250,220,.35),0 0 9cqw 3cqw rgba(120,170,255,.18)}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 64% 60%,rgba(0,0,0,.08) 0 9%,transparent 10%),radial-gradient(circle at 35% 70%,rgba(0,0,0,.06) 0 6%,transparent 7%)}
.hills{left:-5%;right:-5%;top:40%;height:21%;background:
  radial-gradient(60% 100% at 18% 100%,#081333 60%,transparent 61%),
  radial-gradient(55% 90% at 62% 100%,#0a1840 60%,transparent 61%),
  radial-gradient(50% 80% at 95% 100%,#081333 60%,transparent 61%)}

/* skyline on the far shore */
.skyline{left:0;right:0;top:22%;height:38.6%}
.skyline i{position:absolute;bottom:0;left:var(--x);width:var(--w);height:var(--h);
  background:
    radial-gradient(circle,rgba(255,214,130,.85) 0 34%,transparent 40%) 0 0/24% 7%,
    linear-gradient(#0a1436,#050a1f);
  border-top:2px solid rgba(110,170,255,.25)}
.skyline i:nth-child(3n){background-size:20% 9%,auto;filter:brightness(.8)}
.skyline i:nth-child(4n+1){background-size:33% 6%,auto}
.skyline i:nth-child(5){border-radius:40% 40% 0 0/12% 12% 0 0}
.skyline i:nth-child(9)::before{content:"";position:absolute;left:46%;bottom:100%;width:8%;height:22%;background:#0a1436}
.skyline i:nth-child(9)::after{content:"";position:absolute;left:44%;bottom:122%;width:12%;aspect-ratio:1;border-radius:50%;
  background:#ff4d5e;box-shadow:0 0 .8cqw #ff4d5e;animation:beacon 2s steps(2) infinite}
@keyframes beacon{50%{opacity:.15}}

/* the lake, its lights and their reflections */
.lake{left:0;right:0;top:60.5%;bottom:0;background:linear-gradient(#123a7a,#081c47 35%,#040d26 75%,#02060f)}
.necklace{left:-1%;right:-1%;top:59.4%;height:1.3%;filter:drop-shadow(0 0 .35cqw rgba(255,236,170,.9));
  background:radial-gradient(circle,#fff7cf 0 18%,rgba(255,240,180,0) 55%) 0 50%/1.7% 100% repeat-x;
  animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.8}to{opacity:1}}
.necklace-reflect{top:61.4%;height:5%;opacity:.35;filter:blur(.25cqw);transform-origin:top;
  background-size:1.7% 26%;background-repeat:repeat;animation:waver 3.5s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
@keyframes waver{from{transform:skewX(-6deg) scaleY(1)}to{transform:skewX(6deg) scaleY(1.15)}}
.shimmer{left:0;right:0;top:62%;bottom:0;opacity:.75;
  background:
    radial-gradient(ellipse 9% 9% at 20% 30%,rgba(160,210,255,.22),transparent 70%) 0 0/31% 23%,
    radial-gradient(ellipse 7% 8% at 70% 75%,rgba(160,210,255,.16),transparent 70%) 0 0/23% 17%,
    radial-gradient(ellipse 12% 6% at 45% 50%,rgba(200,230,255,.12),transparent 70%) 0 0/41% 29%;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);
  animation:drift 18s linear infinite}
@keyframes drift{to{background-position:62% 0,-46% 0,82% 0}}

.fly{left:var(--x);top:var(--y);width:.45%;aspect-ratio:1;border-radius:50%;background:#e9ffb0;
  box-shadow:0 0 .6cqw .2cqw rgba(220,255,140,.7);animation:firefly 4.5s ease-in-out var(--d) infinite}
@keyframes firefly{0%,100%{opacity:0;translate:0 0}40%{opacity:1}60%{opacity:.8;translate:1.2cqw -1.4cqw}80%{opacity:0;translate:2cqw -.6cqw}}

/* ===== THE GLIDE (hidden until the click; its animations start from zero) ===== */
.show{display:none;inset:0}
.scene:has(#go:checked) .show{display:block}

.swan{position:absolute;top:var(--y);left:-20%;width:calc(var(--s)*12%);aspect-ratio:100/70;translate:0 -100%;
  animation:glide var(--dur) linear var(--d) 1 both}
@keyframes glide{from{left:-20%}to{left:112%}}
.bird{position:absolute;inset:0;animation:bob 2.6s ease-in-out infinite;
  -webkit-box-reflect:below -6% linear-gradient(transparent 52%,rgba(255,255,255,.45))}
@keyframes bob{50%{transform:translateY(3%) rotate(-1deg)}}
.bird::before{content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,#ffffff 30%,#e7eefc 70%,#c9d6f1);
  filter:drop-shadow(0 0 .4cqw rgba(160,210,255,.45));
  clip-path:polygon(2% 45%,12% 40%,30% 37%,50% 39%,64% 38%,66% 28%,66% 16%,67% 8%,71% 3%,78% 2%,83% 5%,84% 7%,
    78% 11%,74% 16%,73% 28%,76% 38%,84% 46%,82% 56%,70% 63%,45% 66%,22% 64%,10% 58%)}
.wing{position:absolute;left:14%;top:36%;width:50%;height:22%;border-radius:100% 30% 70% 40%/120% 40% 60% 40%;
  background:linear-gradient(175deg,#ffffff,#dbe5f8);box-shadow:inset -.3cqw -.25cqw 0 rgba(120,150,210,.25);
  transform-origin:90% 60%;animation:preen 5s ease-in-out infinite}
@keyframes preen{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-7deg) translateY(-4%)}}
.beak{position:absolute;left:83%;top:4.2%;width:11%;height:8%;background:linear-gradient(#ff9d3b,#f06a1d);
  clip-path:polygon(0 0,100% 55%,0 100%)}
.beak::before{content:"";position:absolute;left:-12%;top:-10%;width:30%;height:120%;border-radius:40%;background:#141414}
.eye{position:absolute;left:78.5%;top:5%;width:1.6%;aspect-ratio:1;border-radius:50%;background:#0b0b14}

.tag{position:absolute;left:4%;bottom:122%;white-space:nowrap;padding:.35cqw .8cqw;border-radius:99px;
  font:700 calc(var(--s)*1cqw)/1.2 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:var(--brand);box-shadow:0 0 1.4cqw rgba(72,214,250,.45);animation:bob 2.6s ease-in-out infinite reverse}
.tag::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:1.2cqw;background:rgba(200,230,255,.6)}

/* the WebSwan crew look (from Tania's Salvador swans): bucket hats, sunglasses, a flower lei */
.swan.blue{--hat:#7fb2ec;--hat2:#4f86cf;--lens:#0d1220;--rim:#1b2233}
.swan.pink{--hat:#ff5aa8;--hat2:#e43b8b;--lens:#5a1636;--rim:#ff8fc7}
.hat{position:absolute;left:60%;top:-19%;width:33%;height:21%;z-index:2;filter:drop-shadow(0 0 .3cqw rgba(255,255,255,.35))}
.hat::before{content:"";position:absolute;left:22%;top:0;width:56%;height:70%;border-radius:45% 45% 12% 12%;
  background:radial-gradient(circle at 70% 40%,#fff 0 6%,transparent 7%),linear-gradient(var(--hat),var(--hat2));
  box-shadow:inset 0 -.15cqw 0 rgba(0,0,0,.25)}
.hat::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:40%;border-radius:50%;
  background:linear-gradient(var(--hat),var(--hat2));box-shadow:0 .15cqw .25cqw rgba(0,0,0,.35)}
.swan.pink .hat::before{background:radial-gradient(circle at 30% 45%,#ffd84a 0 9%,transparent 10%),radial-gradient(circle at 62% 38%,#fff 0 7%,transparent 8%),linear-gradient(var(--hat),var(--hat2))}
.shades{position:absolute;left:72.5%;top:2.6%;width:15%;height:6.6%;z-index:3;border-radius:35% 45% 50% 40%;
  background:radial-gradient(ellipse 40% 60% at 30% 40%,rgba(255,255,255,.35),transparent 60%),var(--lens);
  border:.12cqw solid var(--rim)}
.shades::before{content:"";position:absolute;right:92%;top:30%;width:45%;height:22%;background:var(--rim)}
.lei{position:absolute;left:62%;top:31%;width:17%;height:7%;z-index:2;border-radius:50%;
  background:radial-gradient(circle,#ffd23f 0 34%,transparent 38%) 0 0/25% 100%,radial-gradient(circle,#ff4f9a 0 34%,transparent 38%) 12.5% 50%/25% 100%;
  transform:rotate(-12deg)}
.swan.pink .tag{background:linear-gradient(90deg,#ff5aa8,#ff9bd0,#48d6fa)}

/* finale: a big swan skims off the lake and flies over the city */
.finale{inset:0;pointer-events:none}
.flyer{position:absolute;left:-30%;top:74%;width:24%;aspect-ratio:2.4/1;translate:0 -100%;
  animation:takeoff 18s cubic-bezier(.4,.05,.45,1) 36s 1 both}
@keyframes takeoff{
  0%{left:-30%;top:74%;transform:rotate(0) scale(1)}
  22%{left:16%;top:72%;transform:rotate(-2deg) scale(1)}
  30%{left:26%;top:64%;transform:rotate(-8deg) scale(.95)}
  100%{left:118%;top:12%;transform:rotate(-12deg) scale(.55)}}
.fbody{position:absolute;left:8%;top:52%;width:58%;height:24%;border-radius:55% 45% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(#fff,#dbe6fa);box-shadow:0 0 2.2cqw rgba(140,200,255,.55)}
.fbody::before{content:"";position:absolute;left:-12%;top:30%;width:18%;height:40%;background:#eef3ff;
  clip-path:polygon(100% 0,0 50%,100% 100%)}
.fneck{position:absolute;left:60%;top:50%;width:30%;height:9%;border-radius:99px;background:linear-gradient(#fff,#e3ebfb);
  transform:rotate(-6deg);transform-origin:left center}
.fhead{position:absolute;left:86%;top:42%;width:7%;aspect-ratio:1.4;border-radius:50% 60% 50% 50%;background:#fff}
.fhead::after{content:"";position:absolute;left:92%;top:30%;width:90%;height:45%;background:linear-gradient(#ff9d3b,#f06a1d);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.fshades{position:absolute;left:30%;top:10%;width:55%;height:45%;border-radius:40%;background:#0d1220;border:.1cqw solid #1b2233}
.fwing{position:absolute;left:20%;bottom:52%;width:36%;height:100%;transform-origin:50% 100%;
  background:linear-gradient(200deg,#ffffff,#cddff9);
  clip-path:polygon(100% 100%,0 100%,6% 74%,18% 46%,36% 20%,58% 4%,74% 0,70% 24%,82% 40%,78% 64%,92% 78%);
  animation:flap .62s ease-in-out infinite alternate}
.fwing-back{left:26%;opacity:.55;filter:brightness(.82);animation-delay:-.31s}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.75)}}
.sparkles{inset:0;pointer-events:none}
.sparkles i{position:absolute;left:var(--x);top:20%;width:.6%;aspect-ratio:1;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 1cqw .3cqw var(--b3);animation:spark 2.4s ease-out calc(45s + var(--d)) 2 both}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:translateY(-4cqw) scale(.4)}}

/* ===== TITLE CARD ===== */
.title-card{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(2,6,22,.45),rgba(2,6,22,.85));transition:opacity .9s ease,visibility .9s}
.scene:has(#go:checked) .title-card{opacity:0;visibility:hidden}
.kicker{margin:0;font-size:clamp(9px,1.05vw,12px);letter-spacing:.32em;color:#a9c4ea}
h1,h2{margin:0;font-family:'Playfair Display',Georgia,serif;color:#fff;text-shadow:0 2px 0 #000,0 0 32px rgba(72,214,250,.35)}
h1{font-size:clamp(38px,7vw,88px);line-height:1}
h1 span{display:block;font-style:italic;font-weight:500;font-size:.5em;letter-spacing:.08em;margin-top:.2em;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.btn{display:inline-block;cursor:pointer;user-select:none;text-decoration:none;padding:16px 26px;border-radius:999px;
  font:700 clamp(11px,1.3vw,15px)/1.2 'Space Mono',monospace;letter-spacing:.14em;color:var(--ink);background:var(--brand);
  box-shadow:0 0 0 4px rgba(72,214,250,.18),0 0 34px rgba(72,214,250,.45);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(72,214,250,.25),0 0 46px rgba(72,214,250,.6)}
#go:focus-visible~.title-card .btn,#cc-off:focus-visible~.controls label{outline:3px solid #ffbf47;outline-offset:4px}
.note{margin:0;font-size:clamp(9px,.95vw,11px);letter-spacing:.12em;color:#8fa6c8}

/* ===== PLAYER + CONTROLS ===== */
.controls{display:none;position:absolute;left:50%;translate:-50% 0;top:14px;z-index:6;width:min(760px,94cqw);height:58px;gap:10px}
.scene:has(#go:checked) .controls{display:flex}
.player{flex:1;min-width:0;height:100%;border:0;border-radius:14px;background:transparent}
.ctrl{flex:0 0 auto;display:grid;place-items:center;padding:0 16px;border-radius:14px;cursor:pointer;user-select:none;text-decoration:none;
  font:700 11px/1.3 'Space Mono',monospace;letter-spacing:.08em;color:#dff3ff;background:rgba(4,12,38,.82);
  border:1.5px solid rgba(72,214,250,.6);backdrop-filter:blur(6px)}
.ctrl:hover{background:var(--b3);color:var(--ink)}
.ctrl .off{display:none}
.scene:has(#cc-off:checked) .ctrl .on{display:none}
.scene:has(#cc-off:checked) .ctrl .off{display:inline}
@container (max-aspect-ratio:5/4){
  .controls{top:calc(50cqh + 53.5cqw + 12px);height:auto;flex-wrap:wrap}
  .player{flex:1 1 100%;height:62px}
  .ctrl{flex:1 1 40%;padding:12px}
}

/* ===== CAPTIONS ===== */
.captions{display:none;position:absolute;left:0;right:0;bottom:8%;z-index:6;height:4.5em;pointer-events:none}
.scene:has(#go:checked) .captions{display:block}
.scene:has(#cc-off:checked) .captions{visibility:hidden}
.cap{position:absolute;left:50%;bottom:0;translate:-50% 0;margin:0;width:max-content;max-width:92cqw;text-align:center;
  padding:.55em 1em;border-radius:12px;background:rgba(2,8,28,.72);backdrop-filter:blur(4px);
  font:400 clamp(12px,1.55vw,20px)/1.4 'Space Mono',monospace;color:#eaf6ff;opacity:0;
  animation:cap 5.6s ease var(--t) 1 both}
.cap b{color:var(--b3)}
.cap-big{font:italic 500 clamp(18px,2.8vw,36px)/1.25 'Playfair Display',serif;animation-duration:15s;
  background:rgba(2,8,28,.55);box-shadow:0 0 30px rgba(72,214,250,.25)}
@keyframes cap{0%{opacity:0;translate:-50% 8px}8%,86%{opacity:1;translate:-50% 0}100%{opacity:0;translate:-50% -6px}}
@container (max-aspect-ratio:5/4){ .captions{bottom:auto;top:calc(50cqh - 56cqw - 4.5em)} }

/* ===== REPLAY CARD ===== */
.replay-card{display:none;position:absolute;inset:0;z-index:7;place-content:center;justify-items:center;gap:16px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(2,6,22,.4),rgba(2,6,22,.86));animation:reveal 1.6s ease var(--show) 1 both}
.scene:has(#go:checked) .replay-card{display:grid}
@keyframes reveal{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
.polaroid{margin:0 0 4px;padding:8px 8px 6px;background:#f6f8ff;border-radius:6px;transform:rotate(-2.5deg);
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 30px rgba(72,214,250,.25);width:min(420px,70cqw)}
.polaroid img{display:block;width:100%;height:auto;border-radius:3px}
.polaroid figcaption{margin-top:6px;font:italic 500 clamp(11px,1.2vw,14px)/1.2 'Playfair Display',serif;color:#0b1d59}
@container (max-height:520px){.polaroid{width:min(300px,40cqw)}}
.replay-card h2{font-size:clamp(34px,6.4vw,80px);line-height:1.05}
.cta-line{margin:0;font-size:clamp(12px,1.4vw,16px);letter-spacing:.06em}
.cta-line a{color:var(--b3);text-decoration:none;border-bottom:1px dotted}

.credit{position:absolute;right:14px;bottom:10px;margin:0;z-index:6;font-size:9px;letter-spacing:.14em;color:#8fa6c8;opacity:.75}
@media (max-width:560px){.credit{left:0;right:0;text-align:center}}

@media (prefers-reduced-motion:reduce){
  .bunting i,.confetti,.stars,.necklace,.necklace-reflect,.shimmer,.fly,.bird,.wing,.tag,.fwing{animation:none}
  .replay-card{animation-duration:.01s}
}

/* ===== PARTY ON THE LAKE ===== */
/* bunting across the top (always on) */
.bunting{inset:0;pointer-events:none}
.bunting i{position:absolute;left:var(--x);top:var(--y);width:2.3%;aspect-ratio:1/1.15;background:var(--c);
  clip-path:polygon(0 0,100% 0,50% 100%);transform:rotate(var(--r));transform-origin:50% 0;
  filter:drop-shadow(0 0 .35cqw color-mix(in srgb,var(--c) 60%,transparent));animation:sway 2.4s ease-in-out var(--d) infinite alternate}
.bunting i::before{content:"";position:absolute;left:-30%;right:-30%;top:0;height:.12cqw;background:rgba(255,255,255,.5)}
@keyframes sway{from{transform:rotate(calc(var(--r) - 5deg))}to{transform:rotate(calc(var(--r) + 5deg))}}
.scene:has(#go:checked) .bunting i{animation-duration:.9s}

/* the lake lights turn into party lights once the show starts */
.scene:has(#go:checked) .necklace,.scene:has(#go:checked) .necklace-reflect{
  background-image:radial-gradient(circle,#ff5aa8 0 18%,transparent 55%),radial-gradient(circle,#ffd23f 0 18%,transparent 55%),
    radial-gradient(circle,#48d6fa 0 18%,transparent 55%),radial-gradient(circle,#5be38b 0 18%,transparent 55%);
  background-size:6.8% 100%;background-position:0 50%,1.7% 50%,3.4% 50%,5.1% 50%;
  animation:party 4s linear infinite}
.scene:has(#go:checked) .necklace-reflect{background-size:6.8% 26%;opacity:.4}
@keyframes party{to{filter:hue-rotate(360deg) drop-shadow(0 0 .35cqw rgba(255,255,255,.8))}}

/* swans dance a little more */
.scene:has(#go:checked) .bird{animation:dance 1.3s ease-in-out infinite}
@keyframes dance{25%{transform:translateY(2%) rotate(-3deg)}50%{transform:translateY(4%) rotate(0)}75%{transform:translateY(2%) rotate(3deg)}}

/* fireworks over the city, timed to the build (24s) and the peak (40-55s) */
.fireworks{inset:0;pointer-events:none}
.fw{position:absolute;left:var(--x);top:var(--y);width:.55%;aspect-ratio:1;border-radius:50%;color:var(--c);opacity:0;
  scale:var(--s);
  box-shadow:
    0 -6cqw 0 .15cqw,4.2cqw -4.2cqw 0 .15cqw,6cqw 0 0 .15cqw,4.2cqw 4.2cqw 0 .15cqw,
    0 6cqw 0 .15cqw,-4.2cqw 4.2cqw 0 .15cqw,-6cqw 0 0 .15cqw,-4.2cqw -4.2cqw 0 .15cqw,
    0 -3.2cqw 0 .08cqw #fff,2.3cqw -2.3cqw 0 .08cqw #fff,3.2cqw 0 0 .08cqw #fff,2.3cqw 2.3cqw 0 .08cqw #fff,
    0 3.2cqw 0 .08cqw #fff,-2.3cqw 2.3cqw 0 .08cqw #fff,-3.2cqw 0 0 .08cqw #fff,-2.3cqw -2.3cqw 0 .08cqw #fff,
    0 0 4cqw 1cqw;
  animation:burst 1.7s cubic-bezier(.1,.7,.3,1) var(--t) 1 both}
.fw::before{content:"";position:absolute;left:0;top:100%;width:100%;height:30cqw;opacity:0;
  background:linear-gradient(var(--c),transparent);animation:rocket .5s ease-in calc(var(--t) - .5s) 1 both}
@keyframes burst{0%{opacity:1;transform:scale(.05)}60%{opacity:1}100%{opacity:0;transform:scale(1) translateY(1.5cqw)}}
@keyframes rocket{0%{opacity:0;transform:translateY(40%)}30%{opacity:.8}100%{opacity:0;transform:translateY(-10%) scaleY(.2)}}

/* confetti after the takeoff */
.confetti{inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;left:var(--x);top:-6%;width:var(--w);aspect-ratio:1/2.2;background:var(--c);border-radius:1px;opacity:0;
  animation:fall var(--dur) linear var(--d) 2 both}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:.9;transform:translateY(115cqw) rotate(var(--sp))}}