/* ============================================================
   ANIMATIONS — clases utilitarias activadas por JS (animations.js)
   ============================================================ */

/* ---- Keyframes base ---- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fadeInSlow{
  from{opacity:0}
  to{opacity:.9}
}
@keyframes fadeLeft{
  from{opacity:0;transform:translateX(-32px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes fadeRight{
  from{opacity:0;transform:translateX(32px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
@keyframes drawPath{
  to{stroke-dashoffset:0}
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(255,147,76,.55)}
  50%{box-shadow:0 0 0 6px rgba(255,147,76,0)}
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes spinSlow{
  to{transform:rotate(360deg)}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* ---- Clases de reveal (aplicadas por IntersectionObserver) ---- */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(28px)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal="fade"]{transform:none}

[data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}

/* Aparición escalonada: delay incremental via variable CSS --stagger seteada por JS */
[data-reveal-group] [data-reveal]{transition-delay:calc(var(--stagger,0) * 90ms)}

/* ---- Hover elegante genérico ---- */
.hover-lift{transition:transform var(--t-fast),box-shadow var(--t-fast)}
.hover-lift:hover{transform:translateY(-6px)}

/* ---- Flotación ambiental (elementos decorativos del hero) ---- */
.float-slow{animation:floatY 6s ease-in-out infinite}
.float-slow.delay-1{animation-delay:.8s}
.float-slow.delay-2{animation-delay:1.6s}

/* ---- Icono giratorio decorativo ---- */
.spin-slow{animation:spinSlow 18s linear infinite}

/* ---- Skeleton / shimmer (usado si una card carga contenido async) ---- */
.shimmer{
  background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-50) 50%,var(--grey-100) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
}

/* ---- Contador animado: solo transición de color al completar ---- */
.stat-num.is-counting{color:var(--blue-primary)}

/* ---- Botón microinteracción: onda al click, controlada por JS añadiendo/removiendo .is-pressed ---- */
.btn{overflow:hidden}
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,rgba(255,255,255,.35) 0%,transparent 60%);
  opacity:0;transform:scale(0);transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.btn.is-pressed::before{opacity:1;transform:scale(1.8)}

/* ---- Navbar scroll states ---- */
.navbar{will-change:transform,background}

/* ---- Parallax suave (aplicado vía transform en JS a data-parallax) ---- */
[data-parallax]{will-change:transform}

/* ---- Cards flotantes (hero panel) ---- */
.hero-panel{animation:fadeIn 1s ease .2s both}

/* ---- Loader de página (opcional, discreto) ---- */
.page-loaded [data-reveal]{transition-duration:.8s}

/* ---- Icono con línea trazada (usado en feature-icon svg si aplica) ---- */
.draw-icon path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1s var(--ease)}
.is-visible .draw-icon path{stroke-dashoffset:0}
/* ============================================================
   CURSOR PERSONALIZADO + BOTONES MAGNÉTICOS + TEXTO REVELADO
   Inspirado en el tipo de interacción de sitios premiados
   (cursor que crece sobre links, CTAs que "persiguen" el mouse,
   titulares que entran palabra por palabra al hacer scroll).
   Solo activo en dispositivos con mouse (hover:hover, pointer:fine).
   ============================================================ */

/* ---- Cursor personalizado ---- */
.has-custom-cursor{cursor:none}
.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor input,.has-custom-cursor textarea{cursor:none}

.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px;height:6px;background:var(--green);
  transition:transform .15s var(--ease),opacity .3s ease;
}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid rgba(255,147,76,.55);
  transition:width .35s var(--ease),height .35s var(--ease),
             border-color .35s var(--ease),background .35s var(--ease),opacity .3s ease;
}
.cursor-ring.is-hovering{
  width:64px;height:64px;
  background:rgba(255,147,76,.1);
  border-color:var(--green);
}
.cursor-ring.is-hidden,.cursor-dot.is-hidden{opacity:0}

/* ---- Botones magnéticos ---- */
.btn.is-magnetic{transition:transform .25s var(--ease),box-shadow var(--t-fast),background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}

/* ---- Texto revelado por palabras al hacer scroll ---- */
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-word-inner{
  display:inline-block;
  transform:translateY(112%);
  transition:transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
[data-split].is-split-visible .split-word-inner{transform:translateY(0)}

@media (max-width:640px){
  .cursor-dot,.cursor-ring{display:none}
  .has-custom-cursor{cursor:auto}
}