/* =========================================================================
   Pamp — site-wide behaviour layer.
   The per-page stylesheets in /css/pages/ hold the layout exported from the
   original Framer build. This file adds what Framer did with its JS runtime:
   hover states, entrance/scroll reveals, the hide-on-scroll navbar and the
   mobile/tablet menu.
   Brand: #055146 (dark green) · #86D694 (green) · #C5FAD1 (mint)
   ========================================================================= */
:root {
  --pamp-dark: #055146;
  --pamp-green: #86d694;
  --pamp-mint: #c5fad1;
  --pamp-ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pamp-hover-dur: 0.3s;
}

/* ---------- Navbar: hide on scroll down, show on scroll up ---------- */
[data-pamp-nav] {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.45s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
[data-pamp-nav].pamp-nav-hidden {
  transform: translate3d(0, calc(-100% - 48px), 0); /* clear the nav + its drop shadow */
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.45, 1), opacity 0.4s ease 0.1s;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { [data-pamp-nav], [data-pamp-nav].pamp-nav-hidden { transition: opacity 0.2s linear; } }

/* Nav icon is a button now */
[data-pamp-menu-toggle] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-pamp-menu-toggle]:focus-visible { outline: 2px solid var(--pamp-mint); outline-offset: 2px; border-radius: 50%; }

/* ---------- Mobile / tablet menu: nav card expands down, page blurs ---------- */
.pamp-mm-backdrop {
  position: fixed; inset: 0; z-index: 20; display: none;
  background: rgba(5, 81, 70, 0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 0.45s ease;
}
.pamp-mm {
  position: fixed; z-index: 21; display: none; box-sizing: border-box;
  background: #055146; color: #C5FAD1;
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  font-family: "Bricolage Grotesque", sans-serif;
  padding: 0 20px 20px;
  clip-path: inset(0 0 calc(100% - var(--nav-h, 64px)) 0 round 50px);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}
.pamp-mm-backdrop.is-mounted, .pamp-mm.is-mounted { display: block; }
.pamp-mm-backdrop.is-open { opacity: 1; }
.pamp-mm.is-open {
  clip-path: inset(0 0 0 0 round 32px);
  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pamp-mm-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h, 64px);
}
/* the real navbar stays on top of the panel + blur while the menu is mounted */
html.pamp-mm-active [data-pamp-nav] { z-index: 22 !important; }

/* Hamburger -> X micro animation (bars drawn to match the original icon) */
.pamp-burger { position: absolute; inset: 0; display: block; pointer-events: none; }
.pamp-burger i {
  position: absolute; display: block; height: 6.25%; min-height: 1.5px; border-radius: 99px;
  background: #C5FAD1; transform-origin: 50% 50%;
  transition: top 0.32s cubic-bezier(0.65, 0, 0.35, 1), left 0.32s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.32s cubic-bezier(0.65, 0, 0.35, 1), transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.pamp-burger i:nth-child(1) { left: 29%; width: 56%; top: 26.5%; }
.pamp-burger i:nth-child(2) { left: 12.5%; width: 72.5%; top: 46%; }
.pamp-burger i:nth-child(3) { left: 46%; width: 39%; top: 65.5%; }
/* open: bars meet in the middle first, then rotate */
html.pamp-mm-open .pamp-burger i { transition: top 0.22s cubic-bezier(0.65, 0, 0.35, 1), left 0.22s ease, width 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) 0.16s, opacity 0.15s ease; }
html.pamp-mm-open .pamp-burger i:nth-child(1) { left: 20%; width: 60%; top: 46%; transform: rotate(45deg); }
html.pamp-mm-open .pamp-burger i:nth-child(2) { left: 50%; width: 0%; opacity: 0; }
html.pamp-mm-open .pamp-burger i:nth-child(3) { left: 20%; width: 60%; top: 46%; transform: rotate(-45deg); }
/* close: un-rotate first, then spread back out */
html:not(.pamp-mm-open) .pamp-burger i { transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1), top 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.14s, left 0.28s ease 0.14s, width 0.28s ease 0.14s, opacity 0.2s ease 0.14s; }

