/* ========== Animaciones dinámicas (estilo 3D Portfolio) ========== */
/* Estados iniciales para animaciones al scroll - GSAP los anima a visible */

html {
  scroll-behavior: smooth;
}

/* Elementos que se animan - estado inicial oculto */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}

[data-animate="fade-down"] {
  opacity: 0;
  transform: translateY(-50px);
  will-change: transform, opacity;
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(60px);
  will-change: transform, opacity;
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(-60px);
  will-change: transform, opacity;
}

[data-animate="zoom-in"] {
  opacity: 0;
  transform: scale(0.9);
  will-change: transform, opacity;
}

[data-animate="text"] {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Hijos escalonados - el padre tiene data-stagger, los hijos se animan en secuencia */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

/* Efecto tilt en tarjetas (hover 3D suave) */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

.tilt-card:hover {
  transform: translateY(-6px) perspective(1000px) rotateX(2deg) rotateY(2deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Gradientes de texto (como 3d-portfolio) */
.text-gradient-cyan {
  background: linear-gradient(to top, #11998e, #38ef7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-blue {
  background: linear-gradient(to top, #2f80ed, #56ccf2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-brand {
  background: linear-gradient(90deg, #faea3c, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero - estado inicial para animación al cargar */
[data-hero-title],
[data-hero-subtitle],
[data-hero-cta] {
  opacity: 0;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > *,
  [data-hero-title],
  [data-hero-subtitle],
  [data-hero-cta] {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .tilt-card:hover {
    transform: translateY(-4px);
  }
}