/* selr-footer-nav.css — hover motion for the footer nav items that
 * selr-footer-nav.js clones in (Home, Workshops, Services, What's On).
 *
 * The template's originals roll via Framer's React state, which clones don't
 * receive, so the same motion is replayed here in CSS. Numbers are the
 * measured ones the svc footer replica uses (site/docs/footer-motion-measured.md):
 * .45s cubic-bezier(0.22,1,0.36,1), text out at translateY(-110%) rotate(13deg),
 * text in from translateY(110%) rotate(-13deg), purple pill fades in, dot to white.
 * Inline styles from the clone are beaten with !important.
 */
/* Framer sizes the originals' 1x1 "Hover BG" from its hover variant at
 * runtime; the clones never get that, so size the pill here instead —
 * the real footer's measured geometry: item box +19px left / +11px right,
 * radius 30 (same numbers the svc replica uses). */
[data-selr-fnav] a {
  position: relative;
}
[data-selr-fnav] [data-framer-name="Hover BG"] {
  position: absolute !important;
  inset: -1px -11px -1px -19px !important;
  width: auto !important;
  height: auto !important;
  z-index: 0;
  transition: opacity 0.3s ease;
}
[data-selr-fnav] [data-framer-name="Dot"],
[data-selr-fnav] [data-framer-name="Text"] {
  position: relative;
  z-index: 1;
}
[data-selr-fnav] [data-framer-name="Dot"] {
  transition: background-color 0.3s ease;
}
[data-selr-fnav] [data-framer-name="Top"],
[data-selr-fnav] [data-framer-name="Bottom"] {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Framer parks the original's "Bottom" layer below the clipped Text window
 * with an inline top offset; pin the clone's copy to the window itself and
 * drive the roll purely with transforms so hover can bring it home. */
[data-selr-fnav] [data-framer-name="Bottom"] {
  top: 0 !important;
  left: 0 !important;
  transform: translateY(110%) rotate(-13deg) !important;
  transform-origin: 0 100%;
  opacity: 0 !important;
}
[data-selr-fnav] a:hover [data-framer-name="Hover BG"],
[data-selr-fnav] a:focus-visible [data-framer-name="Hover BG"] {
  opacity: 1 !important;
}
[data-selr-fnav] a:hover [data-framer-name="Dot"],
[data-selr-fnav] a:focus-visible [data-framer-name="Dot"] {
  background-color: rgb(255, 255, 255) !important;
}
[data-selr-fnav] a:hover [data-framer-name="Top"],
[data-selr-fnav] a:focus-visible [data-framer-name="Top"] {
  opacity: 0 !important;
  transform: translateY(-110%) rotate(13deg) !important;
}
[data-selr-fnav] a:hover [data-framer-name="Bottom"],
[data-selr-fnav] a:focus-visible [data-framer-name="Bottom"] {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-selr-fnav] [data-framer-name="Hover BG"],
  [data-selr-fnav] [data-framer-name="Dot"],
  [data-selr-fnav] [data-framer-name="Top"],
  [data-selr-fnav] [data-framer-name="Bottom"] {
    transition: none;
  }
}