/* Movimiento: entradas por scroll y reduced-motion. Se carga al final para ganar la cascada. */
/* ---------- motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out),
    filter var(--slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .reveal-img img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: var(--d, 0ms), 0ms;
}
.js .reveal-img.is-in img {
  clip-path: inset(0 0 0 0);
}
.js .glow .w {
  opacity: 0.2;
  transition: opacity 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--step, 0ms));
}
.js .glow.is-in .w {
  opacity: 1;
}
.js .stamp .w {
  display: inline-block;
  opacity: 0;
  transform: scale(1.14) translateY(-0.08em);
  filter: blur(10px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out), filter var(--slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 150ms + 200ms);
}
.js .stamp.is-in .w {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Hero del Inicio: el título entra sin demora para que el texto sea visible de inmediato (LCP). */
.js .hero-title.stamp .w {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ---------- patrón imagen + especificaciones (páginas de línea) ---------- */
/* Imagen: se descubre de abajo hacia arriba en 900 ms (la máscara va en la img para que el observador vea el contenedor); el zoom ligado al scroll lo hace main.js. */
.js .rv-mask img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--slow) var(--ease-out);
}
.js .rv-mask.is-in img {
  clip-path: inset(0 0 0 0);
}
/* Título: desplazamiento corto y desvanecido en 600 ms. */
.js .rv-title {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .rv-title.is-in {
  opacity: 1;
  transform: none;
}
/* Tabla: líneas dibujadas de izquierda a derecha (600 ms, 80 ms entre sí), filas con fundido
   escalonado (--d) y guiones que crecen con cada fila. Se usan animaciones con fill backwards
   para que el estado final sea el estilo normal y el hover siga libre. */
.js .rv-table:not(.is-in) tr::before,
.js .rv-table:not(.is-in) tr:last-child::after {
  transform: scaleX(0);
}
.js .rv-table:not(.is-in) .rv-item {
  opacity: 0;
}
.js .rv-table:not(.is-in) .rv-dash::before {
  transform: scaleX(0);
}
.js .rv-table.is-in tr::before {
  animation: rv-line 600ms var(--ease-out) backwards;
  animation-delay: calc(var(--r, 0) * 80ms);
}
.js .rv-table.is-in tr:last-child::after {
  animation: rv-line 600ms var(--ease-out) backwards;
  animation-delay: 240ms;
}
.js .rv-table.is-in .rv-item {
  animation: rv-fade 200ms ease-out backwards;
  animation-delay: var(--d, 0ms);
}
.js .rv-table.is-in .rv-dash::before {
  animation: rv-dash 240ms var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rv-line {
  from { transform: scaleX(0); }
}
@keyframes rv-fade {
  from { opacity: 0; }
}
@keyframes rv-dash {
  from { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal,
  .js .reveal-img img,
  .js .stamp .w,
  .js .glow .w,
  .js .sust-frame,
  .js .sust-seal,
  .js .section-rule,
  .js .dist-rule {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }
  .line-figure img,
  .link-arrow svg,
  .btn-foil {
    transition: none;
  }
  .wa-float {
    transform: none;
    transition: opacity var(--fast) linear;
  }
  @media (hover: hover) {
.line:hover .line-figure img {
    transform: none;
  }
}
  .sust-seal {
    transform: rotate(-6deg);
  }
  .js .rv-mask img,
  .js .rv-mask.is-in img {
    clip-path: none;
    transition: none;
  }
  .js .rv-title {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .rv-table .rv-item,
  .js .rv-table.is-in .rv-item,
  .js .rv-table:not(.is-in) .rv-item {
    opacity: 1;
    animation: none;
  }
  .js .rv-table tr::before,
  .js .rv-table.is-in tr::before,
  .js .rv-table:not(.is-in) tr::before,
  .js .rv-table tr:last-child::after,
  .js .rv-table.is-in tr:last-child::after,
  .js .rv-table:not(.is-in) tr:last-child::after,
  .js .rv-table .rv-dash::before,
  .js .rv-table.is-in .rv-dash::before,
  .js .rv-table:not(.is-in) .rv-dash::before {
    transform: none;
    animation: none;
  }
  .spec-table li,
  .spec-table li::before {
    transition: none;
  }
}