/* 279studio — animación: parallax, stagger, contadores, WebGL host */

.parallax-layer { will-change: transform; }

.hero-webgl { position: absolute; inset: 0; z-index: 0; opacity: 0.85; pointer-events: none; }
.hero-webgl ~ .container { position: relative; z-index: 1; }
.hero-webgl canvas { width: 100%; height: 100%; display: block; }

/* Stagger menú / listas */
.stagger-item { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.stagger-item.is-in { opacity: 1; transform: translateY(0); }

/* Fade-in genérico para secciones al hacer scroll */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.fade-up.is-in { opacity: 1; transform: translateY(0); }
.fade-up[data-delay="1"] { transition-delay: 0.08s; }
.fade-up[data-delay="2"] { transition-delay: 0.16s; }
.fade-up[data-delay="3"] { transition-delay: 0.24s; }

/* Trazo animado — iconos custom (hero, Sistema) */
.icon-draw path { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); transition: stroke-dashoffset 1.1s var(--ease-in-out); }
.icon-draw.is-in path { stroke-dashoffset: 0; }

/* Iconos librería estándar — fade simple */
.icon-fade { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.icon-fade.is-in { opacity: 1; }

/* Diagrama de partículas — Sistema */
#particle-diagram { width: 100%; aspect-ratio: 16/9; max-height: 480px; }

/* Simulador precios — barras */
.sim-bar-track { height: 6px; background: var(--linea); border-radius: 999px; overflow: hidden; margin-bottom: 1.8rem; }
.sim-bar-fill { height: 100%; width: 100%; background: var(--acento-vivo); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-webgl { display: none; }
}