/* ============================================================
   Cognuum — FOOTER
   A click-to-open footer sheet. The bottom-left "+" trigger
   mirrors the bottom-right theme toggle. The sheet rises from the
   bottom: large faint wordmark, a manifesto line, restrained link
   columns, hairline base row. Minimal, editorial, high-end.
   ============================================================ */

/* ---- trigger (bottom-left, container-free, mirrors the theme toggle) ---- */
.foot-trigger{
  position:fixed; bottom:26px; left:26px; z-index:120;
  width:30px; height:30px; padding:0; cursor:pointer;
  background:none; border:0;
  color:var(--text-secondary); opacity:0.55;
  transition:opacity .3s ease, color .3s ease;
}
.foot-trigger:hover{ opacity:1; color:var(--text-primary); }
.foot-trigger svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round;
  transition:transform .45s cubic-bezier(.22,.61,.18,1);
}
body.footer-open .foot-trigger{ opacity:1; color:var(--text-primary); }
body.footer-open .foot-trigger svg{ transform:rotate(135deg); }   /* + → × */

/* ---- the sheet ---- */
.footer-sheet{ position:fixed; inset:0; z-index:115; visibility:hidden; pointer-events:none; }
.footer-sheet.open{ visibility:visible; pointer-events:auto; }

.fs-scrim{
  position:absolute; inset:0;
  background:rgba(3,4,6,0.55);
  -webkit-backdrop-filter:blur(8px) saturate(1.05); backdrop-filter:blur(8px) saturate(1.05);
  opacity:0; transition:opacity .55s ease;
}
.footer-sheet.open .fs-scrim{ opacity:1; }

.fs-panel{
  position:absolute; left:0; right:0; bottom:0;
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(8,204,253,0.06) 0%, rgba(0,0,0,0) 42%),
    radial-gradient(120% 140% at 100% 10%, rgba(237,18,128,0.05) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, #0b0c0f 0%, #08090b 100%);
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow:0 -40px 90px -30px rgba(0,0,0,0.7);
  padding:clamp(52px,8vh,104px) clamp(30px,6vw,108px) clamp(38px,5vh,64px);
  transform:translateY(101%);
  transition:transform .72s cubic-bezier(.22,.61,.18,1);
}
.footer-sheet.open .fs-panel{ transform:none; }
/* closing reverses the open motion (sheet still visible during the slide-down) */
.footer-sheet.is-closing .fs-scrim{ opacity:0; }
.footer-sheet.is-closing .fs-panel{ transform:translateY(101%); }

.fs-inner{ max-width:1320px; margin:0 auto; }

/* ---- lead: a quiet brand sign-off (not a headline) ---- */
.fs-lead{ max-width:680px; margin-bottom:clamp(52px,8vh,96px); }
.fs-mark{
  font-size:13px; font-weight:500; letter-spacing:0.42em; color:var(--text-disabled);
  margin-bottom:20px;
}
.fs-signoff{
  font-size:clamp(20px,2.15vw,27px); line-height:1.1; font-weight:400; letter-spacing:-0.018em;
  color:var(--text-muted);
}
.fs-dot{ color:var(--magenta); }
.fs-philo{
  margin-top:14px; font-size:14px; line-height:1.6; letter-spacing:0.04em;
  color:var(--text-disabled);
}

/* ---- link columns ---- */
.fs-cols{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(24px,2.6vw,48px);
  padding:clamp(40px,5vh,64px) 0 clamp(30px,4vh,44px);
  border-top:1px solid rgba(255,255,255,0.06);
}
.fs-col{ display:flex; flex-direction:column; align-items:flex-start; gap:15px; min-width:0; }
.fs-col-h{
  font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-disabled); margin-bottom:5px; opacity:0.8;
}
.fs-link{
  font-size:15px; font-weight:400; letter-spacing:0.004em; color:var(--text-secondary);
  text-decoration:none; position:relative; transition:color .25s ease;
  width:fit-content;
}
.fs-link::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.18,1); opacity:0.5;
}
.fs-link:not(.is-placeholder):hover{ color:var(--text-primary); }
.fs-link:not(.is-placeholder):hover::after{ transform:scaleX(1); }

/* PLACEHOLDER — a page that will exist. It is a <span>, not an anchor, so it
   is not focusable and no screen reader announces it as a link (see the note
   in www-shell/footer.html). It keeps .fs-link's position and type so the
   column does not reflow when the page lands; what it loses is every
   interactive affordance — the pointer cursor and the hover colour/underline
   above — because responding to a hover is a promise it cannot keep. */
.fs-link.is-placeholder{ cursor:default; }

/* ---- utility access actions (subtle, not CTAs) ---- */
.fs-access{
  display:flex; gap:32px; padding:clamp(22px,3vh,32px) 0;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ---- hairline base ---- */
.fs-base{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px 24px;
  padding-top:clamp(24px,3vh,34px); border-top:1px solid rgba(255,255,255,0.06);
}
.fs-note{ font-size:12.5px; letter-spacing:0.02em; color:var(--text-secondary); opacity:0.62; }
.fs-copy{ font-size:12px; letter-spacing:0.03em; color:var(--text-disabled); opacity:0.7; }

/* ---- light theme ---- */
body.light .fs-scrim{ background:rgba(228,225,219,0.55); }
body.light .fs-panel{
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(10,158,196,0.05) 0%, rgba(0,0,0,0) 42%),
    radial-gradient(120% 140% at 100% 10%, rgba(211,21,110,0.04) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, #f6f4f0 0%, #efece7 100%);
  border-top-color:rgba(0,0,0,0.10);
  box-shadow:0 -40px 90px -30px rgba(120,116,110,0.4);
}
body.light .fs-signoff{ color:#56565d; }
body.light .fs-philo{ color:#9a9aa1; }
body.light .fs-cols{ border-top-color:rgba(0,0,0,0.08); }
body.light .fs-access{ border-top-color:rgba(0,0,0,0.08); }
body.light .fs-link{ color:#5f5f66; }
body.light .fs-link:not(.is-placeholder):hover{ color:#0e0f13; }
body.light .fs-base{ border-top-color:rgba(0,0,0,0.08); }
body.light .fs-note, body.light .fs-copy{ color:#9a9aa1; }

/* ---- mobile ---- */
@media (max-width:767px){
  .foot-trigger{ bottom:14px; left:20px; }
  /* when the footer index is OPEN, the trigger becomes the close (×) and moves
     to the top-right — a more natural close position on a phone */
  body.footer-open .foot-trigger{
    bottom:auto; left:auto; top:18px; right:18px;
    transition:top .4s cubic-bezier(.22,.61,.18,1), right .4s cubic-bezier(.22,.61,.18,1), opacity .3s ease, color .3s ease;
  }
  .fs-panel{ max-height:96vh; padding:clamp(44px,7vh,72px) 26px 32px; }
  .fs-cols{ grid-template-columns:1fr 1fr; gap:28px 24px; }
  .fs-base{ flex-direction:column; align-items:flex-start; gap:10px; }
}