/* =========================================================================
   FACELESS · LIBRERÍA DE ANIMACIONES
   ~100 animaciones. CSS-based aquí; las JS-driven viven en anim.js.
   Uso:
     · Scroll reveal:  <div data-anim="fade-in-up">…</div>   (se anima al entrar)
     · Continuas:      <div class="anim-float">…</div>
     · Hover:          <button class="hov-lift">…</button>
     · Loaders:        <div class="ld-spinner"></div>
     · Texto/efectos:  ver anim.js  (data-text, FX.confetti(), etc.)
   Respeta prefers-reduced-motion.
   ========================================================================= */

:root{
  --a-dur: .9s;
  --a-ease: cubic-bezier(.22,1,.36,1);
  --a-ease-sig: cubic-bezier(.255,.195,.135,.99);
  --a-accent: #ff6b2c;
}

/* =========================================================================
   1 · ENTRADA Y APARICIÓN  ·  via [data-anim]  (oculto → .is-in)
   ========================================================================= */
[data-anim]{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease), clip-path var(--a-dur) var(--a-ease), filter var(--a-dur) var(--a-ease);
  transition-delay:var(--a-delay,0s);
}
[data-anim].is-in{opacity:1;transform:none;clip-path:inset(0);filter:none;}

[data-anim="fade-in"]{opacity:0;}
[data-anim="fade-out"]{opacity:1;}
[data-anim="fade-out"].is-in{opacity:0;}

[data-anim="fade-in-up"]{transform:translateY(40px);}
[data-anim="fade-in-down"]{transform:translateY(-40px);}
[data-anim="fade-in-left"]{transform:translateX(-40px);}
[data-anim="fade-in-right"]{transform:translateX(40px);}

[data-anim="slide-in-up"]{transform:translateY(100px);opacity:1;}
[data-anim="slide-in-down"]{transform:translateY(-100px);opacity:1;}
[data-anim="slide-in-left"]{transform:translateX(-120px);opacity:1;}
[data-anim="slide-in-right"]{transform:translateX(120px);opacity:1;}

[data-anim="zoom-in"]{transform:scale(.6);}
[data-anim="zoom-out"]{transform:scale(1.4);}
[data-anim="scale-up"]{transform:scale(.8);}
[data-anim="scale-down"]{transform:scale(1.15);}

[data-anim="expand"]{transform:scaleX(.2);opacity:1;transform-origin:center;}
[data-anim="collapse"]{transform:scaleY(.1);opacity:1;transform-origin:top;}

[data-anim="reveal"]{clip-path:inset(0 0 100% 0);opacity:1;}
[data-anim="unreveal"]{clip-path:inset(0);opacity:1;}
[data-anim="unreveal"].is-in{clip-path:inset(100% 0 0 0);opacity:1;}

[data-anim="grow"]{transform:scale(0);transform-origin:center;}
[data-anim="shrink"]{transform:scale(1.6);}

/* =========================================================================
   2 · MOVIMIENTO  ·  continuas (.anim-*) + entrada (bounce-in/out)
   ========================================================================= */
@keyframes a-bounce{0%,20%,53%,80%,100%{transform:translateY(0)}40%,43%{transform:translateY(-22px)}70%{transform:translateY(-11px)}90%{transform:translateY(-4px)}}
.anim-bounce{animation:a-bounce 1.6s var(--a-ease) infinite;}

@keyframes a-bounce-in{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}
[data-anim="bounce-in"]{opacity:0;}
[data-anim="bounce-in"].is-in{animation:a-bounce-in .9s var(--a-ease) both;}

@keyframes a-bounce-out{0%{transform:scale(1)}30%{transform:scale(1.05)}100%{opacity:0;transform:scale(.3)}}
[data-anim="bounce-out"].is-in{animation:a-bounce-out .8s var(--a-ease) both;}

@keyframes a-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.anim-float{animation:a-float 4s ease-in-out infinite;}

@keyframes a-drift{0%{transform:translate(0,0)}25%{transform:translate(10px,-8px)}50%{transform:translate(-6px,6px)}75%{transform:translate(8px,4px)}100%{transform:translate(0,0)}}
.anim-drift{animation:a-drift 9s ease-in-out infinite;}

@keyframes a-swing{15%{transform:rotate(5deg)}30%{transform:rotate(-5deg)}45%{transform:rotate(3deg)}60%{transform:rotate(-3deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
.anim-swing{transform-origin:top center;animation:a-swing 2.4s ease infinite;}

@keyframes a-wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-12px) rotate(-5deg)}30%{transform:translateX(9px) rotate(3deg)}45%{transform:translateX(-7px) rotate(-3deg)}60%{transform:translateX(5px) rotate(2deg)}75%{transform:translateX(-3px) rotate(-1deg)}}
.anim-wobble{animation:a-wobble 1.4s ease infinite;}

