/**
 * css/pwa-install.css — Estilos del modal de instalación PWA de la landing.
 *
 * Usa design tokens de css/tokens.css. Se carga únicamente en la landing
 * (templates/home/paginaHome.twig).
 */

.wiclee-pwa-modal__overlay {
  --wiclee-pwa-overlay: rgba(0, 0, 0, 0.35);

  background: var(--wiclee-pwa-overlay);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wiclee-pwa-modal__overlay.is-open {
  opacity: 1;
}

.wiclee-pwa-btn-install {
  background-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}

.wiclee-pwa-btn-install:hover,
.wiclee-pwa-btn-install:focus {
  background-color: var(--wiclee-primary-600);
}

.wiclee-pwa-btn-install:active {
  background-color: var(--wiclee-primary-700);
}

@keyframes wiclee-pwa-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.wiclee-pwa-bounce {
  animation: wiclee-pwa-bounce 2s infinite;
}