/* ProperPics public motion kit (front-page redesign, 2026-09-25).

   NON-render-blocking: _public_base.html loads it with media="print" and
   lp-motion.js flips it to "all" (a <noscript> twin covers no-JS). Anything
   the FIRST screen needs to paint correctly (heading underlines, the sub-hero
   copy measure and entrance) lives instead in
   the "Motion kit: first-paint rules" section at the end of landing.css, so a
   late arrival here can never shift layout or flash the hero. Keep it that way:
   a rule that changes the size or position of above-the-fold content belongs
   in landing.css, not here.

   Every public page
   gets the same vocabulary: scroll reveals, animated line-art, and a CTA shine.

   Three rules keep it honest:
   1. Content is never hidden without JavaScript. Reveal states only apply under
      html.motion-ok, which lp-motion.js sets once it has an IntersectionObserver
      and the reader has not asked for reduced motion.
   2. Every looping or entrance animation lives inside
      @media (prefers-reduced-motion: no-preference). Outside it, each graphic
      has a finished, static end state that reads on its own.
   3. Decoration is aria-hidden SVG or a pseudo-element; nothing here carries
      copy, so a screen reader hears exactly what it heard before.

   Colours come from tokens.css. The few rgb() literals are alpha tints of
   --accent-bright (#33A7DE = 51 167 222), and data-URI SVGs must spell their
   colours out. */

/* ======================================================================= *
 * Scroll reveal (driven by lp-motion.js)
 * ======================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .lp-reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .2, 1);
    transition-delay: var(--rv-delay, 0s);
  }
  .motion-ok .lp-reveal.is-in { opacity: 1; transform: none; }
}

/* ======================================================================= *
 * Primary CTA shine: a soft highlight sweeps across every .lp-btn-cta every
 * few seconds. ::after is already the arrow, so the sweep is ::before.
 * ======================================================================= */
.lp-btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.lp-btn-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .28) 48%, transparent 66%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .motion-live .lp-btn-cta::before { animation: lp-shine 5.5s ease-in-out 1.2s infinite; }
}
@keyframes lp-shine {
  0% { transform: translateX(-120%); }
  18%, 100% { transform: translateX(120%); }
}

@keyframes lp-sweep { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }
@keyframes lp-border-flow { to { background-position: 0 0, 300% 50%; } }

/* ======================================================================= *
 * Pricing, trust, walkthrough, closing CTA (homepage + siblings)
 * ======================================================================= */
.lp-price { transition: transform .25s ease, box-shadow .25s ease; }
.lp-price:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgb(22 107 158 / .14); }
.lp-free-banner { position: relative; overflow: hidden; }
.lp-free-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgb(51 167 222 / .12) 50%, transparent 60%);
  transform: translateX(-100%); }

.lp-btn-whatsapp { position: relative; }
.lp-btn-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
                           box-shadow: 0 0 0 0 var(--whatsapp); opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  .motion-live .lp-free-banner::after { animation: lp-sweep 7s ease-in-out 2s infinite; }
  .motion-live .lp-price-flag { animation: lp-bob 3s ease-in-out infinite; }

  .motion-live .lp-btn-whatsapp::before { animation: lp-wa-ring 2.6s ease-out infinite; }
}
@keyframes lp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes lp-wa-ring { 0% { box-shadow: 0 0 0 0 var(--whatsapp); opacity: .55; }
                        80%, 100% { box-shadow: 0 0 0 14px var(--whatsapp); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .motion-ok .lp-section-h.lp-reveal::after { transform: scaleX(0);
    transition: transform .7s cubic-bezier(.6, 0, .2, 1) .35s; }
  .motion-ok .lp-section-h.lp-reveal.is-in::after { transform: scaleX(1); }
}

/* Windows high-contrast: drop the decorative layers entirely. */