/* =====================================================================
   Home page motion (index.php only) — loaded with assets/js/home-motion.js.
   Everything here only moves when the visitor's device allows animation
   (prefers-reduced-motion); JS adds the classes, so without JS the page is static as before.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

/* ---------- keyframes ---------- */
@keyframes hmRise   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes hmLeft   { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes hmRight  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hmZoom   { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes hmTilt   { from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes hmPop    { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes hmWord   { from { transform: translateY(110%); } to { transform: none; } }
@keyframes hmShine  { 0%, 55% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@keyframes hmDrift  { 0% { transform: scale(1.06) translate(0, 0); } 50% { transform: scale(1.14) translate(-1.5%, -1%); } 100% { transform: scale(1.06) translate(0, 0); } }
@keyframes hmFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hmBubble { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 12% { opacity: var(--o, .55); } 85% { opacity: var(--o, .55); } 100% { transform: translate3d(var(--dx, 30px), -105vh, 0) rotate(var(--rot, 180deg)); opacity: 0; } }
@keyframes hmBtnShine { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes hmPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }   /* transform only: no repaint */
@keyframes hmNudge  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes hmDraw   { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes hmLine   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hmStar   { 0% { opacity: .25; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes hmGlow   { 0%, 100% { text-shadow: 0 0 0 rgba(124, 179, 66, 0); } 50% { text-shadow: 0 0 22px rgba(124, 179, 66, .55); } }
@keyframes hmBob    { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-4deg); } }

/* ---------- scroll reveal (JS adds .hm-r + data-hm, then .hm-in when it scrolls into view) ---------- */
.hm-r { opacity: 0; }
.hm-r.hm-in { animation: hmRise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.hm-r.hm-in[data-hm="left"]  { animation-name: hmLeft; }
.hm-r.hm-in[data-hm="right"] { animation-name: hmRight; }
.hm-r.hm-in[data-hm="zoom"]  { animation-name: hmZoom; }
.hm-r.hm-in[data-hm="tilt"]  { animation-name: hmTilt; animation-duration: .6s; }
.hm-r.hm-in[data-hm="pop"]   { animation-name: hmPop; animation-duration: .5s; }
.hm-r.hm-now { animation: none !important; opacity: 1; }   /* came into view during a fast scroll: just show it */

/* ---------- hero ---------- */
.hero-full { isolation: isolate; }
.hero-full-bg { animation: hmDrift 22s ease-in-out infinite; transform-origin: 60% 50%; will-change: transform; }
.hm-par { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hm-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hm-particles i {
    position: absolute; bottom: -40px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(124, 179, 66, .55) 45%, rgba(53, 104, 19, .35));
    animation: hmBubble var(--d) linear var(--dl) infinite; will-change: transform, opacity;
}
.hm-particles i.leaf { border-radius: 0 70% 0 70%; background: linear-gradient(135deg, #8fd14f, #3b6d11); --o: .5; }
.hm-particles i.pill { border-radius: 99px; width: calc(var(--s) * 2.2); background: linear-gradient(90deg, #fff 50%, #7cb342 50%); --o: .45; }
.hero-full-content .eyebrow { animation: hmPop .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
.hm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.hm-w > span { display: inline-block; animation: hmWord .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--i, 0) * 110ms); }
/* the shine is drawn on each word (the words are split for the slide-up, so the parent can't clip it) */
.hero-full-accent .hm-w > span, .hero-full-accent:not(:has(.hm-w)) {
    background: linear-gradient(100deg, var(--leaf, #49861b) 0%, var(--leaf, #49861b) 40%, #b9e38f 50%, var(--leaf, #49861b) 60%, var(--leaf, #49861b) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: hmWord .9s cubic-bezier(.2, .8, .2, 1) both, hmShine 5s ease-in-out 1.8s infinite;
    animation-delay: calc(.3s + var(--i, 0) * 110ms), 1.8s;
}
.hero-full-lead { animation: hmRise .9s cubic-bezier(.2, .8, .2, 1) .85s both; }
.hero-ctas .btn { animation: hmRise .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero-ctas .btn:nth-child(1) { animation-delay: 1.05s; }
.hero-ctas .btn:nth-child(2) { animation-delay: 1.18s; }
.hero-badge { animation: hmPop .7s cubic-bezier(.2, .8, .2, 1) 1.4s both, hmFloat 4.5s ease-in-out 2.2s infinite; }
.hero-badge svg path { stroke-dasharray: 30; animation: hmDraw .6s ease-out 1.9s both; }

/* buttons: a light sweep on the main ones, a lift on hover everywhere */
.btn { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: hmBtnShine 4.5s ease-in-out 2.5s infinite; pointer-events: none;
}

/* ---------- section heads ---------- */
.grad-text { background-size: 220% 100%; animation: hmShine 6s ease-in-out 2; }   /* a gradient sweep repaints every frame: twice, not forever */
.sec-head .eyebrow.hm-in, .sec-head-row .eyebrow.hm-in { animation-name: hmPop; }

/* ---------- cards ---------- */
.offer-card, .cat-card, .product-card, .service-panel, .testimonial-card, .step-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.offer-card:hover, .product-card:hover, .testimonial-card:hover, .step-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31, 51, 9, .14); }
.hm-tilt { transform-style: preserve-3d; }
.offer-media img { animation: hmFloat 6s ease-in-out infinite; }
.offer-card:nth-child(2) .offer-media img { animation-delay: -2s; }
.offer-card:nth-child(3) .offer-media img { animation-delay: -4s; }
.offer-save { animation: hmPulse 2.2s ease-in-out infinite; }
.cat-arrow { animation: hmNudge 1.8s ease-in-out infinite; }
[dir="ltr"] .cat-arrow { animation-direction: reverse; }
.cat-card img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.cat-card:hover img { transform: scale(1.08); }
.service-panel img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.service-panel.hm-in img { animation: hmDrift 20s ease-in-out infinite; }

/* ---------- stats ---------- */
.stat-num { display: inline-block; }
.stat-block.hm-done .stat-num { animation: hmPop .5s cubic-bezier(.2, .8, .2, 1), hmGlow 3s ease-in-out .5s 1; }

/* ---------- how it works: steps appear one by one, the line between them draws itself ---------- */
.steps-row { position: relative; }
.step-num { transition: transform .3s; }
.step-card.hm-in .step-num { animation: hmPop .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
.step-card .step-icon { animation: hmBob 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.2s); }
.hm-stepline { position: absolute; top: 34px; left: 12%; right: 12%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #b9e38f, #49861b); transform-origin: right; transform: scaleX(0); z-index: 0; pointer-events: none; }
[dir="ltr"] .hm-stepline { transform-origin: left; }
.hm-stepline.hm-in { animation: hmLine 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; }
.steps-row .step-card { position: relative; z-index: 1; }
@media (max-width: 767px) { .hm-stepline { display: none; } }

/* ---------- testimonials: stars light up one after another ---------- */
.testimonial-card.hm-in .stars .star { display: inline-block; animation: hmStar .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + .3s); }

/* ---------- performance: nothing loops off screen; decorative loops pause while the page is scrolling ---------- */
.hm-off, .hm-off * , .hm-off *::after { animation-play-state: paused !important; }
html.hm-scrolling .hero-full-bg, html.hm-scrolling .hm-particles i, html.hm-scrolling .offer-media img, html.hm-scrolling .offer-save,
html.hm-scrolling .cat-arrow, html.hm-scrolling .service-panel img, html.hm-scrolling .step-card .step-icon, html.hm-scrolling .btn-primary::after,
html.hm-scrolling .hero-badge, html.hm-scrolling .grad-text, html.hm-scrolling .hero-full-accent .hm-w > span { animation-play-state: paused; }

/* ---------- CTA band ---------- */
.cta-band.hm-in .cta-content > * { animation: hmRise .8s cubic-bezier(.2, .8, .2, 1) both; }
.cta-band.hm-in .cta-content > *:nth-child(2) { animation-delay: .12s; }
.cta-band.hm-in .cta-content > *:nth-child(3) { animation-delay: .24s; }

}

/* home page only: the cream tones follow the warm background of the hero picture (#F7E9DC) */
:root { --cream: #F7E9DC; --cream-50: #FBF3EC; --cream-100: #F3E3D5; }
.navbar { background: rgba(247, 233, 220, .88); }
.hero-full { background: var(--cream); }