/* ═══════════════════════════════════════════════════════════
   Industrias Correa · UI Motion (prueba experimental)
   Movimiento ligado al scroll y reveals de entrada.

   Progressive enhancement: el estado inicial oculto SOLO se aplica
   bajo html.ic-motion, clase que pone animations.js al arrancar.
   Sin JS (o con prefers-reduced-motion) todo se ve tal cual,
   porque la clase nunca se añade.

   Solo se animan transform y opacity: no hay saltos de layout.
   ═══════════════════════════════════════════════════════════ */

/* ── Reveal de entrada (una sola vez) ────────────────────── */
html.ic-motion [data-ic-reveal]{
  opacity:0;
  transform:translate3d(0,var(--ic-rise,20px),0);
  will-change:opacity,transform;
}
html.ic-motion [data-ic-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--ic-delay,0ms);
}
/* Terminada la transición se libera la capa de composición */
html.ic-motion [data-ic-reveal].is-done{will-change:auto}

/* Reveal editorial de proyectos: cortina vertical muy sutil */
html.ic-motion .proj-item[data-ic-reveal]{
  --ic-rise:26px;
  clip-path:inset(12% 0 0 0);
}
html.ic-motion .proj-item[data-ic-reveal].is-in{
  clip-path:inset(0 0 0 0);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1),
             clip-path .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--ic-delay,0ms);
}

/* ── Movimiento ligado al scroll (hero y destacado) ──────── */
/* Las variables las escribe animations.js en cada cuadro. */
html.ic-motion .hero .slide>img{
  transform:scale(var(--ic-hero-scale,1)) translate3d(0,var(--ic-hero-shift,0),0);
  transform-origin:center 45%;
  will-change:transform;
}
html.ic-motion .hero .slide-body{
  transform:translate3d(0,var(--ic-hero-content,0),0);
  will-change:transform;
}
/* El carrusel y sus controles no se mueven: siguen clicables en su sitio */
html.ic-motion .hero-nav,
html.ic-motion .hero-arrow{transform:none}

html.ic-motion .feat-slide>img{
  transform:translate3d(0,var(--ic-feat-shift,0),0) scale(1.06);
  will-change:transform;
}

/* ── Accesibilidad y móvil ───────────────────────────────── */
/* Refuerzo: aunque el JS ya no arranca con reduced-motion, si el
   usuario cambia la preferencia con la página abierta, todo queda visible. */
@media (prefers-reduced-motion:reduce){
  html.ic-motion [data-ic-reveal],
  html.ic-motion [data-ic-reveal].is-in{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    transition:none!important;
  }
  html.ic-motion .hero .slide>img,
  html.ic-motion .hero .slide-body,
  html.ic-motion .feat-slide>img{transform:none!important}
}

/* En móvil el parallax se desactiva (lo hace también el JS) y los
   reveals son más cortos, para no entorpecer el desplazamiento. */
@media (max-width:820px){
  html.ic-motion [data-ic-reveal]{--ic-rise:14px}
  html.ic-motion .proj-item[data-ic-reveal]{--ic-rise:14px;clip-path:none}
  html.ic-motion .proj-item[data-ic-reveal].is-in{clip-path:none}
  html.ic-motion .hero .slide>img,
  html.ic-motion .hero .slide-body,
  html.ic-motion .feat-slide>img{transform:none}
}