/* Grass-Fed Essentials motion layer.
 * Purpose: a calm, precise "instrument" feel. Every effect is transform/opacity
 * only (compositor-friendly), gated behind prefers-reduced-motion, and never
 * blocks reading. Loaded on every page after gfe-moe-enhancements-v7.css.
 */
:root{--gfe-ease:cubic-bezier(.2,.7,.2,1);--gfe-ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- WhatsApp: pulsing presence ---------- */
.gfe-whatsapp-fab{isolation:isolate;overflow:visible}
.gfe-whatsapp-fab::before,.gfe-whatsapp-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;opacity:0;pointer-events:none;z-index:-1}
.gfe-whatsapp-icon{position:relative}
.gfe-whatsapp-icon::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#d7ffe6;box-shadow:0 0 0 2px #1fa855}
@media (prefers-reduced-motion:no-preference){
  .gfe-whatsapp-fab::before{animation:gfe-wa-ring 2.6s var(--gfe-ease-out) infinite}
  .gfe-whatsapp-fab::after{animation:gfe-wa-ring 2.6s var(--gfe-ease-out) infinite 1.1s}
  .gfe-whatsapp-fab:not(.gfe-wa-seen){animation:gfe-wa-breathe 2.6s ease-in-out infinite}
  .gfe-whatsapp-icon::after{animation:gfe-wa-dot 2.6s ease-in-out infinite}
  .gfe-whatsapp-fab.gfe-wa-seen::before,.gfe-whatsapp-fab.gfe-wa-seen::after{animation-duration:5.2s}
}
@keyframes gfe-wa-ring{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.75);opacity:0}100%{transform:scale(1.75);opacity:0}}
@keyframes gfe-wa-breathe{0%,100%{box-shadow:0 8px 20px rgba(22,126,67,.24)}50%{box-shadow:0 10px 26px rgba(22,126,67,.42)}}
@keyframes gfe-wa-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ---------- Reveal on scroll (JS adds .gfe-rv to elements below the fold) ---------- */
@media (prefers-reduced-motion:no-preference){
  .gfe-rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s var(--gfe-ease),transform .9s var(--gfe-ease-out);transition-delay:var(--gfe-rv-delay,0ms);will-change:opacity,transform}
  .gfe-rv.gfe-in{opacity:1;transform:none;will-change:auto}
}

/* ---------- Hero art: float + rotating light ---------- */
.gfe-hero-art,.gfe-fbh-art,[data-gfe-float]{position:relative}
@media (prefers-reduced-motion:no-preference){
  .gfe-hero-art img,.gfe-fbh-art img,[data-gfe-float] img{animation:gfe-float 7s ease-in-out infinite;transform-origin:50% 100%}
  .gfe-hero-glow,.gfe-fbh-glow{animation:gfe-glow-drift 14s ease-in-out infinite alternate}
}
@keyframes gfe-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes gfe-glow-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,3%,0) scale(1.08)}}

/* ---------- Living background for hero panels ---------- */
.gfe-mesh{position:relative;overflow:hidden}
.gfe-mesh::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 30%,rgba(132,179,156,.34) 0,rgba(132,179,156,0) 70%),
    radial-gradient(32% 36% at 78% 22%,rgba(218,228,235,.9) 0,rgba(218,228,235,0) 70%),
    radial-gradient(40% 40% at 70% 80%,rgba(227,241,231,.95) 0,rgba(227,241,231,0) 70%);
  filter:blur(18px)}
