/* ==========================================================
   FOOTER – the homepage footer, copied for the case studies + about page.
   (The homepage itself still uses home.css / home.js.)
   HTML: the <footer class="site-footer"> block at the end of each page.
   JS: js/footer.js (the doodle).
   Moved here from home.css – old copy in css/home-before-footer.css.
   ========================================================== */

/* ---------- Tokens: the homepage values, set on the footer so it looks the same on every page ---------- */
.site-footer {
  --page: #FFFFFF;
  --fg: #0A0A0A;
  --sans: "Neue Montreal", Inter, "Helvetica Neue", Arial, sans-serif;
  --button-font: var(--sans);
  --button-leading: 1.25;
  --button-pad-block: 0.5rem;
  --button-pad-inline: 1rem;
  --button-text: calc(1.25rem * 0.9);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-pill: 999rem;
  --stroke: 0.125rem;
  --skip-stroke: calc(var(--stroke) * 2);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --text-sm: 0.875rem;
  --text-4xl: 4rem;
  --leading-body: 1.4;
  --hover-time: 300ms;
  --hairline: 0.0625rem;

  font-family: var(--sans);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER – white band, two halves (layout inspired by kevinzych.com).
   Left: big name, tagline, "say hi" button, copyright. Right: bio + links.
   HTML: index.html → footer.site-footer
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-footer {
  --footer-bg: var(--page);   /* white */
  --footer-pad: var(--space-xl);
  --footer-height: 40rem;   /* tall, roomy band to doodle in */

  display: grid;
  gap: var(--space-2xl);
  min-block-size: var(--footer-height);
  align-content: end;   /* text sits at the bottom, leaving open space above to draw in */
  padding: var(--footer-pad) var(--space-lg);
  background: var(--footer-bg);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}

/* doodle layer: moving the mouse over the footer draws an ink line behind the text (home.js → "Footer doodle") */
.footer-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;   /* clicks go straight through to the links */
  filter: url("#roughen");   /* wobbles like "hand-made" (filter in index.html, home.js keeps it moving) */
}

/* "clear": the same flower button as the playground's arrow – a black flower on the white footer, a white × inside,
   one quick spin on hover while the × drops out and a new one slides in. */
.footer-clear {
  --clear-size: calc(var(--space-xl) * 1.75);   /* the flower's width (3.5rem), same as the skip button */
  position: absolute;
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: var(--clear-size);
  aspect-ratio: 1757 / 1632;   /* the flower's own proportions */
  padding: 0;
  background: none;
  border: 0;
  color: var(--footer-bg);   /* the ×: white on the black flower */
}

.footer-clear-flower {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  background: var(--fg);
  mask: url("../Assets/flower.svg") center / contain no-repeat;
}

.footer-clear:hover .footer-clear-flower,
.footer-clear:focus-visible .footer-clear-flower {
  animation: skip-spin 600ms var(--ease-out) 1;   /* the same quick turn as the skip button */
}

.footer-clear-icons {
  position: relative;
  z-index: 1;   /* above the masked flower */
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

.footer-clear-icon {
  grid-area: 1 / 1;
  inline-size: calc(var(--clear-size) / 2.5);
  block-size: calc(var(--clear-size) / 2.5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate var(--hover-time) var(--ease-out);
}

.footer-clear-icon path {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--skip-stroke);   /* same weight as the skip arrow */
}

.footer-clear-icon--next { translate: 0 -200%; }

.footer-clear:hover .footer-clear-icon,
.footer-clear:focus-visible .footer-clear-icon { translate: 0 200%; }

.footer-clear:hover .footer-clear-icon--next,
.footer-clear:focus-visible .footer-clear-icon--next { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .footer-clear-icon { transition: none; }
  .footer-clear:hover .footer-clear-flower,
  .footer-clear:focus-visible .footer-clear-flower { animation: none; }
}


.footer-side {
  position: relative;
  z-index: 1;   /* text sits above the doodle */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.footer-name {
  --footer-mark-width: calc(var(--text-4xl) * 4);   /* the hand-drawn "kinza" signature (same image as the about page) */
  --mark-inset: 0.013;   /* the drawing starts 1.3% into the image (22 of 1695px) – pulled back so the ink lines up with the nav name */
  display: block;
  inline-size: var(--footer-mark-width);
  margin-inline-start: calc(var(--footer-mark-width) * var(--mark-inset) * -1);
  max-inline-size: 100%;
  block-size: auto;
}

.footer-tagline,
.footer-bio,
.footer-links {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.footer-btn {
  font-family: var(--button-font);
  background: var(--fg);
  color: var(--page);
  border-radius: var(--radius-pill);   /* "say hi" is a pill (the other buttons stay square / flower) */
  padding-block: var(--button-pad-block);
  padding-inline: var(--button-pad-inline);
  font-size: var(--button-text);
  line-height: var(--button-leading);
}

.footer-small {
  margin-block-start: auto;   /* sits at the bottom of the left half */
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block-start: auto;   /* sits at the bottom of the right half */
}

@keyframes skip-spin {
  to { rotate: 1turn; }
}

/* desktop: two equal halves (same as the homepage) */
@media (min-width: 701px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bio {
    max-inline-size: 36rem;
  }
}

/* case studies: room at the bottom so the floating nav doesn't cover the links */
/* off – not needed now the buttons scroll away:
body:has(.float-nav) .site-footer {
  padding-block-end: calc(var(--space-2xl) * 2);
}
*/

/* fade version – off:
( ---------- Case studies: overview, tools and the bottom nav fade out at the footer (js/footer.js adds .at-footer) ---------- )
.case-sidebar,
.tools-panel,
.float-nav {
  transition: opacity var(--hover-time, 300ms) ease;
}

.at-footer .case-sidebar,
.at-footer .tools-panel,
.at-footer .float-nav {
  opacity: 0;
  pointer-events: none;
}
*/

/* ---------- Case studies: overview, tools and the bottom nav scroll away with the end of the case study ----------
   js/footer.js sets --footer-push to how much of the footer is on screen. */
.case-sidebar,
.tools-panel,
.float-nav {
  translate: 0 calc(var(--footer-push, 0rem) * -1);
}