/*
 * Recreate Framer's hover interactions with pure CSS, for the static pages
 * (pricing, blog) that don't load Framer's JS bundle. Only linked from those
 * pages - the others use Framer's JS for the same effects.
 *
 *  - "Stagger Link" / "Stagger Button Text": two stacked text copies flip on hover.
 *  - Nav links ("Stagger Link"): text turns green on hover.
 *  - Outline buttons ("Dark"): fill teal + white text on hover.
 *  - Footer pills ("Link"): background lightens a little on hover.
 */

/* ---- Flip motion ---- */
[data-framer-name="Stagger Link"],
[data-framer-name="Stagger Button Text"] {
  position: relative;
  overflow: hidden;
}
[data-framer-name="Stagger Link"] > div,
[data-framer-name="Stagger Button Text"] > div {
  transition: transform 0.34s cubic-bezier(0.6, 0.05, 0.2, 0.95) !important;
}
/* second copy parked one full height below (fully clipped - no peeking) */
[data-framer-name="Stagger Link"] > div:last-child,
[data-framer-name="Stagger Button Text"] > div:last-child {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* override Framer's inline translateX(-50%) so the flip is purely vertical */
  transform: translateY(0) !important;
}
[data-framer-name="Stagger Link"]:hover > div,
[data-framer-name="Stagger Button Text"]:hover > div {
  transform: translateY(-100%) !important;
}

/* ---- Colors ---- */
/* Nav links → green on hover */
[data-framer-name="Stagger Link"]:hover p {
  color: rgb(0, 188, 114) !important;
}
/* Outline "Dark" buttons → fill teal + white text on hover */
[data-framer-name="Dark"] {
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}
[data-framer-name="Dark"]:hover {
  background-color: rgb(0, 188, 114) !important;
  border-color: rgb(0, 188, 114) !important;
}
[data-framer-name="Dark"]:hover p {
  color: #fff !important;
}
/* Footer pills ("Link") → lighten a little on hover */
[data-framer-name="Link"] {
  transition: background-color 0.3s ease !important;
}
[data-framer-name="Link"]:hover {
  background-color: rgb(14, 99, 98) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Stagger Link"] > div,
  [data-framer-name="Stagger Button Text"] > div {
    transition: none !important;
  }
}