/* ==========================================================================
   PISTON QUARKS — movimiento de paginas insignia
   --------------------------------------------------------------------------
   Solo se carga en las paginas que llevan la identidad visual completa:
   portada, servicios, servicios/web, servicios/subtitulos y blog.

   Regla que se respeta en todo el archivo: si el JavaScript no corre, la
   pagina se ve exactamente igual. Nada se oculta por defecto; el estado
   inicial de cada animacion lo pone el JS justo antes de animar.
   ========================================================================== */

/* --- 1. Campo de flujo del hero ------------------------------------------
   El canvas lo inyecta pq-motion.js dentro de .hero. Va detras del contenido
   y no recibe punteros, asi que no puede robar clics ni seleccion. */

.pq-flow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--pq-ease);
}

.pq-flow.is-on { opacity: 1; }

.hero > .container { position: relative; z-index: 1; }

/* --- 2. Asentado de titulo (type settle) ---------------------------------
   Cada palabra entra desde abajo, con un desenfoque que se disuelve. El
   retraso sale de data-pq-w, que el JS escribe una sola vez al dividir. */

.pq-word {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}

.pq-word.is-settling {
  opacity: 0;
  transform: translateY(0.38em) rotate(0.8deg);
  filter: blur(4px);
}

.pq-word.is-settled {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 520ms var(--pq-ease),
    transform 620ms var(--pq-ease),
    filter 520ms var(--pq-ease);
}

.pq-word[data-pq-w='1']  { transition-delay: 0ms; }
.pq-word[data-pq-w='2']  { transition-delay: 38ms; }
.pq-word[data-pq-w='3']  { transition-delay: 76ms; }
.pq-word[data-pq-w='4']  { transition-delay: 114ms; }
.pq-word[data-pq-w='5']  { transition-delay: 152ms; }
.pq-word[data-pq-w='6']  { transition-delay: 190ms; }
.pq-word[data-pq-w='7']  { transition-delay: 228ms; }
.pq-word[data-pq-w='8']  { transition-delay: 266ms; }
.pq-word[data-pq-w='9']  { transition-delay: 304ms; }
.pq-word[data-pq-w='10'] { transition-delay: 342ms; }
.pq-word[data-pq-w='11'] { transition-delay: 380ms; }
.pq-word[data-pq-w='12'] { transition-delay: 418ms; }
.pq-word[data-pq-w='13'] { transition-delay: 456ms; }
.pq-word[data-pq-w='14'] { transition-delay: 494ms; }

/* --- 3. Cifras del hero ---------------------------------------------------
   El JS cambia el texto mientras cuenta. Sin JS queda el valor final del
   HTML, que es el dato correcto. */

.stat__value.is-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- 4. Carrusel: foco sobre el panel activo -----------------------------
   El panel inactivo sigue en display:none, asi que no se atenua: lo que se
   hace es que el contenido del activo entre en cascada en vez de aparecer
   entero de golpe. */

.carousel__pane.is-active .carousel__kicker,
.carousel__pane.is-active .carousel__text,
.carousel__pane.is-active .carousel__meta,
.carousel__pane.is-active .btn-row {
  animation: pq-settle-in 560ms var(--pq-ease) both;
}

.carousel__pane.is-active .carousel__text { animation-delay: 120ms; }
.carousel__pane.is-active .carousel__meta { animation-delay: 220ms; }
.carousel__pane.is-active .btn-row       { animation-delay: 300ms; }

@keyframes pq-settle-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- 5. Preferencia de menos movimiento ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pq-flow { display: none; }

  .carousel__pane.is-active .carousel__kicker,
  .carousel__pane.is-active .carousel__text,
  .carousel__pane.is-active .carousel__meta,
  .carousel__pane.is-active .btn-row {
    animation: none;
  }

  .pq-word.is-settling,
  .pq-word.is-settled {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}