/* ==========================================================================
   Landing page motion (1.0.8)
   - .lp-anim .lp-anim-{fade-up|fade|zoom|left|right|flip}: entrance when the
     section scrolls into view (the page script adds .lp-in). Hidden only under
     html.lp-js, so without JavaScript nothing is ever hidden.
   - .lp-btnfx-{pulse|shake|glow}: effect on the section's order buttons.
   - .lp-decor: floating letters / emoji at the section's sides.
   - .lp-hero-float: the hero picture floats gently.
   - .lp-reviews-marquee: review screenshots scroll non-stop.
   Everything stops for visitors who asked their device for less motion.
   ========================================================================== */

/* ---- entrance ---------------------------------------------------------- */
.lp-js .lp-anim > .container > *,
.lp-js .lp-anim > :not(.container):not(.lp-decor) {
    opacity: 0;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.lp-js .lp-anim-fade-up > .container > *, .lp-js .lp-anim-fade-up > :not(.container):not(.lp-decor) { transform: translateY(34px); }
.lp-js .lp-anim-zoom > .container > *,    .lp-js .lp-anim-zoom > :not(.container):not(.lp-decor)    { transform: scale(.9); }
.lp-js .lp-anim-left > .container > *,    .lp-js .lp-anim-left > :not(.container):not(.lp-decor)    { transform: translateX(-60px); }
.lp-js .lp-anim-right > .container > *,   .lp-js .lp-anim-right > :not(.container):not(.lp-decor)   { transform: translateX(60px); }
.lp-js .lp-anim-flip > .container > *,    .lp-js .lp-anim-flip > :not(.container):not(.lp-decor)    { transform: perspective(800px) rotateX(28deg); transform-origin: 50% 0; }

.lp-js .lp-anim.lp-in > .container > *,
.lp-js .lp-anim.lp-in > :not(.container):not(.lp-decor) { opacity: 1; transform: none; }

/* one after the other, not all at once */
.lp-js .lp-anim > .container > :nth-child(2) { transition-delay: .12s; }
.lp-js .lp-anim > .container > :nth-child(3) { transition-delay: .24s; }
.lp-js .lp-anim > .container > :nth-child(4) { transition-delay: .36s; }
.lp-js .lp-anim > .container > :nth-child(n+5) { transition-delay: .45s; }

/* the sides stay inside the section while something slides in */
.lp-anim-left, .lp-anim-right { overflow-x: clip; }

/* ---- order buttons ------------------------------------------------------ */
.lp-btnfx-pulse .cam_order_now, .lp-btnfx-pulse .of-submit { animation: lpPulse 1.6s ease-in-out infinite; }
.lp-btnfx-shake .cam_order_now, .lp-btnfx-shake .of-submit { animation: lpShake 3.2s ease-in-out infinite; }
.lp-btnfx-glow  .cam_order_now, .lp-btnfx-glow  .of-submit { animation: lpGlow 2s ease-out infinite; }
.lp-btnfx-pulse .cam_order_now:hover, .lp-btnfx-shake .cam_order_now:hover,
.lp-btnfx-pulse .of-submit:hover, .lp-btnfx-shake .of-submit:hover { animation-play-state: paused; }

@keyframes lpPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes lpShake {
    0%, 78%, 100% { transform: translateX(0) rotate(0); }
    81% { transform: translateX(-5px) rotate(-2deg); }
    84% { transform: translateX(5px) rotate(2deg); }
    87% { transform: translateX(-4px) rotate(-1.5deg); }
    90% { transform: translateX(4px) rotate(1.5deg); }
    93% { transform: translateX(-2px) rotate(0); }
}
@keyframes lpGlow {
    0%   { box-shadow: 0 0 0 0 rgba(10, 160, 106, .55); }
    100% { box-shadow: 0 0 0 18px rgba(10, 160, 106, 0); }
}

/* ---- floating letters / emoji ------------------------------------------ */
.lp-has-decor { position: relative; overflow: hidden; }
.lp-has-decor > .container { position: relative; z-index: 1; }
.lp-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-decor-i {
    position: absolute;
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 14px;
    font-size: 22px; font-weight: 800; line-height: 1;
    box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .25);
    opacity: .9;
    animation: lpBob 5s ease-in-out infinite;
}
/* soft pastel tiles, alternating sides, different speeds so they never move in step */
.lp-decor-0 { left: 2%;  top: 8%;  background: #e7f8ee; color: #22a35a; animation-duration: 5.2s; }
.lp-decor-1 { right: 3%; top: 14%; background: #e8efff; color: #4a6cf7; animation-duration: 6.1s; animation-delay: -1s; }
.lp-decor-2 { left: 5%;  top: 42%; background: #f2eaff; color: #8b5cf6; animation-duration: 5.6s; animation-delay: -2s; }
.lp-decor-3 { right: 2%; top: 50%; background: #fff1e6; color: #f08a3e; animation-duration: 6.6s; animation-delay: -3s; }
.lp-decor-4 { left: 2%;  top: 74%; background: #e9eefc; color: #6a7ff0; animation-duration: 5.9s; animation-delay: -1.5s; }
.lp-decor-5 { right: 5%; top: 80%; background: #ffeaf2; color: #e2558a; animation-duration: 5.4s; animation-delay: -2.5s; }
.lp-decor-6 { left: 9%;  top: 24%; background: #fff8dc; color: #c99a06; animation-duration: 6.3s; animation-delay: -.5s; }
.lp-decor-7 { right: 9%; top: 32%; background: #e3f7f7; color: #109a9a; animation-duration: 5.7s; animation-delay: -3.5s; }
@keyframes lpBob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-16px) rotate(4deg); }
}
/* phones: smaller and fainter, so they never cover text */
@media (max-width: 767.98px) {
    .lp-decor-i { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; opacity: .4; }
    .lp-decor-0, .lp-decor-2, .lp-decor-4 { left: -8px; }
    .lp-decor-1, .lp-decor-3, .lp-decor-5 { right: -8px; }
    .lp-decor-6, .lp-decor-7 { display: none; }
}

/* ---- hero picture ------------------------------------------------------- */
.lp-hero-float .lp-hero-frame { animation: lpFloat 4.5s ease-in-out infinite; }
@keyframes lpFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ---- review screenshots: non-stop ticker -------------------------------- */
.lp-reviews-marquee { overflow: hidden; margin: 6px -12px 0; padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lp-reviews-track { display: flex; gap: 12px; width: max-content; animation: lpTicker var(--lp-ticker, 40s) linear infinite; }
.lp-reviews-track .review_item { flex: 0 0 auto; width: 240px; }
.lp-reviews-track .review_item img { width: 100%; height: auto; display: block; border-radius: 12px; }
.lp-reviews-marquee:hover .lp-reviews-track { animation-play-state: paused; }
@keyframes lpTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 767.98px) {
    .lp-reviews-track .review_item { width: 180px; }
}

/* ---- less motion requested --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lp-js .lp-anim > .container > *, .lp-js .lp-anim > :not(.container):not(.lp-decor) { opacity: 1; transform: none; transition: none; }
    .lp-btnfx-pulse .cam_order_now, .lp-btnfx-pulse .of-submit,
    .lp-btnfx-shake .cam_order_now, .lp-btnfx-shake .of-submit,
    .lp-btnfx-glow .cam_order_now, .lp-btnfx-glow .of-submit,
    .lp-decor-i, .lp-hero-float .lp-hero-frame, .lp-reviews-track { animation: none; }
}