/* ===========================================================================
   RELENTIX — site footer

   footer.js writes two layouts and this file shows one:

   - Computers and tablets (above 640px): one slim bar. Copyright on the left;
     Terms & Conditions, Privacy Policy, Instagram and Contact on the right.
   - Phones (640px and below): the sign-off. The mark beside "You name it,
     we build it.", three short groups of links (Explore, Legal, Follow), and
     the copyright on a hairline that runs out to the edge.

   Self-contained: each custom property carries a fallback, because the legal
   pages load fewer stylesheets than the home page. Selectors are scoped to
   `footer` so older `footer .f-*` rules elsewhere cannot reach this markup.
   =========================================================================== */

footer#footer{
  position:relative;
  display:block;
  background:
    radial-gradient(70% 160% at 85% 0%,rgba(0,163,255,.11),transparent 65%),
    radial-gradient(50% 160% at 5% 100%,rgba(171,0,162,.07),transparent 70%),
    var(--night,#020617);
  color:var(--night-text,#F8FAFC);
  padding:0;
  overflow:hidden;
}
footer#footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass,#00A3FF) 30%,var(--brass-2,#7CCBFF) 50%,var(--brass,#00A3FF) 70%,transparent);
  opacity:.8;
}
/* the legal pages never defined `.wrap`, so give the footer its own */
footer#footer .wrap{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}

/* which layout shows */
footer .ft-phone{display:none}
@media(max-width:640px){
  footer .ft-desk{display:none}
  footer .ft-phone{display:block}
  footer#footer{
    background:
      radial-gradient(70% 120% at 88% 0%,rgba(0,163,255,.10),transparent 65%),
      radial-gradient(50% 120% at 0% 100%,rgba(171,0,162,.08),transparent 70%),
      var(--night,#020617);
  }
  footer#footer::before{opacity:.7}
}

/* ========================================== computers and tablets: the bar */
footer .ft-desk .ft-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 32px;
  padding:clamp(26px,3vw,36px) 0;
}

