/* Brilliant Centre — project layer on top of Noir Vertical.
   The avenue's one-point perspective is the page's only ornament. */

/* converging lines of the avenue, drawn faintly behind the prologue */
.nv-motif--avenue {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62vw, 1040px);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23cf9f6c' stroke-opacity='.26' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpath d='M120 300L1000 0M120 300L1000 120M120 300L1000 220M120 300L1000 300M120 300L1000 380M120 300L1000 480M120 300L1000 600'/%3E%3Cpath d='M300 238v124M480 176v248M660 114v372M840 52v496' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
  opacity: .9;
}
@media (max-width: 899px) { .nv-motif--avenue { width: 100%; opacity: .45; } }

/* the vertical name catches the bronze of the fins */
.nv--motif-avenue .nv-hero__title::before {
  content: '';
  position: absolute;
  top: 12svh;
  bottom: 12svh;
  right: calc(100% + .16em);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--pdx-accent) 35%, var(--pdx-accent) 65%, transparent);
  opacity: .75;
  transform-origin: top;
  animation: bc2-draw 2.2s var(--pdx-ease) 1s both;
}
@keyframes bc2-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }