/* ===================================================================
   Natural Food — LIBRERÍA DE ANIMACIONES (~110)
   Optimizada: solo transform/opacity, capas controladas, y las
   continuas SOLO corren cuando están en pantalla (.vis lo pone el JS
   con IntersectionObserver). Respeta prefers-reduced-motion y perf-lite.
   USO:
     · Entrada (1 vez):     <div data-anim="fade-up">…</div>
     · Continua (en bucle): <div data-fx="float">…</div>
     · Hover:               <div class="hx-lift">…</div>
     · Texto/efectos JS:    data-typewriter, data-count, data-fx="confetti"…
   =================================================================== */

:root{
  --anim-ease: cubic-bezier(.22,1,.36,1);
  --anim-spring: cubic-bezier(.34,1.56,.64,1);
  --anim-dur: .8s;
}

/* ====== Motor de aparición (data-anim) — UNA vez, barato ====== */
[data-anim]{ opacity:0; transition:opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease), clip-path var(--anim-dur) var(--anim-ease), filter var(--anim-dur) var(--anim-ease); transition-delay:var(--d,0s); }
[data-anim].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); filter:none; }

[data-anim="fade"]{}
[data-anim="fade-up"]{ transform:translateY(30px); }
[data-anim="fade-down"]{ transform:translateY(-30px); }
[data-anim="fade-left"]{ transform:translateX(34px); }
[data-anim="fade-right"]{ transform:translateX(-34px); }
[data-anim="slide-up"]{ transform:translateY(70px); }
[data-anim="slide-down"]{ transform:translateY(-70px); }
[data-anim="slide-left"]{ transform:translateX(80px); }
[data-anim="slide-right"]{ transform:translateX(-80px); }
[data-anim="zoom-in"]{ transform:scale(.82); }
[data-anim="zoom-out"]{ transform:scale(1.18); }
[data-anim="scale-up"]{ transform:scale(.5); }
[data-anim="scale-down"]{ transform:scale(1.5); }
[data-anim="grow"]{ transform:scale(0); }
[data-anim="shrink"]{ transform:scale(1.6); opacity:0; }
[data-anim="expand"]{ transform:scaleX(.4); transform-origin:center; }
[data-anim="collapse"]{ transform:scaleY(.2); transform-origin:center; }
[data-anim="reveal"]{ clip-path:inset(0 100% 0 0); opacity:1; }       /* barrido de izq a der */
[data-anim="unreveal"]{ clip-path:inset(0 0 0 0); opacity:1; }
[data-anim="unreveal"].is-in{ clip-path:inset(0 100% 0 0); }
[data-anim="reveal-up"]{ clip-path:inset(100% 0 0 0); opacity:1; }
[data-anim="rotate-in"]{ transform:rotate(-10deg) scale(.92); }
[data-anim="flip-x"]{ transform:perspective(900px) rotateX(80deg); }
[data-anim="flip-y"]{ transform:perspective(900px) rotateY(80deg); }
[data-anim="bounce-in"]{ transform:scale(.3); transition-timing-function:var(--anim-spring); }
[data-anim].is-in{ transition-timing-function:var(--anim-spring); }
[data-anim="blur-in"]{ filter:blur(12px); opacity:0; }

/* ====== Movimiento continuo (data-fx) — pausado hasta estar visible ====== */
[data-fx]{ animation-play-state:paused; }
[data-fx].vis{ animation-play-state:running; }

