/* Section 1, "Looks fine from here": the hero's last house shot carries on; time passes over it while one light blinks.
   The section starts one screen early (it overlaps the hero's last screen), so its stage sits exactly over the hero's. */
.px { position: relative; z-index: 5; height: var(--px-len, 526vh); margin-top: calc(-1 * max(100svh, 540px)); }
.px__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; background: transparent; pointer-events: none; }
.px__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
/* while the house fades over from the hero, the hero's stage waits in place underneath */
.hx__stage.is-held { position: fixed; top: 0; left: 0; right: 0; }

/* a soft dark band at the top keeps the words readable over a bright morning sky */
.px__scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(8, 14, 26, 0.22) 0%, rgba(8, 14, 26, 0.08) 30%, rgba(8, 14, 26, 0) 46%); }

/* the fault light on the inverter: small, orange-red, blinking the whole time */
.px-led { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; opacity: 0;
  background: #ff4a1f; box-shadow: 0 0 4px 1px rgba(255, 74, 31, 0.9), 0 0 calc(10px + 14px * var(--dark, 0)) calc(2px + 4px * var(--dark, 0)) rgba(255, 74, 31, calc(0.25 + 0.25 * var(--dark, 0))); }
.px-led i { position: absolute; inset: 0; border-radius: 50%; background: inherit; }
.px-led.is-on { animation: px-blink 1.6s steps(1) infinite; }
@keyframes px-blink { 0%, 55% { filter: none; } 56%, 100% { filter: brightness(0.25); box-shadow: none; } }

/* the month, alone and centred in the sky above the roof, where the eye already is */
.px-month { position: absolute; z-index: 3; left: 0; right: 0; top: 29%; margin: 0; text-align: center; opacity: 0; pointer-events: none; }
.px-month__now { position: relative; display: block; height: 1.2em; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; color: #f5f3ee;
  text-shadow: 0 2px 24px rgba(8, 10, 16, 0.45), 0 1px 3px rgba(8, 10, 16, 0.4); }
/* one month gives way to the next: a soft cross-fade with a small drift up, nothing clipped */
.px-month__now span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease, filter 0.7s ease; }
.px-month__now span.is-past { transform: translateY(-14px); opacity: 0; filter: blur(4px); }
.px-month__now span.is-next { transform: translateY(14px); opacity: 0; filter: blur(4px); }

.px__title span { display: block; }
/* the words: the same block and size as the hero's headline, in the sky above the house */
.px__copy { position: absolute; z-index: 3; left: 50%; top: clamp(96px, 13vh, 150px); transform: translateX(-50%); width: min(58rem, calc(100% - 2 * var(--edge))); text-align: center; opacity: 0; }
.px__title { margin: 0; font-weight: 400; font-size: clamp(2.4rem, 4.85vw, 4.7rem); line-height: 0.98; letter-spacing: -0.038em; text-wrap: balance;
  text-shadow: 0 2px 28px rgba(8, 10, 16, 0.38), 0 1px 3px rgba(8, 10, 16, 0.3); }
.px__sub { margin: 20px auto 0; max-width: 46rem; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: rgba(245, 243, 238, 0.9); text-wrap: balance;
  text-shadow: 0 1px 12px rgba(8, 12, 22, 0.7), 0 1px 2px rgba(8, 12, 22, 0.6); }

/* under the headline, once it has rolled out: what is really going on, one line after another (the loss colour) */
.px-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; margin: 26px 0 0; padding: 0; list-style: none;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; color: rgba(245, 243, 238, 0.95); text-shadow: 0 1px 12px rgba(8, 12, 22, 0.7), 0 1px 2px rgba(8, 12, 22, 0.6); }
.px-status li { display: inline-flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.px-status i { width: 7px; height: 7px; border-radius: 50%; background: #ff4a1f; box-shadow: 0 0 8px rgba(255, 74, 31, 0.8); }
.is-told .px-status li { opacity: 1; transform: none; }
.is-told .px-status li:nth-child(2) { transition-delay: 0.45s; }
.is-told .px-status li:nth-child(3) { transition-delay: 0.9s; }

@media (max-width: 820px) {
  .px__copy { top: max(84px, 11svh); width: calc(100% - 2 * var(--edge)); }
  .px__title { font-size: clamp(2.2rem, 9.6vw, 3.4rem); }
  .px__sub { font-size: 15px; margin-top: 14px; }
  .px__scrim { background: linear-gradient(180deg, rgba(8, 14, 26, 0.55) 0%, rgba(8, 14, 26, 0.25) 36%, rgba(8, 14, 26, 0) 56%); }
}

/* reduced motion: one still screen, no overlap with the hero, the light simply on */
.is-still .px { height: auto; margin-top: 0; }
.is-still .px__stage { position: relative; }
.is-still .px-led.is-on { animation: none; }

/* "but…" comes after the headline: the word drifts in, then its three dots arrive one by one, then the red lines */
.px-but { font-style: normal; display: inline-block; opacity: 0; transform: translateX(-10px); filter: blur(4px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease; }
.px-but i { font-style: normal; font-weight: 600; display: inline-block; margin-left: 0.07em; vertical-align: baseline; opacity: 0; transition: opacity 0.25s ease; } /* the dots: a little heavier and spaced, so they read at headline size */
.is-told .px-but { opacity: 1; transform: none; filter: none; transition-delay: 0.15s; }
.is-told .px-but i:nth-child(1) { opacity: 1; transition-delay: 0.75s; }
.is-told .px-but i:nth-child(2) { opacity: 1; transition-delay: 1.05s; }
.is-told .px-but i:nth-child(3) { opacity: 1; transition-delay: 1.35s; }
.is-told .px-status li:nth-child(1) { transition-delay: 1.9s; }
.is-told .px-status li:nth-child(2) { transition-delay: 2.35s; }
.is-told .px-status li:nth-child(3) { transition-delay: 2.8s; }
@media (prefers-reduced-motion: reduce) { .px-but, .px-but i { transition: none; transform: none; filter: none; } }
@media (max-width: 819.98px) { .px__copy { top: var(--head-m); } .px-month__now span { transition-duration: 0.55s, 0.45s, 0.45s; } }