/* Turon — project layer on top of Noir Vertical.
   The grid of lit windows from the night renders; a few windows switch on and off. */

.nv-motif--windows {
  position: absolute;
  top: 0;
  right: 0;
  width: min(54vw, 900px);
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pdx-accent) 70%, transparent) 0 2px, transparent 2.5px),
    linear-gradient(color-mix(in srgb, var(--pdx-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pdx-ink) 7%, transparent) 1px, transparent 1px);
  background-size: 168px 120px, 28px 40px, 28px 40px;
  background-position: 14px 20px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(56% 60% at 70% 46%, #000, transparent 74%);
  mask-image: radial-gradient(56% 60% at 70% 46%, #000, transparent 74%);
  animation: turon-lights 7s steps(1) infinite;
}
@keyframes turon-lights {
  0% { background-position: 14px 20px, 0 0, 0 0; }
  33% { background-position: 70px 60px, 0 0, 0 0; }
  66% { background-position: 126px 100px, 0 0, 0 0; }
}
@media (max-width: 899px) { .nv-motif--windows { width: 100%; height: 70%; top: auto; bottom: 0; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .nv-motif--windows { animation: none; } }

/* the door seam keeps a thread of light after the doors have opened */
.nv--motif-windows .nv-hero[data-hero="doors"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pdx-accent) 60%, transparent) 50%, transparent);
  opacity: 0;
  animation: turon-seam 2.4s ease-out 1.6s forwards;
  pointer-events: none;
}
@keyframes turon-seam { 30% { opacity: .9; } to { opacity: .25; } }