/* ============================================================
   SITE FOOTER — link groups over a full-screen field of falling stickers.
   Ported from the live bir.ch footer (Webflow, 01.10.2026).
   Content: the Sanity "Site footer" document; markup —
   site/src/components/Footer.astro; stickers — footer-physics.js.

   Layering without Webflow's negative margins: the links and the
   sticker field share one grid cell. The links layer ends with empty
   space (50% of the screen height; 65% from 991px down), the field is
   one screen tall and pinned to the bottom — so the links overlap the
   top half of the field, exactly as on the live site.
   Theme follows the page (.is-light on light pages).
   ============================================================ */

.site-footer {
  --footer-bg: var(--color-bg);
  --footer-text: var(--color-text);
  --footer-cursor: rgba(250, 250, 250, 0.95);
  --footer-overlap-gap: 50vh;
  display: grid;
  background: var(--footer-bg);
  color: var(--footer-text);
}
.site-footer.is-light {
  --footer-bg: var(--color-bg-white);
  --footer-text: var(--color-text-inverted);
  --footer-cursor: rgba(13, 13, 18, 0.9);
}
@media (max-width: 991px) {
  .site-footer { --footer-overlap-gap: 65vh; }
}
.site-footer > * { grid-area: 1 / 1; min-width: 0; }

/* -- links layer -- */
.site-footer__links {
  position: relative;
  z-index: 2;
  align-self: start;
  /* one offset between the last block and the footer, the section rhythm (live had 6rem; decision 02.10.2026) */
  padding-top: var(--section-space, 6rem);
  padding-bottom: var(--footer-overlap-gap);
  /* the layer spans the sticker field; only the text itself takes the pointer */
  pointer-events: none;
}
.site-footer__group { margin-bottom: var(--space-lg); }
.site-footer__label { text-align: right; margin: 0; }
.site-footer__lists { display: flex; flex-direction: column; gap: var(--space); }
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-xxs); margin: 0; padding: 0; list-style: none; }
/* the item hugs its link: a plain list item would take the page's own (larger) line height */
.site-footer__list > li { display: flex; }
.site-footer__label, .site-footer__link { pointer-events: auto; }
.site-footer__link { color: inherit; text-decoration: none; transition: opacity 150ms ease; }
.site-footer__link:hover { opacity: 0.8; }
/* Phones: each link is a 24px touch target (WCAG 2.2 minimum, decided 02.10.2026) — the list gap moves into the
   link's own padding, so the step grows from 21 to 24; the label gets the same padding to stay on the first line. */
@media (max-width: 47.9375rem) {
  .site-footer__list { gap: 0; }
  .site-footer__link, .site-footer__label { padding-block: calc((1.5rem - 1lh) / 2); }
}

/* -- sticker field -- */
.site-footer__physics {
  position: relative;
  /* the whole footer height: stickers start falling when the first link reaches the menu (footer-physics.js),
     and they enter from the screen's top edge — a field only one screen tall, pinned to the bottom, cut them off
     mid-screen (02.10.2026; live starts later, when the field's top reaches the screen top) */
  align-self: stretch;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.site-footer__physics canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.site-footer__cursor {
  position: fixed;
  left: -999px; top: -999px;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--footer-cursor);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  transition: opacity 120ms ease;
}
/* iOS asks permission for motion sensors: this button triggers the prompt */
.site-footer__tilt {
  position: absolute;
  top: 66.67%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: none;
  padding: 1.4em;
  border: none;
  border-radius: var(--radius-xl);
  background: #6900FF;            /* live colour, no token yet */
  color: rgba(255, 255, 255, 0.9);
  font: 400 0.9rem/1.4 system-ui, sans-serif;   /* live */
  cursor: pointer;
}