@keyframes fx-bounce{ 0%,20%,53%,80%,100%{ transform:translateY(0); } 40%,43%{ transform:translateY(-22px); } 70%{ transform:translateY(-11px); } 90%{ transform:translateY(-4px); } }
[data-fx="bounce"]{ animation:fx-bounce 1.8s var(--anim-ease) infinite; }
@keyframes fx-bounce-loop{ 0%{transform:scale(.4);opacity:0} 40%{transform:scale(1.05);opacity:1} 60%{transform:scale(1)} 80%{transform:scale(1);opacity:1} 100%{transform:scale(.4);opacity:0} }
[data-fx="bounce-in"]{ animation:fx-bounce-loop 2.4s var(--anim-spring) infinite; }
@keyframes fx-bounce-out{ 0%{transform:scale(1);opacity:1} 30%{transform:scale(1.1)} 100%{transform:scale(.3);opacity:0} }
[data-fx="bounce-out"]{ animation:fx-bounce-out 2.2s var(--anim-ease) infinite; }
@keyframes fx-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
[data-fx="float"]{ animation:fx-float 3.4s ease-in-out infinite; }
@keyframes fx-drift{ 0%{transform:translate(0,0)} 25%{transform:translate(10px,-8px)} 50%{transform:translate(-6px,-14px)} 75%{transform:translate(-10px,-4px)} 100%{transform:translate(0,0)} }
[data-fx="drift"]{ animation:fx-drift 7s ease-in-out infinite; }
@keyframes fx-swing{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(9deg); } 75%{ transform:rotate(-9deg); } }
[data-fx="swing"]{ transform-origin:top center; animation:fx-swing 2.6s ease-in-out infinite; }
@keyframes fx-wobble{ 0%,100%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-18px) rotate(-6deg)} 30%{transform:translateX(14px) rotate(5deg)} 45%{transform:translateX(-10px) rotate(-3deg)} 60%{transform:translateX(7px) rotate(2deg)} 75%{transform:translateX(-4px) rotate(-1deg)} }
[data-fx="wobble"]{ animation:fx-wobble 2.4s ease-in-out infinite; }
@keyframes fx-shake{ 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-7px)} 20%,40%,60%,80%{transform:translateX(7px)} }
[data-fx="shake"]{ animation:fx-shake 1.6s ease-in-out infinite; }
@keyframes fx-jiggle{ 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-4deg) scale(1.04)} 50%{transform:rotate(3deg) scale(.98)} 75%{transform:rotate(-2deg) scale(1.02)} }
[data-fx="jiggle"]{ animation:fx-jiggle 1.2s ease-in-out infinite; }
@keyframes fx-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
[data-fx="pulse"]{ animation:fx-pulse 1.8s ease-in-out infinite; }
@keyframes fx-heartbeat{ 0%{transform:scale(1)} 14%{transform:scale(1.18)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} }
[data-fx="heartbeat"]{ animation:fx-heartbeat 1.6s ease-in-out infinite; }
@keyframes fx-vibrate{ 0%,100%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(2px,-2px)} }
[data-fx="vibrate"]{ animation:fx-vibrate .3s linear infinite; }
@keyframes fx-bobbing{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
[data-fx="bobbing"]{ animation:fx-bobbing 2.8s ease-in-out infinite; }
@keyframes fx-orbit{ from{ transform:rotate(0) translateX(40px) rotate(0); } to{ transform:rotate(360deg) translateX(40px) rotate(-360deg); } }
[data-fx="orbit"]{ animation:fx-orbit 4s linear infinite; }

/* ====== Rotación ====== */
@keyframes fx-spin{ to{ transform:rotate(360deg); } }
[data-fx="rotate-cw"]{ animation:fx-spin 6s linear infinite; }
[data-fx="spin"]{ animation:fx-spin 1.4s linear infinite; }
@keyframes fx-spin-ccw{ to{ transform:rotate(-360deg); } }
[data-fx="rotate-ccw"]{ animation:fx-spin-ccw 6s linear infinite; }
@keyframes fx-half-spin{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(180deg)} }
[data-fx="half-spin"]{ animation:fx-half-spin 3s var(--anim-ease) infinite; }
@keyframes fx-flip-h{ 0%,100%{transform:perspective(900px) rotateY(0)} 50%{transform:perspective(900px) rotateY(180deg)} }
[data-fx="flip-h"]{ animation:fx-flip-h 3s ease-in-out infinite; }
@keyframes fx-flip-v{ 0%,100%{transform:perspective(900px) rotateX(0)} 50%{transform:perspective(900px) rotateX(180deg)} }
[data-fx="flip-v"]{ animation:fx-flip-v 3s ease-in-out infinite; }
@keyframes fx-rot3d-x{ 0%,100%{transform:perspective(900px) rotateX(0)} 50%{transform:perspective(900px) rotateX(55deg)} }
[data-fx="rot3d-x"]{ animation:fx-rot3d-x 3.4s ease-in-out infinite; }
@keyframes fx-rot3d-y{ 0%,100%{transform:perspective(900px) rotateY(0)} 50%{transform:perspective(900px) rotateY(55deg)} }
[data-fx="rot3d-y"]{ animation:fx-rot3d-y 3.4s ease-in-out infinite; }
@keyframes fx-barrel{ from{transform:perspective(1000px) rotateY(0)} to{transform:perspective(1000px) rotateY(360deg)} }
[data-fx="barrel-roll"]{ animation:fx-barrel 2s ease-in-out infinite; }