@keyframes a-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-6px)}20%,40%,60%,80%{transform:translateX(6px)}}
.anim-shake{animation:a-shake .7s ease infinite;}

@keyframes a-jiggle{0%,100%{transform:scale(1,1)}30%{transform:scale(1.08,.92)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}}
.anim-jiggle{animation:a-jiggle .9s ease infinite;}

@keyframes a-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.anim-pulse{animation:a-pulse 1.8s ease-in-out infinite;}

@keyframes a-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.18)}70%{transform:scale(1)}}
.anim-heartbeat{animation:a-heartbeat 1.6s ease-in-out infinite;}

@keyframes a-vibrate{0%,100%{transform:translate(0)}20%{transform:translate(-1.5px,1.5px)}40%{transform:translate(-1.5px,-1.5px)}60%{transform:translate(1.5px,1.5px)}80%{transform:translate(1.5px,-1.5px)}}
.anim-vibrate{animation:a-vibrate .25s linear infinite;}

@keyframes a-bobbing{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.anim-bobbing{animation:a-bobbing 3s ease-in-out infinite;}

@keyframes a-orbit{from{transform:rotate(0) translateX(var(--orbit-r,40px)) rotate(0)}to{transform:rotate(360deg) translateX(var(--orbit-r,40px)) rotate(-360deg)}}
.anim-orbit{animation:a-orbit 6s linear infinite;}

/* hover lift / drop */
.hov-lift{transition:transform .4s var(--a-ease), box-shadow .4s var(--a-ease);}
.hov-lift:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(20,17,12,.18);}
.hov-drop{transition:transform .4s var(--a-ease);}
.hov-drop:hover{transform:translateY(6px);}

/* move along path · offset-path (config inline o JS) */
.anim-path{offset-path:var(--path, path('M0,0 C 60,-40 120,40 180,0'));animation:a-path 6s linear infinite;}
@keyframes a-path{from{offset-distance:0%}to{offset-distance:100%}}

/* =========================================================================
   3 · ROTACIÓN
   ========================================================================= */
@keyframes a-spin{to{transform:rotate(360deg)}}
.anim-rotate-cw{animation:a-spin 8s linear infinite;}
.anim-rotate-ccw{animation:a-spin 8s linear infinite reverse;}
.anim-spin{animation:a-spin 1.1s linear infinite;}

@keyframes a-half-spin{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}
.anim-half-spin{animation:a-half-spin 3s var(--a-ease) infinite;}

@keyframes a-flip-h{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
.anim-flip-h{animation:a-flip-h 3s ease-in-out infinite;backface-visibility:hidden;}
@keyframes a-flip-v{0%,100%{transform:rotateX(0)}50%{transform:rotateX(180deg)}}
.anim-flip-v{animation:a-flip-v 3s ease-in-out infinite;backface-visibility:hidden;}

/* flip card · estructura .flip-card > .flip-inner > .flip-front/.flip-back */
.flip-card{perspective:1000px;}
.flip-card .flip-inner{position:relative;transform-style:preserve-3d;transition:transform .8s var(--a-ease);}
.flip-card:hover .flip-inner{transform:rotateY(180deg);}
.flip-card .flip-front,.flip-card .flip-back{backface-visibility:hidden;position:absolute;inset:0;}
.flip-card .flip-back{transform:rotateY(180deg);}

@keyframes a-rot3d-x{to{transform:rotateX(360deg)}}
.anim-rotate3d-x{animation:a-rot3d-x 7s linear infinite;transform-style:preserve-3d;}
@keyframes a-rot3d-y{to{transform:rotateY(360deg)}}
.anim-rotate3d-y{animation:a-rot3d-y 7s linear infinite;transform-style:preserve-3d;}

@keyframes a-barrel{to{transform:rotate(360deg) translateZ(0)}}
.anim-barrel-roll{animation:a-barrel 1s var(--a-ease);}
[data-anim="barrel-roll"].is-in{animation:a-barrel 1s var(--a-ease) both;opacity:1;}

/* =========================================================================
   4 · SCROLL  ·  reveal/fade/zoom/rotate gestionados por anim.js
   (scroll-fade/zoom/rotate usan [data-anim] + scrub en JS)
   ========================================================================= */
[data-anim="scroll-rotate"]{transform:rotate(-12deg);}
[data-anim="scroll-morph"]{clip-path:inset(0 0 100% 0);}

/* progress bar global (la pinta anim.js) */
.fx-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9000;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--a-accent),#ff8a5c);pointer-events:none;}

