/* ==========================================================================
   Footer — the emblem (silver mark + wordmark), the CTA and the bottom bar.
   js/footer.js drives the scroll-linked variables:
     --sunrise        0..1 warm glow strength
     --glow-y/rx/ry   glow position and size
     --footer-emblem  0..1 the mark rises, sharpens and lights up
     --footer-word    0..1 the wordmark follows
     --footer-meta    0..1 opacity of the CTA and the bottom bar
   The orbiting light and the sheen over the metal are CSS animations.
   ========================================================================== */
.home-footer {
  --sunrise: 0;
  --footer-emblem: 0;
  --footer-word: 0;
  --footer-meta: 0;
  --glow-y: 82%;
  --glow-rx: 38%;
  --glow-ry: 28%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.home-footer__stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  overflow: visible;
  padding: 0 1.5rem 1.5rem;
  position: relative;
  z-index: 1;
}

/* warm radial glow rising behind the lockup */
.home-footer__glow {
  bottom: 0;
  height: 100%;
  left: 0;
  mask-image: linear-gradient(0deg, #000 0, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000 0, #000 58%, transparent);
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 0;
}

.home-footer__glow-wash {
  background: radial-gradient(ellipse var(--glow-rx) var(--glow-ry) at 50% var(--glow-y), rgb(255 224 170 / calc(.22 + var(--sunrise) * .28)) 0, rgb(170 110 35 / calc(.1 + var(--sunrise) * .14)) 42%, rgb(120 72 22 / calc(.04 + var(--sunrise) * .08)) 68%, transparent 100%);
  bottom: -18%;
  filter: blur(calc(32px + var(--sunrise) * 10px));
  height: 140%;
  left: -12%;
  position: absolute;
  right: -12%;
}

.home-footer__lockup {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 844px;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Emblem — the silver mark, a warm halo behind it, a thin orbiting light and a
   sheen that sweeps over the metal (masked by the mark itself)
   -------------------------------------------------------------------------- */
.home-footer__emblem {
  --emblem: var(--footer-emblem);
  --emblem-size: 190px;
  aspect-ratio: 1;
  isolation: isolate;
  position: relative;
  width: var(--emblem-size);
}

.home-footer__halo {
  background: radial-gradient(circle at 50% 50%, rgb(255 224 170 / .5) 0%, rgb(255 193 126 / .26) 26%, rgb(170 110 35 / .1) 50%, transparent 68%);
  border-radius: 50%;
  filter: blur(18px);
  inset: -34%;
  opacity: calc(var(--emblem) * (.5 + var(--sunrise) * .5));
  pointer-events: none;
  position: absolute;
  transform: scale(calc(.78 + var(--emblem) * .22));
  z-index: 0;
}

.home-footer__mark {
  display: block;
  filter: blur(calc((1 - var(--emblem)) * 10px)) drop-shadow(0 22px 44px rgb(0 0 0 / .5));
  height: 100%;
  opacity: var(--emblem);
  position: relative;
  transform: translate3d(0, calc((1 - var(--emblem)) * 2.75rem), 0) scale(calc(.84 + var(--emblem) * .16));
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  will-change: transform, opacity, filter;
  z-index: 2;
}

/* thin ring hugging the mark; a warm highlight travels around it */
.home-footer__orbit {
  border-radius: 50%;
  inset: 3.5%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(var(--emblem) * .95);
  overflow: hidden;
  padding: 1.5px;
  pointer-events: none;
  position: absolute;
  transform: scale(calc(.84 + var(--emblem) * .16));
  z-index: 1;
}

.home-footer__orbit-spin {
  animation: home-footer-orbit 14s linear infinite;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 205deg, rgb(255 193 126 / 0) 228deg, rgb(255 193 126 / .55) 272deg, #fff 306deg, rgb(255 193 126 / .55) 338deg, transparent 1turn);
  filter: blur(1.2px);
  left: 50%;
  position: absolute;
  top: 50%;
  width: 140%;
  will-change: transform;
}

@keyframes home-footer-orbit {
  0% { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* light band sweeping across the metal every few seconds */
.home-footer__sheen {
  animation: home-footer-sheen 7.5s cubic-bezier(.45, .05, .55, .95) infinite;
  background: linear-gradient(112deg, transparent 40%, rgb(255 248 238 / 0) 44%, rgb(255 248 238 / .85) 50%, rgb(255 248 238 / 0) 56%, transparent 60%);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 260% 100%;
  inset: 0;
  mask: url(../assets/images/logos/verati-mark-silver-800.webp) center / 100% 100% no-repeat;
  -webkit-mask: url(../assets/images/logos/verati-mark-silver-800.webp) center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  opacity: var(--emblem);
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, calc((1 - var(--emblem)) * 2.75rem), 0) scale(calc(.84 + var(--emblem) * .16));
  z-index: 3;
}

@keyframes home-footer-sheen {
  0% { background-position: 100% 0; }
  38% { background-position: 0% 0; }
  to { background-position: 0% 0; }
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.home-footer__wordmark {
  --word: var(--footer-word);
  display: block;
  filter: blur(calc((1 - var(--word)) * 6px)) drop-shadow(0 0 22px rgb(255 239 225 / .22));
  height: auto;
  margin: 1.75rem auto 0;
  opacity: var(--word);
  transform: translate3d(0, calc((1 - var(--word)) * 1rem), 0) scale(calc(.96 + var(--word) * .04));
  user-select: none;
  -webkit-user-select: none;
  width: min(100%, 250px);
  will-change: transform, opacity, filter;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.home-footer__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
  opacity: var(--footer-meta);
  overflow: visible;
  pointer-events: auto;
  transform: translateY(calc((1 - var(--footer-meta)) * 12px));
}

.home-footer__cta-wrap {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  isolation: isolate;
  justify-content: center;
  overflow: visible;
  position: relative;
  width: fit-content;
}

.home-footer__cta-wrap::before {
  background: #ffc17e38;
  border-radius: inherit;
  content: "";
  filter: blur(14px);
  inset: -6px;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.home-footer__cta-wrap .home-apply-pill {
  position: relative;
  z-index: 1;
}

.home-footer__cta-glow {
  border-radius: inherit;
  filter: drop-shadow(0 0 4px rgb(255 210 150 / .55)) drop-shadow(0 0 10px rgb(255 193 126 / .32));
  inset: -2px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  overflow: hidden;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.home-footer__cta-glow-spin {
  animation: home-footer-cta-spin 11s linear infinite;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 175deg, rgba(255, 193, 126, 0) 210deg, rgba(255, 193, 126, .7) 255deg, #fff 300deg, rgba(255, 220, 180, .9) 328deg, rgba(255, 193, 126, .65) 348deg, transparent 1turn);
  filter: blur(7px);
  left: 50%;
  position: absolute;
  top: 50%;
  width: 260%;
  will-change: transform;
}

@keyframes home-footer-cta-spin {
  0% { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* --------------------------------------------------------------------------
   Bottom bar (shared styles in footer-bar.css) — transparent on the home page
   and faded in together with the CTA
   -------------------------------------------------------------------------- */
.home-footer .home-footer-bar {
  background: transparent;
  border-top: none;
  opacity: var(--footer-meta);
  transform: translateY(calc((1 - var(--footer-meta)) * 12px));
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-footer__stage {
    padding: 0 6.25rem 3.5rem;
  }

  .home-footer__emblem {
    --emblem-size: clamp(260px, 24vw, 340px);
  }

  .home-footer__wordmark {
    margin-top: 2.25rem;
    width: min(100%, 420px);
  }

  .home-footer__cta {
    margin-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-footer__mark,
  .home-footer__wordmark {
    filter: none;
    transform: none;
  }

  .home-footer__orbit-spin,
  .home-footer__sheen,
  .home-footer__cta-glow-spin {
    animation: none;
  }

  .home-footer__sheen {
    display: none;
  }
}