/* ===========================================================================
   Hero app-screens visual.

   The original hero built its mockup out of three separately-positioned
   phone elements (IPhone 1/2/3) that Framer animates in. That's been
   replaced by a single supplied composite image of the three app screens,
   so those three elements are hidden and the image is painted on their
   shared container instead.

   Done as a background-image on the container rather than by injecting an
   <img> element: Framer re-renders this subtree (it owns these nodes and
   their inline transforms), so anything inserted into the DOM would need a
   MutationObserver to survive - as several other fixes in this project do.
   A CSS background needs none of that. It costs nothing in accessibility
   terms either: the phones it replaces already carried alt="" as decorative
   imagery, and the hero's own headline carries the actual meaning.

   The container has an explicit width/height from Framer and all three
   phones are absolutely positioned inside it, so hiding them can't collapse
   it - but the fixed height is dropped in favour of aspect-ratio so the
   image stays correctly proportioned at every width instead of being
   letterboxed inside a box shaped for the old three-phone arrangement
   (which was portrait-ish on mobile against this image's landscape 1830x1150).
   =========================================================================== */

[data-framer-name="Section-Hero"] [data-framer-name="iPhones"] {
  background-image: url("/assets/hero-app-screens.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  height: auto !important;
  aspect-ratio: 1830 / 1150;
}

[data-framer-name="Section-Hero"] [data-framer-name="iPhones"] > * {
  display: none !important;
}

/* The staggered per-phone fan-out this file used to run no longer applies
   now that the three phones are one flat image - it rises in as a single
   piece instead.

   Note it animates `translate`/`scale`, never `transform`: Framer owns the
   inline `transform` on this container (its own entrance animation writes
   to it), and these are separate CSS properties that compose with it
   rather than replacing it - so the two never fight. Verified in the
   browser when this was first built: setting `translate` moved the element
   exactly as asked while its Framer transform matrix stayed intact. */
@keyframes aimore-hero-screens-in {
  from {
    translate: 0 60px;
    scale: 0.96;
    opacity: 0;
  }
  to {
    translate: 0 0;
    scale: 1;
    opacity: 1;
  }
}

[data-framer-name="Section-Hero"] [data-framer-name="iPhones"] {
  animation: aimore-hero-screens-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@media (max-width: 809.98px) {
  @keyframes aimore-hero-screens-in {
    from {
      translate: 0 36px;
      scale: 0.97;
      opacity: 0;
    }
    to {
      translate: 0 0;
      scale: 1;
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Section-Hero"] [data-framer-name="iPhones"] {
    animation: none;
  }
}