/* ===========================================================================
   Header interaction/motion polish.
   Selectors avoid Framer's generated hash classes (unstable per breakpoint
   and per page) in favor of markers Framer leaves alone: the nav bar is the
   only <nav> with an inline backdrop-filter, the logo link keeps
   data-framer-name="Logo" through hover, and the text links are matched by
   their href fragment (see the hover-underline section below for why -
   data-framer-name doesn't survive their own hover state).
   =========================================================================== */

/* --- 1. Scroll-reactive nav bar -------------------------------------------
   Framer draws this bar at a fixed height/opacity always. JS (header-fx.js)
   adds .is-scrolled once the page has scrolled past the hero; the bar then
   shrinks a little and its blur/shadow deepen, so it reads as "compacting"
   into a slimmer toolbar rather than just sitting there. */
nav[style*="backdrop-filter"] {
  transition: height 0.25s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

nav[style*="backdrop-filter"].is-scrolled {
  height: 56px !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

html:not([data-theme="dark"]) nav[style*="backdrop-filter"].is-scrolled {
  box-shadow: 0 12px 30px rgba(35, 101, 159, 0.14) !important;
}

/* NOTE: there used to be a blanket `nav[...] * { transition: transform }`
   here, meant to let the bar's contents "settle" alongside the height
   change. It did nothing for that - during the shrink the logo and links
   are repositioned by flex layout, not by their own `transform`, and a
   transition on `transform` has no effect on layout-driven movement. What
   it DID do was attach a 0.2s transform transition to every descendant of
   the bar, including the three burger-menu bars that Framer animates into
   an X on mobile. Framer drives those from its own animation runtime, so
   ours ran on top of it and the open/close visibly stuttered. Removed
   rather than narrowed: nothing in the bar actually needs it. */

/* --- 2. Nav link hover underline -------------------------------------------
   A thin bar grows from the centre rather than a static underline - reads
   as more deliberate than an on/off hover colour change alone.

   Selector note: this used to key off data-framer-name="Nav Item", which
   looked right in a static DOM dump but never actually transitioned in the
   browser - Framer swaps each link to its own "hover variant" the instant
   the pointer lands on it, and that swap **strips data-framer-name** from
   the element (same behaviour already worked around for the footer social
   icons elsewhere in this project). So the attribute is gone at exactly the
   moment :hover starts applying, the selector stops matching, and the
   colour/underline rules never fire at all - what reads as "jumps" is
   purely Framer's own instant variant swap with nothing of ours easing
   over it. href is untouched by that swap (removing it would break the
   link), so these rules match on the anchor fragment instead - stable
   across every page since each link always points at the same section id. */
nav[style*="backdrop-filter"] a[href*="#features-1"],
nav[style*="backdrop-filter"] a[href*="#about"],
nav[style*="backdrop-filter"] a[href*="#reviews"],
nav[style*="backdrop-filter"] a[href*="#faQ"],
nav[style*="backdrop-filter"] a[href*="#contact"],
nav[style*="backdrop-filter"] a[href$="/support"] {
  position: relative;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

nav[style*="backdrop-filter"] a[href*="#features-1"]::after,
nav[style*="backdrop-filter"] a[href*="#about"]::after,
nav[style*="backdrop-filter"] a[href*="#reviews"]::after,
nav[style*="backdrop-filter"] a[href*="#faQ"]::after,
nav[style*="backdrop-filter"] a[href*="#contact"]::after,
nav[style*="backdrop-filter"] a[href$="/support"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #36a0fd;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

nav[style*="backdrop-filter"] a[href*="#features-1"]:hover::after,
nav[style*="backdrop-filter"] a[href*="#about"]:hover::after,
nav[style*="backdrop-filter"] a[href*="#reviews"]:hover::after,
nav[style*="backdrop-filter"] a[href*="#faQ"]:hover::after,
nav[style*="backdrop-filter"] a[href*="#contact"]:hover::after,
nav[style*="backdrop-filter"] a[href$="/support"]:hover::after {
  transform: scaleX(1);
}

nav[style*="backdrop-filter"] a[href*="#features-1"]:hover,
nav[style*="backdrop-filter"] a[href*="#about"]:hover,
nav[style*="backdrop-filter"] a[href*="#reviews"]:hover,
nav[style*="backdrop-filter"] a[href*="#faQ"]:hover,
nav[style*="backdrop-filter"] a[href*="#contact"]:hover,
nav[style*="backdrop-filter"] a[href$="/support"]:hover {
  color: #36a0fd !important;
}

/* --- 3. Logo heartbeat on hover --------------------------------------------
   The logo is a single baked icon+wordmark image, so animating just the
   heart shape isn't possible - instead the whole mark gets a quick double-
   beat scale on hover, on-theme for a "love story" app without running
   constantly and becoming visual noise. */
a[data-framer-name="Logo"] {
  display: inline-flex;
}

a[data-framer-name="Logo"] [data-framer-component-type="SVG"] {
  transform-origin: center;
}

a[data-framer-name="Logo"]:hover [data-framer-component-type="SVG"] {
  animation: aimore-heartbeat 0.7s ease-in-out;
}

@keyframes aimore-heartbeat {
  0% { transform: scale(1); }
  20% { transform: scale(1.12); }
  35% { transform: scale(1); }
  50% { transform: scale(1.09); }
  70% { transform: scale(1); }
}

/* --- 4. Header "Get App" button size ---------------------------------------
   Framer's own preset sizes this pill's padding (12px 24px) and its text's
   line-height (26px) for the button's ORIGINAL 16px label - font-size-
   adjust.js later trimmed that label to 14px along with all other non-
   heading text sitewide, but padding/line-height are fixed px values, not
   relative to the font, so they stayed put. The result: noticeably smaller
   text floating in the same 50px-tall pill, reading as an oversized button
   next to the plain nav links beside it. Tightened directly to match the
   now-smaller label; scoped to the header bar and its "Get App"/popup
   link specifically so it doesn't touch the differently-sized App Store /
   Google Play badges elsewhere, which also carry data-framer-name="Variant 1"
   but link to apple.com/play.google.com instead. */
nav[style*="backdrop-filter"] a[href*="popup"] {
  padding: 8px 20px !important;
}

nav[style*="backdrop-filter"] a[href*="popup"] p {
  line-height: 20px !important;
}

/* --- 5. Mobile menu tap reliability ----------------------------------------
   Reported: links inside the mobile hamburger drawer sometimes don't
   navigate on a real tap. Investigated at length (checked the full ancestor
   chain for anything blocking touch-action/pointer-events - all "auto";
   confirmed the link's own DOM node stays connected and isn't swapped mid-
   press; confirmed the underlying navigation itself works correctly the
   instant a click event actually fires) without finding a JS or CSS cause
   in this codebase to point to directly.

   The one concrete, well-known cause that matches this exact symptom and
   costs nothing to rule out: without an explicit `touch-action`, a mobile
   browser has to wait to see whether a touch is a tap or the start of a
   scroll/pan before committing to synthesizing a click - and a real
   finger's natural micro-movement during a press (not reproducible with a
   mouse, which is why this never showed up in ordinary testing) can be
   enough for that disambiguation to lose the tap, especially over a
   large-area overlay like this drawer. `touch-action: manipulation` tells
   the browser these are tap targets, not scroll/pan surfaces, and removes
   that ambiguity (plus the legacy ~300ms tap delay some browsers still add
   without it). Applied to the drawer's own links and the burger control
   itself, not the page at large - nothing else here has this problem. */
nav[style*="backdrop-filter"] a,
nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* --- 6. Burger menu: a proper icon instead of three flat grey bars --------
   Framer draws all three bars in one flat mid-grey (rgb(138,138,138), the
   site's general "muted secondary text" token reused here) in both themes,
   with no hover feedback and no colour change between the closed and open
   (X) states - it reads as inert, which is the "gray and dull" complaint.

   The rotation into an X is entirely Framer's own doing (each bar's inline
   `transform: matrix(...)` swaps between its closed and open variant, and
   the middle bar's element is swapped out of the DOM rather than hidden -
   same "variant swap" pattern as the FAQ accordion elsewhere on this site).
   That's left completely alone here - nothing below touches `transform` -
   this only adds colour, a hover backdrop, and a press-down scale on the
   button shell, none of which Framer's own animation owns or fights over.
   The descendant selector for the bars matches whichever variant (2 bars
   open, 3 closed) happens to be in the DOM at the time, so nothing needs
   re-running when Framer swaps them. */
nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"] {
  position: relative;
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"]:hover {
  background-color: rgba(54, 160, 253, 0.12);
}

nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"]:active {
  transform: scale(0.92);
  background-color: rgba(54, 160, 253, 0.18);
}

nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"] > div {
  background-color: #e4e6eb !important;
  border-radius: 2px !important;
  transition: background-color 0.2s ease;
}

html:not([data-theme="dark"]) nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"] > div {
  background-color: #1c1d1f !important;
}

nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"]:hover > div {
  background-color: #36a0fd !important;
}

/* --- 7. Open mobile menu panel --------------------------------------------
   Root cause of the "menu looks awful" report, and it was self-inflicted:
   the open drawer is the SAME <nav> element as the collapsed header bar,
   just switched to its "Mobile Open Menu" variant. glass-landing.css makes
   that bar glassy with `background: rgba(16,17,20,0.62); blur(18px)`, which
   is right for a 64px strip - but the moment it expands into a full panel,
   62% opacity over the hero's photos and gradient waves turns the whole
   menu into blurred visual noise with the links floating in it.

   Fixed by treating the OPEN state as its own surface: nearly opaque, with
   the blur kept only as a subtle depth cue rather than as the thing you
   see. Scoped to the open variant's own name, so the collapsed bar keeps
   the light glass it's supposed to have. The extra [style*=...] on the
   selector is only there to outweigh glass-landing.css's own !important
   rule on the same element (equal specificity otherwise, and load order
   between the two files isn't something to depend on). */
nav[data-framer-name="Mobile Open Menu"][style*="backdrop-filter"] {
  background-color: rgba(11, 12, 15, 0.94) !important;
  -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
  backdrop-filter: blur(28px) saturate(130%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

/* Comfortable rhythm and real tap targets. Framer lays these out at 28px
   tall with a 24px gap, which is tight for a thumb; padding on the link
   itself widens the hit area without changing the list's spacing maths. */
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Links List"] {
  gap: 4px !important;
}

nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a {
  display: block;
  padding: 12px 12px;
  margin-left: -12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
  transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a:hover,
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a:active {
  background-color: rgba(54, 160, 253, 0.12);
  padding-left: 18px;
}

nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a:hover p,
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a:active p {
  color: #36a0fd !important;
}

/* Items fade up in sequence as the panel opens, so it reads as one
   deliberate motion instead of a block of text appearing at once. The
   drawer is mounted fresh on every open, so this replays each time with no
   JS involved. */
@keyframes aimore-menu-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] {
  animation: aimore-menu-item-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(1) { animation-delay: 0.04s; }
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(2) { animation-delay: 0.09s; }
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(3) { animation-delay: 0.14s; }
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(4) { animation-delay: 0.19s; }
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(5) { animation-delay: 0.24s; }
nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"]:nth-child(6) { animation-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] {
    animation: none;
  }

  nav[data-framer-name="Mobile Open Menu"] [data-framer-name="Nav Item Wrapper"] a {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"],
  nav[style*="backdrop-filter"] [data-framer-name="Burger Menu"] > div,
  nav[style*="backdrop-filter"],
  nav[style*="backdrop-filter"] *,
  nav[style*="backdrop-filter"] a[href*="#features-1"],
  nav[style*="backdrop-filter"] a[href*="#about"],
  nav[style*="backdrop-filter"] a[href*="#reviews"],
  nav[style*="backdrop-filter"] a[href*="#faQ"],
  nav[style*="backdrop-filter"] a[href*="#contact"],
  nav[style*="backdrop-filter"] a[href$="/support"],
  nav[style*="backdrop-filter"] a[href*="#features-1"]::after,
  nav[style*="backdrop-filter"] a[href*="#about"]::after,
  nav[style*="backdrop-filter"] a[href*="#reviews"]::after,
  nav[style*="backdrop-filter"] a[href*="#faQ"]::after,
  nav[style*="backdrop-filter"] a[href*="#contact"]::after,
  nav[style*="backdrop-filter"] a[href$="/support"]::after {
    transition: none;
  }

  a[data-framer-name="Logo"]:hover [data-framer-component-type="SVG"] {
    animation: none;
  }
}