/* Brilliant City — project layer on top of Noir Vertical.
   The crystalline canopy over the retail podium becomes the page's only ornament. */

/* triangulated lattice (the canopy roof), drawn as a faint field behind the prologue */
.nv-motif--canopy {
  position: absolute;
  top: 0;
  right: 0;
  width: min(58vw, 980px);
  height: 100%;
  pointer-events: none;
  opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23e3b877' stroke-opacity='.22' stroke-width='.8'%3E%3Cpath d='M0 0h120M0 52h120M0 104h120M0 0l60 104M60 0l60 104M60 0L0 104M120 0L60 104M-60 0l60 104M180 0l-60 104'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 104px;
  -webkit-mask-image: radial-gradient(60% 55% at 70% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 55% at 70% 45%, #000 0%, transparent 72%);
}
@media (max-width: 899px) {
  .nv-motif--canopy { width: 100%; height: 70%; top: auto; bottom: 0; opacity: .55; }
}

/* a lit edge running beside the vertical name, like light catching a facade corner */
.nv--motif-canopy .nv-hero__title::after {
  content: '';
  position: absolute;
  top: 10svh;
  bottom: 10svh;
  left: calc(100% + .14em);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--pdx-accent) 30%, var(--pdx-accent) 70%, transparent);
  opacity: .7;
  transform-origin: bottom;
  animation: nv-draw-up 2.2s var(--pdx-ease) 1s both;
}
@keyframes nv-draw-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* the four glass icons read as lit objects on the night ground */
.nv--motif-canopy .nv-facet__art img { filter: drop-shadow(0 18px 40px rgba(76, 205, 196, .18)); }

/* the map caption marks the project with the canopy's diamond */
.nv--motif-canopy .nv-map__caption span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.nv--motif-canopy .nv-map__caption span:first-child::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--pdx-accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(227, 184, 119, .12);
}