/* ---- Global Footer (89:6465 desktop, 253:14529 mobile) ----
   The arch/rim reveal (PI Motion Demo, picked: arch shape, rim
   shade, ember rim) ties --pi-footer-fp to scroll progress via
   pi-motion.js: 0 is a wide dome, 1 is the settled 48px-corner shape.
   Defaults to 1 (settled) so the footer still renders normally if JS
   never runs. Figma's static frame shows the settled state as a thin
   hairline, not a thick glow band, so the rim lives on a dedicated 1px
   ::before (always a crisp line) that blooms into a soft glow as the
   dome opens, rather than a full-bleed radial gradient painted as the
   footer's own background. */
.pi-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --pi-footer-fp: 1;
  --pi-footer-sh: calc(1 - var(--pi-footer-fp));
  background: #131313;
  border-top: none;
  border-radius:
    calc(50% - (50% - 48px) * var(--pi-footer-fp))
    calc(50% - (50% - 48px) * var(--pi-footer-fp))
    0 0 / calc(220px - 172px * var(--pi-footer-fp)) calc(220px - 172px * var(--pi-footer-fp)) 0 0;
}
.pi-footer::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,80,0,0.7) 35%, rgba(255,94,156,0.6) 65%, transparent);
  box-shadow: 0 0 calc(24px * var(--pi-footer-sh)) calc(5px * var(--pi-footer-sh)) rgba(255,80,0, calc(0.55 * var(--pi-footer-sh)));
  pointer-events: none;
}
.pi-footer__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(75% 150% at 50% 0%, rgba(255,80,0, calc(0.16 * var(--pi-footer-sh))) 0%, rgba(255,94,156, calc(0.08 * var(--pi-footer-sh))) 36%, transparent 72%);
}
/* opacity/translateY are driven directly off scroll progress
   (pi-motion.js), one inline-style write per rAF frame - no CSS
   transition here, so the reveal tracks the scrollbar exactly instead
   of chasing it with a lag. */
.pi-footer__reveal {
  opacity: 0;
  transform: translateY(24px);
}
.pi-footer__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* CSS fallback: shown until the canvas paints its first frame, and
     permanently in place of it when WebGL is unavailable. Approximates
     Grain's base plus ember tint near the top edge. */
  background: radial-gradient(60% 45% at 50% 0%, rgba(255,80,0,0.12), transparent 70%), #131313;
}
/* Firefox won't clip this canvas to the footer's rounded corner
   no matter where position:absolute sits in its ancestry - several
   layout approaches tried, all fixed it in one way and broke it in
   another there. pi-shaders.js skips WebGL init for this shader in
   Firefox instead, leaving .pi-footer__fallback showing permanently -
   so it just needs to sit and size the same as the other two layers;
   nothing it's never actually painting in Firefox needs to clip. */
.pi-footer__shader { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* left:256px was authored to center this at exactly the 1512px design
   width (256 + half of 1000 = 756 = half of 1512); as a fixed offset
   it drifted off-center or off-canvas at every other width. Centered
   properly so it holds up at any viewport, matching .pi-footer__shade
   below it. */
.pi-footer__glow { position: absolute; left: 50%; top: -190px; width: 1000px; height: 300px; max-width: none; opacity: 0.35; z-index: 0; pointer-events: none; transform: translateX(-50%); }

.pi-footer__main { position: relative; z-index: 1; display: flex; gap: 96px; padding-top: 96px; padding-inline: var(--pi-content-pad); box-sizing: border-box; }

.pi-footer__brand { flex-shrink: 0; width: 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pi-footer__logo { display: block; }
.pi-footer__logo .pi-logo { width: 210px; height: 48px; }
.pi-footer__tagline { margin: 0; font-family: var(--pi-font-body); font-size: var(--pi-body-sml-size); line-height: var(--pi-body-sml-line); color: var(--pi-text-body); }
.pi-footer__contact { display: flex; flex-direction: column; gap: 12px; }
.pi-footer__contact-row { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--pi-font-body); font-size: var(--pi-body-sml-size); line-height: var(--pi-body-sml-line); color: var(--pi-text-secondary); }
.pi-footer__live-demo { border-color: var(--pi-accent-orange); }

.pi-footer__columns { flex: 1 1 0; min-width: 0; display: flex; justify-content: space-between; gap: 18px; }
.pi-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.pi-footer__col-heading { font-family: var(--pi-font-body); font-weight: 700; font-size: var(--pi-label-tag-size); line-height: var(--pi-label-tag-line); letter-spacing: var(--pi-label-tag-tracking); text-transform: uppercase; color: var(--pi-text-muted); }
.pi-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pi-footer__links li { margin: 0; }
.pi-footer__links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--pi-font-body); font-size: var(--pi-body-sml-size); line-height: var(--pi-body-sml-line); color: var(--pi-text-subtitle); transition: color 0.2s ease; }
@media (hover: hover) {
  .pi-footer__links a:hover { color: var(--pi-text-primary); }
}

.pi-footer__partners { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; padding-inline: var(--pi-content-pad); margin-top: 70px; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.08); }
.pi-footer__partners-label { font-family: var(--pi-font-body); font-weight: 700; font-size: var(--pi-label-tag-size); line-height: var(--pi-label-tag-line); letter-spacing: var(--pi-label-tag-tracking); text-transform: uppercase; color: var(--pi-text-muted); }
.pi-footer__badges { display: flex; align-items: center; gap: 24px; }
.pi-footer__badges img { display: block; height: 32px; width: auto; }
.pi-footer__badges .pi-footer__badge-sema { height: 32px; }
.pi-footer__badges-divider { flex-shrink: 0; width: 1px; height: 32px; background: rgba(255,255,255,0.15); }

.pi-footer__legal { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 70px; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.08); }
.pi-footer__legal p { margin: 0 auto; max-width: 68ch; text-align: center; font-family: var(--pi-font-body); font-size: 14px; line-height: 22px; color: var(--pi-text-muted); }
/* Plain underlined text control, matching the legal row's own
   muted tone rather than looking like another CTA. */
.pi-footer__motion-toggle { border: 0; padding: 0; background: none; cursor: pointer; font-family: var(--pi-font-body); font-size: 13px; line-height: 20px; color: var(--pi-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.pi-footer__motion-toggle:hover { color: var(--pi-text-secondary); }

@media (max-width: 1023.98px) {
  /* Mobile settles to a 56px corner, not the desktop 48px. */
  .pi-footer {
    border-radius:
      calc(50% - (50% - 56px) * var(--pi-footer-fp))
      calc(50% - (50% - 56px) * var(--pi-footer-fp))
      0 0 / calc(220px - 164px * var(--pi-footer-fp)) calc(220px - 164px * var(--pi-footer-fp)) 0 0;
  }

  .pi-footer__main { flex-direction: column; gap: 32px; padding: 56px 20px 0; }
  .pi-footer__brand { width: 100%; }

  .pi-footer__columns { flex-wrap: wrap; row-gap: 32px; }
  .pi-footer__col { flex: 0 0 calc(50% - 9px); }

  .pi-footer__partners { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px; margin-top: 56px; }
  /* The shared 32px-tall rule above (desktop) wrapped these four
     onto two uneven rows at narrow widths, with the SEMA/PRI divider
     stranding at the end of row 1. Figma's Footer (Mobile) (244:9863)
     is the whole desktop row scaled down together (~0.58x) - each logo
     keeps its own native aspect ratio, so fixing width (not height) and
     letting height stay auto reproduces it without distortion; the
     desktop SEMA pill (background/padding) isn't part of that Figma
     node, so it's dropped here rather than squeezed to fit, which is
     also the only way the row's own math (4 logos + 3 dividers + 6x
     14px gaps) lands inside the 350px content width at 390. */
  /* Specificity note: .pi-footer__badges img and .pi-footer__badges
     .pi-footer__badge-sema above both out-rank a bare single-class
     selector regardless of source order - these repeat the
     .pi-footer__badges parent to win the cascade instead of relying on
     being later in the file. */
  /* The single row needs 352px (4 logos at 265px
     total + 3 dividers + 6 gaps), which only fits from 392px up at a
     flat 14px gap - below that PRI ran past the 20px gutter (2px at
     390, 17px at 375, cut off entirely at 360). Letting the gap itself
     shrink with the viewport keeps the row on one line down to 360,
     where the 359.98px breakpoint below takes over with the 2x2 grid. */
  .pi-footer__badges { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0 clamp(6px, calc((100vw - 40px - 268px) / 6), 14px); width: 100%; row-gap: 0; }
  .pi-footer__badges img { width: auto; height: auto; }
  .pi-footer__badges .pi-footer__badge-shopify { width: 79px; }
  .pi-footer__badges .pi-footer__badge-algolia { width: 70px; }
  .pi-footer__badges .pi-footer__badge-sema { width: 56px; height: auto; padding: 0; background: none; border-radius: 0; box-sizing: content-box; }
  .pi-footer__badges .pi-footer__badge-pri { width: 60px; }
  .pi-footer__badges-divider { height: 19px; }

  .pi-footer__legal { align-items: flex-start; padding: 24px 20px; }
  .pi-footer__legal p { text-align: left; }
}

@media (max-width: 359.98px) {
  /* Nowrap still fits down to 360; below that the four badges
     have no room left for Figma's sizes on one line - a 2x2 grid is
     the documented fallback, with the gap itself replacing the
     dividers (never show one at a row's edge). */
  .pi-footer__badges { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; row-gap: 16px; }
  .pi-footer__badges-divider { display: none; }
}

/* ---- Tablet: see pi-home.css for the full explanation. Must
   come after the max-width:1023.98px block above. The columns are
   already two-up at every width below 1024 (.pi-footer__col above),
   so only the gutter needs the 640px step. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pi-footer__main { padding: 56px 40px 0; }
  .pi-footer__partners { padding: 24px 40px; }
  .pi-footer__legal { padding: 24px 40px; }
}