/* ---------- end section (footer) — shared by every page that scrolls down to it ---------- */
.ft {
  position: relative;
  height: 538px;
  background: #000;
  overflow: hidden;
  color: #fff;
}

/* left: avatar + "Ready to start with your launch project?" + button (Figma export) */
.ft-desc { position: absolute; left: 71px; top: 50px; width: 342px; height: 300px; }
.ft-desc > .ft-text { position: absolute; inset: 0; width: 100%; height: 100%; }
.ft-avatar { position: absolute; left: 6px; top: 0; width: 87px; height: 86px; object-fit: contain; }
.ft-cta {
  position: absolute;
  left: 6px;
  top: 233px;
  width: 184px;
  height: 48px;
  border-radius: 24px;
  transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.45s cubic-bezier(.34, 1.56, .64, 1);
}
.ft-cta:hover { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 26px rgba(255, 255, 255, 0.08); transform: translateY(-1px); }

/* right: socials (Figma export, split so each icon is its own link) */
.ft-socials { position: absolute; right: 69px; top: 112px; width: 255px; height: 314px; scale: 0.8; transform-origin: 100% 40%; }
.ft-social { position: absolute; display: block; transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1); }
.ft-social img { display: block; width: 100%; height: 100%; }
.ft-social:hover { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
.ft-tg { left: -3px;  top: -3px;  width: 133px; height: 167px; }
.ft-x  { left: 126px; top: 43px;  width: 113px; height: 143px; }
.ft-ig { left: 61px;  top: 182px; width: 194px; height: 133px; }

/* centre: the big OLY. It "drops in" while you scroll down: starts bigger, heavier and higher,
   and settles into the thin footer OLY (--q: 0 → 1, set by footer.js) */
.ft-oly { position: absolute; left: calc(50% - 416.5px); top: 149px; width: 833px; height: 389px; }   /* data-trail: blur trail on hover (/trail.js) */
.ft-oly svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform-origin: 50% 100%; }

.ft-copy { position: absolute; left: calc(50% - 64.5px); top: 497px; width: 129px; height: 15px; mix-blend-mode: difference; }   /* stays readable over the white OLY */

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .ft { height: auto; min-height: 0; padding: 30px 20px calc(92vw * 389 / 833 + 60px); margin: 0 -16px; width: 100vw; }   /* room for the big OLY at the bottom, with a clear gap above it */
  .ft-desc { position: relative; left: auto; top: auto; width: 100%; max-width: 342px; height: 380px; }
  /* the text + button sit lower: the same ~80px gap under the avatar / socials row as above the big OLY */
  .ft-desc > .ft-text, .ft-title, .ft-cta { translate: 0 75px; }
  .ft-desc > .ft-text { bottom: auto; height: auto; aspect-ratio: 342 / 300; }   /* keep the button where it is under the text (the box itself is taller now) */
  /* the button: same size, font and padding as "Request a project" in the home hero (the drawn one hides) */
  .ft-desc > .ft-text { visibility: hidden; }
  .ft-cta {
    width: auto; height: 44px; padding: 0 20px; border-radius: 22px; display: inline-flex; align-items: center;
    font-family: var(--font); font-size: 15.5px; font-weight: 500; letter-spacing: -0.02em; color: #fff; text-decoration: none;
    background: #1b1b1d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  /* socials: small, on the far right, in line with the avatar; the text + button sit under them */
  .ft-socials { position: absolute; right: 20px; top: 22px; margin: 0; scale: 1; transform: scale(0.42); transform-origin: 100% 0; }
  .ft-oly { left: 50%; top: auto; bottom: calc(-38vw * 389 / 833); width: 130vw; height: calc(130vw * 389 / 833); margin-left: -65vw; }   /* bigger, same top edge as before; the footer cuts it off */
  .ft-copy { left: 50%; top: auto; bottom: 18px; width: 92px; height: 10.7px; margin-left: -46px; }   /* smaller on phones */
}

/* ---------- appear animations (start when the footer comes into view: .ft.is-in) ---------- */
/* left block: soft rise + blur, no bounce */
.ft-desc { opacity: 0; filter: blur(12px); translate: 0 26px; transition: opacity 1s ease, filter 1s ease, translate 1.1s cubic-bezier(.22, .8, .25, 1); }
.ft.is-in .ft-desc { opacity: 1; filter: none; translate: 0 0; transition-delay: 0.1s; }

