:root{color-scheme:dark;background:#000;--blue:#1877ff;--fade:900ms}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;color:#fff}
#stage{position:fixed;inset:0;background:#000;isolation:isolate;overflow:hidden}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.video{z-index:1;opacity:1;transition:opacity var(--fade) ease}
.final-frame{z-index:2;opacity:0;transform:scale(1.008);transition:opacity 1.15s ease,transform 2.2s ease;pointer-events:none}
#stage.final .final-frame{opacity:1;transform:scale(1)}
#stage.final .video{opacity:0}
.bluesky{position:absolute;z-index:4;left:50%;bottom:max(2.2vh,env(safe-area-inset-bottom));width:min(25vw,390px);min-width:180px;transform:translate(-50%,18px);opacity:0;filter:drop-shadow(0 0 0 rgba(30,120,255,0));transition:opacity 1s ease 700ms,transform 1s ease 700ms;text-decoration:none}
.bluesky img{display:block;width:100%;height:auto}
#stage.final .bluesky{opacity:.82;transform:translate(-50%,0);animation:signal 3.1s ease-in-out 2s infinite}
.bluesky:hover,.bluesky:focus-visible{opacity:1!important;filter:drop-shadow(0 0 14px rgba(40,130,255,.95));outline:none}
@keyframes signal{0%,100%{opacity:.68;filter:drop-shadow(0 0 2px rgba(30,110,255,.2))}50%{opacity:1;filter:drop-shadow(0 0 14px rgba(30,110,255,.8))}}
.replay{position:absolute;z-index:5;right:18px;bottom:14px;border:0;background:transparent;color:rgba(255,255,255,.28);font:500 10px/1 Arial,sans-serif;letter-spacing:.24em;cursor:pointer;opacity:0;transition:opacity .5s ease}
#stage.final .replay{opacity:.55}.replay:hover,.replay:focus-visible{color:#fff;opacity:1;outline:none}
@media (max-width:700px){.layer{object-fit:cover}.bluesky{width:min(54vw,310px);bottom:2.5vh}.replay{right:10px;bottom:9px}}
@media (prefers-reduced-motion:reduce){.video{display:none}.final-frame{opacity:1;transform:none}.bluesky{opacity:.9;transform:translate(-50%,0);animation:none}.replay{display:none}}