/* ============================================================
   GROWMARK — the footer (index.html and manifesto.html)
   After the user's second wireframe (2026-10-23): one white screen
   under the nav (which stays as it is over it: data-nav-stays,
   js/nav.js). Start a project and the founder card under it, in the
   middle of the room the nav leaves; one row: Explore AI Summary on
   the left edge, the email (press to copy) in the middle and Follow
   Growmark on the right; the wordmark across the
   whole width between two rules; then the bar: the copyright on the
   left edge, the legal links in the middle, back to top on the right.
   ============================================================ */

.foot{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  /* the stuck band and the nav sit over the top of it */
  padding-top:calc(var(--announce-h, 0px) + 72px);
}
.foot__inner{flex:1 0 auto;display:flex;flex-direction:column;width:100%}

/* the ask: Start a project and the founder card under it, centred in
   whatever height the screen leaves */
.foot__start{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,1.6vw,20px);
  padding-block:clamp(24px,6vh,96px);
  text-align:center;
}
.foot__kicker{
  font-size:clamp(14px,1.25vw,18px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color var(--dur-1) var(--ease);
}
.foot__kicker:hover,.foot__kicker:focus-visible{color:var(--muted)}

/* the founder card: face, offer, and a square go button that fills
   with the ghost-button wipe while the card is hovered */
.foot__cta{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:460px;
  padding:12px;
  border:1px solid var(--line);
  background:rgba(19,19,18,.02);
  text-align:left;
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}
.foot__cta:hover,.foot__cta:focus-visible{
  border-color:rgba(19,19,18,.34);
  background:rgba(19,19,18,.035);
  outline:none;
}
.foot__face{
  display:block;
  width:52px;height:52px;
  object-fit:cover;
  object-position:50% 25%;
  background:var(--ink);
}
.foot__cta-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.foot__cta-title{font-size:16px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.foot__cta-sub{font-size:14px;line-height:1.3;color:var(--muted)}
.foot__go{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border:1px solid var(--ink);
  color:var(--ink);
  transition:color var(--dur-1) var(--ease);
}
.foot__go::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform var(--dur-3) var(--ease);
}
.foot__go .dot-arrow{position:relative;z-index:1;transition:transform var(--dur-2) var(--ease)}
.foot__cta:hover .foot__go,.foot__cta:focus-visible .foot__go{color:var(--ground)}
.foot__cta:hover .foot__go::after,.foot__cta:focus-visible .foot__go::after{transform:scaleY(1)}
.foot__cta:hover .dot-arrow,.foot__cta:focus-visible .dot-arrow{transform:translateX(2px)}
/* the card is the address on every page (a button): a press copies it
   (js/foot.js, [data-copied]) and the title reads "Email copied" for a
   moment; both share one cell, so the card keeps its width */
button.foot__cta{margin:0;cursor:pointer}
.foot__cta-roll{display:grid;justify-items:start}
.foot__cta-roll > *{grid-area:1/1;transition:opacity var(--dur-1) var(--ease)}
.foot__cta-roll > :last-child,
.foot__cta[data-copied] .foot__cta-roll > :first-child{opacity:0}
.foot__cta[data-copied] .foot__cta-roll > :last-child{opacity:1}

/* the email, on the row's middle line and level with the AI buttons (a
   box their height): a press copies it (js/foot.js). The address rolls
   up and out, "Email copied" rolls up into its place (both share one
   grid cell, so the line keeps its width), and it rolls back after a
   moment */
.foot__mail{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:clamp(14px,1.25vw,17px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
}
.foot__mail:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.foot__mail-roll{
  display:inline-grid;
  overflow:hidden;
  line-height:1.35;
  /* the underline, drawn in while the pointer is on the email; a press
     takes it away and it stays away until the pointer leaves
     ([data-spent], js/foot.js), so it never draws back in on its own */
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size var(--dur-3) var(--ease);
}
.foot__mail:hover:not([data-spent]) .foot__mail-roll{background-size:100% 1px}
.foot__mail-roll > span{
  grid-area:1 / 1;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
}
.foot__mail-done{transform:translateY(100%);opacity:0}
.foot__mail[data-copied] .foot__mail-text{transform:translateY(-100%);opacity:0}
.foot__mail[data-copied] .foot__mail-done{transform:none;opacity:1}
/* for screen readers only */
.foot__mail-said{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .foot__mail-roll > span{transition:opacity .2s linear}
  .foot__mail-done,.foot__mail[data-copied] .foot__mail-text{transform:none}
}

/* the AI block on the left edge, the email on the middle line, Follow
   Growmark on the right edge; the email level with the buttons (the row
   ends on the buttons' bottom, and it stands in a box their height) */
.foot__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end;
  gap:24px 40px;
  padding-bottom:16px;
}
.foot__ai{justify-self:start;display:flex;flex-direction:column;gap:13px}
.foot__head{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.foot__ai-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,44px);
  gap:8px;
}
/* each square fills from the bottom like a ghost button (a background
   wipe, so the square stays unpositioned) */
