/* ============================================================
   Juan Gabriel Agudelo · anim.css
   Capa de animación aditiva. Todo cuelga de html.sc-anim, que
   solo pone anim.js. Si el JS falla o el visitante pide menos
   movimiento, no se aplica nada y la página queda igual que antes.
   Regla de la casa: aquí no se anima ningún transform que ya use
   styles.css, para no pelear con los efectos que ya existen.
   ============================================================ */

@property --ga { syntax:'<number>'; inherits:false; initial-value:0 }

/* ---------- 1. Reflejo que sigue al cursor ----------
   Va como capa de imagen sobre el color de fondo de la tarjeta:
   así no hace falta inyectar elementos ni tocar el apilamiento. */
html.sc-anim .svc__c,
html.sc-anim .tool,
html.sc-anim .rev,
html.sc-anim .faq__i,
html.sc-anim .ct__row,
html.sc-anim .stat,
html.sc-anim .strip li,
html.sc-anim #homeGrid > *{
  background-image:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),
    rgba(6,182,212,calc(var(--ga) * .16)), transparent 64%);
  transition:--ga .4s var(--ease);
}
html.sc-anim .svc__c:hover,
html.sc-anim .tool:hover,
html.sc-anim .rev:hover,
html.sc-anim .faq__i:hover,
html.sc-anim .ct__row:hover,
html.sc-anim .stat:hover,
html.sc-anim .strip li:hover,
html.sc-anim #homeGrid > *:hover{ --ga:1 }

/* ---------- 2. Botones que se acercan al cursor ----------
   El desplazamiento, el levantón del hover y el hundido del clic
   viven en un solo transform para que no se pisen entre ellos. */
html.sc-anim .btn{
  transform:translate3d(var(--mx,0px), calc(var(--my,0px) + var(--lift,0px)), 0) scale(var(--sc,1));
}
html.sc-anim .btn:hover{ --lift:-2px }
html.sc-anim .btn:active{ --sc:.985 }
html.sc-anim .btn > *{ position:relative; z-index:1 }

/* Onda al hacer clic */
html.sc-anim .a-rip{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 68%);
  transform:scale(0); opacity:.9;
  animation:aRipple .62s var(--ease) forwards;
}
html.sc-anim .btn--ghost .a-rip,
html.sc-anim .btn--light .a-rip{
  background:radial-gradient(circle, rgba(37,99,235,.28), rgba(37,99,235,0) 68%);
}
@keyframes aRipple{ to{ transform:scale(1); opacity:0 } }

/* ---------- 3. Iconos con vida ---------- */
html.sc-anim .svc__ic .ic,
html.sc-anim .tool__ic .ic,
html.sc-anim .why__ic .ic,
html.sc-anim .ct__ic .ic,
html.sc-anim .strip .ic{
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
html.sc-anim .svc__c:hover .svc__ic .ic,
html.sc-anim .tool:hover .tool__ic .ic,
html.sc-anim .why__list li:hover .why__ic .ic,
html.sc-anim .ct__row:hover .ct__ic .ic{ transform:scale(1.16) rotate(-8deg) }
html.sc-anim .strip li:hover .ic{ transform:translateY(-4px) scale(1.12) }

/* ---------- 4. Barra deslizante bajo el menú ---------- */
html.sc-anim .hd__nav{ position:relative }
html.sc-anim .a-navbar{
  position:absolute; bottom:6px; left:0; height:2px; width:0;
  border-radius:2px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan-lit));
  box-shadow:0 0 10px rgba(6,182,212,.6);
  transition:transform .42s var(--ease), width .42s var(--ease), opacity .3s;
}
html.sc-anim .a-navbar.on{ opacity:1 }
/* Una sola marca bajo la sección activa: con la barra deslizante puesta,
   el subrayado fijo del enlace sobra y se veían dos rayas. */
html.sc-anim .hd__nav > a.is-active::after{ width:0 }
@media(max-width:1024px){
  html.sc-anim .a-navbar{ display:none }
  html.sc-anim .hd__nav > a.is-active::after{ width:100% }
}

/* ---------- 5. Cabecera que se encoge ---------- */
html.sc-anim .hd__in{ transition:height .38s var(--ease) }
html.sc-anim .brand__mark{ transition:height .38s var(--ease) }
html.sc-anim .hd.a-small .hd__in{ height:62px }
html.sc-anim .hd.a-small .brand__mark{ height:42px }

/* ---------- 6. Línea del proceso que avanza con el scroll ---------- */
html.sc-anim .a-tlprog{
  position:absolute; left:50%; top:0; width:5px;
  transform:translateX(-50%) scaleY(var(--p,0)); transform-origin:top center;
  border-radius:5px; pointer-events:none; height:100%;
  background:linear-gradient(180deg,rgba(125,240,255,.9),rgba(37,99,235,.85));
  box-shadow:0 0 16px rgba(6,182,212,.5);
  will-change:transform;
}
@media(max-width:900px){ html.sc-anim .a-tlprog{ left:14px } }
@media(max-width:520px){ html.sc-anim .a-tlprog{ left:12px } }

