/* ============================================================
   ANIM-KIT · Librería de animaciones vanilla
   Sin dependencias. HTML/CSS/JS puro.
   Uso: <div data-anim="reveal">…</div>
   ============================================================ */

:root{
  --anim-ease: cubic-bezier(.2,.8,.2,1);
  --anim-fast: 220ms;
  --anim-base: 600ms;
  --anim-slow: 900ms;
  /* Sobrescribe estos en cada proyecto */
  --anim-accent: #E8A860;
  --anim-accent-2: #FF7E5F;
  --anim-glow: rgba(232,168,96,.45);
}

/* ---------- 1. SCROLL REVEAL ---------- */
/* corregir_visibilidad_legacy_business.json: el estado de partida es
   opacity:0, asi que si el JS no llega a correr —error, bloqueo, red— todo lo
   que lleva reveal se queda invisible para siempre. Ahora solo se oculta
   cuando anim.js ya ha marcado el documento; sin JS, el contenido se ve. */
html.ak-js [data-anim="reveal"]{
  opacity:0; transform:translateY(30px);
  transition:opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease);
  will-change:opacity,transform;
}
html.ak-js [data-anim="reveal"].is-in{opacity:1;transform:none}

/* variantes de dirección: data-from="left|right|scale|blur" */
html.ak-js [data-anim="reveal"][data-from="left"]{transform:translateX(-40px)}
html.ak-js [data-anim="reveal"][data-from="right"]{transform:translateX(40px)}
html.ak-js [data-anim="reveal"][data-from="scale"]{transform:scale(.92)}
html.ak-js [data-anim="reveal"][data-from="blur"]{filter:blur(12px);transform:none}
html.ak-js [data-anim="reveal"][data-from="blur"].is-in{filter:blur(0)}

/* ---------- 2. SPLIT TEXT (letras con stagger) ---------- */
[data-anim="split"]{visibility:hidden}
[data-anim="split"].is-ready{visibility:visible}
.ak-char{
  display:inline-block; opacity:0; transform:translateY(.6em) rotate(4deg);
  transition:opacity var(--anim-base) var(--anim-ease), transform var(--anim-base) var(--anim-ease);
  will-change:opacity,transform;
}
.ak-char.is-in{opacity:1;transform:none}
.ak-word{display:inline-block;white-space:nowrap}

/* ---------- 3. BLUR TEXT (palabras que se enfocan) ---------- */
.ak-wordblur{
  display:inline-block; opacity:0; filter:blur(10px); transform:translateY(.3em);
  transition:opacity var(--anim-slow) var(--anim-ease), filter var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease);
}
.ak-wordblur.is-in{opacity:1;filter:blur(0);transform:none}

/* ---------- 4. SHINY TEXT (brillo que barre) ---------- */
[data-anim="shiny"]{
  background:linear-gradient(110deg,currentColor 40%,#fff 50%,currentColor 60%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ak-shine 3.5s linear infinite;
}
@keyframes ak-shine{to{background-position:-220% 0}}

/* ---------- 5. GRADIENT TEXT animado ---------- */
[data-anim="gradient"]{
  background:linear-gradient(90deg,var(--anim-accent),var(--anim-accent-2),var(--anim-accent));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ak-grad 4s linear infinite;
}
@keyframes ak-grad{to{background-position:200% center}}

/* ---------- 6. MAGNETIC (botón que atrae) ---------- */
[data-anim="magnetic"]{
  display:inline-flex; will-change:transform;
  transition:transform 400ms var(--anim-ease);
}

/* ---------- 7. TILT 3D ---------- */
[data-anim="tilt"]{
  transform-style:preserve-3d; will-change:transform;
  transition:transform 400ms var(--anim-ease);
}
[data-anim="tilt"] > *{transform:translateZ(40px)}

/* ---------- 8. SPOTLIGHT CARD (glow sigue al cursor) ---------- */
[data-anim="spotlight"]{position:relative;overflow:hidden;isolation:isolate}
[data-anim="spotlight"]::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:340px; height:340px; border-radius:50%;
  left:var(--ak-x,50%); top:var(--ak-y,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--anim-glow),transparent 65%);
  opacity:0; transition:opacity 400ms ease;
}
[data-anim="spotlight"]:hover::before{opacity:1}
[data-anim="spotlight"] > *{position:relative;z-index:1}

/* ---------- 9. LIFT (elevación al hover) ---------- */
[data-anim="lift"]{
  transition:transform 400ms var(--anim-ease), box-shadow 400ms var(--anim-ease);
  will-change:transform;
}
[data-anim="lift"]:hover{transform:translateY(-7px)}

