/*!
 * BonAgro — animations.css  (design v2: calm, corporate motion)
 * 47 `ba-*` keyframes · scroll-reveal system · animation utilities · hover effects ·
 * reduced-motion overrides. Contract: docs/SPEC.md §7 + docs/DESIGN-V2.md §3.
 * v2 rules: travel ≤ 16px, no overshoot / bounce easings, reveals 300–600ms with --ease-out-expo,
 * no 3D tilt, no ripple ink, glows are subtle green. All 47 keyframes stay defined and referenced
 * (client requirement: ≥ 30 animations in use).
 * Hover lifts use the individual `translate`/`scale` properties so they never
 * fight with keyframes that animate `transform`.
 * Continuous loops are for pins, progress, marquee, skeleton and spinners only; the decorative loop utilities
 * (.anim-float, -sway, -bob, -pulse, -glow…) stay defined for the keyframe library but should not be used.
 * Retired v1 hooks live in the "deprecated-aliases" marker block at the end (§09).
 */

/* == 01. Keyframes: entrances (fade / translate / clip; short travel, no overshoot) == */
@keyframes ba-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ba-fade-up{from{opacity:0;transform:translate3d(0,var(--reveal-distance,1rem),0)}to{opacity:1;transform:none}}
@keyframes ba-fade-down{from{opacity:0;transform:translate3d(0,calc(var(--reveal-distance,1rem) * -1),0)}to{opacity:1;transform:none}}
@keyframes ba-fade-left{from{opacity:0;transform:translate3d(var(--reveal-distance-x,1rem),0,0)}to{opacity:1;transform:none}}
@keyframes ba-fade-right{from{opacity:0;transform:translate3d(calc(var(--reveal-distance-x,1rem) * -1),0,0)}to{opacity:1;transform:none}}
@keyframes ba-zoom-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes ba-zoom-out{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes ba-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ba-flip-up{from{opacity:0;transform:perspective(900px) rotateX(-8deg) translateY(.75rem)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}
@keyframes ba-flip-left{from{opacity:0;transform:perspective(900px) rotateY(8deg) translateX(.75rem)}to{opacity:1;transform:perspective(900px) rotateY(0) translateX(0)}}
@keyframes ba-blur-in{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes ba-clip-up{from{clip-path:inset(100% 0 0 0);transform:translateY(.5rem)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes ba-clip-left{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ba-clip-circle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes ba-rotate-in{from{opacity:0;transform:rotate(-3deg) scale(.98)}to{opacity:1;transform:none}}
@keyframes ba-tilt-in{from{opacity:0;transform:perspective(1000px) rotateX(6deg) translateY(1rem)}to{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0)}}
@keyframes ba-slide-down{from{opacity:0;transform:translateY(-.5rem);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-2rem -2rem -3rem -2rem)}}
@keyframes ba-slide-in-right{from{opacity:0;transform:translate3d(var(--slide-distance,1rem),0,0)}to{opacity:1;transform:none}}
@keyframes ba-draw{from{stroke-dasharray:var(--draw-length,1000);stroke-dashoffset:var(--draw-length,1000)}to{stroke-dasharray:var(--draw-length,1000);stroke-dashoffset:0}}
@keyframes ba-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ba-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* == 02. Keyframes: nature & ambient (slow, small amplitude) == */
@keyframes ba-leaf-grow{from{opacity:0;transform:scale(.9) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes ba-leaf-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes ba-sprout{from{opacity:0;transform:scaleY(.85)}to{opacity:1;transform:none}}
@keyframes ba-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes ba-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ba-spin{to{transform:rotate(360deg)}}
@keyframes ba-spin-slow{to{transform:rotate(360deg)}}
@keyframes ba-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.85}}
@keyframes ba-ripple{from{transform:scale(var(--ripple-from,0));opacity:var(--ripple-opacity,.5)}to{transform:scale(var(--ripple-scale,2.4));opacity:0}}
@keyframes ba-heartbeat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.05)}40%{transform:scale(1.02)}}
@keyframes ba-rain{0%{opacity:0;transform:translate3d(0,-.5rem,0)}15%,75%{opacity:1}to{opacity:0;transform:translate3d(var(--rain-x,0px),var(--rain-distance,1rem),0)}}
@keyframes ba-wave{from{background-position-x:var(--wave-from,0px)}to{background-position-x:var(--wave-to,var(--wave-length,480px))}}
@keyframes ba-ken-burns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-1.5%,-1%,0)}}
@keyframes ba-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* == 03. Keyframes: emphasis & feedback (white sheen, green glow, gentle feedback) == */
@keyframes ba-shine{from{transform:translateX(-160%) skewX(-20deg)}to{transform:translateX(380%) skewX(-20deg)}}
@keyframes ba-gradient-pan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ba-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(65,127,75,0))}50%{filter:drop-shadow(0 0 8px rgba(65,127,75,.35))}}
@keyframes ba-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ba-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes ba-wobble{0%,100%{transform:none}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes ba-typing{from{max-width:0}}
@keyframes ba-caret{0%,100%{border-right-color:currentColor}50%{border-right-color:transparent}}
@keyframes ba-progress{0%{transform:translateX(-100%) scaleX(.25)}50%{transform:translateX(15%) scaleX(.6)}to{transform:translateX(100%) scaleX(.25)}}
@keyframes ba-skeleton{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes ba-check-draw{0%{clip-path:polygon(0 60%,0 60%,0 60%,0 60%,0 100%,0 100%)}45%{clip-path:polygon(0 60%,50% 60%,50% 60%,100% 60%,100% 100%,0 100%)}to{clip-path:polygon(0 60%,50% 60%,50% 0,100% 0,100% 100%,0 100%)}}
@keyframes ba-count-pop{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:none}}

/* == 04. Scroll reveal (JS adds .is-revealed; hidden only when html.js) == */
.js [data-reveal]:not(.is-revealed){opacity:0}
/* app.js sets --reveal-delay (time), --reveal-i (index) and optional --reveal-step (time) */
.js [data-reveal-stagger]:not(.is-revealed)>:not([data-reveal]){opacity:0}
[data-reveal].is-revealed,[data-reveal-stagger].is-revealed>:not([data-reveal]){animation-duration:var(--reveal-duration,.6s);animation-timing-function:var(--ease-out-expo);animation-fill-mode:backwards;animation-delay:calc(var(--reveal-delay,0ms) + min(var(--reveal-i,0),10) * var(--reveal-step,70ms))}
[data-reveal-stagger].is-revealed>:not([data-reveal]){animation-name:ba-fade-up}
[data-reveal=fade].is-revealed,[data-reveal=fade-in].is-revealed{animation-name:ba-fade-in}
[data-reveal=fade-up].is-revealed{animation-name:ba-fade-up}
[data-reveal=fade-down].is-revealed{animation-name:ba-fade-down}
[data-reveal=fade-left].is-revealed{animation-name:ba-fade-left}
[data-reveal=fade-right].is-revealed{animation-name:ba-fade-right}
[data-reveal=zoom-in].is-revealed{animation-name:ba-zoom-in}
[data-reveal=zoom-out].is-revealed{animation-name:ba-zoom-out}
[data-reveal=pop].is-revealed{animation-name:ba-pop}
[data-reveal=flip-up].is-revealed{animation-name:ba-flip-up;transform-origin:50% 100%}
[data-reveal=flip-left].is-revealed{animation-name:ba-flip-left;transform-origin:0 50%}
[data-reveal=blur-in].is-revealed{animation-name:ba-blur-in}
[data-reveal=clip-up].is-revealed{animation-name:ba-clip-up}
[data-reveal=clip-left].is-revealed{animation-name:ba-clip-left;animation-duration:.7s}
[data-reveal=clip-circle].is-revealed{animation-name:ba-clip-circle;animation-duration:.8s}
[data-reveal=rotate-in].is-revealed{animation-name:ba-rotate-in}
[data-reveal=tilt-in].is-revealed{animation-name:ba-tilt-in}
[data-reveal=leaf-grow].is-revealed{animation-name:ba-leaf-grow;transform-origin:0 100%}
[data-reveal=sprout].is-revealed{animation-name:ba-sprout;transform-origin:50% 100%}
[data-reveal=grow-x].is-revealed{animation-name:ba-grow-x;transform-origin:0 50%}
[data-reveal=grow-y].is-revealed{animation-name:ba-grow-y;transform-origin:50% 0}
[data-reveal=slide-down].is-revealed{animation-name:ba-slide-down}
[data-reveal=draw].is-revealed{animation-name:ba-draw,ba-fade-in;animation-duration:1.6s,.4s;animation-timing-function:var(--ease-in-out),ease}
[data-reveal-delay="1"]{--reveal-delay:80ms}[data-reveal-delay="2"]{--reveal-delay:160ms}[data-reveal-delay="3"]{--reveal-delay:240ms}[data-reveal-delay="4"]{--reveal-delay:320ms}
[data-reveal-delay="5"]{--reveal-delay:400ms}[data-reveal-delay="6"]{--reveal-delay:480ms}[data-reveal-delay="7"]{--reveal-delay:560ms}[data-reveal-delay="8"]{--reveal-delay:640ms}
[data-reveal-delay="9"]{--reveal-delay:720ms}[data-reveal-delay="10"]{--reveal-delay:800ms}[data-reveal-delay="11"]{--reveal-delay:880ms}[data-reveal-delay="12"]{--reveal-delay:960ms}

/* == 05. Animation utilities (continuous loops: use only where meaningful — pins, progress, marquee, skeleton) == */
.anim-float{animation:ba-float 6s var(--ease-in-out) infinite}
.anim-sway{transform-origin:50% 100%;animation:ba-leaf-sway 6s ease-in-out infinite}
.anim-spin{animation:ba-spin 1s linear infinite}
.anim-spin-slow{animation:ba-spin-slow 30s linear infinite}
.anim-pulse{animation:ba-pulse 2.8s ease-in-out infinite}
.anim-heartbeat{animation:ba-heartbeat 2.4s ease-in-out infinite}
.anim-bob{animation:ba-bob 3.2s ease-in-out infinite}
.anim-bounce{animation:ba-bounce 2.4s var(--ease-in-out) infinite}
.anim-glow{animation:ba-glow 3.2s ease-in-out infinite}
.anim-wobble{animation:ba-wobble .6s var(--ease-out) both}
.anim-shake{animation:ba-shake .45s var(--ease-out) both}
.anim-pop{animation:ba-pop var(--dur-4) var(--ease-out-expo) both}
.anim-count-pop{animation:ba-count-pop var(--dur-5) var(--ease-out-expo) both}
.anim-sprout{transform-origin:50% 100%;animation:ba-sprout var(--dur-5) var(--ease-out-expo) both}
.anim-leaf-grow{transform-origin:0 100%;animation:ba-leaf-grow var(--dur-5) var(--ease-out-expo) both}
.anim-draw{animation:ba-draw 1.8s var(--ease-in-out) both}
.anim-gradient-pan{background-size:220% 220%;animation:ba-gradient-pan 10s ease infinite}
.anim-ken-burns{transform-origin:50% 50%;animation:ba-ken-burns 24s ease-in-out infinite alternate}
.anim-marquee{display:flex;width:max-content;animation:ba-marquee 40s linear infinite}
.anim-rain{animation:ba-rain 1.6s var(--ease-in) infinite}
.anim-wave{background-repeat:repeat-x;animation:ba-wave 16s linear infinite}
.anim-shine,.hover-shine{position:relative;isolation:isolate;overflow:hidden}
.anim-shine::after,.hover-shine::after{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-20deg);pointer-events:none}
.anim-shine::after{animation:ba-shine 4s var(--ease-in-out) 1s infinite}
.hover-shine:hover::after{animation:ba-shine .9s var(--ease-out-expo)}
.anim-ripple{position:relative;isolation:isolate}
.anim-ripple::before,.anim-ripple::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:2px solid var(--ripple-color,var(--c-green-600));--ripple-from:1;--ripple-scale:1.8;--ripple-opacity:.5;animation:ba-ripple 2.6s var(--ease-out) infinite}
.anim-ripple::after{animation-delay:1.3s}
.anim-typing{display:inline-block;max-width:var(--typing-width,100%);overflow:hidden;white-space:nowrap;vertical-align:bottom;padding-right:.06em;border-right:.08em solid;animation:ba-typing var(--typing-duration,2.4s) steps(var(--typing-steps,28),end) .3s both,ba-caret .85s step-end infinite}
.anim-caret{border-right:.08em solid;animation:ba-caret .85s step-end infinite}
.skeleton,.anim-skeleton{color:transparent!important;border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--c-cream-200) 30%,var(--c-cream-50) 50%,var(--c-cream-200) 70%);background-size:300% 100%;animation:ba-skeleton 1.5s ease-in-out infinite}
.anim-progress{transform-origin:0 50%;animation:ba-progress 1.6s var(--ease-in-out) infinite}
.anim-delay-1{animation-delay:.15s}.anim-delay-2{animation-delay:.3s}.anim-delay-3{animation-delay:.45s}.anim-delay-4{animation-delay:.6s}.anim-delay-5{animation-delay:.75s}.anim-delay-6{animation-delay:.9s}
.anim-slow{animation-duration:calc(var(--anim-slow,2) * 1s)!important}
.anim-paused,.anim-pause-hover:hover{animation-play-state:paused}
svg [class*="anim-"]{transform-box:fill-box;transform-origin:center}

