/* Sistema de movimiento del sitio — 22/9/2026.
   Todo es CSS: sin JavaScript, sin librerías, sin peso extra que descargar.
   Dos reglas que no se rompen:
   1. Nada queda invisible si el navegador no soporta la animación.
   2. Si el sistema pide menos movimiento, se apaga todo.                     */

/* === 1 · Transición entre páginas ==========================================
   Al abrir un proyecto, su fotografía de la parrilla crece hasta convertirse
   en la foto de apertura del caso. Sin parpadeo blanco entre páginas.        */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: pagina-sale 220ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: pagina-entra 380ms var(--ease-out) both; }
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; } }

::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-out); }

/* Cada obra lleva su propio nombre: el navegador reconoce que la foto de la
   parrilla y la del caso son la misma y la anima de una a otra.              */
[data-obra="mega"] img          { view-transition-name: obra-mega; }
[data-obra="olympo"] img        { view-transition-name: obra-olympo; }
[data-obra="emporium"] img      { view-transition-name: obra-emporium; }
[data-obra="venezuela"] img     { view-transition-name: obra-venezuela; }
[data-obra="mega-gaming"] img   { view-transition-name: obra-mega-gaming; }
[data-obra="imperio"] img       { view-transition-name: obra-imperio; }
[data-obra="aviacion"] img      { view-transition-name: obra-aviacion; }
[data-obra="mambos"] img        { view-transition-name: obra-mambos; }

/* === 2 · Entradas laterales ================================================
   Lo que se lee como lista o como secuencia entra desde el costado, una pieza
   tras otra, en el mismo orden en que se lee. Lo que no es secuencia sigue
   subiendo, para que el movimiento no se vuelva un desfile.                  */
@keyframes entra-izquierda {
  from { opacity: 0; transform: translateX(-44px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entra-derecha {
  from { opacity: 0; transform: translateX(44px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sube-entra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Las cuatro filas de servicios (A, B, C, D): entran desde la izquierda,
       una tras otra, como se leen.                                          */
    .service-row {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .service-row:nth-child(2) { animation-range: entry 8% cover 30%; }
    .service-row:nth-child(3) { animation-range: entry 12% cover 34%; }
    .service-row:nth-child(4) { animation-range: entry 16% cover 38%; }

    /* Los cuatro pasos del proceso: observar, visualizar, resolver,
       construir. El movimiento acompaña el avance.                          */
    .process-step {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .process-step:nth-child(2) { animation-range: entry 8% cover 30%; }
    .process-step:nth-child(3) { animation-range: entry 12% cover 34%; }
    .process-step:nth-child(4) { animation-range: entry 16% cover 38%; }

    /* Antes, propuesta y resultado: la secuencia entra en su mismo orden. */
    .comparison-grid figure {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }
    .comparison-grid figure:nth-child(2) { animation-range: entry 9% cover 33%; }
    .comparison-grid figure:nth-child(3) { animation-range: entry 14% cover 38%; }

    /* Las tarjetas de servicios entran cada una desde su propio lado. */
    .maintenance-compact .maintenance-card:nth-child(odd) {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }
    .maintenance-compact .maintenance-card:nth-child(even) {
      animation: entra-derecha linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }

    /* Los tres pasos para iniciar la conversación. */
    .contact-start li {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
    }
    .contact-start li:nth-child(2) { animation-range: entry 7% cover 31%; }
    .contact-start li:nth-child(3) { animation-range: entry 12% cover 36%; }

    /* Páginas de proyecto: el título del capítulo entra desde el costado. */
    .olympo-chapter-heading,
    .mega-details > div {
      animation: entra-izquierda linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .mega-details > div:nth-child(2) { animation-range: entry 8% cover 30%; }
    .mega-details > div:nth-child(3) { animation-range: entry 12% cover 34%; }

    /* Lo que no es secuencia: sigue subiendo. */
    .services-archive-bridge,
    .maintenance-footer {
      animation: sube-entra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

/* === 3 · La luz revela la fotografía =======================================
   En las páginas de proyecto, cada foto se descubre de abajo hacia arriba a
   medida que entra en pantalla. Es el mismo gesto de la marca: la luz que
   revela el espacio.                                                         */
@keyframes cortina {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .olympo-page .olympo-chapter figure img {
      animation: cortina linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
  }
}

/* === 4 · Clientes ==========================================================
   Cada nombre se subraya con una línea celeste que se dibuja al pasar por
   pantalla. La lista sigue siendo una lista legible.                         */
.client-directory li { position: relative; }
.client-directory li::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .client-directory li::after {
      animation: linea-cliente linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes linea-cliente { to { transform: scaleX(1); } }

/* === 5 · Detalles al pasar el mouse ========================================
   Subrayados que se dibujan y flechas que avanzan: el sitio responde.        */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header-cta span,
  .maintenance-action span,
  .services-archive-bridge a span,
  .contact-action span { display: inline-block; transition: transform 320ms var(--ease-out); }
  .header-cta:hover span,
  .maintenance-action:hover span,
  .services-archive-bridge a:hover span,
  .contact-action:hover span { transform: translate(4px, -4px); }

  .service-deep-link { position: relative; }
  .service-deep-link::after {
    content: "";
    position: absolute;
    inset: auto 0 -3px 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 380ms var(--ease-out);
  }
  .service-deep-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

  .client-directory li { transition: color 260ms var(--ease-out); }
  .client-directory li:hover { color: var(--cyan-soft); }
}

/* === 6 · Menos movimiento ==================================================
   Si el sistema lo pide, se apaga todo y el contenido queda completo.        */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .client-directory li::after { transform: scaleX(1); animation: none; }
}