/* Additions to the mirrored Webflow stylesheet. The captured CSS stays untouched. */

/* Overscroll and any gap above the hero show black, not the Webflow body white. */
html {
  background-color: #000;
}

/* The two intro blocks (end of hero, top of timeline) share one measure:
   paragraphs wrap inside 590px; on desktop each heading sits on one line. */
.hero-copy--tldr .heading-2,
.section-timeline-heading .heading-2 {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  .hero-copy--tldr .timeline-main_heading-wrapper,
  .section-timeline-heading .timeline-main_heading-wrapper {
    max-width: 900px;
  }

  .hero-copy--tldr .heading-2,
  .section-timeline-heading .heading-2 {
    white-space: nowrap;
  }
}

.hero-copy--tldr .paragraph-large,
.section-timeline-heading .paragraph-large {
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
}

/* The sections between the two blob videos sit on the same pure black as the footage,
   so hero -> tl;dr -> timeline -> avatar -> footer reads as one continuous ground. */
.section-timeline-heading,
.section-timeline,
.section-timeline-cta {
  background-color: #000;
}

.overlay-fade-top {
  background-image: linear-gradient(#000, rgba(0, 0, 0, 0));
}

.overlay-fade-bottom {
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.timeline_circle {
  box-shadow: 0 0 0 8px #000;
}

/* The CTA button keeps the footer's white treatment (the original relied on a spacing
   modifier class for it), so it reads on the pure-black ground. */
.section-timeline-cta .button-icon-small {
  background-color: #fff;
  border-color: #fff;
}

/* Full-width avatar section between the timeline and the footer.
   Sits on the site's dark ground; layers: text, .cta_avatar-wrap (figure + live rig). */
.section-timeline-cta {
  background-image: none;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}


.section-timeline-cta .container {
  z-index: 1;
  position: relative;
}

.section-timeline-cta .padding-vertical-footer {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.section-timeline-cta .cta_text-wrapper {
  margin-bottom: 24px;
}

.section-timeline-cta .timeline_date-text {
  position: static;
}

.cta_avatar-wrap {
  z-index: 1;
  width: min(734px, 73vw);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  will-change: transform;
}

.cta_avatar {
  width: 100%;
  height: auto;
  display: block;
}

/* The live rig renders into a canvas laid over the still image (which stays as the fallback). */
.cta_canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .section-timeline-cta {
    padding-top: 96px;
  }
}

@media screen and (max-width: 767px) {
  .section-timeline-cta {
    padding-top: 80px;
  }

  .cta_avatar-wrap {
    width: 89vw;
  }
}

@media screen and (max-width: 479px) {
  .section-timeline-cta {
    background-size: cover;
    padding-top: 64px;
  }

  .cta_avatar-wrap {
    width: 100vw;
  }
}

/* Full-screen hero. The stage pins for the length of .hero-scroll while the dense
   soft-body field (footer asset) loosens, lifts and dissolves into the sparse
   emitter field (original hero asset). Progress is driven from assets/site.js. */
.section-hero.hero-scroll {
  height: 380vh;
  height: 380svh;
  background-color: #000;
}

.hero-stage {
  height: 100vh;
  height: 100svh;
  align-items: center;
  justify-content: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.hero-layer {
  transform-origin: 50% 55%;
  will-change: transform, opacity;
  position: absolute;
  inset: 0;
}

.hero-layer .w-background-video {
  height: 100%;
}

.hero-layer--sparse {
  opacity: 0;
}

.hero-scrim {
  background-image: radial-gradient(ellipse 42% 38% at 50% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-copy {
  z-index: 2;
  will-change: transform;
  position: relative;
}

/* tl;dr copy lives in the pinned stage and fades in once the fields have handed off. */
.hero-copy--tldr {
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  padding-left: 5vw;
  padding-right: 5vw;
}


/* The rendered sphere field sits over the Emitter clip; its background goes
   transparent as the clip comes up, so the last spheres float over live video. */
.hero-field {
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  position: absolute;
  inset: 0;
}

.hero-scrim {
  z-index: 1;
}

/* Bottom of the stage dissolves into the page's black as the pin ends, so the
   Emitter clip is never cut by a hard edge when the stage scrolls away; the last
   spheres rise out of darkness instead. */
.hero-fade {
  z-index: 1;
  height: 40vh;
  height: 40svh;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .08) 18%, rgba(0, 0, 0, .3) 38%, rgba(0, 0, 0, .7) 62%, #000);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-scroll--static .hero-fade {
  opacity: 1;
}

/* Closing scene. The last screen of the timeline fades to black under a fixed
   veil; the avatar section then pins on black and staggers in the line, the
   button and the avatar, each on its own parallax rate. */
.cta-black {
  z-index: 40;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.section-timeline-cta.cta-scroll {
  padding-top: 0;
  overflow: hidden;
  display: block;
}

/* Flowing scene: black lead-in after the veil, then heading, paragraphs, button
   and avatar reveal as they enter, each on its own parallax rate. */
.cta-stage {
  background-color: #000;
  flex-direction: column;
  align-items: center;
  padding-top: 70vh;
  padding-top: 70svh;
  display: flex;
}

.cta-scroll .cta_text-wrapper {
  margin-bottom: 40px;
}

.cta_body-wrap {
  max-width: 590px;
  text-align: left;
  margin: 0 auto 40px;
}

.cta_body {
  color: #c9c9c9;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  font-size: 18px;
  line-height: 1.6;
}

.cta_body:last-child {
  margin-bottom: 0;
}

.cta-scroll--js .cta_text-wrapper .timeline_date-text,
.cta-scroll--js .cta_body,
.cta-scroll--js .cta_text-wrapper .button-wrapper,
.cta-scroll--js .cta_avatar-wrap {
  opacity: 0;
  will-change: opacity, transform;
}

.cta-scroll--static {
  height: auto;
}

.cta-scroll--static .cta-stage {
  padding-top: 120px;
}

/* The whole stage goes to black in the last stretch of the pin, so the hero
   ends on a black screen and the next scene opens from it. */
.hero-black {
  z-index: 3;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* "To consumer finance." pins on black: heading, then paragraph, fade in with
   scroll; the timeline follows once it unpins. */
.section-timeline-heading.intro-scroll {
  height: 220vh;
  height: 220svh;
  background-color: #000;
}

/* The stage is shorter than the viewport, so while the copy stays pinned the
   timeline scrolls up from the bottom into the space below it and comes to rest
   directly under the paragraph when the section unpins. */
.intro-stage {
  height: 62vh;
  height: 62svh;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 72px;
  box-sizing: border-box;
  display: flex;
  position: sticky;
  top: 0;
}

.intro-stage .padding-vertical-xlarge {
  padding-top: 0;
  padding-bottom: 0;
}


.intro-scroll--js .heading-2,
.intro-scroll--js .paragraph-large {
  opacity: 0;
  will-change: opacity, transform;
}

.intro-scroll--static {
  height: auto;
}

.intro-scroll--static .intro-stage {
  height: auto;
  position: static;
}

@media screen and (max-width: 767px) {
  .section-timeline-heading.intro-scroll {
    height: 200vh;
    height: 200svh;
  }
}

.hero-scroll--static .hero-layer--dense {
  display: none;
}

.hero-scroll--video .hero-field,
.hero-scroll--static .hero-field {
  display: none;
}

/* No scroll choreography: show the resolved (sparse) hero at one screen tall. */
.section-hero.hero-scroll--static {
  height: 100vh;
  height: 100svh;
}

.hero-scroll--static .hero-layer--dense {
  display: none;
}

.hero-scroll--static .hero-layer--sparse {
  opacity: 1;
}

.hero-scroll--static .hero-stage {
  flex-direction: column;
  gap: 48px;
}

.hero-scroll--static .hero-copy--tldr {
  opacity: 1;
  position: static;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .section-hero.hero-scroll {
    height: 330vh;
    height: 330svh;
  }
}