/* == 06. Hover effects — small lifts, colour changes; no wobble, no bounce, no tilt == */
.hover-lift{transition:translate var(--dur-3) var(--ease-out-expo),box-shadow var(--dur-3) var(--ease-out-expo)}
.hover-lift:hover{translate:0 -2px;box-shadow:var(--shadow-md)}
.hover-grow{transition:scale var(--dur-3) var(--ease-out)}
.hover-grow:hover{scale:1.02}
.hover-underline{text-decoration:none;background:linear-gradient(var(--color-accent),var(--color-accent)) 0 100%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dur-4) var(--ease-out-expo)}
.hover-underline:hover{background-size:100% 2px}
/* [data-tilt]: app.js still writes --tilt-x/--tilt-y, but v2 never rotates anything (no 3D tilt) */

/* == 07. Button ripple — app.js may still append <span class="ripple">; v2 renders no ink == */
.ripple{display:none}

/* == 08. Reduced motion: no decorative motion, reveals shown instantly == */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]:not(.is-revealed){opacity:1}
  [data-reveal],[class*="anim-"],.marquee__track,.hero-showcase__field,.hero-showcase__pack,.hero-showcase__stat,.ripple{animation:none!important}
  .btn.is-loading::after,form.is-loading .btn[type="submit"]::after,[data-form-status].is-loading::before{animation:ba-spin 1.2s linear infinite!important}
}

/* == 09. DEPRECATED ALIASES (design v1) — compatibility only; never use in new markup == */
/* deprecated-aliases:start */
.hover-wobble:hover{animation:none}   /* hover wobble removed in v2: no-op */
/* deprecated-aliases:end */