<!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}
.sc{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:7cqw}
.a{background:#111;color:#fff}.bS{background:#f4efe6;color:#111;animation:rv 2.4s steps(1) infinite}
@keyframes rv{0%,45%{opacity:0}46%,100%{opacity:1}}
.p{position:absolute;top:-20%;bottom:-20%;width:160%;left:-180%;transform:skewX(-20deg);animation:w 2.4s cubic-bezier(.65,0,.35,1) infinite}
.p1{background:#f5b942}.p2{background:#1f6f5c;animation-delay:.12s}
@keyframes w{0%{left:-180%}60%,100%{left:120%}}
</style></head>
<body><div class="stage"><div class="sc a">Scene A</div><div class="sc bS">Scene B</div><div class="p p1"></div><div class="p p2"></div></div></body></html>