/* ── Blindaje anti scroll horizontal ──
   Los marquees, auroras y elementos rotados desbordan por diseño.
   `overflow-x: hidden` en body NO recorta de forma fiable; `clip` sí,
   y a diferencia de hidden no rompe position:sticky. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* ---------- 10. MARQUEE infinito ---------- */
[data-anim="marquee"]{overflow:hidden;display:flex;max-width:100%}
[data-anim="marquee"] .ak-track{
  display:flex; flex-shrink:0; gap:var(--ak-gap,3rem); white-space:nowrap;
  animation:ak-marquee var(--ak-speed,25s) linear infinite;
}
[data-anim="marquee"]:hover .ak-track{animation-play-state:paused}
[data-anim="marquee"][data-dir="right"] .ak-track{animation-direction:reverse}
@keyframes ak-marquee{to{transform:translateX(calc(-100% - var(--ak-gap,3rem)))}}

/* ---------- 11. AURORA (fondo animado) ---------- */
[data-anim="aurora"]{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
[data-anim="aurora"] .ak-orb{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen;
}
[data-anim="aurora"] .ak-orb:nth-child(1){width:520px;height:520px;background:var(--anim-accent);top:-140px;left:-90px;animation:ak-float1 18s ease-in-out infinite}
[data-anim="aurora"] .ak-orb:nth-child(2){width:460px;height:460px;background:var(--anim-accent-2);top:22%;right:-120px;animation:ak-float2 22s ease-in-out infinite}
[data-anim="aurora"] .ak-orb:nth-child(3){width:400px;height:400px;background:var(--anim-glow);bottom:-150px;left:32%;animation:ak-float3 26s ease-in-out infinite}
@keyframes ak-float1{50%{transform:translate(120px,80px) scale(1.15)}}
@keyframes ak-float2{50%{transform:translate(-100px,60px) scale(1.1)}}
@keyframes ak-float3{50%{transform:translate(80px,-90px) scale(1.2)}}

/* ---------- 12. GRAIN (textura de película) ---------- */
[data-anim="grain"]{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- 13. CURSOR GLOW ---------- */
.ak-cursor-glow{
  position:fixed;width:400px;height:400px;border-radius:50%;
  pointer-events:none;z-index:9997;opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--anim-glow),transparent 65%);
  transition:opacity 400ms ease;
}

/* ---------- 14. DOT GRID (fondo de puntos) ---------- */
[data-anim="dots"]{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:26px 26px;opacity:.12;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}

/* ---------- 15. CLICK SPARK ---------- */
.ak-spark{
  position:fixed;pointer-events:none;z-index:9999;
  width:6px;height:6px;border-radius:50%;background:var(--anim-accent);
}

/* ---------- 16. UNDERLINE (link que se subraya) ---------- */
[data-anim="underline"]{position:relative;display:inline-block}
[data-anim="underline"]::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;
  background:var(--anim-accent);transition:width 320ms var(--anim-ease);
}
[data-anim="underline"]:hover::after{width:100%}

/* ---------- 17. PARALLAX ---------- */
[data-anim="parallax"]{will-change:transform}

/* ---------- 18. ROTATING TEXT (palabras que rotan) ---------- */
[data-anim="rotate-text"]{
  display:inline-flex;overflow:hidden;vertical-align:bottom;
  height:1.2em;position:relative;
}
[data-anim="rotate-text"] .ak-rot{
  display:block;position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(100%);
  transition:opacity 500ms var(--anim-ease), transform 500ms var(--anim-ease);
}
[data-anim="rotate-text"] .ak-rot.is-active{opacity:1;transform:translateY(0)}
[data-anim="rotate-text"] .ak-rot.is-out{opacity:0;transform:translateY(-100%)}

/* ---------- 19. COUNT UP ---------- */
[data-anim="count"]{font-variant-numeric:tabular-nums}

/* ---------- 20. PARTICLES / BEAMS (canvas) ---------- */
canvas[data-anim="particles"],canvas[data-anim="beams"]{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;
}

/* ============================================================
   ACCESIBILIDAD — respeta prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-anim="reveal"],.ak-char,.ak-wordblur{opacity:1!important;transform:none!important;filter:none!important}
  [data-anim="split"]{visibility:visible}
  .ak-cursor-glow,[data-anim="aurora"],[data-anim="grain"]{display:none}
}