<div class="div-festive-surface">
  <p class="div-festive-text">The hall had been decorated since dawn — every banister wound with greenery, every windowsill crowded with candles waiting, unlit, for the evening.</p>
  <div class="div-festive-v1" role="separator">
    <span class="div-festive-wire"></span>
    <span class="div-festive-lights"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
  </div>
  <p class="div-festive-text">By six o'clock the first guests had arrived, stamping snow from their boots, and the quiet house became, all at once, impossibly loud and warm.</p>
  <div class="div-festive-v2" role="separator"></div>
  <p class="div-festive-text">There was a long table, and then a longer one added end to end, and still the children ate standing up because that, apparently, was more fun.</p>
  <div class="div-festive-v3" role="separator">
    <svg viewBox="0 0 476 26" fill="none" aria-hidden="true">
      <path class="div-festive-swag" d="M0 3 Q119 34 238 3 Q357 34 476 3" stroke="#2f9e5e" stroke-width="3" stroke-linecap="round"/>
      <circle class="div-festive-bauble div-festive-b1" cx="119" cy="19" r="4.5" fill="#e0455a"/>
      <circle class="div-festive-bauble div-festive-b2" cx="238" cy="22" r="5" fill="#e8b53d"/>
      <circle class="div-festive-bauble div-festive-b3" cx="357" cy="19" r="4.5" fill="#e0455a"/>
    </svg>
  </div>
  <p class="div-festive-text">When the candles were finally lit, someone turned off the lamps, and for a moment nobody spoke — the whole room held inside that small, gold light.</p>
</div>

@keyframes div-fes-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-fes-glow  { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } to { transform: scale(1); opacity: 1; } }
@keyframes div-fes-fall  { from { transform: translateY(-10px) rotate(0); opacity: 0; } to { transform: translateY(0) rotate(var(--r,0deg)); opacity: 1; } }
@keyframes div-fes-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-fes-drop  { from { transform: scale(0) translateY(-6px); } 60% { transform: scale(1.25) translateY(0); } to { transform: scale(1) translateY(0); } }
.div-festive-surface {
  background: #0f2418;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-festive-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.85;
  color: #b8c4b0;
  margin: 0;
}
/* v1 — string of fairy lights */
.div-festive-v1 {
  position: relative;
  height: 16px;
  margin: 32px 0;
}
.div-festive-wire {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: #3a5a44;
  transform-origin: left;
  animation: div-fes-grow 0.7s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-lights {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.div-festive-lights i {
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  margin-top: 4px;
  transform-origin: top;
  animation: div-fes-glow 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-lights i:nth-child(4n+1) { background: #e8b53d; box-shadow: 0 0 7px rgba(232,181,61,0.7); }
.div-festive-lights i:nth-child(4n+2) { background: #e0455a; box-shadow: 0 0 7px rgba(224,69,90,0.7); }
.div-festive-lights i:nth-child(4n+3) { background: #4fb8d4; box-shadow: 0 0 7px rgba(79,184,212,0.7); }
.div-festive-lights i:nth-child(4n)   { background: #5fc77a; box-shadow: 0 0 7px rgba(95,199,122,0.7); }
.div-festive-lights i:nth-child(1)  { animation-delay: 0.4s; }
.div-festive-lights i:nth-child(2)  { animation-delay: 0.46s; }
.div-festive-lights i:nth-child(3)  { animation-delay: 0.52s; }
.div-festive-lights i:nth-child(4)  { animation-delay: 0.58s; }
.div-festive-lights i:nth-child(5)  { animation-delay: 0.64s; }
.div-festive-lights i:nth-child(6)  { animation-delay: 0.70s; }
.div-festive-lights i:nth-child(7)  { animation-delay: 0.76s; }
.div-festive-lights i:nth-child(8)  { animation-delay: 0.82s; }
.div-festive-lights i:nth-child(9)  { animation-delay: 0.88s; }
.div-festive-lights i:nth-child(10) { animation-delay: 0.94s; }
.div-festive-lights i:nth-child(11) { animation-delay: 1.00s; }
.div-festive-lights i:nth-child(12) { animation-delay: 1.06s; }
/* v2 — confetti-scatter band */
.div-festive-v2 {
  height: 18px;
  margin: 32px 0;
  background:
    radial-gradient(circle, #e8b53d 1.5px, transparent 2px) 0 2px / 26px 18px,
    radial-gradient(circle, #e0455a 1.5px, transparent 2px) 13px 11px / 26px 18px,
    radial-gradient(circle, #4fb8d4 1.5px, transparent 2px) 7px 14px / 19px 18px,
    radial-gradient(circle, #5fc77a 1.5px, transparent 2px) 19px 4px / 23px 18px;
  background-repeat: repeat-x;
  transform-origin: center;
  animation: div-fes-grow 0.85s cubic-bezier(.16,1,.3,1) 0.1s both;
}
/* v3 — garland swag with hanging baubles */
.div-festive-v3 { margin: 32px 0; }
.div-festive-v3 svg { display: block; width: 100%; height: 26px; }
.div-festive-swag {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation: div-fes-draw 1s cubic-bezier(.16,1,.3,1) both;
}
.div-festive-bauble {
  transform-box: fill-box;
  transform-origin: center top;
  animation: div-fes-drop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.div-festive-b1 { animation-delay: 0.78s; }
.div-festive-b2 { animation-delay: 0.9s; }
.div-festive-b3 { animation-delay: 1.02s; }
@media (prefers-reduced-motion: reduce) {
  .div-festive-wire, .div-festive-lights i, .div-festive-v2 { animation: none; }
  .div-festive-swag { animation: none; stroke-dashoffset: 0; }
  .div-festive-bauble { animation: none; }
}