動く背景+チャプター切替タブ

<div class="d07-10-12-outer">
          <div class="d07-10-12-frame">
            <div class="d07-10-12-bg d07-10-12-bg-a is-on"></div>
            <div class="d07-10-12-bg d07-10-12-bg-b"></div>
            <div class="d07-10-12-bg d07-10-12-bg-c"></div>
            <div class="d07-10-12-label">Chapter 1</div>
          </div>
          <div class="d07-10-12-tabs">
            <button class="d07-10-12-tab is-active" type="button" data-i="0">1</button>
            <button class="d07-10-12-tab" type="button" data-i="1">2</button>
            <button class="d07-10-12-tab" type="button" data-i="2">3</button>
          </div>
        </div>

.d07-10-12-outer{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d07-10-12-frame{position:relative;width:230px;height:140px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.25)}
        .d07-10-12-bg{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:260% 260%;animation:d1768move 11s ease-in-out infinite}
        .d07-10-12-bg.is-on{opacity:1}
        .d07-10-12-bg-a{background-image:linear-gradient(120deg,#7c2d12,#c2410c,#7c2d12)}
        .d07-10-12-bg-b{background-image:linear-gradient(120deg,#0c4a6e,#0891b2,#0c4a6e)}
        .d07-10-12-bg-c{background-image:linear-gradient(120deg,#3b0764,#7e22ce,#3b0764)}
        .d07-10-12-label{position:absolute;left:10px;bottom:10px;z-index:1;color:#fff;font-size:12px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4)}
        .d07-10-12-tabs{display:flex;gap:8px}
        .d07-10-12-tab{width:26px;height:26px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:11px;font-weight:700;cursor:pointer}
        .d07-10-12-tab.is-active{background:#6366f1;border-color:#6366f1;color:#fff}
        @keyframes d1768move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-12-bg{animation:none;background-position:50% 50%}
        }

(function(){
        var root=document.querySelector('.d07-10-12');if(!root)return;
        var tabs=root.querySelectorAll('.d07-10-12-tab');
        var bgs=root.querySelectorAll('.d07-10-12-bg');
        var label=root.querySelector('.d07-10-12-label');
        var names=['Chapter 1','Chapter 2','Chapter 3'];
        tabs.forEach(function(tab){
          tab.addEventListener('click',function(){
            var i=parseInt(tab.getAttribute('data-i'),10);
            tabs.forEach(function(t){ t.classList.remove('is-active'); });
            tab.classList.add('is-active');
            bgs.forEach(function(b,idx){ b.classList.toggle('is-on', idx===i); });
            label.textContent=names[i];
          });
        });
      })();