.foot__ai-btn{
  display:grid;
  place-items:center;
  width:44px;
  aspect-ratio:1;
  border:1px solid var(--line);
  background:linear-gradient(var(--ink),var(--ink)) 50% 100% / 100% 0 no-repeat;
  color:var(--ink);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-size var(--dur-3) var(--ease);
}
.foot__ai-btn svg{width:18px;height:18px}
.foot__ai-btn:hover,.foot__ai-btn:focus-visible{
  color:var(--ground);
  border-color:var(--ink);
  background-size:100% 100%;
  outline:none;
}
/* the hovered assistant's name, beside the row */
.foot__ai-name{
  position:absolute;
  top:50%;
  left:calc(100% + 16px);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
  opacity:0;
  transform:translate(-4px,-50%);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);
  pointer-events:none;
}
.foot__ai-btn:hover .foot__ai-name,.foot__ai-btn:focus-visible .foot__ai-name{opacity:1;transform:translate(0,-50%)}
/* Instagram and LinkedIn, on the row's right edge, in the same squares */
.foot__social{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:13px}
.foot__social-row{grid-template-columns:repeat(2,44px);width:max-content}
/* the page ends on their right, so the hovered name stands on their left */
@media (min-width:981px){
  .foot__social-row .foot__ai-name{left:auto;right:calc(100% + 16px);transform:translate(4px,-50%)}
  .foot__social-row .foot__ai-btn:hover .foot__ai-name,
  .foot__social-row .foot__ai-btn:focus-visible .foot__ai-name{transform:translate(0,-50%)}
}

/* who we are, in plain words (the user, 2026-10-29): a quiet note
   between the row and the wordmark's top rule */
.foot__about{
  max-width:132ch;
  padding-bottom:18px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}
/* the services named in it lead to their own pages: a quiet rule under
   them, the ink on hover, as the footer's links */
.foot__about a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--line);
  text-underline-offset:.22em;
  transition:color var(--dur-1) var(--ease);
}
.foot__about a:hover,.foot__about a:focus-visible{color:var(--ink)}

/* the wordmark, edge to edge between two rules */
.foot__word{
  border-block:1px solid var(--line);
  padding-block:clamp(10px,1.4vw,20px) clamp(12px,1.8vw,26px);
  color:var(--ink);
}
/* edge to edge at every height (the user, 2026-10-29): the one-screen
   cap shrank it once the note went in over it, so the footer may run
   past a short screen rather than the word giving up its size */
.foot__word svg{display:block;width:100%;height:auto}

.foot__bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:28px;
  padding-block:clamp(18px,2.6vh,28px);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.foot__bar > :first-child{justify-self:start}
