/* ==========================================================================
   Movimiento — el día avanza al bajar
   ==========================================================================
   Inicio:
   - Hero: la captura se descubre, el celular sube, aparece el panel del reloj
     y sus dígitos se encienden como la pantalla de un mostrador (≈1,5 s, una
     vez al cargar, sin JavaScript).
   - Riel de horas: al llegar a cada escena su reloj avanza desde la hora de
     la escena anterior (movimiento.js).
   - Escenas: el texto entra primero y la fotografía lo acompaña; cada
     aparición se ejecuta una sola vez y termina con la imagen completa.
   Casos: relojes que se encienden y cifras que cuentan hasta su valor.
   Tienda: la ficha marcada entra en «Tu lista».

   El contenido es visible por defecto: sólo se esconde mientras movimiento.js
   espera a que algo entre en pantalla, y nunca con movimiento reducido.
   Todo es transform, opacity o clip-path con la curva --ease-out. */

@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * {
    animation: asomar 560ms var(--ease-out) backwards;
  }

  .hero__bajada { animation-delay: 70ms; }
  .hero__acciones { animation-delay: 140ms; }
  .hero__nota { animation-delay: 210ms; }

  .escena__foto[data-revelar][data-animar] {
    animation: foto-entra 620ms var(--ease-out) 80ms backwards;
  }

  .escena__cuerpo[data-revelar][data-animar] {
    animation-duration: 520ms;
  }

  .dia__indice a,
  .escena__ampliar {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  }

  .escena,
  .escena__hora {
    transition: border-color 240ms ease, color 240ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .escena__foto img {
      transition: transform 300ms var(--ease-out);
    }

    .escena__foto:has(.escena__ampliar:hover) img,
    .escena__foto:focus-within img {
      transform: translateY(-3px);
    }
  }

  /* --- Hero ------------------------------------------------------------- */
  .hero__captura--escritorio img {
    animation: revelar 820ms var(--ease-out) 60ms backwards;
  }

  .hero__captura--movil {
    animation: subir 640ms var(--ease-out) 420ms backwards;
  }

  .hero__reloj {
    animation: aparecer 480ms var(--ease-out) 640ms backwards;
  }

  .hero__reloj .reloj use,
  [data-encender][data-animar] .reloj use {
    animation: encender 560ms linear backwards;
  }

  .hero__reloj .reloj use:nth-child(1) { animation-delay: 820ms; }
  .hero__reloj .reloj use:nth-child(2) { animation-delay: 900ms; }
  .hero__reloj .reloj use:nth-child(3) { animation-delay: 980ms; }
  .hero__reloj .reloj use:nth-child(4) { animation-delay: 1060ms; }
  .hero__reloj .reloj use:nth-child(5) { animation-delay: 1140ms; }

  /* Relojes de los casos: esperan apagados y se encienden al entrar. */
  [data-encender][data-esperar] .reloj use {
    opacity: 0;
  }

  [data-encender][data-animar] .reloj use:nth-child(2) { animation-delay: 80ms; }
  [data-encender][data-animar] .reloj use:nth-child(3) { animation-delay: 160ms; }
  [data-encender][data-animar] .reloj use:nth-child(4) { animation-delay: 240ms; }
  [data-encender][data-animar] .reloj use:nth-child(5) { animation-delay: 320ms; }

  /* --- Muestras de las escenas ------------------------------------------ */
  [data-demo='notificacion'] {
    transform-origin: top center;
  }

  [data-demo='notificacion'][data-esperar] {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  [data-demo='notificacion'][data-animar] {
    animation: llegar 560ms var(--ease-out) backwards;
  }

  [data-demo][data-esperar] [data-demo-paso] {
    opacity: 0;
  }

  [data-demo][data-animar] [data-demo-paso] {
    animation: paso 420ms var(--ease-out) backwards;
    animation-delay: calc(160ms + var(--i, 0) * 150ms);
  }

  /* La factura: cada línea aparece y enseguida queda registrada. */
  [data-demo='factura'][data-animar] [data-demo-paso] b {
    animation: marcar 300ms var(--ease-out) backwards;
    animation-delay: calc(460ms + var(--i, 0) * 150ms);
  }

  /* La caja: el aviso de sin señal parpadea tres veces y se queda quieto. */
  [data-demo='caja'][data-animar] .caja__estado svg {
    animation: parpadeo 640ms steps(1, end) 3;
  }

  [data-demo='revelar'][data-esperar] img {
    clip-path: inset(0 0 100% 0);
  }

  [data-demo='revelar'][data-animar] img {
    animation: revelar 900ms var(--ease-out) backwards;
  }

  /* --- La conversación de medianoche --------------------------------------- */
  [data-chat][data-esperar] .chat__burbuja {
    opacity: 0;
  }

  .chat__burbuja--pregunta {
    transform-origin: bottom left;
  }

  .chat__burbuja--respuesta {
    transform-origin: bottom right;
  }

  [data-chat][data-animar] .chat__burbuja--pregunta {
    animation: chat-entra 320ms var(--ease-out) both;
  }

  [data-chat][data-animar] .chat__escribiendo {
    animation: chat-escribe 860ms var(--ease-out) 400ms both;
  }

  [data-chat][data-animar] .chat__escribiendo i {
    animation: chat-punto 210ms ease-in-out 460ms 4 alternate;
  }

  [data-chat][data-animar] .chat__escribiendo i:nth-child(2) {
    animation-delay: 530ms;
  }

  [data-chat][data-animar] .chat__escribiendo i:nth-child(3) {
    animation-delay: 600ms;
  }

  [data-chat][data-animar] .chat__burbuja--respuesta {
    animation: chat-entra 340ms var(--ease-out) 1240ms both;
  }

  /* --- Revelado al entrar en pantalla -------------------------------------
     Las listas largas del sitio (vitrina, casos, fichas, preguntas, retos)
     suben a su sitio en orden cuando su sección entra. Lo que ya se ve al
     cargar nunca se esconde: movimiento.js sólo prepara lo que está por
     debajo del pliegue, así que no hay parpadeo ni texto escondido. */
  [data-escalera][data-esperar] > *,
  [data-revelar][data-esperar] {
    opacity: 0;
  }

  [data-escalera][data-animar] > * {
    animation: asomar 460ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }

  [data-revelar][data-animar] {
    animation: asomar 460ms var(--ease-out) backwards;
  }

  /* --- La regla que abre una sección se traza ------------------------------ */
  [data-trazo][data-esperar]::before {
    transform: scaleX(0);
  }

  [data-trazo][data-animar]::before {
    animation: trazar 620ms var(--ease-out) backwards;
  }

  /* --- Las etiquetas de lo entregado entran una tras otra ------------------- */
  [data-escalera][data-esperar] .caso__entregas li {
    opacity: 0;
  }

  [data-escalera][data-animar] .caso__entregas li {
    animation: asomar 340ms var(--ease-out) backwards;
  }

  [data-escalera][data-animar] .caso__entregas li:nth-child(1) { animation-delay: 220ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(2) { animation-delay: 265ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(3) { animation-delay: 310ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(4) { animation-delay: 355ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(5) { animation-delay: 400ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(6) { animation-delay: 445ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(7) { animation-delay: 490ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(8) { animation-delay: 535ms; }
  [data-escalera][data-animar] .caso__entregas li:nth-child(n + 9) { animation-delay: 580ms; }

  /* --- El botón de contacto se asoma al pasar la portada ------------------- */
  .flotante {
    transition:
      opacity var(--medio) var(--ease-out),
      transform var(--medio) var(--ease-out),
      visibility var(--medio);
  }

  .flotante__panel {
    animation: asomar-panel 200ms var(--ease-out) backwards;
    transform-origin: bottom right;
  }

  /* --- La captura del caso se descubre, como la del inicio ------------------ */
  [data-revelar][data-animar].galeria .galeria__panel:not([hidden]) img {
    animation: revelar 820ms var(--ease-out) 120ms backwards;
  }

  /* --- Tarjetas de la vitrina ---------------------------------------------
     La captura se levanta dos píxeles al pasar el cursor. Con movimiento
     reducido queda sólo la sombra, que ya vive en sitio.css. */
  @media (hover: hover) and (pointer: fine) {
    .tarjeta img {
      transition:
        box-shadow var(--medio) ease,
        transform var(--medio) var(--ease-out);
    }

    .tarjeta:hover img {
      transform: translateY(-2px);
    }

    .ficha {
      transition:
        box-shadow var(--medio) ease,
        transform var(--medio) var(--ease-out);
    }

    .ficha:hover {
      transform: translateY(-2px);
    }

    .nav__enlace:not([aria-current])::after {
      transition: transform var(--rapido) var(--ease-out);
    }

    .caso-fila img {
      transition: transform var(--medio) var(--ease-out);
    }

    .caso-fila:hover img {
      transform: translateY(-2px);
    }
  }

  /* --- Tienda: la fila nueva de «Tu lista» se asoma desde abajo ------------ */
  .cotizador__lista li[data-nueva] {
    animation: lista-entra 200ms var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cotizador__lista li[data-nueva] {
    animation: lista-aparece 160ms ease both;
  }
}

/* Se descubre de arriba abajo. Con relleno «backwards» el recorte se suelta
   al terminar y la sombra de la captura vuelve a verse completa. */
@keyframes revelar {
  from {
    clip-path: inset(0 0 100% 0 round var(--radio));
  }

  to {
    clip-path: inset(0 0 0 0 round var(--radio));
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

/* Un dígito que se enciende: dos titileos y queda fijo. */
@keyframes encender {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.85;
  }

  30% {
    opacity: 0.2;
  }

  52% {
    opacity: 1;
  }

  68% {
    opacity: 0.55;
  }

  100% {
    opacity: 1;
  }
}

@keyframes llegar {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes paso {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes marcar {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

@keyframes parpadeo {
  50% {
    opacity: 0.25;
  }
}

@keyframes chat-entra {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes chat-escribe {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  18%,
  84% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes chat-punto {
  from {
    opacity: 0.35;
    transform: translateY(0);
  }

  to {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

@keyframes lista-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes lista-aparece {
  from {
    opacity: 0;
  }
}

/* Lo que estaba por debajo del pliegue sube a su sitio. */
@keyframes asomar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes foto-entra {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
}

/* Una regla que alguien traza de izquierda a derecha. */
@keyframes trazar {
  from {
    transform: scaleX(0);
  }
}

/* El panel de contacto sale desde su botón. */
@keyframes asomar-panel {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}