/* FOOTER — forest green, closing the page with a framed flat-vector banner (js/footer-banner.js):
   a yellow-and-black checker frame around a scene in the hero and eye-wall language, with the full
   Girgit Labs logo at its centre. Then a big hello, the email in a framed box, links, legal. */

.ft { background: var(--forest); color: var(--ivory); font-family: var(--satoshi); overflow: hidden; }
.ft-wrap { max-width: 96rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 1.4rem; }

/* ---------- The banner: checker frame (18px squares, one square thick), scene inside ---------- */
.fb {
  --sq: clamp(10px, 1.15vw, 18px);
  padding: var(--sq); border: 3px solid var(--black);
  background: repeating-conic-gradient(var(--yellow) 0 25%, var(--black) 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}
.fb-scene { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 420; outline: 3px solid var(--black); overflow: hidden; }   /* nothing drawn outside the frame (site.css lets svg overflow) */
.fb { overflow: hidden; }
html:not(.js) .fb { display: none; }

/* Pieces pop in once the banner is seen (logo first, then the sea, sun, leaves, tiles, sparkles). */
.fb-piece, .fb-sway { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .js .fb .fb-piece { opacity: 0; scale: 0.6; transition: opacity 450ms var(--ease) calc(var(--i, 0) * 55ms), scale 650ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 55ms); }
  .js .fb.is-in .fb-piece { opacity: 1; scale: 1; }
  .fb-leaf .fb-sway { animation: fb-sway 5s ease-in-out infinite alternate; transform-origin: 0% 50%; }
  .fb-leaf:nth-child(2n) .fb-sway { animation-duration: 6.5s; animation-delay: -2s; }
  .fb-spark { animation: fb-twinkle 2.6s ease-in-out infinite; }
  .fb-iris { transition: transform 260ms cubic-bezier(0.3, 0.7, 0.2, 1); }
  @keyframes fb-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
  @keyframes fb-twinkle { 50% { scale: 0.7; } }
}

/* ---------- Hello, email, links ---------- */
.ft-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.ft-big { margin: 0 0 1.4rem; font: 900 clamp(2.6rem, 6vw, 5.6rem)/0.9 var(--satoshi); letter-spacing: -0.05em; text-transform: uppercase; color: var(--ivory); }
.ft-mailbox {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem;
  padding: 1.15rem 1.4rem; border: 3px solid var(--black); outline: 6px solid var(--acid); outline-offset: -9px;
  background: var(--ivory); color: var(--black); text-decoration: none; box-shadow: 6px 6px 0 var(--black);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.ft-mailbox:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--black); }
.ft-mailbox:focus-visible { outline-color: var(--yellow); }
.ft-mail { font: 800 clamp(1.15rem, 2.2vw, 1.8rem)/1.1 var(--satoshi); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ft-go { font: 700 0.8rem/1 var(--satoshi); letter-spacing: 0.14em; text-transform: uppercase; }
.ft-copyrow { margin: 1rem 0 0; }
.ft-copy { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 600 0.92rem var(--satoshi); text-decoration: underline; text-underline-offset: 0.25em; }
.ft .copied { margin-left: 0.4rem; color: var(--acid); font: 700 0.85rem var(--satoshi); }
.ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.ft-label { margin: 0 0 1rem; font: 700 0.72rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acid); }
.ft-links { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ft-links a { color: var(--ivory); text-decoration: none; font: 700 1rem/1.2 var(--satoshi); letter-spacing: 0.06em; text-transform: uppercase; }
.ft-links a:hover { color: var(--acid); }
.ft-place { margin: 0; font: 700 1rem/1.5 var(--satoshi); letter-spacing: 0.06em; text-transform: uppercase; }
.ft-time { margin: 0.8rem 0 0; font: 500 0.9rem/1.4 var(--satoshi); color: rgb(244 239 229 / 0.7); }
.ft-time [data-clock] { color: var(--acid); font-weight: 700; font-variant-numeric: tabular-nums; }
.ft a:focus-visible, .ft button:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }

/* ---------- Legal ---------- */
.ft-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1rem; border-top: 2px solid rgb(244 239 229 / 0.25);
  font: 700 0.74rem/1.4 var(--satoshi); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(244 239 229 / 0.7);
}
.ft-top { color: var(--ivory); text-decoration: none; }
.ft-top:hover { color: var(--acid); }

/* ---------- Phones: the banner crops to its centre so the logo stays big ---------- */
@media (max-width: 760px) {
  .fb-scene { aspect-ratio: 900 / 420; }
  .ft-main { grid-template-columns: 1fr; }
}