/* socials: pop in one by one with a bounce and a blur */
.ft-social { opacity: 0; }
.ft.is-in .ft-social { animation: ft-pop 0.9s cubic-bezier(.34, 1.56, .64, 1) both; }
.ft.is-in .ft-tg { animation-delay: 0.25s; }
.ft.is-in .ft-x  { animation-delay: 0.4s; }
.ft.is-in .ft-ig { animation-delay: 0.55s; }
@keyframes ft-pop {
  0%   { opacity: 0; scale: 0.3; filter: blur(12px); }
  55%  { opacity: 1; scale: 1.1; filter: blur(0); }
  78%  { scale: 0.96; }
  100% { opacity: 1; scale: 1; filter: none; }
}
/* balloons: each icon floats gently on its own… */
.ft-social img { animation: ft-float 4.5s ease-in-out infinite alternate; }
.ft-tg img { animation-delay: -1.2s; }
.ft-x img  { animation-delay: -2.6s; animation-duration: 5.2s; }
.ft-ig img { animation-delay: -0.4s; animation-duration: 4s; }
@keyframes ft-float { from { translate: 0 -4px; rotate: -1.2deg; } to { translate: 0 5px; rotate: 1.4deg; } }
/* …and leans towards the cursor (transform set by footer.js) */
.ft-social { transition: none; }
.ft-social:hover { transform: none; }

/* © 2026 Creator Oly: soft "typing" — revealed left → right through a blurred edge */
.ft-copy {
  opacity: 0;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat;
          mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 260% 100% no-repeat;
  filter: blur(6px);
}
.ft.is-in .ft-copy { animation: ft-type 1.6s cubic-bezier(.3, .6, .3, 1) 0.8s forwards; }
@keyframes ft-type {
  0%   { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(6px); }
  100% { opacity: 1; -webkit-mask-position: 0 0;    mask-position: 0 0;    filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ft-desc, .ft-social, .ft-copy { opacity: 1 !important; filter: none !important; translate: none !important; animation: none !important; -webkit-mask: none; mask: none; }
  .ft-social img { animation: none; }
}

/* home: the artboard is a fixed-height stage, so the end section hangs right under it.
   No stacking context of its own: the black is painted underneath (z -1) so the hero OLY can
   slide down over it, while the footer content stays on top of the OLY. */
.ft-under { position: absolute; top: 100%; left: 0; right: 0; background: none; }
.ft-under::before { content: ''; position: absolute; inset: 0; background: #000; z-index: -1; }
.ft-under .ft-oly { display: none; }       /* the hero OLY becomes this one (see index.html) */
@media (max-width: 767px) {
  .ft-under { position: relative; top: auto; left: auto; right: auto; margin-top: 8px; background: #000; }
  .ft-under::before { content: none; }
  .ft-under .ft-oly { display: block; }
}

/* "Ready to start with your launch project?" — live text (split into letters by footer.js) so each
   letter pops up and turns CTA blue on hover, like the home headline */
.ft-title {
  position: absolute;
  left: 6px;
  top: 128px;
  margin: 0;
  font-family: var(--font);
  font-size: 36.5px;
  font-weight: 400;
  line-height: 41px;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  cursor: default;
}
.ft-title > span { display: block; }
.ft-title .ch { display: inline-block; transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), color 0.25s ease; }
.ft-title .ch:hover { transform: translateY(-2px) scale(1.18); color: var(--blue); transition-duration: 0.2s, 0.15s; }
@media (max-width: 767px) {
  .ft-title { font-size: calc(36.5px * var(--ft-k, 1)); line-height: calc(41px * var(--ft-k, 1)); }
}

/* hovering one social keeps it fully visible and dims the other two */
.ft-social img { transition: filter 0.3s ease; }
.ft-socials:has(.ft-social:hover) .ft-social:not(:hover) img { filter: brightness(0.4); }   /* dimmed, but still solid (not see-through) */
.ft-social:hover { z-index: 2; }   /* the hovered one comes to the front, so the dimmed ones never lie over it */

/* home: the footer box lies over the hero OLY that slid into it — let the pointer reach the OLY
   (for its blur trail) everywhere except on the footer's own content */
.ft-under { pointer-events: none; }
.ft-under > * { pointer-events: auto; }

/* footer off screen: the balloons stop floating */
.ft.is-away .ft-social img { animation-play-state: paused; }

/* phones: the black end section doesn't just sit there on load — it rises in like a curtain once it's on
   screen (.is-in from footer.js), its top corners rounding off as it comes up */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .ft {
    clip-path: inset(100% 0 0 0 round 40px 40px 0 0);
    transition: clip-path 1.1s cubic-bezier(.22, .9, .25, 1) 0.35s;   /* a beat after the page shows */
  }
  .ft.is-in { clip-path: inset(0 0 0 0 round 0 0 0 0); }
}

/* ---------- "Request a project" in the end section: liquid glass (liquid-glass.css / .js) ---------- */
/* the drawn button in the Figma text export is cut off; the real glass button (with its own label) sits there */
.ft-desc > .ft-text { clip-path: inset(0 0 24.4% 0); }
.ft-cta.liquid-glass {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 16.5px; font-weight: 500; letter-spacing: -0.02em; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
}
.ft-cta.liquid-glass:hover { background: rgba(255, 255, 255, 0.13); }
@media (max-width: 767px) {
  .ft-cta.liquid-glass { font-size: 15.5px; }
}