スキャンライン風グリッチ背景ヒーロー

<div class="d07-10-11-bg"></div>
        <div class="d07-10-11-scan"></div>
        <div class="d07-10-11-content">
          <h4 class="d07-10-11-title">SIGNAL LOST</h4>
          <p class="d07-10-11-sub">ノイズの走る背景で緊張感のある演出</p>
        </div>

.d07-10-11{background:#050507}
        .d07-10-11-bg{position:absolute;inset:0;background:linear-gradient(160deg,#111827,#1e1b3a,#0b0d17);background-size:220% 220%;animation:d1767move 9s ease-in-out infinite}
        .d07-10-11-scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(94,234,212,.07) 0px,rgba(94,234,212,.07) 1px,transparent 1px,transparent 4px);animation:d1767scan 6s linear infinite;mix-blend-mode:screen}
        .d07-10-11-content{position:relative;z-index:1;text-align:center;color:#5eead4}
        .d07-10-11-title{margin:0;font-size:22px;font-weight:800;letter-spacing:.14em;text-shadow:2px 0 0 rgba(244,63,94,.6),-2px 0 0 rgba(56,189,248,.6)}
        .d07-10-11-sub{margin:6px 0 0;font-size:11px;color:#94a3b8}
        @keyframes d1767move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @keyframes d1767scan{0%{transform:translateY(0)}100%{transform:translateY(20px)}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-11-bg{animation:none;background-position:50% 50%}
          .d07-10-11-scan{animation:none}
        }