/* ==========================================================================
   Footer — Figma 661:776 (desktop) / 3190:9687 (mobile)
   ========================================================================== */

.site-footer {
  position: relative;
  background-color: #0E0F17;   /* Figma 6493:8237, sampled out of the frame */
  padding-block: var(--space-60) 40px;
}
/* Content rides above the decorative layer below. */
/* .container carries a 50px bottom padding site-wide; the footer sets its own
   padding-block, so zero it here rather than stacking the two. */
.site-footer > .container { position: relative; z-index: 1; padding-bottom: 0; }

/* ── Decorative background (Figma 6101:8319) ───────────────────────────────
   A 671px band clipped to the footer's top. The afterglow starts 357px ABOVE
   that edge, so only its lower fade shows — which is what gives the top of the
   footer its violet wash. Figma states layer blur as the diameter; CSS blur()
   takes the radius, hence half the number. */
/* Covers the whole footer, not Figma's 671px band: the glows below are pinned
   with their own top values so they sit where the design puts them either way,
   while the wordmark is bottom-anchored and must meet the footer's real bottom
   edge — a fixed-height band would leave it floating above it. */
.footer__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* The glows DRIFT toward the pointer (Kajsa 2026-10-12). Their left/top stay
   exactly where Figma pins them - that is the resting composition - and the
   movement is a transform on top, so nothing reflows and the design is still
   what you see with JS off.
   --px / --py are -1..1 from the footer centre, written by footer-glow.js.
   --depth differs per glow so they travel at different rates; that parallax
   is what reads as depth rather than one sheet of colour sliding about. */
.footer__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate3d(calc(var(--px, 0) * var(--depth, 60px)),
                         calc(var(--py, 0) * var(--depth, 60px)), 0);
  will-change: transform;
}
/* Nearest reads as moving most. The afterglow is the brightest and sits
   closest to the eye, so it leads; the faint right-hand wash trails. */
.footer__glow--afterglow { --depth: 120px; }
.footer__glow--left      { --depth: 60px; }
.footer__glow--right     { --depth: 165px; }



@media (prefers-reduced-motion: reduce) {
  .footer__glow { transform: none; }
}
/* closest-side: the gradient's radii are the box's half-width and half-height,
   which is exactly how Figma scales these ellipses. */
.footer__glow--afterglow {
  left: 130px; top: -357px; width: 1180px; height: 560px;
  background: radial-gradient(closest-side, rgba(242, 92, 209, 0.62), rgba(87, 71, 255, 0.22) 50%, rgba(87, 71, 255, 0) 100%);
  filter: blur(45px);
}
.footer__glow--left {
  left: -150px; top: 214px; width: 913px; height: 522px;
  background: radial-gradient(closest-side, rgba(255, 191, 235, 0.08), rgba(199, 158, 255, 0.035) 55%, rgba(199, 158, 255, 0) 100%);
  filter: blur(45px);
}
.footer__glow--right {
  left: 690px; top: 251px; width: 900px; height: 520px;
  background: radial-gradient(closest-side, rgba(229, 194, 255, 0.16), rgba(107, 77, 255, 0.05) 50%, rgba(107, 77, 255, 0) 100%);
  filter: blur(43px);
}
/* -- The light ---------------------------------------------------------
   A Bunny-hosted neon-rings loop sitting UNDER the frosted sheet.
   The film fills the WIDTH and nothing else: width 100% of a layer that is
   exactly the footer (so 100vw), height the 16:9 that follows from it, pinned
   to the BOTTOM so the surplus spills over the top and the overflow clips it.
   Covering the footer instead was the mistake: a cover formula sizes the film
   to the larger of the box and its 16:9, which on a 375x1249 phone footer
   meant a 2665px-wide iframe - the film zoomed 5.9x, i.e. one ring filling the
   screen. Fitting the width zooms it 1x at every size. Where the film stops,
   the gap reads as more dark footer: the footage is on near-black, so there is
   no letterbox to see. And the bottom is the half that matters, because that
   is where the letter holes are. */
