/* =============================================================
   HZL Microsite — Section 20: Footer
   Layout reference: 21st.dev / nurui hover-footer
   ─────────────────────────────────────────────────────────────
   • 4-column grid: Brand · Quick Links · Reports · Connect
   • Bottom bar: copyright · legal · green-hosting badge
   • Signature hover-text: giant "HZL" SVG at bottom
     – 3 SVG text layers (outline / stroke-draw / cursor-gradient)
     – Cursor-tracked radialGradient via JS
     – Stroke draw-on animation via CSS keyframe
   ============================================================= */

/* ── Section shell ──────────────────────────────────────────── */
.ft {
  position: relative;
  background: var(--navy-900);
  overflow: clip;
  border-top: 1px solid rgba(255,255,255,0.045);
}

/* ════════════════════════════════════════════════════════════
   BACKGROUND
   ════════════════════════════════════════════════════════════ */
.ft__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ft__bg-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(
    ellipse 70% 60% at 50% 100%,
    rgba(127,185,66,0.065) 0%,
    rgba(127,185,66,0.018) 50%,
    transparent 70%
  );
  filter: blur(50px);
}

.ft__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════
   INNER WRAPPER
   ════════════════════════════════════════════════════════════ */
.ft__inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5.5rem clamp(2rem,5vw,5rem) 3rem;
}

/* ════════════════════════════════════════════════════════════
   GRID — 4 columns on desktop
   ════════════════════════════════════════════════════════════ */
.ft__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  padding-bottom: 3.5rem;
}

/* ── Brand column ───────────────────────────────────────────── */

/* Logo pair — Vedanta + separator + HZL (mirrors header) */
.ft__logos {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.ft__logo-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.14);
  flex-shrink: 0;
}

.ft__logo-link {
  display: inline-flex;
  align-items: center;
}

.ft__logo {
  height: auto;
  width: auto;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}
.ft__logo--vedanta { height: 22px; }
.ft__logo--hzl     { height: 34px; }

.ft__logo-link:hover .ft__logo {
  opacity: 1;
}

.ft__tagline {
  font-family: var(--font-display);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7fb942;
  margin: 0 0 0.70rem;
  line-height: 1.3;
}

.ft__desc {
  font-family: var(--font-body);
  font-size: 0.80rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.40);
  margin: 0 0 1.4rem;
  max-width: 280px;
}

/* Green badge */
.ft__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.85em;
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(127,185,66,0.85);
  border: 1px solid rgba(127,185,66,0.22);
  border-radius: 100px;
  background: rgba(127,185,66,0.06);
}

/* ── Column heading ─────────────────────────────────────────── */
.ft__col-title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  margin: 0 0 1.5rem;
  line-height: 1;
}

/* ── Link lists ─────────────────────────────────────────────── */
.ft__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
}

.ft__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.44);
  text-decoration: none;
  transition: color 0.22s ease, gap 0.22s ease;
}
.ft__link:hover {
  color: rgba(255,255,255,0.90);
  gap: 0.70em;
}

/* Download icon links */
.ft__link--dl svg {
  flex-shrink: 0;
  color: rgba(127,185,66,0.60);
  transition: color 0.22s ease;
}
.ft__link--dl:hover svg {
  color: #7fb942;
}

/* ── Contact / Connect column ───────────────────────────────── */
.ft__contact {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
}

.ft__contact li {
  display: flex;
  align-items: center;
  gap: 0.65em;
}

.ft__contact-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #7fb942;
  opacity: 0.75;
}

.ft__contact a,
.ft__contact span {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.44);
  text-decoration: none;
  transition: color 0.22s ease;
}
.ft__contact a:hover { color: rgba(255,255,255,0.90); }

/* Social icon row */
.ft__social-row {
  display: flex;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.ft__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.40);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    color        0.25s ease,
    background   0.25s ease,
    transform    0.25s ease;
}
.ft__social-btn:hover {
  border-color: rgba(127,185,66,0.45);
  color: #7fb942;
  background: rgba(127,185,66,0.07);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════════════════════ */
.ft__divider {
  height: 1px;
  background: rgba(255,255,255,0.055);
  margin: 0 0 2rem;
}

/* ════════════════════════════════════════════════════════════
   BOTTOM BAR
   ════════════════════════════════════════════════════════════ */
.ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ft__copy {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.28);
  margin: 0;
  line-height: 1.5;
}

.ft__legal {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.ft__legal-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.22s ease;
}
.ft__legal-link:hover { color: rgba(255,255,255,0.72); }

.ft__green-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(127,185,66,0.70);
}

.ft__green-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fb942;
  box-shadow: 0 0 6px rgba(127,185,66,0.80);
  animation: ftGreenPulse 2.2s ease-in-out infinite;
}

@keyframes ftGreenPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.55; transform: scale(0.80); }
}

/* ════════════════════════════════════════════════════════════
   HOVER TEXT — giant "HZL" SVG at bottom
   Reference: nurui TextHoverEffect (ported to vanilla)
   ════════════════════════════════════════════════════════════ */
.ft__hover-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Negative margin so bottom of text bleeds off like the reference */
  margin-top: -1.5rem;
  margin-bottom: -2rem;
  pointer-events: none;
  user-select: none;
}

.ft__hover-svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: all;
  cursor: default;
}

/* ── SVG text base ───────────────────────────────────────────── */
.ft__text {
  font-family: var(--font-display), 'Barlow Condensed', 'Arial Black', sans-serif;
  font-size: 96px;  /* SVG units within viewBox 900×130 */
  letter-spacing: 0.02em;
}

/* ── SVG text layers ─────────────────────────────────────────── */

/* Layer 1: faint outline — fades in on hover */
.ft__text--outline {
  fill: transparent;
  stroke: rgba(255,255,255,0.09);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ft__hover-svg:hover .ft__text--outline,
.ft__hover-svg.is-hovered .ft__text--outline {
  opacity: 1;
}

/* Layer 2: green stroke draw-on (plays once on viewport entry) */
.ft__text--draw {
  fill: transparent;
  stroke: rgba(127,185,66,0.55);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.ft__hover-svg.is-visible .ft__text--draw {
  animation: ftStrokeDraw 5s ease-in-out forwards;
}

@keyframes ftStrokeDraw {
  from { stroke-dashoffset: 2000; }
  to   { stroke-dashoffset: 0; }
}

/* Layer 3: cursor-tracked rainbow gradient — JS updates cx/cy */
.ft__text--gradient {
  fill: transparent;
  /* stroke set inline via SVG url(#ft-grad); mask clips to cursor area */
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ft__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .ft__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .ft__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ft__col--brand { grid-column: auto; }

  .ft__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Hide hover SVG on mobile (too small to be meaningful) */
  .ft__hover-wrap { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ft__text--draw  { animation: none; stroke-dashoffset: 0; }
  .ft__green-dot   { animation: none; }
  .ft__social-btn  { transition: none; }
}