<div class="div-retro-surface">
  <p class="div-retro-text">The diner on Route 9 had been open since 1952 and showed no signs of reconsidering. The menu hadn't changed in thirty years.</p>
  <div class="div-retro-v1" role="separator">
    <svg viewBox="0 0 476 44" fill="none" aria-hidden="true">
      <line class="div-retro-fl" x1="221" y1="22" x2="0" y2="22" stroke="#d4601a" stroke-width="1"/>
      <line class="div-retro-fr" x1="255" y1="22" x2="476" y2="22" stroke="#d4601a" stroke-width="1"/>
      <g class="div-retro-rays" stroke="#d4601a" stroke-width="1.5">
        <line x1="238" y1="13" x2="238" y2="3"/>
        <line x1="241.4" y1="13.7" x2="245.3" y2="4.4"/>
        <line x1="244.4" y1="15.6" x2="251.3" y2="8.7"/>
        <line x1="246.3" y1="18.6" x2="255.6" y2="14.7"/>
        <line x1="247" y1="22" x2="257" y2="22"/>
        <line x1="246.3" y1="25.4" x2="255.6" y2="29.3"/>
        <line x1="244.4" y1="28.4" x2="251.3" y2="35.3"/>
        <line x1="241.4" y1="30.3" x2="245.3" y2="39.6"/>
        <line x1="238" y1="31" x2="238" y2="41"/>
        <line x1="234.6" y1="30.3" x2="230.7" y2="39.6"/>
        <line x1="231.6" y1="28.4" x2="224.7" y2="35.3"/>
        <line x1="229.7" y1="25.4" x2="220.4" y2="29.3"/>
        <line x1="229" y1="22" x2="219" y2="22"/>
        <line x1="229.7" y1="18.6" x2="220.4" y2="14.7"/>
        <line x1="231.6" y1="15.6" x2="224.7" y2="8.7"/>
        <line x1="234.6" y1="13.7" x2="230.7" y2="4.4"/>
      </g>
      <circle class="div-retro-circ" cx="238" cy="22" r="5" fill="#d4601a"/>
    </svg>
  </div>
  <p class="div-retro-text">Neon signs don't flicker by accident — the gas inside reacts to alternating current with a rhythm that feels almost biological.</p>
  <div class="div-retro-v2" role="separator">
    <span class="div-retro-t"></span>
    <span class="div-retro-b"></span>
  </div>
  <p class="div-retro-text">The booth was upholstered in vinyl the colour of oxblood — a colour whose name nobody used but everyone recognized.</p>
  <div class="div-retro-v3" role="separator"></div>
  <p class="div-retro-text">The jukebox held 200 selections. He had played B-7 every visit since 1971 without wondering why.</p>
</div>

@keyframes div-rt-ray  { to { stroke-dashoffset: 0; } }
@keyframes div-rt-dot  { from { transform: scale(0); } 65% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes div-rt-draw { to { stroke-dashoffset: 0; } }
@keyframes div-rt-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-rt-fade { from { opacity: 0; } to { opacity: 1; } }
.div-retro-surface {
  background: #231509;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-retro-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  line-height: 1.82;
  letter-spacing: 0.03em;
  color: #e0c87a;
  margin: 0;
}
/* v1 — starburst rays draw outward */
.div-retro-v1 { margin: 32px 0; }
.div-retro-v1 svg { display: block; width: 100%; height: 44px; overflow: visible; }
.div-retro-rays line {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  animation: div-rt-ray 0.22s ease both;
}
.div-retro-rays line:nth-child(1)  { animation-delay: 0.08s; }
.div-retro-rays line:nth-child(2)  { animation-delay: 0.12s; }
.div-retro-rays line:nth-child(3)  { animation-delay: 0.17s; }
.div-retro-rays line:nth-child(4)  { animation-delay: 0.21s; }
.div-retro-rays line:nth-child(5)  { animation-delay: 0.26s; }
.div-retro-rays line:nth-child(6)  { animation-delay: 0.30s; }
.div-retro-rays line:nth-child(7)  { animation-delay: 0.35s; }
.div-retro-rays line:nth-child(8)  { animation-delay: 0.39s; }
.div-retro-rays line:nth-child(9)  { animation-delay: 0.44s; }
.div-retro-rays line:nth-child(10) { animation-delay: 0.48s; }
.div-retro-rays line:nth-child(11) { animation-delay: 0.53s; }
.div-retro-rays line:nth-child(12) { animation-delay: 0.57s; }
.div-retro-rays line:nth-child(13) { animation-delay: 0.62s; }
.div-retro-rays line:nth-child(14) { animation-delay: 0.66s; }
.div-retro-rays line:nth-child(15) { animation-delay: 0.71s; }
.div-retro-rays line:nth-child(16) { animation-delay: 0.75s; }
.div-retro-circ {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-rt-dot 0.4s cubic-bezier(.34,1.56,.64,1) 0.85s both;
}
.div-retro-fl,
.div-retro-fr {
  stroke-dasharray: 221;
  stroke-dashoffset: 221;
  animation: div-rt-draw 0.72s cubic-bezier(.16,1,.3,1) 0.98s both;
}
.div-retro-fr { animation-delay: 1.02s; }
/* v2 — slamming two-tone diner rule */
.div-retro-v2 {
  margin: 32px 0;
  overflow: hidden;
}
.div-retro-t {
  display: block;
  height: 5px;
  background: #d4601a;
  animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-retro-b {
  display: block;
  height: 1px;
  margin-top: 3px;
  background: #e0c87a;
  opacity: 0.45;
  animation: div-rt-slam 0.5s cubic-bezier(.18,0,.04,1) 0.28s both;
}
/* v3 — perforated ticket-stub edge */
.div-retro-v3 {
  height: 4px;
  margin: 32px 0;
  background: radial-gradient(circle, #d4601a 2px, transparent 2px);
  background-size: 14.875px 4px;
  background-repeat: repeat-x;
  background-position: center;
  animation: div-rt-fade 0.6s ease 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-retro-rays line, .div-retro-fl, .div-retro-fr { animation: none; stroke-dashoffset: 0; }
  .div-retro-circ, .div-retro-t, .div-retro-b, .div-retro-v3 { animation: none; }
}