.pamp-mm-body { display: flex; flex-direction: column; padding: 8px 4px 0; }
.pamp-mm-link, .pamp-mm-cta {
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.pamp-mm.is-open .pamp-mm-link, .pamp-mm.is-open .pamp-mm-cta {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease calc(0.12s + var(--i) * 0.045s), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.12s + var(--i) * 0.045s), color 0.2s ease, background-color 0.2s ease;
}
.pamp-mm-link {
  display: block; padding: 13px 0; font-size: 18px; font-weight: 500; line-height: 1.2;
  color: rgba(197, 250, 209, 0.72); text-decoration: none;
}
.pamp-mm-link:hover, .pamp-mm-link.is-active { color: #86D694; }
.pamp-mm-cta {
  display: flex; align-items: center; justify-content: center; margin-top: 18px;
  height: 52px; border-radius: 999px; border: 1px solid rgba(197, 250, 209, 0.35);
  color: #C5FAD1; font-size: 16px; font-weight: 600; text-decoration: none;
}
.pamp-mm-cta:hover, .pamp-mm-cta.is-active { background: #86D694; border-color: #86D694; color: #055146; }
html.pamp-mm-lock, html.pamp-mm-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pamp-mm, .pamp-mm.is-open, .pamp-mm-link, .pamp-mm-cta, .pamp-mm-backdrop { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ---------- Hover: desktop nav text links ---------- */
nav [data-framer-name="Inactive Link"] .framer-text { transition: color var(--pamp-hover-dur) var(--pamp-ease-hover); }
nav [data-framer-name="Inactive Link"]:hover .framer-text { color: var(--pamp-green) !important; }

/* ---------- Hover: "Get the App Now" / "Back to Homepage" pill buttons ----------
   a > Content > [Content(pill) + Icon(circle) > Icon(arrow)]                        */
a[data-framer-name="Key Insights Button"] > div > div[data-framer-name="Content"],
a[data-framer-name="CTA Button"] > div > div[data-framer-name="Content"],
a[data-framer-name="Key Insights Button"] > div > div[data-framer-name="Icon"] {
  transition: background-color var(--pamp-hover-dur) var(--pamp-ease-hover);
}
a[data-framer-name="Key Insights Button"] .framer-text,
a[data-framer-name="CTA Button"] .framer-text { transition: color var(--pamp-hover-dur) var(--pamp-ease-hover); }
a[data-framer-name="Key Insights Button"] div[data-framer-name="Icon"] > div[data-framer-name="Icon"],
a[data-framer-name="CTA Button"] div[data-framer-name="Icon"] > div[data-framer-name="Icon"] {
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* dark pill -> green pill, mint text -> dark text, arrow ↗ -> → */
a[data-framer-name="Key Insights Button"]:hover > div > div[data-framer-name="Content"] { background-color: var(--pamp-green) !important; }
a[data-framer-name="Key Insights Button"]:hover .framer-text { color: var(--pamp-dark) !important; }
a[data-framer-name="Key Insights Button"]:hover div[data-framer-name="Icon"] > div[data-framer-name="Icon"],
a[data-framer-name="CTA Button"]:hover div[data-framer-name="Icon"] > div[data-framer-name="Icon"] { transform: rotate(45deg) !important; }
/* home-page variants also flip the arrow circle to dark green ("Back to Homepage" keeps it green) */
a.framer-aBZYo:hover > div > div[data-framer-name="Icon"],
a.framer-jEwqU:hover > div > div[data-framer-name="Icon"],
a.framer-80zlE:hover > div > div[data-framer-name="Icon"] { background-color: var(--pamp-dark) !important; }

/* light mint pill (CTA card + footer) -> green */
a[data-framer-name="CTA Button"]:hover > div > div[data-framer-name="Content"] { background-color: var(--pamp-green) !important; }

/* ---------- Hover: contact form submit ---------- */
form[data-pamp-form] button[type="submit"] { transition: background-color var(--pamp-hover-dur) var(--pamp-ease-hover), box-shadow var(--pamp-hover-dur) var(--pamp-ease-hover), opacity 0.2s; cursor: pointer; }
form[data-pamp-form] button[type="submit"]:hover { background-color: var(--pamp-mint) !important; box-shadow: inset 0 0 10px 1px rgba(255, 255, 255, 0.3) !important; }
form[data-pamp-form].is-submitting button[type="submit"] { opacity: 0.6 !important; pointer-events: none; }
.pamp-form-error {
  margin: 0; font: 500 14px/1.4 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
  color: #ffb4b4; text-align: center;
}

/* ---------- Scroll reveals ("while in view" effects) ---------- */
html.js:not(.reduce-motion) [data-inview]:not(.is-inview) { opacity: 0 !important; transform: var(--pamp-from, none) !important; }
[data-inview].is-inview {
  /* critically-damped spring measured on the live site (~0.75s to settle) */
  transition: opacity 0.8s var(--pamp-spring, cubic-bezier(0.2, 0.9, 0.3, 1)), transform 0.8s var(--pamp-spring, cubic-bezier(0.2, 0.9, 0.3, 1));
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --pamp-spring: linear(0, 0.0229, 0.0788, 0.1531, 0.2359, 0.3206, 0.4028, 0.48, 0.5507, 0.6144, 0.6709, 0.7205, 0.7636, 0.8008, 0.8327, 0.86, 0.8831, 0.9026, 0.919, 0.9328, 0.9444, 0.954, 0.9621, 0.9687, 0.9743, 0.9789, 0.9826, 0.9858, 0.9883, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  }
}

/* Appear-on-load animations (Framer "appear" effects) are driven by js/site.js.
   Without JS (or with reduced motion) make sure nothing stays invisible. */
html:not(.js) [data-framer-appear-id],
html.reduce-motion [data-framer-appear-id] { opacity: 1 !important; transform: none !important; }