.legacy-pillars section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.legacy-pillars section > span {
  position: relative;
  z-index: 2;
}

.pillar-drawing {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #e8e1d3;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  isolation: isolate;
}

.pillar-drawing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.2) 46%, transparent 64%);
  transform: translateX(-120%);
  animation: pillarLightSweep 8s cubic-bezier(.4,0,.2,1) infinite;
}

.pillar-drawing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
  transform: scale(1.025);
  animation: pillarDrawingDrift 11s ease-in-out infinite alternate;
}

.pillar-drawing i {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg,transparent,#d5353a 18%,#d5353a 82%,transparent);
  box-shadow: 0 0 12px rgba(213,53,58,.75);
  opacity: .75;
  animation: pillarScan 5.8s ease-in-out infinite;
}

.pillar-drawing figcaption {
  position: absolute;
  left: 12px;
  bottom: 11px;
  z-index: 4;
  padding: 7px 9px;
  background: rgba(8,10,11,.88);
  color: #fff;
  font: 700 10px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.legacy-pillars h3 {
  margin-top: 24px;
}

.legacy-pillars section:nth-child(2) .pillar-drawing::after,
.legacy-pillars section:nth-child(2) .pillar-drawing img { animation-delay: -2s; }
.legacy-pillars section:nth-child(3) .pillar-drawing::after,
.legacy-pillars section:nth-child(3) .pillar-drawing img { animation-delay: -4s; }
.legacy-pillars section:nth-child(4) .pillar-drawing::after,
.legacy-pillars section:nth-child(4) .pillar-drawing img { animation-delay: -6s; }

.legacy-pillars section:hover .pillar-drawing img,
.legacy-pillars section:focus-visible .pillar-drawing img {
  transform: scale(1.065);
  filter: saturate(1) contrast(1.08);
}

@keyframes pillarDrawingDrift {
  from { transform: scale(1.025) translate3d(-.6%,0,0); }
  to { transform: scale(1.065) translate3d(.7%,-.5%,0); }
}

@keyframes pillarLightSweep {
  0%, 68% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}

@keyframes pillarScan {
  0%, 100% { top: 12%; opacity: .2; }
  50% { top: 88%; opacity: .8; }
}

@media (max-width: 900px) {
  .legacy-pillars section { min-height: auto; }
  .pillar-drawing { max-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-drawing::after,
  .pillar-drawing img,
  .pillar-drawing i { animation: none; }
}