<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
body,.stage{background:#f4efe6}.ui{position:relative;width:50cqw;background:#fff;border-radius:16px;padding:2.4cqw;box-shadow:0 16px 40px -20px rgba(0,0,0,.4)}
.btn{position:relative;overflow:hidden;display:inline-block;background:#1f6f5c;color:#fff;font-weight:700;font-size:2cqw;padding:1cqw 2.4cqw;border-radius:10px;animation:pr 4s infinite}
@keyframes pr{0%,38%,46%,100%{transform:scale(1)}41%{transform:scale(.94)}}
.rp{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:rp 4s infinite}
@keyframes rp{0%,40%{transform:scale(0);opacity:1}55%{transform:scale(30);opacity:0}100%{opacity:0}}
.pn{height:0;overflow:hidden;animation:ex 4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes ex{0%,45%{height:0}60%,90%{height:8cqw}100%{height:0}}
.bar{margin-top:2cqw;height:1cqw;background:#e7e5e4;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:#f5b942;width:0;animation:fl 4s ease-out infinite}
@keyframes fl{0%,50%{width:0}88%{width:100%}100%{width:100%}}
.cur{position:absolute;width:2.4cqw;left:0;top:0;animation:mv 4s cubic-bezier(.65,0,.35,1) infinite;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
@keyframes mv{0%{transform:translate(42cqw,14cqw)}36%,48%{transform:translate(8cqw,4.4cqw)}100%{transform:translate(42cqw,14cqw)}}
.lb{font-size:1.6cqw;color:#57534e;margin-top:1cqw}
</style></head>
<body><div class="stage"><div class="ui"><div class="btn">Render<span class="rp"></span></div><div class="pn"><div class="bar"><i></i></div><div class="lb">Rendering intro.mp4…</div></div><svg class="cur" viewBox="0 0 24 24"><path d="M4 2 L4 20 L9 15 L12.5 22 L15 21 L11.6 14 L18 14 Z" fill="#111" stroke="#fff" stroke-width="1.4"/></svg></div></div></body></html>