/* Flip card (3D al hover): <div class="flip-card"><div class="flip-inner"><div class="flip-front">…</div><div class="flip-back">…</div></div></div> */
.flip-card{ perspective:1000px; }
.flip-card .flip-inner{ position:relative; width:100%; height:100%; transition:transform .7s var(--anim-ease); transform-style:preserve-3d; }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-card .flip-front, .flip-card .flip-back{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip-card .flip-back{ transform:rotateY(180deg); }

/* ====== Hover ====== */
.hx-lift, .hx-drop, .hx-zoom, .hx-rotate, .hx-grow, .hx-glow{ transition:transform .3s var(--anim-spring), box-shadow .3s var(--anim-ease), filter .3s var(--anim-ease); }
.hx-lift:hover{ transform:translateY(-8px); box-shadow:var(--sh-2,0 10px 30px rgba(0,0,0,.15)); }
.hx-drop:hover{ transform:translateY(8px); }
.hx-zoom:hover{ transform:scale(1.06); }
.hx-rotate:hover{ transform:rotate(4deg); }
.hx-grow:hover{ transform:scale(1.12); }
.hx-glow:hover{ filter:drop-shadow(0 0 10px var(--accent,#8C8A4E)); }

/* ====== Texto ====== */
/* Gradient Text Flow */
@keyframes fx-grad-flow{ to{ background-position:200% center; } }
.tx-gradient{ background:linear-gradient(90deg, var(--accent-ink,#4A4820), var(--coral,#F0726E), var(--teal,#2FAF9E), var(--accent-ink,#4A4820)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:fx-grad-flow 4s linear infinite; }
[data-fx="gradient-text"]{ animation:fx-grad-flow 4s linear infinite; }
/* Neon Flicker */
@keyframes fx-neon{ 0%,100%{ text-shadow:0 0 4px var(--accent,#8C8A4E),0 0 11px var(--accent,#8C8A4E),0 0 19px var(--accent,#8C8A4E); opacity:1 } 43%{ opacity:1 } 45%{ text-shadow:none; opacity:.6 } 47%{ opacity:1 } 92%{ opacity:1 } 93%{ text-shadow:none; opacity:.7 } 95%{ opacity:1 } }
[data-fx="neon"]{ color:var(--accent-bright,#A8A663); animation:fx-neon 3s linear infinite; }
/* Glitch (usa data-text="…" igual al contenido) */
.tx-glitch{ position:relative; }
.tx-glitch::before, .tx-glitch::after{ content:attr(data-text); position:absolute; inset:0; background:inherit; }
@keyframes fx-glitch1{ 0%,100%{clip-path:inset(0 0 85% 0); transform:translateX(0)} 20%{clip-path:inset(40% 0 40% 0); transform:translateX(-3px)} 40%{clip-path:inset(70% 0 10% 0); transform:translateX(3px)} 60%{clip-path:inset(10% 0 70% 0); transform:translateX(-2px)} 80%{clip-path:inset(55% 0 25% 0); transform:translateX(2px)} }
@keyframes fx-glitch2{ 0%,100%{clip-path:inset(60% 0 20% 0); transform:translateX(0)} 25%{clip-path:inset(15% 0 60% 0); transform:translateX(3px)} 50%{clip-path:inset(45% 0 30% 0); transform:translateX(-3px)} 75%{clip-path:inset(80% 0 5% 0); transform:translateX(2px)} }
[data-fx="glitch"].vis .tx-glitch::before, .tx-glitch.vis::before{ color:var(--coral,#F0726E); animation:fx-glitch1 2.2s steps(2) infinite; }
[data-fx="glitch"].vis .tx-glitch::after, .tx-glitch.vis::after{ color:var(--teal,#2FAF9E); animation:fx-glitch2 2.6s steps(2) infinite; }
.tx-glitch::before{ animation:fx-glitch1 2.2s steps(2) infinite; color:var(--coral,#F0726E); }
.tx-glitch::after{ animation:fx-glitch2 2.6s steps(2) infinite; color:var(--teal,#2FAF9E); }
/* Typewriter (caret) — el texto lo escribe el JS */
.tx-type{ border-right:.08em solid currentColor; animation:fx-caret 1s steps(1) infinite; white-space:pre-wrap; }
@keyframes fx-caret{ 50%{ border-color:transparent; } }
/* Letter/Word reveal (spans inyectados por JS) */
.tx-split .ch, .tx-split .wd{ display:inline-block; opacity:0; transform:translateY(.5em); transition:opacity .5s var(--anim-ease), transform .5s var(--anim-ease); }
.tx-split.is-in .ch, .tx-split.is-in .wd{ opacity:1; transform:none; }

/* ====== Botones e interacción ====== */
/* Ripple → lo dispara el JS añadiendo <span class="a-ripple"> */
.a-ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0); background:rgba(255,255,255,.5); pointer-events:none; animation:a-ripple .6s var(--anim-ease) forwards; }
@keyframes a-ripple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
/* Glow */
.btn-glow{ position:relative; }
@keyframes fx-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(140,138,78,.5); } 50%{ box-shadow:0 0 22px 4px rgba(140,138,78,.55); } }
.btn-glow:hover{ animation:fx-glow 1.4s ease-in-out infinite; }
/* Fill (relleno desde abajo) */
.btn-fill{ position:relative; z-index:0; overflow:hidden; }
.btn-fill::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent-ink,#4A4820); transform:translateY(101%); transition:transform .35s var(--anim-ease); }
.btn-fill:hover{ color:#fff; } .btn-fill:hover::before{ transform:translateY(0); }
/* Border draw */
.btn-border{ position:relative; background:none; }
.btn-border::after{ content:""; position:absolute; inset:0; border:2px solid var(--accent-ink,#4A4820); border-radius:inherit; clip-path:inset(0 100% 0 0); transition:clip-path .4s var(--anim-ease); }
.btn-border:hover::after{ clip-path:inset(0 0 0 0); }
/* Underline slide */
.lnk-underline{ position:relative; text-decoration:none; }
.lnk-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--anim-ease); }
.lnk-underline:hover::after{ transform:scaleX(1); }
/* Expand / Morph / Press */
.btn-expand{ transition:padding .3s var(--anim-ease), letter-spacing .3s var(--anim-ease); }
.btn-expand:hover{ padding-left:34px; padding-right:34px; letter-spacing:.04em; }
.btn-morph{ transition:border-radius .4s var(--anim-spring), background .3s; }
.btn-morph:hover{ border-radius:8px; }
.btn-press{ transition:transform .12s var(--anim-ease); }
.btn-press:active{ transform:scale(.92); }

/* ====== Cargadores ====== */
.ld{ display:inline-block; }
@keyframes ld-spin{ to{ transform:rotate(360deg); } }
.ld-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line-2,#ddd); border-top-color:var(--accent-ink,#4A4820); animation:ld-spin .8s linear infinite; }
.ld-circular{ width:38px; height:38px; border-radius:50%; background:conic-gradient(var(--accent-ink,#4A4820) 0 25%, var(--line,#eee) 0); -webkit-mask:radial-gradient(circle 12px at center, transparent 98%, #000); mask:radial-gradient(circle 12px at center, transparent 98%, #000); animation:ld-spin 1s linear infinite; }
.ld-dots{ display:inline-flex; gap:6px; }
.ld-dots i{ width:9px; height:9px; border-radius:50%; background:var(--accent-ink,#4A4820); animation:ld-bounce 1.2s ease-in-out infinite; }
.ld-dots i:nth-child(2){ animation-delay:.15s; } .ld-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes ld-bounce{ 0%,80%,100%{ transform:scale(.5); opacity:.4; } 40%{ transform:scale(1); opacity:1; } }
.ld-pulse{ width:30px; height:30px; border-radius:50%; background:var(--accent-ink,#4A4820); animation:ld-pulse 1.2s ease-in-out infinite; }
@keyframes ld-pulse{ 0%{ transform:scale(.2); opacity:1; } 100%{ transform:scale(1.1); opacity:0; } }
.ld-bar{ width:160px; height:6px; border-radius:3px; background:var(--line-2,#ddd); overflow:hidden; position:relative; }
.ld-bar::after{ content:""; position:absolute; inset:0; width:40%; border-radius:3px; background:var(--accent-ink,#4A4820); animation:ld-bar 1.2s var(--anim-ease) infinite; }
@keyframes ld-bar{ 0%{ left:-40%; } 100%{ left:100%; } }
.ld-wave{ display:inline-flex; gap:4px; align-items:flex-end; height:30px; }
.ld-wave i{ width:5px; height:100%; background:var(--accent-ink,#4A4820); border-radius:3px; animation:ld-wave 1s ease-in-out infinite; }
.ld-wave i:nth-child(2){animation-delay:.1s} .ld-wave i:nth-child(3){animation-delay:.2s} .ld-wave i:nth-child(4){animation-delay:.3s} .ld-wave i:nth-child(5){animation-delay:.4s}
@keyframes ld-wave{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
.ld-cube{ width:30px; height:30px; background:var(--accent-ink,#4A4820); animation:ld-cube 1.4s ease-in-out infinite; }
@keyframes ld-cube{ 0%{ transform:perspective(120px) rotateX(0) rotateY(0); } 50%{ transform:perspective(120px) rotateX(-180deg) rotateY(0); } 100%{ transform:perspective(120px) rotateX(-180deg) rotateY(-180deg); } }
.ld-infinity{ width:54px; height:28px; }
.ld-infinity svg{ width:100%; height:100%; }
.ld-infinity path{ stroke:var(--accent-ink,#4A4820); stroke-width:4; fill:none; stroke-dasharray:50 100; animation:ld-inf 1.4s linear infinite; }
@keyframes ld-inf{ to{ stroke-dashoffset:-150; } }
/* Skeleton + Shimmer */
.ld-skeleton{ background:var(--line,#eee); border-radius:8px; }
.ld-shimmer{ position:relative; overflow:hidden; background:var(--line,#eee); border-radius:8px; }
.ld-shimmer::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:ld-shimmer 1.4s infinite; }
@keyframes ld-shimmer{ to{ transform:translateX(100%); } }

/* ====== Efectos avanzados (CSS) ====== */
/* Background gradient animation */
@keyframes fx-bg-grad{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.bg-animated{ background:linear-gradient(120deg, var(--blob-a,#49C5B6), var(--blob-b,#FF9398), var(--blob-c,#E9C98A), var(--blob-a,#49C5B6)); background-size:300% 300%; animation:fx-bg-grad 12s ease infinite; }
[data-fx="bg-grad"]{ background-size:300% 300%; animation:fx-bg-grad 12s ease infinite; }
/* Morphing shapes (border-radius) */
@keyframes fx-morph{ 0%,100%{ border-radius:42% 58% 70% 30%/45% 45% 55% 55%; } 33%{ border-radius:70% 30% 46% 54%/30% 60% 40% 70%; } 66%{ border-radius:34% 66% 58% 42%/62% 38% 62% 38%; } }
[data-fx="morph"]{ animation:fx-morph 8s ease-in-out infinite; }
/* Liquid (wobble blob) */
@keyframes fx-liquid{ 0%,100%{ border-radius:50% 50% 50% 50%; transform:translateY(0) scale(1); } 50%{ border-radius:46% 54% 60% 40%; transform:translateY(-6px) scale(1.04); } }
[data-fx="liquid"]{ animation:fx-liquid 5s ease-in-out infinite; }

/* ====== Scroll-linked (el JS pone --p = 0..1 de progreso) ====== */
[data-scroll="fade"]{ opacity:calc(.15 + var(--p,0)*.85); }
[data-scroll="zoom"]{ transform:scale(calc(.8 + var(--p,0)*.2)); }
[data-scroll="rotate"]{ transform:rotate(calc(var(--p,0)*360deg)); }

/* Barra de progreso de scroll (la usa el motor existente #scroll-progress) */

/* ====== Accesibilidad / rendimiento ====== */
@media (prefers-reduced-motion: reduce){
  [data-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; transition:none !important; }
  [data-fx], [data-fx].vis, .bg-animated, .tx-gradient, [data-fx="neon"]{ animation:none !important; }
  .ld-spinner,.ld-circular,.ld-dots i,.ld-pulse,.ld-bar::after,.ld-wave i,.ld-cube,.ld-infinity path,.ld-shimmer::after{ animation-duration:1.6s; }
}
/* En modo ligero (PC flojo) se cortan las animaciones continuas/pesadas */
body.perf-lite [data-fx], body.perf-lite .bg-animated, body.perf-lite .tx-gradient,
body.perf-lite [data-fx="neon"], body.perf-lite .btn-glow:hover{ animation:none !important; }
body.perf-lite [data-fx]{ animation-play-state:paused !important; }