/* ==========================================================================
   Transiciones entre secciones
   El paso de una seccion a otra era un corte seco de color. Aqui cada
   frontera tiene su propio tratamiento, y el scroll se convierte en un
   recorrido continuo en vez de una pila de bloques.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La barra de progreso, arriba
   Dice cuanto queda, y es de las pocas cosas que se mueven todo el rato sin
   molestar porque vive en el borde de la pantalla.
   -------------------------------------------------------------------------- */

.barra-progreso-scroll {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--violeta), #6f4ae8 45%, var(--verde));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .barra-progreso-scroll {
    animation: llenar linear;
    animation-timeline: scroll(root);
  }
  @keyframes llenar { to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   2. Frontera con el proceso
   -------------------------------------------------------------------------- */

.proceso { position: relative; }

/* La linea divisoria se retiro: la curva de cierre de la portada ya separa
   las dos secciones, y encima quedaba un borde recto cortando la curva. */
.proceso::after { content: none; }

/* --------------------------------------------------------------------------
   3. Entrada a la seccion oscura
   La seccion de integraciones sube desde abajo con las esquinas redondeadas,
   como una carta que se pone encima de la anterior. El radio se abre conforme
   entra: da la sensacion de que la pagina se despliega.
   -------------------------------------------------------------------------- */

.conexiones {
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  margin-top: -1px;
}

@supports (animation-timeline: view()) {
  .conexiones {
    animation: subir-carta linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
  @keyframes subir-carta {
    from {
      border-radius: clamp(40px, 7vw, 90px) clamp(40px, 7vw, 90px) 0 0;
      transform: translateY(40px) scale(.965);
    }
    to {
      border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
      transform: none;
    }
  }
}

/* La siguiente seccion cierra la carta por abajo */
.precios {
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  margin-top: -1px;
  background: var(--papel);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Las muestras de producto se cruzan
   Texto e imagen se desplazan en sentidos opuestos mientras pasan por la
   pantalla. Es un cruce de pocos pixeles, pero rompe la sensacion de bloque
   estatico.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .muestra > *:first-child {
    animation: cruzar-izq linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  .muestra > *:last-child {
    animation: cruzar-der linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes cruzar-izq {
    from { transform: translateY(34px); }
    to   { transform: translateY(-34px); }
  }
  @keyframes cruzar-der {
    from { transform: translateY(-18px); }
    to   { transform: translateY(18px); }
  }

  /* En movil no hay dos columnas, asi que el cruce no tiene sentido */
  @media (max-width: 949px) {
    .muestra > *:first-child, .muestra > *:last-child { animation: none; }
  }
}

/* --------------------------------------------------------------------------
   5. El bloque de alta entra a escala
   Es el ultimo golpe de la pagina: crece hasta su tamaño al llegar.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .alta__reja {
    animation: girar-luz 18s ease-in-out infinite alternate,
               crecer linear both;
    animation-timeline: auto, view();
    animation-range: auto, entry 0% cover 40%;
  }
  @keyframes crecer {
    from { opacity: .5; transform: scale(.92) translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Sin movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .barra-progreso-scroll { transform: scaleX(1); animation: none !important; }
  .conexiones, .alta__reja,
  .muestra > *:first-child, .muestra > *:last-child {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}