/* chk-home-efectos-20261009.css — Home chakhernandez.art (aprobado por CHAK 2026-10-09)
   1 · Redes: aparición escalonada ligada al scroll (abanico → «Más sobre mí» → «Trabajemos juntos»)
   2 · Blog: la frase se revela palabra por palabra (.chk-w) y luego «Ir al blog»
   Sólo transform y opacity. Sólo CSS scroll-driven animations (view-timeline).
   Sin soporte (@supports) o con «Reducir movimiento»: no se aplica nada, el contenido se ve como antes.
   No toca el JS existente (scrollcraft, despegue, zoom, abanico, scramble) ni el scroll-snap de la página. */

@supports (animation-timeline: view()) {
  /* El home tiene `html, body { overflow-x: hidden }`: eso vuelve a <body> un contenedor de scroll
     que nunca se mueve y congela las líneas de tiempo. `clip` recorta igual sin crear ese contenedor. */
  body { overflow-x: clip; }

  @media (prefers-reduced-motion: no-preference) {

    /* 1 · Redes — la línea de tiempo es la sección (el contenido va centrado en ella).
       Todo termina en «entry 85%», antes de que el snap acomode la pantalla. */
    .fan-sec { view-timeline: --chk-redes block; }
    .fan-sec .social-fan,
    .fan-sec .fan-actions a {
      animation: chk-ef-sube linear both;
      animation-timeline: --chk-redes;
    }
    .fan-sec .social-fan                  { animation-range: entry 45% entry 70%; }
    .fan-sec .fan-actions a:nth-child(1)  { animation-range: entry 52% entry 78%; }
    .fan-sec .fan-actions a:nth-child(2)  { animation-range: entry 60% entry 85%; }

    /* 2 · Blog — palabra por palabra (--i = posición de la palabra, 0..10) */
    .blog-teaser { view-timeline: --chk-blog block; }
    .blog-teaser-line .chk-w {
      display: inline-block;
      animation: chk-ef-palabra linear both;
      animation-timeline: --chk-blog;
      animation-range: entry calc(35% + var(--i, 0) * 3.5%) entry calc(47% + var(--i, 0) * 3.5%);
    }
    .blog-teaser .blog-btn {
      animation: chk-ef-sube linear both;
      animation-timeline: --chk-blog;
      animation-range: entry 80% entry 92%;
    }
  }
}

@keyframes chk-ef-sube {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes chk-ef-palabra {
  from { opacity: 0.12; transform: translate3d(0, 0.35em, 0); }
  to   { opacity: 1;    transform: none; }
}

/* Celulares y tablets chicas: menos recorrido */
@media (max-width: 768px) {
  @keyframes chk-ef-sube {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes chk-ef-palabra {
    from { opacity: 0.12; transform: translate3d(0, 0.2em, 0); }
    to   { opacity: 1;    transform: none; }
  }
}