.foot__legals{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.foot__legal,.foot__cookies{transition:color var(--dur-1) var(--ease)}
.foot__legal:hover,.foot__legal:focus-visible,
.foot__cookies:hover,.foot__cookies:focus-visible{color:var(--ink)}
/* reopens the cookie choice (js/consent.js) */
.foot__cookies{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
/* back to top: the site's dot arrow turned to point up */
.foot__top{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
}
.foot__top .dot-arrow{margin-inline:3px;transform:rotate(-90deg)}
.foot__top:hover .dot-arrow,.foot__top:focus-visible .dot-arrow{transform:rotate(-90deg) translateX(2px)}

/* narrower: the row stacks on the middle line */
@media (max-width:980px){
  .foot__row{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:20px}
  .foot__ai,.foot__mail,.foot__social{justify-self:center}
  .foot__ai,.foot__social{align-items:center}
  /* room under the buttons for the hovered name, so it never meets the
     email */
  .foot__ai{margin-bottom:24px}
  .foot__ai-name{top:calc(100% + 6px);left:50%;transform:translate(-50%,-3px)}
  .foot__ai-btn:hover .foot__ai-name,.foot__ai-btn:focus-visible .foot__ai-name{transform:translate(-50%,0)}
  .foot__about{margin-inline:auto;text-align:center}
}
/* phone: the bar stacks on the middle line too */
@media (max-width:760px){
  .foot__bar{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:12px;text-align:center}
  .foot__bar > :first-child,.foot__top{justify-self:center}
}

/* ------------------------------------------------------------
   the intro (js/foot-intro.js): each part plays in as it comes up
   into view. [data-intro] is set by the script, so without it (or
   under reduced motion) the footer is simply there; [data-in] is set
   on a part once it is up, and taken off again once it has dropped
   back under the screen. Keyframe animations, so the hover
   transitions underneath are left as they are.
   ------------------------------------------------------------ */
@keyframes foot-rise{from{opacity:0;translate:0 var(--rise,26px)}}
@keyframes foot-fade{from{opacity:0}}
@keyframes foot-wipe{from{clip-path:inset(100% 0 0 0)}}
@keyframes foot-draw{from{scale:0 1}}
@keyframes foot-glyph{from{transform:translateY(66px)}}

/* waiting, out of view */
.foot[data-intro] :is(.foot__start,.foot__row,.foot__word):not([data-in]) :is(.foot__kicker,.foot__cta,.foot__head,.foot__ai-btn,.foot__mail){opacity:0}
.foot[data-intro] .foot__word:not([data-in]) path{transform:translateY(66px)}
.foot[data-intro] .foot__word:not([data-in])::before,
.foot[data-intro] .foot__word:not([data-in])::after{scale:0 1}
.foot[data-intro] .foot__word:not([data-in]) + .foot__bar{opacity:0}
.foot[data-intro] .foot__row:not([data-in]) + .foot__about{opacity:0}

/* the ask: the line, then the card, the face wiping up into it */
.foot__start[data-in] .foot__kicker{animation:foot-rise 1.1s var(--ease-soft) both}
.foot__start[data-in] .foot__cta{--rise:34px;animation:foot-rise 1.3s var(--ease-soft) .12s both}
.foot__start[data-in] .foot__face{animation:foot-wipe 1.1s var(--ease-soft) .38s both}

/* the row: the heads, the squares one after another, the email */
.foot__row[data-in] .foot__head{animation:foot-fade .9s var(--ease) both}
/* backwards, not both: a held translate (even 0px) would make each
   square the containing block of its name, which then lands on the
   next squares instead of beside the row */
.foot__row[data-in] .foot__ai-btn{--rise:18px;animation:foot-rise 1s var(--ease-soft) calc(.08s + var(--i,0) * 55ms) backwards}
.foot__row[data-in] .foot__mail{animation:foot-rise 1.1s var(--ease-soft) .22s both}
.foot__row[data-in] + .foot__about{animation:foot-fade 1s var(--ease) .5s both}

/* the wordmark: its rules draw out from the middle (they stand in for
   its border while the intro runs), then the letters rise from under
   the bottom rule, left to right (the svg clips them), the bar last */
.foot[data-intro] .foot__word{position:relative;border-color:transparent}
.foot[data-intro] .foot__word::before,
.foot[data-intro] .foot__word::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:var(--line);
}
.foot[data-intro] .foot__word::before{top:-1px}
.foot[data-intro] .foot__word::after{bottom:-1px}
.foot__word[data-in]::before,
.foot__word[data-in]::after{animation:foot-draw 1.4s var(--ease-soft) both}
.foot__word[data-in] path{animation:foot-glyph 1.35s var(--ease-soft) calc(.18s + var(--i,0) * 70ms) both}
.foot__word[data-in] + .foot__bar{animation:foot-fade 1s var(--ease) .9s both}