<div class="div-playful-surface">
  <p class="div-playful-text">The classroom hamster had escaped again — third time this term — and the search had become, for the children, the most educational event of the week.</p>
  <div class="div-playful-v1" role="separator">
    <svg viewBox="0 0 476 22" fill="none" aria-hidden="true">
      <path class="div-playful-squiggle" d="M0 11 Q24 -3 48 11 Q72 25 96 11 Q120 -3 144 11 Q168 25 192 11 Q216 -3 240 11 Q264 25 288 11 Q312 -3 336 11 Q360 25 384 11 Q408 -3 432 11 Q456 25 476 11" stroke="#ff7a3d" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
  </div>
  <p class="div-playful-text">Every desk had been lifted, every backpack unzipped, and a map of the room drawn on the whiteboard with a hopeful X marked near the radiator.</p>
  <div class="div-playful-v2" role="separator">
    <span class="div-playful-shapes"><i class="div-playful-c"></i><i class="div-playful-t"></i><i class="div-playful-s"></i><i class="div-playful-t"></i><i class="div-playful-c"></i></span>
  </div>
  <p class="div-playful-text">He was found, eventually, asleep inside a shoebox lined with cotton wool — a habitat, the children insisted, that he had clearly chosen on purpose.</p>
  <div class="div-playful-v3" role="separator"><span class="div-playful-scissors">✂</span></div>
  <p class="div-playful-text">A certificate was drawn up, decorated with stickers, and taped above his cage: Most Adventurous Class Pet, awarded by unanimous and very loud vote.</p>
</div>

@keyframes div-play-draw  { to { stroke-dashoffset: 0; } }
@keyframes div-play-pop   { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes div-play-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes div-play-slide { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.div-playful-surface {
  background: #fff4dc;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-playful-text {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #4a3a22;
  margin: 0;
}
/* v1 — bouncing crayon squiggle */
.div-playful-v1 { margin: 30px 0; }
.div-playful-v1 svg { display: block; width: 100%; height: 22px; overflow: visible; }
.div-playful-squiggle {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: div-play-draw 1.1s cubic-bezier(.16,1,.3,1) both;
}
/* v2 — row of popping shapes */
.div-playful-v2 {
  display: flex;
  align-items: center;
  margin: 30px 0;
}
.div-playful-v2::before,
.div-playful-v2::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: #ffd089;
  animation: div-play-grow 0.6s cubic-bezier(.16,1,.3,1) 0.4s both;
}
.div-playful-v2::before { transform-origin: right; }
.div-playful-v2::after  { transform-origin: left; animation-delay: 0.45s; }
.div-playful-shapes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.div-playful-shapes i {
  display: block;
  animation: div-play-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-playful-c { width: 11px; height: 11px; border-radius: 50%; background: #ff7a3d; animation-delay: 0.1s; }
.div-playful-t { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #3db4c4; animation-delay: 0.2s; }
.div-playful-s { width: 12px; height: 12px; background: #ffc23d; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation-delay: 0.3s; }
.div-playful-shapes i:nth-child(4) { animation-delay: 0.4s; }
.div-playful-shapes i:nth-child(5) { animation-delay: 0.5s; }
/* v3 — dashed cut-here line with scissors */
.div-playful-v3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0;
}
.div-playful-v3::before,
.div-playful-v3::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(to right, #c4906a 0 7px, transparent 7px 13px);
  animation: div-play-grow 0.7s cubic-bezier(.16,1,.3,1) 0.2s both;
}
.div-playful-v3::before { transform-origin: right; }
.div-playful-v3::after  { transform-origin: left; animation-delay: 0.24s; }
.div-playful-scissors {
  flex-shrink: 0;
  font-size: 16px;
  color: #c4906a;
  animation: div-play-slide 0.5s cubic-bezier(.34,1.56,.64,1) 0.55s both;
}
@media (prefers-reduced-motion: reduce) {
  .div-playful-squiggle { animation: none; stroke-dashoffset: 0; }
  .div-playful-v2::before, .div-playful-v2::after, .div-playful-shapes i,
  .div-playful-v3::before, .div-playful-v3::after, .div-playful-scissors { animation: none; }
}