/* Archivo: web/assets/css/motion.css | Resumen: revelado al scroll, hovers y pausa de movimiento. */
.button,
.nav-access,
.text-link,
.web-design,
.web-design::after {
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), filter 0.25s ease, opacity 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.button:hover,
.nav-access:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(197 232 168 / 0.18);
}

.text-link {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease), color 0.2s ease, border-color 0.2s ease;
}

.text-link:hover {
  background-size: 100% 1px;
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(28px);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  }

  .brand-mark { animation: sheen 5.5s ease-in-out infinite; }
}

.motion-paused .brand-mark { animation-play-state: paused; }

@keyframes sheen {
  50% { filter: brightness(1.35); box-shadow: 0 0 28px rgb(197 232 168 / 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .enter-stack > * { opacity: 1; transform: none; filter: none; }
}