/* ─────────────────────────────────────────────────────────────────────────
   motion.css — the only animation on the site beyond menu/header UI state.

   Two moves, both drawn from things this design already owns, so the motion
   belongs to Susan's brand rather than being a generic scroll fade:

     1. Draw — the hand-drawn underlines under headings draw themselves in.
     2. Float — the motifs (heart, star, rainbow, rays) drift very slowly.

   Easing is cubic-bezier(.2,.8,.2,1), which is already the site's curve in
   styles.css, so this reads as the same hand.

   Safety: everything is visible by DEFAULT. The .js class (added by the
   inline script in Base.astro) is what applies the pre-animation state, so a
   JS failure leaves every underline drawn and every motif still. The site's
   existing prefers-reduced-motion block neutralises both automatically; the
   explicit block below makes that guarantee rather than relying on it.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Draw ─────────────────────────────────────────────────────────────
   The underlines are 5px rounded bars. Scaling from the left edge reads as a
   pen stroke. .underline already carries rotate(-2deg), so the rotation is
   restated here or the transform would drop it.                            */

.js .underline,
.js .page-heading i {
  transform-origin: left center;
}

.js .underline:not(.is-drawn) {
  transform: rotate(-2deg) scaleX(0);
}

.js .page-heading i:not(.is-drawn) {
  transform: scaleX(0);
}

.js .underline.is-drawn {
  transform: rotate(-2deg) scaleX(1);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .page-heading i.is-drawn {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── 2. Float ────────────────────────────────────────────────────────────
   Applied to the inner img, not the holder, because several holders already
   carry their own rotate() and animating the holder would discard it.
   Deliberately slow and shallow: it should be felt rather than noticed.    */

@keyframes susan-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-6px);
  }
}

.hero .heart img,
.problem .rays img,
.fix-intro .sun img,
.tailored > b img,
.about .ah img,
.about .astar img,
.about .arain img,
.global-cta > img {
  animation: susan-float 6s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  will-change: transform;
}

/* Offsets so they are not all bobbing in unison. */
.problem .rays img {
  animation-duration: 7s;
  animation-delay: -2s;
}
.about .astar img {
  animation-duration: 8s;
  animation-delay: -1s;
}
.about .arain img {
  animation-duration: 6.5s;
  animation-delay: -3s;
}
.tailored > b img {
  animation-duration: 7.5s;
  animation-delay: -1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .js .underline:not(.is-drawn),
  .js .page-heading i:not(.is-drawn) {
    transform: none;
  }

  .js .underline.is-drawn {
    transform: rotate(-2deg);
    transition: none;
  }

  .js .page-heading i.is-drawn {
    transform: none;
    transition: none;
  }

  .hero .heart img,
  .problem .rays img,
  .fix-intro .sun img,
  .tailored > b img,
  .about .ah img,
  .about .astar img,
  .about .arain img,
  .global-cta > img {
    animation: none;
  }
}