/* Va en public/ a propósito: el minificador de Astro junta animation + animation-timeline en un solo
   shorthand que los navegadores no aceptan, y las animaciones de scroll dejan de funcionar. */
/* Animaciones de scroll.
   Van atadas al scroll con CSS (sin JS) y solo en navegadores que lo soportan; en el resto el contenido
   se ve quieto y completo. El momento central es el Proceso: una línea de bronce "se cuela" por los pasos
   y cada paso se enciende cuando la línea lo alcanza. Lo demás es sutil y con recorridos distintos. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Títulos de sección: suben apenas y se aclaran */
    .historia h2,
    .servicios h2,
    .proceso h2,
    .obras h2,
    .trabajos h2,
    .contacto h2 {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* Fotos: se descubren de abajo hacia arriba, como al desmoldar */
    .historia__foto picture,
    .proceso__fotos figure,
    .destacada__fotos > div,
    .papa picture {
      display: block;
      animation: desmoldar linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .proceso__fotos figure:last-child,
    .destacada__fotos > div:nth-child(3) {
      animation-range: entry 15% cover 45%;
    }

    /* Galería: cada foto entra con un recorrido un poco más tardío que la anterior */
    .galeria li {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    .galeria li:nth-child(2) { animation-range: entry 8% cover 30%; }
    .galeria li:nth-child(3) { animation-range: entry 16% cover 35%; }
    .galeria li:nth-child(4) { animation-range: entry 24% cover 40%; }
    .galeria li:nth-child(5) { animation-range: entry 32% cover 45%; }

    /* Qué hacemos: la línea de cada servicio se dibuja de izquierda a derecha */
    .servicios .servicios__lista .servicio {
      border-bottom-color: transparent;
      background: linear-gradient(var(--line), var(--line)) no-repeat left bottom / 0% 1px;
      animation: trazar linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }

    /* Hero: la campana baja apenas mientras se scrollea, dentro del arco */
    .hero__foto picture {
      display: block;
      animation: colgar linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    /* Proceso: colada de bronce a lo largo de los pasos */
    .pasos {
      position: relative;
      view-timeline: --colada block;
    }
    .pasos::before,
    .pasos::after {
      content: '';
      position: absolute;
      left: 0.45rem;
      top: 1.6rem;
      bottom: 1.6rem;
      width: 2px;
      border-radius: 2px;
    }
    .pasos::before {
      background: rgb(255 255 255 / 0.08);
    }
    .pasos::after {
      background: linear-gradient(var(--bronze-bright), #d98c5f);
      box-shadow: 0 0 12px 1px rgb(178 106 66 / 0.55);
      transform-origin: top;
      animation: colar linear both;
      animation-timeline: --colada;
      animation-range: cover 25% cover 75%;
    }
    .pasos li {
      position: relative;
      z-index: 1;
      animation: encender linear both;
      animation-timeline: view();
      animation-range: cover 20% cover 42%;
    }
    .pasos li::before {
      align-self: start;
      justify-self: start;
      width: 1rem;
      text-align: center;
      background: var(--night);
      padding-block: 0.2rem;
    }
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes desmoldar {
  from {
    clip-path: inset(30% 0 0 0 round 0.5rem);
    opacity: 0.2;
    transform: translateY(2.5rem) scale(0.97);
    filter: sepia(0.5) brightness(0.8);
  }
  to {
    clip-path: inset(0 0 0 0 round 0.5rem);
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes trazar {
  to {
    background-size: 100% 1px;
  }
}
@keyframes colgar {
  to {
    transform: translateY(4%) scale(1.1);
  }
}
@keyframes colar {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes encender {
  from {
    opacity: 0.25;
    transform: translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}