/* Permanent homepage animated skyline hero. */
.home-page .hero.home-skyline-hero {
  background: #fff;
  isolation: isolate;
}

.home-page .hero.home-skyline-hero .hero__inner
  :where(.hero__eyebrow, .hero__title, .hero__description, .hero__actions .btn, .hero__trust span, .hero__visual) {
  animation: none;
}

/* Armed only by JavaScript; each group waits until it is actually on screen. */
@keyframes home-skyline-content-enter {
  from { opacity: 0; transform: translate3d(var(--skyline-enter-x, 0px), var(--skyline-enter-y, 0px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero.home-skyline-hero .hero__inner
    .skyline-entrance-ready {
    animation: home-skyline-content-enter 1600ms
      var(--skyline-enter-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-play-state: paused;
  }

  .home-page .hero.home-skyline-hero .hero__inner
    .skyline-entrance-ready.skyline-entrance-visible {
    animation-play-state: running;
  }
}

.home-skyline-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  animation: home-skyline-visibility 14s linear infinite both;
}

/* Hide the entire decorative composite during the white rest state. */
.home-skyline-hero__background,
.home-skyline-hero__background *,
.home-skyline-hero__background::before,
.home-skyline-hero__background::after {
  border: 0;
  outline: 0;
  box-shadow: none;
}

@keyframes home-skyline-visibility {
  0%, 1%, 96%, 100% { opacity: 0; visibility: hidden; transform: none; }
  2%, 94% { opacity: 1; visibility: visible; transform: none; }
}

.home-skyline-hero__background::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("vorfin-hero-nyc-skyline.jpg") 70% center / cover no-repeat;
  filter: grayscale(0.85);
  opacity: 0.28;
}

.home-skyline-hero__background::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 94%) 28%, rgb(255 255 255 / 55%) 48%, rgb(255 255 255 / 20%) 68%, rgb(255 255 255 / 0%) 100%);
}

.home-skyline-hero__shutters {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 22% 28% 28% 22%;
  grid-template-rows: 32% 36% 32%;
  grid-template-areas: "a b c d" "a e f d" "g e f h";
}

.home-skyline-hero__shutters > span {
  /* Cover fractional grid boundaries without changing the grid geometry. */
  margin: -1px;
  background: #fff;
  transform-origin: right center;
  animation: home-skyline-shutter 14s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.home-skyline-hero__shutters > span:nth-child(1) { grid-area: a; }
.home-skyline-hero__shutters > span:nth-child(2) { grid-area: b; animation-delay: 1.1s; }
.home-skyline-hero__shutters > span:nth-child(3) { grid-area: c; animation-delay: 1.4s; transform-origin: left center; }
.home-skyline-hero__shutters > span:nth-child(4) { grid-area: d; animation-delay: 0.25s; transform-origin: left center; }
.home-skyline-hero__shutters > span:nth-child(5) { grid-area: e; animation-delay: 1.6s; }
.home-skyline-hero__shutters > span:nth-child(6) { grid-area: f; animation-delay: 1.8s; transform-origin: left center; }
.home-skyline-hero__shutters > span:nth-child(7) { grid-area: g; animation-delay: 0.5s; }
.home-skyline-hero__shutters > span:nth-child(8) { grid-area: h; animation-delay: 0.7s; transform-origin: left center; }

@keyframes home-skyline-shutter {
  0%, 10%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  35%, 53% {
    transform: scaleX(0);
    opacity: 0;
  }
  82% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-skyline-hero__background { display: none; animation: none; opacity: 0; visibility: hidden; }
  .home-skyline-hero__shutters > span { animation: none; }
}