footer .ft-desk .ft-brand{display:flex;align-items:center;gap:14px}
footer .ft-desk .ft-logo{
  display:block;flex:0 0 auto;line-height:0;border-radius:6px;
  transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1));
}
footer .ft-desk .ft-logo img{display:block;width:30px;height:30px;filter:drop-shadow(0 0 14px rgba(0,163,255,.35))}
footer .ft-desk .ft-logo:hover{transform:scale(1.06)}
footer .ft-desk .ft-logo:focus-visible{outline:2px solid var(--brass-2,#7CCBFF);outline-offset:4px}

/* The line sits under the word RELENTIX only, not under the copyright and
   year. It is pink and continuous; the beam and the breath on it are driven
   by src/footer-line.js (anime.js). `right` takes back the letter-spacing
   the last letter carries, so the line ends flush with the letter. */
footer .ft-desk .ft-word{position:relative;display:inline-block}
footer .ft-desk .ft-line{
  --glow:.5;
  position:absolute;left:0;right:.15em;bottom:-8px;
  display:block;height:2px;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,rgba(214,51,190,.45),#D633BE 25%,#D633BE 75%,rgba(214,51,190,.45));
  box-shadow:0 0 calc(var(--glow) * 12px) rgba(236,72,214,calc(var(--glow) * .55));
}
footer .ft-desk .ft-beam{
  position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,#FF7AE6 40%,#FFE3F8 55%,transparent);
  transform:translateX(-100%);will-change:transform;
}

footer .ft-desk .ft-copy{
  margin:0;
  font-family:var(--ff-mono,var(--mono,'JetBrains Mono',monospace));
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#DCE5F0;
}

/* the legal pages style a bare `nav`; keep the footer's own out of it */
footer .ft-desk .ft-links{
  position:static;transform:none;width:auto;max-width:none;height:auto;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;align-items:center;flex-wrap:wrap;
}
footer .ft-desk .ft-links a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;
  padding:0 clamp(12px,1.6vw,20px);
  font-family:var(--ff-mono,var(--mono,'JetBrains Mono',monospace));
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#DCE5F0;
  white-space:nowrap;text-decoration:none;
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
footer .ft-desk .ft-links a:first-child{padding-left:0}
footer .ft-desk .ft-links a:last-child{padding-right:0}
/* the hairline between items, drawn rather than typed */
footer .ft-desk .ft-links a+a::before{
  content:'';position:absolute;left:0;top:50%;
  width:1px;height:12px;transform:translateY(-50%);
  background:rgba(255,255,255,.32);
}
footer .ft-desk .ft-links a:hover{color:#fff}
footer .ft-desk .ft-links a:focus-visible{
  outline:2px solid var(--brass-2,#7CCBFF);outline-offset:4px;border-radius:2px;color:#fff;
}
footer .ft-desk .ft-links .ft-ig svg{
  width:16px;height:16px;display:block;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)),filter .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
footer .ft-desk .ft-links .ft-ig:hover,footer .ft-desk .ft-links .ft-ig:focus-visible{color:var(--c-brand-pink,#FFABEE)}
footer .ft-desk .ft-links .ft-ig:hover svg{filter:drop-shadow(0 0 8px rgba(255,171,238,.55))}
footer .ft-desk .ft-links .ft-ig:hover svg{transform:translateY(-1px) scale(1.08)}

@media(pointer:coarse){footer .ft-desk .ft-links a{min-height:44px}}
@media(prefers-reduced-motion:reduce){
  footer .ft-desk .ft-beam{display:none}
  footer .ft-desk .ft-links a,footer .ft-desk .ft-links .ft-ig svg{transition:none}
  footer .ft-desk .ft-links .ft-ig:hover svg{transform:none}
}


/* ================================================== phones: the sign-off */
/* ----------------------------------------------------------- 1. sign-off */
footer .ft-phone .ft-sign{
  display:flex;align-items:center;gap:clamp(16px,2vw,24px);
  padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);
}
footer .ft-phone .ft-logo{display:block;flex:0 0 auto;line-height:0;transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1))}
footer .ft-phone .ft-logo img{display:block;width:clamp(38px,4vw,48px);height:auto;filter:drop-shadow(0 0 16px rgba(0,163,255,.35))}
footer .ft-phone .ft-logo:hover{transform:scale(1.05)}
footer .ft-phone .ft-logo:focus-visible{outline:2px solid var(--brass-2,#7CCBFF);outline-offset:6px;border-radius:4px}
footer .ft-phone .ft-say{
  margin:0;
  font-family:var(--serif,'EB Garamond',Georgia,serif);font-weight:500;
  font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.01em;
  color:#F1F5F9;text-wrap:balance;
}
footer .ft-phone .ft-say em{font-style:normal;color:var(--c-brand-pink,#FFABEE)}

/* -------------------------------------------------------- 2. the groups */
footer .ft-phone .ft-cols{
  position:static;transform:none;width:auto;max-width:none;height:auto;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,max-content));
  column-gap:clamp(56px,9vw,140px);row-gap:32px;
  padding-bottom:clamp(44px,5.5vw,72px);
}
footer .ft-phone .ft-h{
  margin:0 0 14px;
  font-family:var(--disp,'Saira Condensed',sans-serif);font-weight:600;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-2,#7CCBFF);
}
footer .ft-phone .ft-col ul{list-style:none;margin:0;padding:0}
footer .ft-phone .ft-col li+li{margin-top:2px}
footer .ft-phone .ft-col a{
  position:relative;display:inline-flex;align-items:center;min-height:40px;
  font-family:var(--serif,'EB Garamond',Georgia,serif);font-weight:500;
  font-size:clamp(18px,1.4vw,20px);color:#CBD5E1;text-decoration:none;
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
/* a short ink stroke draws under the link on hover */
footer .ft-phone .ft-col a::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:1.5px;
  background:var(--c-brand-pink,#FFABEE);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1));
}
footer .ft-phone .ft-col a:hover,footer .ft-phone .ft-col a:focus-visible{color:#fff}
footer .ft-phone .ft-col a:hover::after,footer .ft-phone .ft-col a:focus-visible::after{transform:scaleX(1)}
footer .ft-phone .ft-col a:focus-visible{outline:2px solid var(--brass-2,#7CCBFF);outline-offset:4px;border-radius:2px}

/* ---------------------------------------------------- 3. copyright run */
footer .ft-phone .ft-base{
  display:flex;align-items:center;gap:20px;
  padding:22px 0 clamp(26px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.08);
}
footer .ft-phone .ft-copy{
  margin:0;flex:0 0 auto;
  font-family:var(--ff-mono,var(--mono,'JetBrains Mono',monospace));
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#DCE5F0;
}
/* the hairline that runs from the copyright out to the edge */
footer .ft-phone .ft-run{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(255,171,238,.45),rgba(0,163,255,.25) 40%,transparent);
}

/* The pink line sits under the word RELENTIX only. Its beam and breath are
   driven by src/footer-line.js (anime.js). `right` takes back the letter-
   spacing the last letter carries, so the line ends flush with the letter. */
footer .ft-phone .ft-word{position:relative;display:inline-block}
footer .ft-phone .ft-line{
  --glow:.5;
  position:absolute;left:0;right:.15em;bottom:-8px;
  display:block;height:2px;border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,rgba(214,51,190,.45),#D633BE 25%,#D633BE 75%,rgba(214,51,190,.45));
  box-shadow:0 0 calc(var(--glow) * 12px) rgba(236,72,214,calc(var(--glow) * .55));
}
footer .ft-phone .ft-beam{
  position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(90deg,transparent,#FF7AE6 40%,#FFE3F8 55%,transparent);
  transform:translateX(-100%);will-change:transform;
}

/* ------------------------------------------------------------- phones */
@media(max-width:640px){
  footer .ft-phone .ft-sign{flex-direction:column;align-items:flex-start;gap:18px;padding:56px 0 40px}
  footer .ft-phone .ft-say{font-size:clamp(30px,8.6vw,38px)}
  /* Explore and Legal side by side, Follow underneath */
  footer .ft-phone .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:28px;padding-bottom:40px}
  footer .ft-phone .ft-col a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  footer .ft-phone .ft-beam{display:none}
  footer .ft-phone .ft-col a,footer .ft-phone .ft-col a::after,footer .ft-phone .ft-logo{transition:none}
}