/* ---------- 7. Barra que crece bajo cada cifra ---------- */
html.sc-anim .stat{ position:relative; overflow:hidden }
html.sc-anim .a-bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--cyan-lit));
  transition:transform 1.1s var(--ease) .15s;
}
html.sc-anim .a-bar.a-in{ transform:scaleX(1) }

/* ---------- 8. Anillo que late en el WhatsApp flotante ----------
   Va en un pseudo-elemento y solo con box-shadow, que se dibuja por fuera
   de la caja: así no tapa el icono ni mueve el globo de texto, que es
   absoluto y se descoloca si se le toca la posición. */
html.sc-anim .wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:aPulse 2.8s var(--ease) infinite;
}
@keyframes aPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55) }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
}

/* ---------- 9. Catálogo cargando ---------- */
html.sc-anim #homeGrid:empty{
  min-height:230px; border-radius:var(--radius);
  background:linear-gradient(100deg,#eaf1fa 28%,#f8fbff 48%,#eaf1fa 68%);
  background-size:220% 100%;
  animation:aShimmer 1.5s linear infinite;
}
@keyframes aShimmer{ to{ background-position:-220% 0 } }
html.sc-anim #homeGrid.a-done:empty{ animation:none; background:none; min-height:0 }

/* ---------- 10. Formulario ---------- */
html.sc-anim .fld label{ transition:color .25s, transform .25s var(--ease); transform-origin:left center }
html.sc-anim .fld:focus-within label{ color:var(--blue); transform:translateX(4px) }

/* ---------- 11. Galería ---------- */
html.sc-anim .work__tag{ transition:transform .38s var(--ease), background .3s }
html.sc-anim .work:hover .work__tag{ transform:translateY(-4px) }

/* ---------- 12. Enlaces del pie con subrayado que crece ---------- */
html.sc-anim .ft__col a{
  background-image:linear-gradient(90deg,var(--cyan-lit),var(--blue));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:color .25s, background-size .38s var(--ease);
}
html.sc-anim .ft__col a:hover{ background-size:100% 1.5px }

/* ---------- 13. Imagen del bloque «Sobre mí» con parallax ---------- */
html.sc-anim .why__frame img{ transform:translate3d(0,var(--py,0px),0); will-change:transform }

/* ============================================================
   Entradas al hacer scroll
   Nada se esconde por CSS a secas: hace falta que anim.js ponga
   el atributo data-a. Y si algo sale mal, a los 5 s el propio JS
   marca todo como visto. Así ningún texto puede quedar en blanco.
   ============================================================ */
html.sc-anim [data-a]{ transition-delay:var(--d,0ms) }

/* etiqueta de sección */
html.sc-anim [data-a="tag"]{
  opacity:0; transform:translateY(10px) scale(.9);
  transition:opacity .5s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1);
}
html.sc-anim [data-a="tag"].a-in{ opacity:1; transform:none }

/* separador de sección: se dibuja del centro hacia afuera */
html.sc-anim [data-a="sep"]{ transform:scaleX(0); transform-origin:center; transition:transform .9s var(--ease) }
html.sc-anim [data-a="sep"].a-in{ transform:scaleX(1) }

/* imágenes: cortina que sube. Solo clip-path, para no chocar
   con el zoom que ya tienen al pasar el cursor. */
html.sc-anim [data-a="img"]{ clip-path:inset(0 0 100% 0); transition:clip-path .95s var(--ease) }
html.sc-anim [data-a="img"].a-in{ clip-path:inset(0 0 0 0) }

/* nodos del proceso */
html.sc-anim [data-a="node"]{
  opacity:0; transform:scale(.4);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1);
}
html.sc-anim [data-a="node"].a-in{ opacity:1; transform:none }

/* elementos de lista en cascada */
html.sc-anim [data-a="pop"]{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
html.sc-anim [data-a="pop"].a-in{ opacity:1; transform:none }

/* filas de contacto: entran de lado */
html.sc-anim [data-a="slide"]{
  opacity:0; transform:translateX(-18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
html.sc-anim [data-a="slide"].a-in{ opacity:1; transform:none }

/* ---------- Respeto por quien pide menos movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  html.sc-anim [data-a]{ opacity:1!important; transform:none!important; clip-path:none!important }
  html.sc-anim .a-pulse,
  html.sc-anim #homeGrid:empty{ animation:none!important }
  html.sc-anim .btn{ transform:none!important }
}