<div class="div-deco-surface">
  <p class="div-deco-text">The Grand Palais reopened its gilded doors in the autumn of 1922, its iron-and-glass vault catching the afternoon light.</p>
  <div class="div-deco-v1" role="separator">
    <svg viewBox="0 0 476 24" fill="none" aria-hidden="true">
      <line class="div-deco-l div-deco-ll1" x1="198" y1="11" x2="0" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
      <line class="div-deco-l div-deco-ll2" x1="186" y1="15" x2="12" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
      <polygon class="div-deco-gem" points="238,3 251,12 238,21 225,12" stroke="#c9a84c" stroke-width="1.5" fill="#0d1018"/>
      <line class="div-deco-l div-deco-rl1" x1="278" y1="11" x2="476" y2="11" stroke="#c9a84c" stroke-width="1.5"/>
      <line class="div-deco-l div-deco-rl2" x1="290" y1="15" x2="464" y2="15" stroke="#c9a84c" stroke-width=".5" opacity=".42"/>
    </svg>
  </div>
  <p class="div-deco-text">She wore a dress the colour of champagne with a hem that ended precisely at the knee — scandalous only three years prior.</p>
  <div class="div-deco-v2" role="separator"></div>
  <p class="div-deco-text">The jazz arrived from New Orleans by way of Harlem, crossing the Atlantic in the trunks of musicians.</p>
  <div class="div-deco-v3" role="separator"><span class="div-deco-fan">▴▴▴</span></div>
  <p class="div-deco-text">Everything gleamed in those years — chrome fittings, lacquered surfaces, pomaded hair in the lamplight.</p>
</div>

@keyframes div-deco-draw { to { stroke-dashoffset: 0; } }
@keyframes div-deco-gem  { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes div-deco-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes div-deco-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-deco-fan  { from { transform: scale(0) rotate(-100deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes div-deco-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.div-deco-surface {
  background: #0d1018;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-deco-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.88;
  color: #a0988a;
  margin: 0;
}
/* v1 — gold lines draw toward a diamond */
.div-deco-v1 { margin: 32px 0; }
.div-deco-v1 svg { display: block; width: 100%; height: 24px; }
.div-deco-l { animation: div-deco-draw 0.88s cubic-bezier(.16,1,.3,1) both; }
.div-deco-ll1 { stroke-dasharray: 198; stroke-dashoffset: 198; }
.div-deco-ll2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.09s; }
.div-deco-rl1 { stroke-dasharray: 198; stroke-dashoffset: 198; animation-delay: 0.04s; }
.div-deco-rl2 { stroke-dasharray: 174; stroke-dashoffset: 174; animation-delay: 0.13s; }
.div-deco-gem {
  transform-box: fill-box;
  transform-origin: center;
  animation: div-deco-gem 0.52s cubic-bezier(.34,1.56,.64,1) 0.73s both;
}
/* v2 — micro-diamond band with a shimmer sweep */
.div-deco-v2 {
  position: relative;
  margin: 32px 0;
  animation: div-deco-fade 0.55s ease 0.18s both;
}
.div-deco-v2::before {
  content: '';
  display: block;
  height: 6px;
  border-top: 1px solid #c9a84c;
  border-bottom: 1px solid #c9a84c;
}
.div-deco-v2::after {
  content: '◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: 6px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, rgba(201,168,76,.1) 0%, rgba(201,168,76,.9) 42%, rgba(255,220,140,1) 50%, rgba(201,168,76,.9) 58%, rgba(201,168,76,.1) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: div-deco-shimmer 2.8s linear infinite;
}
/* v3 — chevron fan springs in between growing lines */
.div-deco-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0;
}
.div-deco-v3::before,
.div-deco-v3::after {
  content: '';
  flex: 1;
  height: 1px;
  animation: div-deco-grow 0.7s cubic-bezier(.16,1,.3,1) 0.48s both;
}
.div-deco-v3::before { background: linear-gradient(to right, transparent, #c9a84c); transform-origin: right; }
.div-deco-v3::after  { background: linear-gradient(to left, transparent, #c9a84c); transform-origin: left; animation-delay: 0.52s; }
.div-deco-fan {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 2px;
  color: #c9a84c;
  animation: div-deco-fan 0.6s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-deco-l { animation: none; stroke-dashoffset: 0; }
  .div-deco-gem, .div-deco-v2, .div-deco-v3::before, .div-deco-v3::after, .div-deco-fan { animation: none; }
  .div-deco-v2::after { animation: none; }
}