/* =============================================================
   animations.css — Microanimaciones y efectos de scroll
   Se activan añadiendo la clase .visible mediante IntersectionObserver
   (ver js/main.js). Respeta prefers-reduced-motion (definido en style.css).
   ============================================================= */

/* Fade + subida sutil (uso general) */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Variante: zoom suave */
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="zoom"].visible{transform:scale(1)}

/* Variante: desde la izquierda / derecha */
[data-reveal="izquierda"]{transform:translateX(-36px)}
[data-reveal="izquierda"].visible{transform:translateX(0)}
[data-reveal="derecha"]{transform:translateX(36px)}
[data-reveal="derecha"].visible{transform:translateX(0)}

/* Retraso escalonado para grupos (tarjetas, listas) */
[data-reveal].retraso-1{transition-delay:.08s}
[data-reveal].retraso-2{transition-delay:.16s}
[data-reveal].retraso-3{transition-delay:.24s}
[data-reveal].retraso-4{transition-delay:.32s}
[data-reveal].retraso-5{transition-delay:.4s}
[data-reveal].retraso-6{transition-delay:.48s}

/* Parallax ligero sobre ilustraciones de fondo (aplicado vía transform en JS) */
.parallax-capa{will-change:transform}

/* Indicador de scroll del hero: rebote infinito */
@keyframes rebote{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}
.hero-indicador{animation:rebote 2.2s ease-in-out infinite}

/* Línea del eyebrow: expansión de entrada */
@keyframes crecer-linea{from{width:0}to{width:26px}}
.eyebrow::before{animation:crecer-linea .6s var(--ease) .1s both}

/* Hover elegante para tarjetas genéricas */
.hover-elevar{transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1)}
.hover-elevar:hover{transform:translateY(-6px)}

/* Brillo sutil al pasar el cursor sobre botones dorados */
.btn-oro{position:relative;overflow:hidden}
.btn-oro::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
}
.btn-oro:hover::after{left:130%;transition:left .7s ease}

/* Transición de página (fade-in del body al cargar) */
body{animation:fade-pagina .6s ease both}
@keyframes fade-pagina{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero-indicador,body,.eyebrow::before{animation:none !important}
}