/* Skeleton per i turbo-frame in caricamento. Turbo aggiunge da solo
   l'attributo busy al <turbo-frame> durante una navigazione del
   frame (es. cambio filtri su dashboard/portafoglio/timeline):
   nessun JS necessario qui, solo CSS che reagisce all'attributo. */

@layer components {
  turbo-frame[busy] {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  @media (prefers-reduced-motion: no-preference) {
    turbo-frame[busy]::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent,
        var(--color-surface-alt) 45%,
        transparent
      );
      background-size: 60% 100%;
      animation: skeleton-shimmer 1.1s ease-in-out infinite;
    }
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: -60% 0;
    }
    100% {
      background-position: 160% 0;
    }
  }
}