Iris transition

<div class="frame">
  <div class="shot old"><i></i><b>WIDE</b></div>
  <div class="shot new"><i></i><b>DETAIL</b></div>
  <i class="center"></i>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.old{background:linear-gradient(140deg,#c99a65,#4b806f)}
.new{background:linear-gradient(140deg,var(--accent-2),#263448);clip-path:circle(0 at 50% 50%);animation:open 3.6s ease-in-out infinite}
.shot i{width:clamp(54px,30vmin,160px);aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:0 0 0 22px rgba(255,255,255,.15)}
.new i{width:42%;height:42%;border-radius:18% 50% 18% 50%;background:var(--accent);transform:rotate(35deg)}
.shot b{position:absolute;left:6%;bottom:7%;font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace;letter-spacing:.16em;color:var(--surface)}
.center{position:absolute;left:50%;top:50%;width:clamp(8px,2vmin,13px);aspect-ratio:1;border:2px solid var(--surface);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #222}
@keyframes open{0%,34%{clip-path:circle(0 at 50% 50%)}52%{clip-path:circle(48% at 50% 50%)}70%,100%{clip-path:circle(110% at 50% 50%)}}