/* ============================================================================
   HERO WORDMARK SUFFIX  -  the "-ER" after "SHARP" on the home hero
   ----------------------------------------------------------------------------
   Not drawn in Figma: a project request, so the hero finishes on the full
   name. "SHARP" is on screen from the first paint; once the page has settled,
   "-ER" slides out from behind the P while it fades in.

   HOW "BEHIND THE P" WORKS: the suffix sits in its own box whose inline-start
   edge is exactly the P's right edge, and that box clips. The mark starts a
   full box-width back - entirely inside the P's side of the clip, so nothing
   overlaps "SHARP" - and travels forward to rest. The opacity reaches 1 before
   the travel ends, so the glyphs read as solid for the last, slowest part of
   the decelerating slide.

   The translate is physical (translateX) on purpose: the lockup row is pinned
   to dir="ltr" because a Latin wordmark never mirrors, so the P is always to
   the left of the suffix, in Arabic too.

   Pure CSS, so it runs from the server-rendered HTML without waiting for
   hydration, and the `both` fill keeps the suffix hidden through the delay
   instead of flashing in first. It replays whenever the hero mounts again,
   e.g. on a client-side navigation back to the home page.

   REDUCED MOTION: app.css shortens every animation to 0.01ms but leaves the
   delay alone, which would hold the suffix hidden for the delay and then pop
   it in. Here the animation is removed outright, so "SHARP-ER" is simply there
   from the start.
   ========================================================================= */

@layer theme, base, components, utilities;

@layer components {
  .sh-hero-suffix {
    overflow: hidden;
  }

  .sh-hero-suffix__mark {
    animation: sh-hero-suffix-in var(--motion-duration-reveal)
      var(--motion-ease-entrance) var(--motion-delay-reveal) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .sh-hero-suffix__mark {
      animation: none;
    }
  }
}

@keyframes sh-hero-suffix-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}