/* ==========================================================================
   footer.css — the rocket footer, shared by every page.
   The animation is a Lottie (assets/lottie/footer-rocket.json) built from the
   Figma Motion timeline.
   ========================================================================== */

.site-footer { margin-top: var(--section-gap); padding-bottom: var(--section-gap); }
.site-footer .site-bar { margin-top: var(--section-gap); }

/* The scene is drawn on a 960 x 648 stage. The stage is a box with that
   aspect ratio, and the poster and the Lottie are both SVGs that stretch to
   fill it, so the picture scales with the card using nothing but percentages.
   (An earlier version scaled a fixed-size stage with tan(atan2()) maths, which
   some browsers refuse; when they did the whole card collapsed.)
   The text is real text laid over the stage, so it follows the type scale
   instead of shrinking with the picture. Stage and text share one grid cell;
   if the text needs more height than the stage, the second row grows and
   carries the cloud colour on down. */
.footer-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  overflow: hidden;
  overflow: clip;
  border-radius: clamp(24px, 4.2vw, 40px);
}
.footer-scene::after {
  content: "";
  grid-area: 2 / 1;
  background: #d5efc4;
}
.footer-scene__stage {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 648;
  /* sky, then the cloud colour along the bottom edge (600 to 646 of 648) */
  background:
    linear-gradient(to bottom, rgba(213, 239, 196, 0) 92.6%, #d5efc4 99.7%),
    linear-gradient(to bottom, #f3fcea, rgba(243, 252, 234, 0));
}

/* The stage holds a still picture of the scene. js/parallax.js swaps in the
   Lottie animation once the player has loaded; if it never does, or the
   visitor prefers reduced motion, the still stays. */
.footer-scene__poster,
.footer-scene__stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.footer-scene__stage.is-playing .footer-scene__poster { visibility: hidden; }

.footer-scene__text {
  grid-area: 1 / 1 / 3 / 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* the headline starts 425px down the 960px-wide stage; a percentage padding
     is measured against the card's width, so it scales with the picture */
  padding: 44.27% var(--gutter) clamp(28px, 5.4vw, 52px);
  color: #366345;
  text-align: center;
}
.footer-scene__list {
  max-width: 642px;
  font-family: var(--font-accent);
  font-weight: 400;
  white-space: pre-wrap;
}

@media (max-width: 719px) {
  /* Phones: zoom in on the rocket (600 of the 960 design pixels are visible),
     so the stage is 160% of the card and centred. */
  .footer-scene__stage { width: 160%; margin-left: -30%; }
  .footer-scene__text { padding-top: 70.83%; }
}