/* site-footer — not in the Figma file (no footer frame designed yet). This
   navy band IS the page footer: it's the same "two hands reaching" visual
   that used to live inside section-closing-cta as .closing-cta__hands, now
   promoted to a real <footer> so the legal/business requisites (required
   for a Ukrainian FOP storefront) live inside it instead of a separate
   plain block. .site-footer__links points at oferta.html/privacy.html —
   standalone pages styled via css/components/legal-page.css, built from
   the PDFs supplied for this ("Договір публічної оферти…", "Політика
   конфіденційності…").

   No 100vw/left:50%/translateX(-50%) break-out hack needed here (unlike
   the old .closing-cta__hands, nested inside a padded/flex section) — as
   a top-level element this is already full width on its own. */

.site-footer {
  position: relative;
  background: var(--color-navy);
  /* padding-top reserves the same 130px .site-footer__hands used to take
     up in normal flow — it's position:absolute now (see below), so
     nothing else here would otherwise know to leave room for it. */
  padding: 130px 16px 64px;
  text-align: center;
}

/* Absolute + pulled up 90px + that much taller (still only 130px of it is
   the "normal" visible band, matched by .site-footer's own padding-top
   above) — NOT .site-footer__hand's own left/right edge escaping the
   viewport this time, that part is fine (see below) — this box existing
   at all, tall enough and high enough that the hands' upward bleed
   (translateY, still needed to reach the seam with the section above)
   lands INSIDE this box's own bounds instead of above them. That's what
   makes it safe to give this box overflow:hidden for horizontal
   clipping: nothing needs to escape it vertically anymore, so hidden
   can't clip anything that was supposed to show. 90px comfortably covers
   the taller hand's own translateY (~67px at this width) with margin. */
.site-footer__hands {
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  height: 220px;
  overflow: hidden;
}

/* Scroll reveal (js/closing-cta-reveal.js): fades in once the band
   scrolls into view — used to ALSO slide in from translateX(±60%) past
   each hand's own resting left/right edge, but that pre-reveal position
   pushed the image's own layout box (not just what's painted — `clip-
   path`, tried right before this, hides it visually but never reduces
   real scrollable overflow) far enough past the viewport to make the
   ENTIRE page horizontally draggable from first load, everywhere, not
   just at the footer. Confirmed empirically (Playwright: documentElement
   scrollWidth exceeded innerWidth by exactly this pair's escaped width,
   consistently at every breakpoint tested). Fade-only removes that
   escaping transform entirely; .site-footer__hands above now safely
   clips the resting `left:-8%`/`right:-8%` overshoot horizontally too.

   `top: 90px` (matches .site-footer__hands' own -90px) puts each hand
   back at the same resting position as when the wrapper sat at top:0 —
   translateY(-N%) on top of that (not a fixed px) trims off only each
   image's own transparent top margin — measured off each file's actual
   alpha bounding box (right hand's real content starts at 29% down its
   own canvas, left hand's at 10.9%) — so the reaching hand sits closer
   to the seam for free, with zero content cropped. Pushing this further
   (e.g. all the way to each fingertip) would crop the arm/wrist itself,
   since the fingertip is the LOW point of each source photo, not the
   top. */
.site-footer__hand {
  position: absolute;
  top: 90px;
  width: 58%;
  max-width: 320px;
  height: auto;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.site-footer__hand--left {
  left: -8%;
  transform: translateY(calc(-10.9% - 20px));
}

.site-footer__hand--right {
  right: -8%;
  transform: translateY(calc(-29% - 20px));
}

.site-footer__hands--visible .site-footer__hand {
  opacity: 1;
}

.site-footer__requisites {
  margin: 48px auto 0;
  max-width: 600px;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.16px;
  color: var(--color-cream-80);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 32px auto 0;
  max-width: 600px;
}

.site-footer__links a {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.16px;
  color: var(--color-cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-cream-80);
}

@media (min-width: 1200px) {
  .site-footer {
    padding-top: 260px;
  }

  /* Bigger hand images need a bigger upward-bleed buffer too (~133px at
     this width, vs mobile's ~67px) — same "tall+high enough that nothing
     needs to escape the box" logic as the base rule above. */
  .site-footer__hands {
    top: -150px;
    height: 410px;
  }

  /* Bigger (was capped at 320px, same as mobile) so the two fingertips
     read as close together in this much wider band — same left/right:-8%
     anchor, so a larger image alone is what pulls the tips further in
     toward the center. */
  .site-footer__hand {
    top: 150px;
    width: 34%;
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__hand {
    transition-duration: 0.01ms;
  }
}