.footer__light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* isolation: isolate is LOAD-BEARING, not tidiness. video-player.css gives
     the poster z-index: 1, and this layer used to carry a translate3d for the
     pointer glow - which created a stacking context and kept that z-index
     contained. When the transform came off (the film is exactly 100vw now, so
     it cannot be moved sideways), the poster escaped into the parent context
     and painted ABOVE .footer__frost: raw thumbnail, no blur, no letter holes,
     until the player started and the poster faded. Exactly the symptom.
     isolate re-creates the context without re-adding a transform. */
  isolation: isolate;
  pointer-events: none;
}
.footer__video {
  position: absolute;
  inset: 0;
}
/* The poster is an <img>, so object-fit does the covering - but it has to be
   laid out exactly like the iframe it stands in for, or the handover from
   poster to player would visibly jump. */
/* .js-lazy-embed .stream-embed__poster in video-player.css is ALSO (0,2,0) and
   loads after this file, so it won the tie: the poster was laid out inset:0 at
   full footer height while the iframe is a 16:9 slab at the bottom. The
   thumbnail therefore filled the whole footer and then SNAPPED to the slab the
   moment the player took over. Naming .footer__video too lifts this to (0,3,0)
   so the two always share one geometry. */
.footer__light .footer__video .stream-embed__poster,
.footer__light .footer__video .stream-embed__mp4,
.footer__light iframe {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 56.25vw;   /* 16:9 of 100vw - the film is never scaled, only clipped */
  border: 0;
}
.footer__light .footer__video .stream-embed__poster,
.footer__light .footer__video .stream-embed__mp4 { object-fit: cover; object-position: 50% 100%; }

/* -- The frosted sheet --------------------------------------------------
   Figma 6493:8237 draws the wordmark as an "Exclude" boolean: the footer
   rectangle MINUS the letterforms, filled #1C1B1F at 50% with a 50px
   backdrop blur. So the letters are HOLES. Everywhere the sheet covers, the
   light below is dimmed and blurred; through the holes it arrives sharp and
   at full strength. That is what makes the letters glow with crisp edges -
   there is no 3D geometry anywhere in this.
   The mask SVG is the exact Exclude path exported from that node, refilled
   white and opaque so the mask is binary and the opacity is controlled here.
   preserveAspectRatio="none" on it is load-bearing: the footer is not 1440
   wide at every size and the shape has to stretch with it. */
.footer__frost {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 31, 0.5);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  /* TWO mask layers, subtracted - not the single stretched Exclude shape.
     That shape is 1440x735, and mask-size: 100% 100% stretches it to whatever
     the footer actually is. At 1440 that was a harmless 1% but on a 375x1249
     phone footer it works out at 0.26x across and 1.7x down - a 6.5x
     distortion, with the letters drawn tall and thin. Measured, not guessed.
     So: a plain full-cover rectangle, MINUS the letters as their own layer
     at their own aspect, bottom-anchored exactly as the old wordmark img was
     (width 100%, height auto). The holes now keep their proportions at every
     width, and the frost still covers the whole footer. */
  -webkit-mask-image: linear-gradient(#000, #000), url("../../images/footer-letters-mask.svg");
          mask-image: linear-gradient(#000, #000), url("../../images/footer-letters-mask.svg");
  -webkit-mask-size: 100% 100%, 100% auto;
          mask-size: 100% 100%, 100% auto;
  -webkit-mask-position: 0 0, left bottom;
          mask-position: 0 0, left bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  /* xor is the WebKit spelling of what the standard calls subtract. */
  -webkit-mask-composite: xor;
          mask-composite: subtract;
  pointer-events: none;
}

/* The wordmark carries its own 7.5% opacity inside the SVG. */
.footer__wordmark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Each row: label far left, content far right; 90px between rows (Figma),
   no dividers */
.footer__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}
.footer__row + .footer__row { margin-top: 90px; }

.footer__row-label {
  font-size: 24px;
  line-height: 36px;
  font-weight: 400;
  color: var(--text-light);
  flex-shrink: 0;
  width: 150px;
}

.footer__row-content {
  margin-left: auto;
  display: flex;
  gap: 24px;
}

/* Offices */
.footer__office-city {
  font-size: 18px;
  line-height: 36px;
  color: var(--text-light);
  margin-bottom: 24px;
}
.footer__office-address {
  font-size: 16px;
  line-height: var(--body-sm-lh);
  color: var(--text-muted);
}

/* Links — Figma spreads the columns 106px apart, which is what pushes the block
   left to where the design has it. Offices and Socials keep the 24px default. */
