.visual-impasse { background: #1a2927; isolation: isolate; }
.impasse-ground {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: perspective(500px) rotateX(52deg) rotateZ(-15deg);
  transform-origin: center;
}
.impasse-ground::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 0;
  background:
    linear-gradient(35deg, transparent 48.8%, rgba(169, 178, 173, .3) 49.5% 50.5%, transparent 51.2%),
    linear-gradient(-35deg, transparent 48.8%, rgba(169, 178, 173, .3) 49.5% 50.5%, transparent 51.2%),
    repeating-conic-gradient(from 45deg, rgba(142, 151, 147, .3) 0 25%, rgba(67, 78, 74, .24) 0 50%);
  background-size: 88px 88px;
  opacity: .8;
}
.visual-grid { position: absolute; inset: -25%; z-index: 1; opacity: .45; background: repeating-linear-gradient(35deg, transparent 0 35px, #8ba49b 36px 37px, transparent 38px 72px), repeating-linear-gradient(-35deg, transparent 0 35px, #5d7770 36px 37px, transparent 38px 72px); }
.pixel-core { position: absolute; z-index: 3; width: 130px; height: 130px; background: var(--coral); transform: rotate(45deg); top: 37%; left: 41%; box-shadow: 20px 20px 0 #ebad70, -20px -20px 0 #8db7a7; animation: floatCore 5s ease-in-out infinite; }
@keyframes floatCore { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(48deg) translateY(-18px); } }

.lily-pad {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a9e6f, #3d7a52 55%, #2d5e3d);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 -2px 6px rgba(0, 0, 0, .15);
  z-index: 2;
  transform: scaleY(.92);
  transform-origin: center;
  pointer-events: none;
}

.lily-pad::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 22px solid #1a2927;
  transform: translate(-50%, -100%) rotate(25deg);
  transform-origin: bottom center;
}

.lily-pad::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 55%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.12), transparent 60%);
}

.lp-1 { width: 52px; height: 52px; bottom: 18%; left: 12%; animation: lilyFloat 6s ease-in-out infinite; }
.lp-2 { width: 38px; height: 38px; bottom: 28%; right: 15%; animation: lilyFloat 7s ease-in-out 1s infinite; }
.lp-3 { width: 45px; height: 45px; top: 22%; left: 28%; animation: lilyFloat 5.5s ease-in-out .5s infinite; }
.lp-4 { width: 30px; height: 30px; top: 35%; right: 22%; animation: lilyFloat 6.5s ease-in-out 1.5s infinite; opacity: .7; }
.lp-5 { width: 40px; height: 40px; bottom: 38%; left: 45%; animation: lilyFloat 5s ease-in-out .8s infinite; opacity: .6; }

.visual-impasse .visual-caption {
  z-index: 4;
}

@keyframes lilyFloat {
  0%, 100% { transform: scaleY(.92) translateY(0); }
  50% { transform: scaleY(.92) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .lily-pad { animation: none; }
}