<div class="div-brutalist-surface">
  <p class="div-brutalist-text">CONTEMPORARY ART FOUNDATION — ANNUAL REPORT 2024. Total acquisitions: 847. Public programs attended: 12,400.</p>
  <div class="div-brutalist-v1" role="separator"></div>
  <p class="div-brutalist-text">The question of what constitutes public space has never been more contested — streets, plazas, parks, all subject to restriction.</p>
  <div class="div-brutalist-v2" role="separator"></div>
  <p class="div-brutalist-text">Architecture is political. Every building encodes a value system — a vision of who belongs and who does not.</p>
  <div class="div-brutalist-v3" role="separator">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <p class="div-brutalist-text">WE BUILD. WE DEMOLISH. WE BUILD AGAIN. The city is its own argument — perpetually unresolved.</p>
</div>

@keyframes div-bru-slam { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes div-bru-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes div-bru-pop  { 0% { transform: scaleY(0); opacity: 0; } 65% { transform: scaleY(1.15); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.div-brutalist-surface {
  background: #ffffff;
  padding: 36px 40px;
  border-radius: 12px;
}
.div-brutalist-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.78;
  color: #111111;
  margin: 0;
}
/* v1 — solid slab slams in */
.div-brutalist-v1 {
  position: relative;
  height: 18px;
  margin: 32px 0;
  background: #111111;
  animation: div-bru-slam 0.52s cubic-bezier(.18,0,.04,1) 0.1s both;
}
.div-brutalist-v1::after {
  content: '///';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 5px;
  color: #ffffff;
}
/* v2 — diagonal hatch wipes in */
.div-brutalist-v2 {
  position: relative;
  height: 22px;
  margin: 32px 0;
  animation: div-bru-wipe 0.72s cubic-bezier(.16,1,.3,1) 0.22s both;
}
.div-brutalist-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -60deg,
    #111111 0, #111111 3px,
    transparent 3px, transparent 11px
  );
}
.div-brutalist-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #ffffff 0, transparent 40px,
    transparent calc(100% - 40px), #ffffff 100%
  );
}
/* v3 — color blocks pop up in sequence */
.div-brutalist-v3 {
  display: flex;
  gap: 2px;
  height: 10px;
  margin: 32px 0;
}
.div-brutalist-v3 span {
  transform-origin: bottom;
  animation: div-bru-pop 0.42s cubic-bezier(.34,1.56,.64,1) both;
}
.div-brutalist-v3 span:nth-child(1) { flex: 4; background: #111111; animation-delay: 0.26s; }
.div-brutalist-v3 span:nth-child(2) { flex: 1; background: #e6351f; animation-delay: 0.36s; }
.div-brutalist-v3 span:nth-child(3) { flex: 2; background: #111111; animation-delay: 0.42s; }
.div-brutalist-v3 span:nth-child(4) { flex: 1; background: #f2c12e; animation-delay: 0.48s; }
.div-brutalist-v3 span:nth-child(5) { flex: 4; background: #111111; animation-delay: 0.53s; }
@media (prefers-reduced-motion: reduce) {
  .div-brutalist-v1, .div-brutalist-v2, .div-brutalist-v3 span { animation: none; }
}