/* sticky transform helper */
.fx-sticky{position:sticky;top:0;}

/* infinite horizontal track */
@keyframes a-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.anim-infinite-x{display:inline-flex;white-space:nowrap;animation:a-marquee 28s linear infinite;}
.anim-infinite-x:hover{animation-play-state:paused;}

/* =========================================================================
   5 · TEXTO  (CSS; el resto en anim.js)
   ========================================================================= */
/* gradient text flow */
@keyframes a-grad-flow{to{background-position:200% center}}
.txt-gradient-flow{
  background:linear-gradient(90deg,var(--a-accent),#ffb098,#ffd66b,var(--a-accent));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:a-grad-flow 4s linear infinite;
}
/* neon flicker */
@keyframes a-neon{0%,18%,22%,25%,53%,57%,100%{text-shadow:0 0 4px var(--a-accent),0 0 11px var(--a-accent),0 0 19px var(--a-accent);opacity:1}20%,24%,55%{text-shadow:none;opacity:.7}}
.txt-neon{color:#fff;animation:a-neon 3s linear infinite;}
/* split/letter/word reveal base (anim.js parte el texto) */
.txt-split .ch,.txt-split .wd{display:inline-block;opacity:0;transform:translateY(.6em) rotate(4deg);transition:opacity .6s var(--a-ease),transform .7s var(--a-ease);transition-delay:calc(var(--i,0)*30ms);}
.txt-split.is-in .ch,.txt-split.is-in .wd{opacity:1;transform:none;}
.txt-fade .ch,.txt-fade .wd{display:inline-block;opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i,0)*24ms);}
.txt-fade.is-in .ch,.txt-fade.is-in .wd{opacity:1;}
/* glitch */
@keyframes a-glitch{0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}20%{clip-path:inset(20% 0 60% 0);transform:translate(-3px,1px)}40%{clip-path:inset(60% 0 10% 0);transform:translate(3px,-1px)}60%{clip-path:inset(10% 0 70% 0);transform:translate(-2px,2px)}80%{clip-path:inset(70% 0 5% 0);transform:translate(2px,-2px)}}
.txt-glitch{position:relative;}
.txt-glitch::before,.txt-glitch::after{content:attr(data-glitch);position:absolute;inset:0;}
.txt-glitch::before{color:#ff6b2c;animation:a-glitch 2.6s steps(2) infinite;}
.txt-glitch::after{color:#2bb7c4;animation:a-glitch 2s steps(2) infinite reverse;}

/* =========================================================================
   6 · BOTONES E INTERACCIÓN
   ========================================================================= */
.btn-fx{position:relative;overflow:hidden;}
/* ripple (anim.js inyecta el span) */
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:a-ripple .6s ease-out forwards;}
@keyframes a-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* glow */
.hov-glow{transition:box-shadow .35s var(--a-ease);}
.hov-glow:hover{box-shadow:0 0 26px 2px rgba(255,107,44,.5);}
/* fill animation */
.btn-fill{position:relative;z-index:0;overflow:hidden;transition:color .35s ease;}
.btn-fill::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--a-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--a-ease);}
.btn-fill:hover::before{transform:scaleX(1);}
.btn-fill:hover{color:#fff;}
/* border draw */
.btn-border-draw{position:relative;}
.btn-border-draw::after{content:'';position:absolute;inset:0;border:1.5px solid var(--a-accent);border-radius:inherit;clip-path:inset(0 100% 100% 0);transition:clip-path .5s var(--a-ease);}
.btn-border-draw:hover::after{clip-path:inset(0 0 0 0);}
/* underline slide */
.lnk-underline{position:relative;}
.lnk-underline::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--a-ease);}
.lnk-underline:hover::after{transform:scaleX(1);transform-origin:left;}
/* button expand / morph / press */
.btn-expand{transition:padding .3s var(--a-ease),letter-spacing .3s var(--a-ease);}
.btn-expand:hover{padding-left:32px;padding-right:32px;letter-spacing:.04em;}
.btn-morph{transition:border-radius .4s var(--a-ease),background .3s ease;}
.btn-morph:hover{border-radius:6px;}
.btn-press{transition:transform .1s ease;}
.btn-press:active{transform:scale(.94);}
.hov-zoom{transition:transform .4s var(--a-ease);}
.hov-zoom:hover{transform:scale(1.08);}
.hov-rotate{transition:transform .4s var(--a-ease);}
.hov-rotate:hover{transform:rotate(-4deg) scale(1.04);}

