/* Eco Tower — project layer on top of Noir Vertical.
   Ripples of the lake and fountains, slowly widening behind the prologue. */

.nv-motif--rings {
  position: absolute;
  right: max(-12vw, -200px);
  top: 50%;
  width: min(70vw, 1100px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, color-mix(in srgb, var(--pdx-accent) 26%, transparent) 46px 47px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: eco-ripple 9s linear infinite;
}
@keyframes eco-ripple { from { background-size: 100% 100%; } to { background-size: 113.6% 113.6%; } }
@media (max-width: 899px) { .nv-motif--rings { width: 130vw; right: -50vw; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .nv-motif--rings { animation: none; } }

/* the tower column carries a copper beacon at its crown */
.nv--motif-rings .nv-hero[data-hero="column"] .nv-hero__media::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -1px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--pdx-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--pdx-accent) 22%, transparent), 0 0 34px 6px var(--pdx-glow);
  animation: eco-beacon 2.8s ease-in-out infinite;
}
@keyframes eco-beacon { 50% { box-shadow: 0 0 0 12px transparent, 0 0 34px 6px var(--pdx-glow); } }