/* ==========================================================================
   Footer — brand block, 3 link columns, contact/newsletter, bottom bar.
   Darkest "floor" of the page: flatter and calmer than the content sections
   above it, closed off by a single brand-gradient hairline instead of the
   radial accent-spot treatment other sections use.
   ========================================================================== */

.footer {
  background: #040409;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  /* Contains the brand mark's decorative left-bleed (and anything else) so
     the footer never adds horizontal page overflow on narrow screens. clip
     (not hidden) so it never becomes a scroll container. Only the X axis is
     clipped — the CTA button's fire-hover Lottie bursts UPWARD past the
     footer's top edge and must stay visible, so Y is left visible. */
  overflow-x: clip;
  /* Nothing in the footer (links, brand mark, newsletter blurb, bottom bar)
     is selectable — it's all navigation/chrome, not readable content. */
  -webkit-user-select: none;
  user-select: none;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 42, 134, 0.5),
    rgba(255, 122, 26, 0.5),
    transparent
  );
}

.footer__top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-12) var(--container-pad) var(--space-10);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.1fr;
  gap: var(--space-16);
}

/* --- Brand column: the "R" mark is a plain SVG now (assets/logo/footer-
   letter.svg, Gl_03 kept and still ordered above Or 17) — extracted by
   rendering footer-logo-letter.json through lottie once (all its shapes
   are static, no keyframes) and serializing the resulting <svg>, since
   there's no reason to keep paying for JS-driven rendering of something
   that never animates. The 3-layer .footer__brand-eye overlay below sits
   on top of it in the same spot, doesn't replace it. Canvas is 1570x1850
   with the drawn shape inset from its edges (content box x:2-1558,
   y:28-1848, confirmed by rasterizing to a canvas and scanning for the
   real non-transparent bounding box) — .footer__brand-letter-inner is
   shifted by that offset. .footer__brand-letter's own position/size is
   confirmed correct (matches the nav columns' height) — leave it as is. */
.footer__brand {
  position: relative;
  /* Shifts the whole mark (letter + fire + eye, all positioned relative to
     this box) right as one unit — a transform rather than left/margin so
     it moves purely visually, without changing the grid track's own
     width or nudging the columns after it. Then grows the whole mark
     1.0467x (171.53x200.63px letter -> ~179.5x210px) — one scale on
     the shared parent rather than resizing the letter/fire/eye SVGs
     individually, so all three keep their exact relative alignment (the
     eye stays seated on the letter, footer-eye.js's cursor-tracking
     offsets scale right along with it since they're just inline
     transforms on descendants) with zero extra math. transform-origin
     top left + listing scale AFTER translate keeps the mark's own
     top-left corner pinned exactly where it already was — translate
     moves it in the *unscaled* parent's coordinate space, and growth
     then only extends right/down from that fixed corner. */
  transform: translateX(50px) scale(1.0467);
  transform-origin: top left;
}

.footer__brand-letter {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: visible;
  width: 171.54px;
  height: 200.64px;
}

.footer__brand-letter-inner {
  position: absolute;
  left: -0.22px;
  top: -3.09px;
  width: 173.08px;
  height: 203.95px;
}

.footer__brand-letter-inner img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Fire mark: sits behind the letter (comes first in the DOM, so it
   paints underneath with no z-index needed), scaled to the exact same
   px-per-source-unit ratio as the letter (0.110242 — letter's own
   203.95px-tall inner render / its 1850 canvas height) so the two read as
   part of one consistent piece of art rather than two arbitrarily-sized
   layers. Starting position: top-aligned, right edge flush with the
   letter's own right edge — a first guess pending manual nudging. */
.footer__brand-fire {
  position: absolute;
  left: -130.99px;
  top: -15px;
  width: 242.53px;
  height: 87.09px;
  pointer-events: none;
}

.footer__brand-fire svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Eye overlay: split into 3 independent plain SVGs (assets/logo/
   footer-eye-bg/-white/-pupil.svg — each just one of the original
   GL.json's Gl_03/Gl_01/Gl_02 layers, extracted by rendering GL.json
   through lottie once and serializing the resulting <svg> per layer,
   since none of the 3 have any actual keyframe animation — same shared
   471x471 canvas so they all land in the correct relative spot using the
   SAME box below). Split apart specifically so js/footer-eye.js can move
   -white and -pupil independently toward the cursor while -bg stays put.
   All 3 share this position/size (corrected against the letter's actual
   rendered Gl_03 group — see git history for the math — matched to
   within 0.01px). Stacking is plain DOM order (bg, then white, then
   pupil on top — no z-index needed), sitting between the fire and the
   letter (letter is the next sibling after these three and paints
   last). */
