/* Crystal Avenue — project layer on top of Noir Vertical.
   The crystal cut drawn on the tower facade becomes a faceted lattice. */

.nv-motif--crystal {
  position: absolute;
  top: 0;
  right: 0;
  width: min(56vw, 940px);
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='160' viewBox='0 0 96 160'%3E%3Cg fill='none' stroke='%235fcfb3' stroke-opacity='.24' stroke-width='.8'%3E%3Cpath d='M48 0L96 40L48 160L0 40Z'/%3E%3Cpath d='M0 40h96M48 0v160M24 20l24 140M72 20L48 160'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 160px;
  -webkit-mask-image: radial-gradient(55% 60% at 72% 45%, #000, transparent 72%);
  mask-image: radial-gradient(55% 60% at 72% 45%, #000, transparent 72%);
}
@media (max-width: 899px) { .nv-motif--crystal { width: 100%; height: 70%; top: auto; bottom: 0; opacity: .6; } }

/* a cut gem marks the meta line and the map caption */
.nv--motif-crystal .nv-hero__meta li + li::before { width: 6px; height: 9px; transform: none; clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%); }
.nv--motif-crystal .nv-map__caption span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.nv--motif-crystal .nv-map__caption span:first-child::before {
  content: '';
  width: 8px;
  height: 12px;
  background: var(--pdx-accent);
  clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
}
/* the teal glass icons glow on the night ground */
.nv--motif-crystal .nv-facet__art img { filter: drop-shadow(0 18px 40px rgba(95, 207, 179, .2)); }