/* =========================================================
   VELVETX AGENCY — Efectos al hacer scroll
   Los elementos aparecen con animación a medida que se baja por la página.
   ========================================================= */

/* Estado inicial (oculto) según el tipo de efecto */
[data-fx] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
  transition-delay: calc(var(--fx-i, 0) * 110ms);
  will-change: opacity, transform;
}
[data-fx="up"]    { transform: translateY(48px); }
[data-fx="left"]  { transform: translateX(-70px); }
[data-fx="right"] { transform: translateX(70px); }
[data-fx="zoom"]  { transform: scale(.9); filter: blur(6px); }
[data-fx="flip"]  { transform: perspective(900px) rotateX(18deg) translateY(40px); transform-origin: top center; }

/* Al entrar en pantalla */
[data-fx].fx-in { opacity: 1; transform: none; filter: none; }

/* Títulos de sección: la palabra destacada se "pinta" después */
.section-head[data-fx] .grad-text { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1) .35s; }
.section-head.fx-in .grad-text { clip-path: inset(0 0 0 0); }
.section-head[data-fx] .kicker { letter-spacing: 6px; transition: letter-spacing 1s ease .1s; }
.section-head.fx-in .kicker { letter-spacing: 2.5px; }

/* Barra de progreso de lectura (arriba de la página) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none;
  background: #EC008C; transform: scaleX(0); transform-origin: left;
}

/* Quien prefiere menos movimiento ve todo sin animación */
@media (prefers-reduced-motion: reduce) {
  [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .section-head[data-fx] .grad-text { clip-path: none !important; }
  .scroll-progress { display: none; }
}