.footer__brand-eye {
  position: absolute;
  left: 43.96px;
  top: 35.92px;
  width: 51.92px;
  height: 51.92px;
  pointer-events: none;
}

.footer__brand-eye img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Link columns --- */

.footer__col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__col-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 500ms var(--ease-standard);
}

.footer__col-link:hover {
  color: var(--color-text);
}

.footer__col-static {
  font-size: 14px;
  color: var(--color-text-faint);
}

/* --- CTA column: same fire-burst button as the banner/roadmap CTAs,
   centered on the row's full height. --- */
.footer__col--cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* --- Bottom bar --- */

/* Full-bleed background + hairline (edge to edge of the section, not
   boxed to the container) — .footer__bottom-inner carries the usual
   max-width/centering for the actual content instead. */
.footer__bottom {
  background: #06060f;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__bottom-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: calc(var(--space-3) + 5px) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.footer__bottom-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-faint);
}

/* Legal links row in the bottom bar — sits between the copyright (left) and
   the social icons (right) on desktop; on tablet/mobile the bar becomes a
   centered column (column-reverse), so this lands in the middle, centered.
   Reachable from every page on every device (the bottom bar is the only
   footer part shown ≤1024). */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  font-size: 11px;
}

.footer__legal-link {
  color: var(--color-text-faint);
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__legal-link:hover {
  color: var(--color-text);
}

.footer__legal-sep {
  color: var(--color-border-strong);
}

/* --- Social icons: same "reel" hover as the studio's old site (01/Verstka:
   .social-block__link, a sprite whose background-position slides from a
   grey top half to a brighter bottom half on hover). Rebuilt here with two
   stacked inline SVGs (rest + hover) inside a fixed-height window instead
   of a sprite image file — .footer__social-link is the window
   (overflow:hidden), .footer__social-reel is the sliding strip, and
   hovering translates it up by exactly one icon's height so the faint grey
   icon slides out the top while a full-brightness one slides in from the
   bottom — brightness only, deliberately not the brand orange (that accent
   is reserved for actual calls to action elsewhere on the page). Guarded
   to hover-capable devices so touch screens land on the resting (grey)
   frame with no dead hover state. --- */
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer__social-link {
  display: block;
  width: 20px;
  height: 15px;
  overflow: hidden;
}

.footer__social-reel {
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease-standard);
}

.footer__social-icon {
  flex: 0 0 15px;
  width: 100%;
  height: 15px;
}

.footer__social-icon--rest {
  color: var(--color-text-faint);
}

.footer__social-icon--hover {
  color: var(--color-text);
}

@media (hover: hover) {
  .footer__social-link:hover .footer__social-reel {
    transform: translateY(-15px);
  }
}

/* Fallback for any reuse of .footer__social-link with a single bare <svg>
   (no reel) — e.g. the quote modal's own social row, which intentionally
   keeps its icons static (see the note on .quote-modal__socials-list in
   css/quote-modal.css): same sizing, but with nothing to slide to, hovering
   it is simply inert. */
.footer__social-link svg {
  width: 100%;
  height: 15px;
}

/* --- Responsive: tablet/mobile. Desktop keeps the FULL footer (brand mark,
   link columns, CTA). On tablet/mobile the whole top block is hidden and the
   footer is just the bottom bar (copyright + social), centred and stacked,
   with the reel hover dropped (no cursor) and larger icons. --- */
@media (max-width: 1024px) {
  .footer__top {
    display: none;
  }
  /* column-reverse: social icons on top, copyright text pinned at the very
     bottom (DOM order is text-then-social, so reversing the column stacks
     them the other way round without touching the markup). */
  .footer__bottom-inner {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-5);
  }
  .footer__social {
    justify-content: center;
    gap: var(--space-6);
  }
  /* Enlarged icons (base 20x15 -> 27x20). No reel slide here: the strip
     stays put so only the resting icon shows in the taller window, and
     that resting icon takes full brightness (nothing hovers to lift it). */
  .footer__social-link {
    width: 27px;
    height: 20px;
  }
  .footer__social-icon {
    flex-basis: 20px;
    height: 20px;
  }
  .footer__social-link svg {
    height: 20px;
  }
  .footer__social-reel {
    transform: none !important;
    transition: none;
  }
  .footer__social-icon--rest {
    color: var(--color-text);
  }
}

/* Custom (uploaded) social icons — appended after the default animated set
   (added via the home page → "Спільне: шапка і футер" → Соцмережі — свої). */
.footer__social-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  opacity: 0.72;
  transition: opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.footer__social-link:hover .footer__social-img {
  opacity: 1;
  transform: translateY(-2px);
}
.footer__social-txt {
  font-size: 12px;
  font-weight: 700;
}