<div class="div-fantasy-surface">
  <p class="div-fantasy-text">Before the age of reason came the age of inscription — when words were not merely spoken but carved into stone and oak.</p>
  <div class="div-fantasy-v1" role="separator">
    <span class="div-fantasy-runes">
      <span>ᚠ</span><span>ᚨ</span><span>ᚷ</span><span>ᛁ</span><span>ᛟ</span>
      <span class="div-fantasy-rsep">◆</span>
      <span>ᛗ</span><span>ᚱ</span><span>ᛞ</span><span>ᛚ</span><span>ᚾ</span>
    </span>
    <span class="div-fantasy-bar"></span>
  </div>
  <p class="div-fantasy-text">The tome had been sealed with a wax impression bearing an insignia no living archivist could identify.</p>
  <div class="div-fantasy-v2" role="separator">
    <svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
      <line class="div-fantasy-l div-fantasy-l1" x1="214" y1="12" x2="0" y2="12" stroke="#c4841c" stroke-width="1"/>
      <line class="div-fantasy-l div-fantasy-l2" x1="200" y1="8" x2="14" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
      <polygon class="div-fantasy-sigil" points="238,4 248,12 238,20 228,12" stroke="#c4841c" stroke-width="1.5" fill="#17140e"/>
      <line class="div-fantasy-l div-fantasy-r1" x1="262" y1="12" x2="476" y2="12" stroke="#c4841c" stroke-width="1"/>
      <line class="div-fantasy-l div-fantasy-r2" x1="276" y1="8" x2="462" y2="8" stroke="#c4841c" stroke-width=".5" opacity=".35"/>
    </svg>
  </div>
  <p class="div-fantasy-text">Every ward the elder cast required a physical anchor — a mark burned into wood, pressed into clay, scratched into the threshold.</p>
  <div class="div-fantasy-v3" role="separator">
    <span class="div-fantasy-chain">⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓⛓</span>
  </div>
  <p class="div-fantasy-text">The knight had ridden three days without water before arriving at the garrison well — only to find it sealed with a sigil.</p>
</div>

@keyframes div-fan-glow  { 0% { opacity: 0; } 35% { opacity: 1; color: #ffe07a; } 100% { opacity: 1; color: #c4841c; } }
@keyframes div-fan-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fan-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-fan-sigil { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes div-fan-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
.div-fantasy-surface {
  background: #17140e;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-fantasy-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #c9ba9a;
  margin: 0;
}
/* v1 — runes glow into life */
.div-fantasy-v1 { margin: 32px 0; }
.div-fantasy-runes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
}
.div-fantasy-runes > span {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #c4841c;
  animation: div-fan-glow 0.5s ease both;
}
.div-fantasy-runes > span:nth-child(1) { animation-delay: 0.05s; }
.div-fantasy-runes > span:nth-child(2) { animation-delay: 0.13s; }
.div-fantasy-runes > span:nth-child(3) { animation-delay: 0.21s; }
.div-fantasy-runes > span:nth-child(4) { animation-delay: 0.29s; }
.div-fantasy-runes > span:nth-child(5) { animation-delay: 0.37s; }
.div-fantasy-runes > span:nth-child(6) { animation-delay: 0.45s; font-size: 7px; }
.div-fantasy-runes > span:nth-child(7) { animation-delay: 0.53s; }
.div-fantasy-runes > span:nth-child(8) { animation-delay: 0.61s; }
.div-fantasy-runes > span:nth-child(9) { animation-delay: 0.69s; }
.div-fantasy-runes > span:nth-child(10) { animation-delay: 0.77s; }
.div-fantasy-runes > span:nth-child(11) { animation-delay: 0.85s; }
.div-fantasy-bar {
  display: block;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, #c4841c 30%, #c4841c 70%, transparent);
  transform-origin: center;
  animation: div-fan-grow 0.8s cubic-bezier(.16,1,.3,1) 0.9s both;
}
/* v2 — gold lines draw toward a sigil */
.div-fantasy-v2 { margin: 32px 0; }
.div-fantasy-v2 svg { display: block; width: 100%; height: 24px; }
.div-fantasy-l { animation: div-fan-draw 0.9s cubic-bezier(.16,1,.3,1) both; }
.div-fantasy-l1 { stroke-dasharray: 214; stroke-dashoffset: 214; }
.div-fantasy-l2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.09s; }
.div-fantasy-r1 { stroke-dasharray: 214; stroke-dashoffset: 214; animation-delay: 0.04s; }
.div-fantasy-r2 { stroke-dasharray: 186; stroke-dashoffset: 186; animation-delay: 0.13s; }
.div-fantasy-sigil {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-fan-sigil 0.52s cubic-bezier(.34,1.56,.64,1) 0.75s both;
}
/* v3 — wiping chain rule */
.div-fantasy-v3 {
  margin: 32px 0;
  overflow: hidden;
}
.div-fantasy-chain {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #c4841c;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  animation: div-fan-wipe 0.85s cubic-bezier(.16,1,.3,1) 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-fantasy-runes > span { animation: none; opacity: 1; }
  .div-fantasy-bar, .div-fantasy-sigil, .div-fantasy-chain { animation: none; }
  .div-fantasy-l { animation: none; stroke-dashoffset: 0; }
}