.footer__links { gap: 106px; }

/* Links — group: heading 18/36, 12px gap, items 14/24 */
.footer__link-col { display: flex; flex-direction: column; gap: 12px; }

.footer__link-heading {
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  color: #fff;
}
.footer__link-col ul { list-style: none; display: flex; flex-direction: column; gap: 0; }
.footer__link-col ul a {
  font-size: var(--body-xs);
  font-weight: 400;
  line-height: 24px;
  color: #C0C0C0;
  transition: color 0.2s;
}
.footer__link-col ul a:hover { color: #fff; }

/* Primary solo links (About Us, Career, Contact) — same size as headings.
   The wrapper is layout-transparent on desktop; on mobile it turns into a
   stacked group (see the mobile block below). */
.footer__links-primary { display: contents; }
.footer__link-col--primary { gap: 0; }
.footer__link-col--primary a {
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  color: #fff;
}
.footer__link-col--primary a:hover { color: #C0C0C0; }

/* A link name never breaks over two lines ("About / us" on narrower screens). */
.footer__link-heading,
.footer__link-col--primary a,
.footer__link-col ul a { white-space: nowrap; }

/* Between phone and wide desktop the 106px column gap leaves the names no room. */
@media (min-width: 768px) and (max-width: 1279px) {
  .footer__links { gap: clamp(28px, 4vw, 106px); }
}

/* Socials */
.footer__socials { display: flex; gap: 24px; }
.footer__socials a {
  font-size: 18px;
  line-height: 36px;
  color: var(--text-light);
  transition: color 0.2s;
}
.footer__socials a:hover { color: var(--text-muted); }

/* Bottom block (Figma 661:742): badge right-aligned, 32px, then legal bar */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}
.footer__google-partner { align-self: flex-end; }
.footer__google-partner-badge { width: 56px; height: auto; }

.footer__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--body-xs);      /* Figma: Body/XS 14/22, -1% */
  line-height: var(--body-xs-lh);
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
/* Figma: the two legal links sit spread in a 479px space-between box */
.footer__legal {
  display: flex;
  justify-content: space-between;
  width: 479px;
  max-width: 55%;
}
.footer__legal a { color: var(--text-muted); opacity: 0.8; transition: color 0.2s; }
.footer__legal a:hover { color: var(--text-light); }
.footer__copy { color: var(--text-muted); opacity: 0.8; }

/* Language switcher. Figma has no switcher for this footer, so it borrows the
   legal bar's own Body/XS type and sits as the middle item of that bar -
   space-between then places it on its own without a single width being set.
   NO separator slash between the two codes, deliberately: a separator drawn as
   a pseudo-element lives INSIDE one of the items and therefore inherits that
   item's opacity, so it would be bright next to the active language and dim
   next to the other. Two codes and a gap read quieter anyway. */
.footer__lang {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__lang-item {
  color: var(--text-muted);
  opacity: 0.5;
  transition: color 0.2s, opacity 0.2s;
}
.footer__lang-item.is-active { color: var(--text-light); opacity: 1; }
@media (hover: hover) {
  a.footer__lang-item:hover { color: var(--text-light); opacity: 1; }
}

/* ── Mobile (Figma 3190:9687) — stacked sections, 2-col groups ────────────── */
@media (max-width: 767px) {
  .site-footer { padding-block: 50px; }

  /* Section = label above content, 40px rhythm */
  .footer__row { flex-direction: column; gap: 40px; }
  .footer__row + .footer__row { margin-top: 40px; }

  .footer__row-label { width: auto; }

  /* Content = 2-col grid: offices side by side, link groups 2-up */
  .footer__row-content {
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
    width: 100%;
  }

  /* About Us / Career / Contact — one stacked group */
  .footer__links-primary {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Socials stack vertically (display:flex — the generic row-content rule
     above turns containers into 2-col grids, which must not apply here) */
  .footer__row--socials { align-items: flex-start; }
  .footer__socials { display: flex; flex-direction: column; gap: 24px; }

  /* Bottom block: badge stays right; legal becomes a left-aligned stack */
  .footer__bottom { margin-top: 40px; }
  .footer__bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer__legal { flex-direction: column; gap: 10px; width: auto; max-width: none; }
}