<div class="div-cyber-surface">
  <p class="div-cyber-text">&gt; ESTABLISHING SECURE CHANNEL... [OK]<br>&gt; SESSION_ID: 0x7FA3-C891-02BE</p>
  <div class="div-cyber-v1" role="separator"></div>
  <p class="div-cyber-text">The attack surface of a modern data center is not its perimeter — that concept is meaningless now.</p>
  <div class="div-cyber-v2" role="separator"><span class="div-cyber-bar"></span></div>
  <p class="div-cyber-text">&gt; ANOMALY DETECTED: 847 req/sec from 10.0.14.x<br>&gt; AUTO-THROTTLE: ENGAGED</p>
  <div class="div-cyber-v3" role="separator"><span class="div-cyber-tag">[ SYSTEM NOMINAL ]</span></div>
  <p class="div-cyber-text">Cryptography is applied mathematics in service of trust — the implementations are where the problems live.</p>
</div>

@keyframes div-cy-beam { from { left: -22%; } to { left: 122%; } }
@keyframes div-cy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-cy-type { from { max-width: 0; opacity: 0; } 1% { opacity: 1; } to { max-width: 220px; opacity: 1; } }
@keyframes div-cy-glitch { 0%,87%,100% { transform: none; } 88% { transform: translateX(3px); } 89% { transform: translateX(-2px); } 90% { transform: none; } 94% { transform: translateX(1px); } 95% { transform: none; } }
.div-cyber-surface {
  background: #060a0f;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-cyber-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  line-height: 1.78;
  color: #2a5848;
  margin: 0;
}
/* v1 — scanning beam over a faint track */
.div-cyber-v1 {
  position: relative;
  height: 2px;
  margin: 38px 0;
  background: rgba(0, 245, 200, 0.1);
  overflow: visible;
}
.div-cyber-v1::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -22%;
  width: 22%;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(0,245,200,0.95), transparent);
  animation: div-cy-beam 2.1s linear infinite;
}
.div-cyber-v1::after {
  content: '// 0x4F2A·C8';
  position: absolute;
  right: 0;
  top: -15px;
  font-family: "Courier New", monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: rgba(0, 245, 200, 0.35);
}
/* v2 — dot-matrix grid, pulse bar grows across */
.div-cyber-v2 {
  position: relative;
  height: 20px;
  margin: 38px 0;
  display: flex;
  align-items: center;
}
.div-cyber-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0,245,200,0.5) 1px, transparent 1px) 0 0 / 12px 20px;
}
.div-cyber-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0,245,200,0.3), transparent);
  transform-origin: center;
  animation: div-cy-grow 0.85s cubic-bezier(.16,1,.3,1) 0.44s both;
}
/* v3 — system tag types itself in, then glitches */
.div-cyber-v3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 38px 0;
}
.div-cyber-v3::before,
.div-cyber-v3::after {
  content: '';
  flex: 1;
  height: 1px;
  animation: div-cy-grow 0.6s ease 0.68s both;
}
.div-cyber-v3::before { background: linear-gradient(90deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: right; }
.div-cyber-v3::after  { background: linear-gradient(270deg, rgba(0,245,200,.04), rgba(0,245,200,.4)); transform-origin: left; animation-delay: 0.73s; }
.div-cyber-tag {
  flex-shrink: 0;
  font-family: "Courier New", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(0, 245, 200, 0.8);
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  animation: div-cy-type 0.65s steps(17,end) 0.14s forwards,
             div-cy-glitch 5s ease 2.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .div-cyber-v1::before { animation: none; left: calc(50% - 11%); }
  .div-cyber-bar, .div-cyber-v3::before, .div-cyber-v3::after { animation: none; }
  .div-cyber-tag { animation: none; max-width: 220px; opacity: 1; }
}