/* Section 12, footer: "Split" (Reveal + Spotlight, confirmed 11 Oct). The contents slide out from under the
   section above; "Only" and "Conversion" slide in from either side; a cursor light fills the outlined name.
   Hover rule: links and buttons never move; only what is inside them does. */
.ft { --px: clamp(24px, 7vw, 120px); --ink: #F1E9DE; --muted: #B3A392; --gold: #CDA85F; --line: rgba(205,168,95,.18);
  position: relative; isolation: isolate; overflow: clip; background: #120D0B; color: var(--ink); padding: clamp(70px, 10vh, 110px) var(--px) 28px; }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(205,168,95,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(205,168,95,.05) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.ft-wrap { max-width: 1400px; margin: 0 auto; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.ft-logo { display: inline-block; } .ft-logo img { display: block; width: 190px; height: auto; }
.ft-tag { margin: 18px 0 0; max-width: 22em; font: 400 1.05rem/1.5 var(--sans); color: var(--muted); }
/* the tagline's "OnlyConversion." glows, softly breathing */
.ft-glow { position: relative; color: var(--gold); font-weight: 600; text-shadow: 0 0 14px rgba(240,169,46,.55), 0 0 30px rgba(205,168,95,.3); }
/* the breathing is a soft light behind the word that only fades (no layout work; an animated text-shadow re-laid the page every frame) */
.ft-glow::before { content: ""; position: absolute; inset: -.5em -.35em; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,169,46,.32), transparent); animation: ftGlow 3.2s ease-in-out infinite; }
@keyframes ftGlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ft-col h2 { margin: 0 0 16px; font: 600 .8rem/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--gold); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; color: #D9CFC2; }
.ft a { color: inherit; text-decoration: none; }
.ft-col a { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color .3s var(--ease), background-size .4s var(--ease); }
@media (hover: hover) { .ft-col a:hover { color: var(--gold); background-size: 100% 1px; } }
.ft-off { color: #8A7A69; cursor: default; }   /* Case studies: the page is not built yet, so not a link (11 Oct) */
.ft a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* the giant wordmark */
.ft-word { container-type: inline-size; margin: clamp(48px, 8vh, 90px) 0 clamp(18px, 3vh, 30px); overflow: hidden; }   /* the name is sized to its box (14.9cqw), so it always fits */
.ft-wi { display: flex; justify-content: center; font: 700 14.9cqw/.9 var(--serif); letter-spacing: -0.05em; white-space: nowrap; user-select: none; }
.ft-l { display: inline-block; color: var(--ink); }
.ft-l.gold { color: var(--gold); }

.ft-bot { display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.ft-bot p { margin: 0; }
.ft-legal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ft-legal > a:not(.ft-up) { transition: color .3s; } @media (hover: hover) { .ft-legal > a:not(.ft-up):hover { color: var(--gold); } }
/* Back to top: a dark pill that fills gold on hover; the arrow loops upward */
.ft-up { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 18px; border: 1px solid rgba(205,168,95,.5); border-radius: 99px; color: var(--ink); font-weight: 600; transition: color .3s var(--ease); }
.ft-up::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.ft-up svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .ft-up:hover { color: #17110E; } .ft-up:hover::before { transform: scaleY(1); } .ft-up:hover svg { animation: ftUp .9s var(--ease) infinite; } }
@keyframes ftUp { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-12px); opacity: 0; } 46% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* columns rise in */
.ft-top > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ft-top > :nth-child(2) { transition-delay: .08s; } .ft-top > :nth-child(3) { transition-delay: .16s; } .ft-top > :nth-child(4) { transition-delay: .24s; }
.ft.in .ft-top > * { opacity: 1; transform: none; }

/* ---------- Spotlight (g2, and h1–h6): an outlined name; a gold light follows the cursor and fills the letters ---------- */
.ft .ft-word { position: relative; }
.ft .ft-wi { color: transparent; -webkit-text-stroke: 1.5px rgba(205,168,95,.55); }
.ft .ft-l { color: transparent; }
.ft-fill { --mx: 50%; --my: 50%; --r: 0px; position: absolute; inset: 0; display: flex; justify-content: center; font: 700 14.9cqw/.9 var(--serif); letter-spacing: -0.05em; white-space: nowrap; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, transparent 100%); }
.ft .ft-fill .ft-l { color: #F1E9DE; } .ft .ft-fill .ft-l.gold { color: #CDA85F; }
.ft.in .ft-wi { animation: ftDraw 2.4s var(--ease) both; }
@keyframes ftDraw { from { -webkit-text-stroke-color: rgba(205,168,95,0); } }

/* ---------- Reveal the footer's contents start tucked up behind the section above (clipped by the
   footer's top edge) and slide down into place ---------- */
.ft .ft-wrap { transform: translateY(calc((1 - var(--p, 1)) * -34%)); will-change: transform; }
.ft .ft-wi { opacity: calc(.25 + var(--p, 1) * .75); }
.ft::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45), transparent); }

/* h5 Split: "Only" slides in from the left and "Conversion" from the right as the footer comes out; letters in the light lift */
.ft .ft-l { transform: translate(calc((1 - var(--p, 1)) * -38vw), calc(var(--lift, 0) * -1px)); transition: transform .35s var(--ease); }
.ft .ft-l.gold { transform: translate(calc((1 - var(--p, 1)) * 38vw), calc(var(--lift, 0) * -1px)); }
.ft .ft-word { overflow: hidden; }
@media (max-width: 860px) {
  .ft-top { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .ft-top { grid-template-columns: 1fr; } .ft-bot { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .ft *, .ft *::before, .ft *::after { animation: none !important; transition: none !important; }
  .ft-top > *, .ft .ft-l, .ft .ft-wrap { opacity: 1 !important; transform: none !important; }
}

/* touch screens: finger-sized links (11 Oct device test) */
@media (pointer: coarse) { .ft-col a, .ft-legal > a:not(.ft-up) { display: inline-block; padding: 8px 0; margin: -8px 0; } .ft-logo { padding: 10px 0; margin: -10px 0; } }