/* ===========================================================================
   Pillow Client — landing motion layer                    owner: motion (task-4)
   Loaded after /styles/landing.css. Strictly additive: only transform, colour,
   filter and opacity ever change, and only on interaction. The float drift layer
   that used to live here went with the pillows on 2026-10-16, so there are no
   keyframes left at all.

     · at rest nothing in this file changes geometry, colour, stacking or paint
     · nothing here listens to scroll; there is no scroll-driven motion
     · prefers-reduced-motion: reduce turns all of it off (last section)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. interaction polish
   Each transition lists every property landing.css already transitions on the
   same element, plus the ones this layer adds, so nothing frontend authored
   gets dropped from the transition list. Hover rules sit inside (hover: hover)
   so a touch device never gets a stuck hover state; the resting state of every
   rule below is untouched.
   --------------------------------------------------------------------------- */

.lp-nav__cta {
  transition:
    transform var(--dur-fast, 130ms) var(--ease, ease),
    color var(--dur-fast, 130ms) var(--ease, ease),
    background-color var(--dur-fast, 130ms) var(--ease, ease),
    border-color var(--dur-fast, 130ms) var(--ease, ease),
    filter var(--dur-fast, 130ms) var(--ease, ease),
    opacity var(--dur-fast, 130ms) var(--ease, ease);
}

@media (hover: hover) {
  /* the outlined CTA: a 1px lift and a slight brighten */
  .lp-nav__cta:hover { transform: translate3d(0, -1px, 0); filter: brightness(1.14); }
}

.lp-nav__cta:active { transform: translate3d(0, 0, 0) scale(0.97); }

/* ---------------------------------------------------------------------------
   2. focus-visible rings, in the landing accent
   `outline` is used rather than a box-shadow ring because outline is not part
   of layout, so a focused page stays pixel-identical to the reference. Not
   animated: an instant focus ring is the correct behaviour.
   --------------------------------------------------------------------------- */

.lp-nav__cta:focus-visible {
  outline: 2px solid var(--lp-accent, #a855f7);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   3. reduced motion — every non-essential animation stops, page stays complete
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* hover/active feedback still happens, it just arrives instantly */
  .lp,
  .lp * {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
}