/* Self-contained styles for the Zelis Experience widget (no Tailwind / Next needed).
   Scoped tokens live on #zelis-root so they can't clash with the WP theme. */

/* Same family name the Lottie embeds ("Avenir Next LT Pro") — matches the approved build. The
   glyphs must be LOADED before Lottie lays out its live text, otherwise it measures against a
   wide system fallback and bakes crushed positions (see the font-ready wait in the widget). */
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Demi.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

#zelis-root {
  --zelis-ink-mist: #f7f6ff;
  --zelis-solar: #ffbe00;
  --font-avenir: "Avenir Next LT Pro", "Segoe UI", system-ui, sans-serif;
}

@keyframes scrollChevron {
  0%   { transform: translateY(-5px); opacity: 0.45; }
  50%  { transform: translateY(6px);  opacity: 1; }
  100% { transform: translateY(-5px); opacity: 0.45; }
}
#zelis-root .scroll-chevron {
  animation: scrollChevron 1.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  #zelis-root .scroll-chevron { animation: none; opacity: 0.85; }
}