.gfe-mesh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(61,92,73,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(61,92,73,.07) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(60% 70% at 70% 50%,#000 0,transparent 100%);-webkit-mask-image:radial-gradient(60% 70% at 70% 50%,#000 0,transparent 100%)}
.gfe-mesh>:not(.gfe-hero-glow,.gfe-fbh-glow,style,script){position:relative;z-index:1}
.gfe-mesh>.gfe-hero-glow,.gfe-mesh>.gfe-fbh-glow{z-index:1}
@media (prefers-reduced-motion:no-preference){
  .gfe-mesh::before{animation:gfe-mesh 22s ease-in-out infinite alternate}
}
@keyframes gfe-mesh{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(4%,-3%,0) rotate(6deg)}}

/* ---------- Buttons: lift + light sweep ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  a[style*="border-radius:999px"],button[style*="border-radius:999px"],.gfe-btn{position:relative;overflow:hidden;transition:transform .35s var(--gfe-ease-out),box-shadow .35s var(--gfe-ease-out)}
  a[style*="border-radius:999px"]:hover,button[style*="border-radius:999px"]:hover,.gfe-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(38,51,44,.14)}
  a[style*="border-radius:999px"]::after,button[style*="border-radius:999px"]::after,.gfe-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--gfe-ease-out);pointer-events:none}
  a[style*="border-radius:999px"]:hover::after,button[style*="border-radius:999px"]:hover::after,.gfe-btn:hover::after{left:120%}
}

/* ---------- Cards: tilt-free lift, glow edge ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .gfe-card,[data-gfe-card]{transition:transform .4s var(--gfe-ease-out),box-shadow .4s var(--gfe-ease-out),border-color .3s}
  .gfe-card:hover,[data-gfe-card]:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(38,51,44,.10);border-color:#84b39c}
}

/* ---------- Animated numbers and lab figures ---------- */
[data-gfe-count]{font-variant-numeric:tabular-nums}
.gfe-fig{margin:34px 0;padding:22px 22px 16px;border:1px solid #e3ebe4;border-radius:20px;background:linear-gradient(180deg,#fcfdfc,#f3f8f4)}
.gfe-fig svg{display:block;width:100%;height:auto;overflow:visible}
.gfe-fig figcaption{font-family:'Engravers Gothic','Julius Sans One',sans-serif;font-size:10.5px;letter-spacing:.2em;color:#3d5c49;margin:12px 0 0;text-transform:uppercase}
.gfe-fig .k{font-family:'Engravers Gothic','Julius Sans One',sans-serif;font-size:11px;letter-spacing:.16em;fill:#5a6a60}
.gfe-fig .v{font-family:'Fahkwang',sans-serif;font-size:15px;fill:#26332c}
.gfe-fig .l{stroke:#3d5c49;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gfe-fig .l2{stroke:#84b39c;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:4 5}
.gfe-fig .g{stroke:#e3ebe4;stroke-width:1}
.gfe-fig .a{fill:#ebf4ec}
.gfe-fig .dot{fill:#3d5c49}
@media (prefers-reduced-motion:no-preference){
  .gfe-fig .draw{stroke-dasharray:1200;stroke-dashoffset:1200}
  .gfe-fig.gfe-in .draw{animation:gfe-draw 2.4s var(--gfe-ease-out) forwards}
  .gfe-fig .pulse{transform-box:fill-box;transform-origin:center;animation:gfe-pulse 2.2s ease-in-out infinite}
  .gfe-fig .spin{transform-box:fill-box;transform-origin:center;animation:gfe-spin 9s linear infinite}
  .gfe-fig .rise{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
  .gfe-fig.gfe-in .rise{animation:gfe-rise 1.2s var(--gfe-ease-out) forwards}
  .gfe-fig .rise:nth-of-type(2){animation-delay:.15s}.gfe-fig .rise:nth-of-type(3){animation-delay:.3s}.gfe-fig .rise:nth-of-type(4){animation-delay:.45s}
  .gfe-fig .scan{animation:gfe-scan 4s linear infinite}
  .gfe-fig .fadein{opacity:0}
  .gfe-fig.gfe-in .fadein{animation:gfe-fadein .8s 1.6s var(--gfe-ease-out) forwards}
}
@keyframes gfe-draw{to{stroke-dashoffset:0}}
@keyframes gfe-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.5}}
@keyframes gfe-spin{to{transform:rotate(360deg)}}
@keyframes gfe-rise{to{transform:scaleY(1)}}
@keyframes gfe-scan{0%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes gfe-fadein{to{opacity:1}}

/* ---------- Section divider: a live meter line ---------- */
.gfe-meter{height:2px;background:#e3ebe4;position:relative;overflow:hidden;border-radius:2px}
.gfe-meter::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,#84b39c,transparent)}
@media (prefers-reduced-motion:no-preference){.gfe-meter::after{animation:gfe-meter 3.2s var(--gfe-ease) infinite}}
@keyframes gfe-meter{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* ---------- Dark CTA panels: pointer light (desktop) ---------- */
.gfe-light{position:relative;overflow:hidden}
.gfe-light::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(132,179,156,.22),transparent 60%);opacity:0;transition:opacity .4s}
@media (hover:hover){.gfe-light:hover::before{opacity:1}}
.gfe-light>*{position:relative}

/* Status pill with a live dot */
.gfe-live{display:inline-flex;align-items:center;gap:8px;font-family:'Engravers Gothic','Julius Sans One',sans-serif;font-size:10.5px;letter-spacing:.22em;color:#3d5c49}
.gfe-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#1fa855;box-shadow:0 0 0 0 rgba(31,168,85,.5)}
@media (prefers-reduced-motion:no-preference){.gfe-live::before{animation:gfe-livedot 2s infinite}}
@keyframes gfe-livedot{0%{box-shadow:0 0 0 0 rgba(31,168,85,.5)}70%{box-shadow:0 0 0 9px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}