/* ============================================
   CONSULTORA LOOP — MOTION CSS v3 (Fase 4)
   Capa universal (todos los navegadores) +
   capa scrub nativa (@supports). En navegadores
   sin soporte nativo, js/motion.js reproduce el
   mismo comportamiento. Solo transform/opacity/
   filter compositables: sin layout, sin CLS.
   ============================================ */

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

  /* ══ UNIVERSAL: HERO ANCLADO (cover) ══
     El hero queda fijo y la página siguiente lo
     cubre como lámina. position:sticky funciona
     en todos los navegadores. */
  .hero { position: sticky; top: 0; z-index: 0; }
  main > section:not(.hero) { position: relative; z-index: 1; }
  .hero + section {
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -24px 60px rgba(0,0,0,0.45);
  }

  /* ══ UNIVERSAL: setup del texto que se ilumina ══ */
  .purpose-lead {
    background: linear-gradient(90deg,
      var(--text-primary) 0%, var(--text-primary) 45%,
      rgba(144,150,176,0.28) 55%, rgba(144,150,176,0.28) 100%);
    background-size: 240% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ══ CAPA SCRUB NATIVA (Chrome/Edge/Safari recientes) ══ */
  @supports (animation-timeline: view()) {

    [data-reveal] {
      transition: none;
      animation: mfx-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 80%;
    }
    [data-reveal].revealed { opacity: 1; }

    .hero__content {
      animation: fadeUp 0.7s ease both, mfx-hero-out linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100svh;
    }
    @media (min-width: 901px) {
      .hero__visual {
        animation: fadeIn 0.6s ease both, mfx-parallax linear both;
        animation-timeline: auto, scroll(root);
        animation-range: normal, 0 100svh;
      }
    }
    .hero__grid-overlay {
      animation: mfx-grid-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }
    .hero__scroll-hint {
      animation: mfx-hint-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 20svh;
    }

    .purpose-lead {
      animation: mfx-text-fill linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 45%;
    }

    .section-header h2 {
      animation: mfx-title-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .section-header .label {
      animation: mfx-label-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .section-header .divider {
      animation: mfx-line linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 80%;
    }
    .section-header--center .divider { transform-origin: center; }

    .stats-grid .stat-item { animation-name: mfx-stat-in; animation-range: entry 0% entry 65%; }
    .services-grid .service-card:nth-child(odd) { animation-name: mfx-from-left; }
    .services-grid .service-card:nth-child(even) { animation-name: mfx-from-right; }
    .sectors-scroll { animation-name: mfx-converge; }
    .pillars-grid .pillar-card { animation-name: mfx-depth-in; animation-range: entry 0% entry 75%; }
    .cta-box { animation-name: mfx-cta-in; animation-range: entry 0% cover 35%; }
    .clients-marquee-wrap { animation-name: mfx-from-right; }
  }

  /* ══ KEYFRAMES (compartidos por ambas capas) ══ */
  @keyframes mfx-rise      { from { opacity:0; transform:translateY(64px); } to { opacity:1; transform:translateY(0); } }
  @keyframes mfx-hero-out  { from { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } to { opacity:0; transform:translateY(90px) scale(0.88); filter:blur(6px); } }
  @keyframes mfx-parallax  { from { transform:translateY(0) scale(1); opacity:1; } to { transform:translateY(160px) scale(0.85); opacity:0; } }
  @keyframes mfx-grid-drift{ to { transform:translateY(70px) scale(1.06); opacity:0.2; } }
  @keyframes mfx-hint-out  { from { opacity:0.4; } to { opacity:0; } }
  @keyframes mfx-text-fill { from { background-position:100% 0; } to { background-position:0% 0; } }
  @keyframes mfx-title-in  { from { opacity:0; transform:translateY(56px) scale(0.92); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes mfx-label-in  { from { opacity:0; transform:translateY(20px); letter-spacing:0.4em; } to { opacity:1; transform:translateY(0); letter-spacing:0.18em; } }
  @keyframes mfx-line      { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes mfx-stat-in   { from { opacity:0; transform:translateY(50px) scale(0.72); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes mfx-from-left { from { opacity:0; transform:translateX(-110px) rotate(-1.5deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
  @keyframes mfx-from-right{ from { opacity:0; transform:translateX(110px) rotate(1.5deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
  @keyframes mfx-converge  { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
  @keyframes mfx-depth-in  { from { opacity:0; transform:translateY(70px) scale(0.9); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes mfx-cta-in    { from { opacity:0; transform:scale(0.88) translateY(60px); } to { opacity:1; transform:scale(1) translateY(0); } }

}