/* ============================================================================
 * iShop · css/08-movimiento.css — toda la animación, aislada y con guardas
 * ----------------------------------------------------------------------------
 * Todo lo que se mueve usa --ease-spring, que es una función linear() con
 * sobreimpulso: un muelle de verdad, sin una línea de JavaScript.
 *
 * REGLA QUE EVITA UNA PÁGINA EN BLANCO: el estado base es SIEMPRE el estado
 * final. Jamás `opacity: 0` en una regla base. La animación entra dentro de
 * @supports, y solo si el usuario no ha pedido menos movimiento.
 * ========================================================================== */

@layer movimiento {

  /* --- Revelado ----------------------------------------------------------- */
  .revelar { opacity: 1; translate: none; scale: 1; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .revelar {
        animation: ui-entrar linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 24%;
      }
    }
  }

  @supports not (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .revelar:not(.es-visible) { opacity: 0; translate: 0 1rem; scale: 0.98; }
      .revelar.es-visible {
        opacity: 1; translate: none; scale: 1;
        transition: opacity var(--dur-3) var(--ease-out),
                    translate var(--dur-3) var(--ease-spring),
                    scale var(--dur-3) var(--ease-spring);
      }
    }
  }

  @keyframes ui-entrar {
    from { opacity: 0; translate: 0 1.5rem; scale: 0.97; }
    to   { opacity: 1; translate: none; scale: 1; }
  }

  /* ======================================================================
   * LA MALLA VIVA: los radiales giran muy despacio.
   * Se anima `rotate` sobre el pseudo-elemento fijo — una sola capa
   * compuesta, sin repintar nada del contenido.
   * ==================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    body::before { animation: ui-malla 48s linear infinite; }
  }

  @keyframes ui-malla {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
  }

  /* ======================================================================
   * ISLA DINÁMICA
   * La entrada del contenido expandido se retrasa hasta que la caja ya ha
   * crecido; si entraran a la vez, el texto se vería aplastado.
   * @starting-style es lo que permite animar la ENTRADA sin JavaScript.
   * ==================================================================== */
  .isla__expandida > * {
    opacity: 1;
    transition: opacity var(--dur-2) var(--dur-2) var(--ease-out);
  }

  @starting-style {
    .isla__expandida > * { opacity: 0; }
  }

  .isla__compacta > * {
    opacity: 1;
    transition: opacity var(--dur-1) var(--ease-out);
  }

  @starting-style {
    .isla__compacta > * { opacity: 0; }
  }

  /* ======================================================================
   * INCLINACIÓN CON EL PUNTERO
   * --mx y --my están registradas con @property como porcentajes, así que el
   * brillo que las usa interpola en vez de saltar. La rotación se calcula a
   * partir de ellas: cero JavaScript de animación, solo dos variables.
   * ==================================================================== */
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .inclina {
      transform-style: preserve-3d;
      transition: rotate var(--dur-3) var(--ease-out), --mx var(--dur-2) linear, --my var(--dur-2) linear;
    }

    .inclina:hover {
      rotate: y calc((var(--mx) - 50%) * 0.12);
    }

    /* Brillo que sigue al puntero. */
    .inclina::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(24rem 24rem at var(--mx) var(--my),
        rgb(255 255 255 / 0.14), transparent 62%);
      transition: opacity var(--dur-2) var(--ease-standard);
    }

    .inclina:hover::after { opacity: 1; }
  }

  /* ======================================================================
   * Hojas inferiores con topes (RF-14 y selección de tienda)
   * ==================================================================== */
  .hoja {
    transition: translate var(--dur-3) var(--ease-spring),
                opacity var(--dur-2) var(--ease-out),
                display var(--dur-3) allow-discrete,
                overlay var(--dur-3) allow-discrete;
  }

  .hoja:not([open]) { translate: 0 100%; opacity: 0; }

  /* @starting-style + transition-behavior: allow-discrete es la única forma
     sin librería de animar algo que viene de display:none. */
  @starting-style {
    .hoja[open] { translate: 0 100%; opacity: 0; }
  }

  .hoja::backdrop {
    opacity: 1;
    transition: opacity var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
  }

  @starting-style {
    .hoja[open]::backdrop { opacity: 0; }
  }

  /* ======================================================================
   * Pulsos de estado
   * ==================================================================== */
  .punto--vivo,
  .pastilla--viva::before {
    animation: ui-pulso 2.2s var(--ease-standard) infinite;
  }

  @keyframes ui-pulso {
    0%, 100% { opacity: 1; scale: 1; }
    50%      { opacity: 0.55; scale: 0.88; }
  }

  /* El chasis transiciona de color al cambiar el acabado. */
  .dispositivo {
    transition: --dev-metal-a var(--dur-3) var(--ease-out),
                --dev-metal-b var(--dur-3) var(--ease-out),
                --dev-metal-c var(--dur-3) var(--ease-out);
  }

  /* --- Avisos -------------------------------------------------------------- */
  .aviso {
    transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-3) var(--ease-spring);
  }

  @starting-style {
    .aviso { opacity: 0; scale: 0.97; }
  }

  /* --- Transiciones entre documentos --------------------------------------- */
  @view-transition { navigation: auto; }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: ui-salir var(--dur-2) var(--ease-standard) both; }
    ::view-transition-new(root) { animation: ui-llegar var(--dur-3) var(--ease-out) both; }
  }

  @keyframes ui-salir  { to   { opacity: 0; scale: 0.99; } }
  @keyframes ui-llegar { from { opacity: 0; scale: 1.01; } }
}