/* =========================================================================
   7 · CARGA / LOADERS
   ========================================================================= */
.ld-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(20,17,12,.12);border-top-color:var(--a-accent);animation:a-spin 1s linear infinite;}
.ld-dots{display:inline-flex;gap:7px;}
.ld-dots i{width:9px;height:9px;border-radius:50%;background:var(--a-accent);animation:a-dotpulse 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 a-dotpulse{0%,80%,100%{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}
.ld-bar{width:200px;height:5px;border-radius:3px;background:rgba(20,17,12,.1);overflow:hidden;position:relative;}
.ld-bar::after{content:'';position:absolute;inset:0;width:40%;background:var(--a-accent);border-radius:3px;animation:a-barslide 1.2s var(--a-ease) infinite;}
@keyframes a-barslide{0%{left:-40%}100%{left:100%}}
.ld-skeleton{background:rgba(20,17,12,.07);border-radius:8px;position:relative;overflow:hidden;}
.ld-skeleton::after,.ld-shimmer::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:a-shimmer 1.5s infinite;}
.ld-shimmer{position:relative;overflow:hidden;}
@keyframes a-shimmer{100%{transform:translateX(100%)}}
.ld-circular{width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--a-accent) var(--p,25%),rgba(20,17,12,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0);animation:a-spin 1.3s linear infinite;}
.ld-wave{display:inline-flex;gap:4px;align-items:flex-end;height:34px;}
.ld-wave i{width:5px;height:100%;background:var(--a-accent);border-radius:3px;animation:a-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 a-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ld-pulse{width:38px;height:38px;border-radius:50%;background:var(--a-accent);animation:a-pulsering 1.2s ease-out infinite;}
@keyframes a-pulsering{0%{box-shadow:0 0 0 0 rgba(255,107,44,.5)}100%{box-shadow:0 0 0 22px rgba(255,107,44,0)}}
.ld-cube{width:34px;height:34px;background:var(--a-accent);animation:a-cube 1.4s ease-in-out infinite;}
@keyframes a-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;position:relative;}
.ld-infinity::before{content:'';position:absolute;inset:0;border:4px solid var(--a-accent);border-radius:50% 50% 50% 50%/50%;border-right-color:transparent;border-bottom-color:transparent;animation:a-spin 1.1s linear infinite;}

/* =========================================================================
   8 · EFECTOS AVANZADOS (CSS; canvas FX en anim.js)
   ========================================================================= */
@keyframes a-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% 56% 44%/64% 44% 56% 36%}}
.fx-morph{animation:a-morph 8s ease-in-out infinite;}
/* liquid · blob gooey autocontenido (sin filtro SVG externo) */
@keyframes a-liquid{
  0%,100%{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;transform:translate(0,0) rotate(0)}
  25%{border-radius:70% 30% 50% 50%/30% 60% 40% 70%;transform:translate(2px,-3px) rotate(2deg)}
  50%{border-radius:34% 66% 40% 60%/60% 40% 60% 40%;transform:translate(-2px,2px) rotate(-2deg)}
  75%{border-radius:60% 40% 55% 45%/40% 60% 35% 65%;transform:translate(3px,1px) rotate(1deg)}
}
.fx-liquid{animation:a-liquid 7s ease-in-out infinite;}
@keyframes a-bg-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.fx-bg-gradient{background:linear-gradient(120deg,#fff1ea,#ffe8dd,#ffd9c4,#fff1ea);background-size:300% 300%;animation:a-bg-gradient 12s ease infinite;}
.fx-cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--a-accent);pointer-events:none;z-index:9500;transform:translate(-50%,-50%);}

/* =========================================================================
   REDUCED MOTION · apaga todo lo no esencial
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important;}
  .anim-bounce,.anim-float,.anim-drift,.anim-swing,.anim-wobble,.anim-shake,.anim-jiggle,
  .anim-pulse,.anim-heartbeat,.anim-vibrate,.anim-bobbing,.anim-orbit,.anim-rotate-cw,
  .anim-rotate-ccw,.anim-spin,.anim-half-spin,.anim-flip-h,.anim-flip-v,.anim-rotate3d-x,
  .anim-rotate3d-y,.anim-infinite-x,.txt-gradient-flow,.txt-neon,.fx-morph,.fx-bg-gradient,
  .txt-glitch::before,.txt-glitch::after{animation:none!important;}
}