/**
 * SPL Energetica — microanimazioni performanti
 *
 * Classi Bricks:
 *   spl-reveal          → fade+slide on scroll (JS)
 *   spl-reveal--up|left|right|scale
 *   spl-stagger         → delay figli (.spl-reveal)
 *   spl-enter           → enter page (CSS only, prima paint)
 *   spl-marquee         → track infinito (recensioni)
 *   spl-pulse-soft      → pulse ombra generico
 */

/* ==========================================================================
   Page enter (CSS-only, leggero)
   ========================================================================== */

.spl-enter {
  animation: spl-enter 0.22s var(--spl-ease-out) both;
}

@keyframes spl-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Scroll reveal — stato iniziale; JS aggiunge .is-visible
   ========================================================================== */

.spl-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s var(--spl-ease),
    transform 0.55s var(--spl-ease);
  will-change: opacity, transform;
}

.spl-reveal--up {
  transform: translateY(24px);
}

.spl-reveal--left {
  transform: translateX(-24px);
}

.spl-reveal--right {
  transform: translateX(24px);
}

.spl-reveal--scale {
  transform: scale(0.96);
}

.spl-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger automatico sui figli diretti con .spl-reveal */
.spl-stagger > .spl-reveal:nth-child(1) { transition-delay: 0ms; }
.spl-stagger > .spl-reveal:nth-child(2) { transition-delay: 70ms; }
.spl-stagger > .spl-reveal:nth-child(3) { transition-delay: 140ms; }
.spl-stagger > .spl-reveal:nth-child(4) { transition-delay: 210ms; }
.spl-stagger > .spl-reveal:nth-child(5) { transition-delay: 280ms; }
.spl-stagger > .spl-reveal:nth-child(6) { transition-delay: 350ms; }
.spl-stagger > .spl-reveal:nth-child(7) { transition-delay: 420ms; }
.spl-stagger > .spl-reveal:nth-child(8) { transition-delay: 490ms; }

/* Fallback no-JS: mostra tutto */
.no-js .spl-reveal,
html:not(.spl-motion-ready) .spl-reveal {
  /* gestito da JS: finché non ready restano nascosti solo se JS attivo */
}

html.spl-js .spl-reveal:not(.is-visible) {
  /* già definito sopra */
}

html:not(.spl-js) .spl-reveal {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Marquee recensioni (CSS animation)
   ========================================================================== */

.spl-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.spl-marquee__track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: spl-reviews-scroll 36s linear infinite;
}

.spl-marquee:hover .spl-marquee__track {
  animation-play-state: paused;
}

@keyframes spl-reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.spl-review-card {
  width: min(360px, 78vw);
  min-height: 235px;
  flex: 0 0 auto;
  padding: 22px;
  border: 1px solid rgba(217, 229, 243, 0.96);
  border-radius: var(--spl-radius);
  background: #fff;
  box-shadow: var(--spl-shadow-sm);
}

/* ==========================================================================
   Micro-interazioni extra
   ========================================================================== */

.spl-pulse-soft {
  animation: spl-soft-pulse 3.2s ease-in-out infinite;
}

@keyframes spl-soft-pulse {
  0%,
  100% {
    box-shadow: var(--spl-shadow-sm);
  }
  50% {
    box-shadow: var(--spl-shadow-md);
  }
}

/* Link underline draw */
.spl-link-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 0.28s var(--spl-ease);
}

.spl-link-draw:hover {
  background-size: 100% 2px;
}

/* Image ken-burns soft (usa su contenitore con overflow hidden) */
.spl-kenburns img {
  transform: scale(1.02);
  transition: transform 8s linear;
}

.spl-kenburns:hover img,
.spl-kenburns.is-visible img {
  transform: scale(1.08);
}

/* ==========================================================================
   Accessibility — reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bricks-button,
  .spl-btn,
  .spl-btn--primary,
  .spl-btn--header-cta,
  .spl-pulse-soft {
    animation: none !important;
  }

  .bricks-button,
  .bricks-button::after,
  .bricks-button > *,
  .spl-btn,
  .spl-btn::after,
  .spl-btn > *,
  .spl-card,
  .spl-panel,
  .spl-case,
  .spl-lift,
  .spl-reveal,
  .spl-enter,
  .spl-link-draw,
  .spl-media-frame img,
  .spl-kenburns img {
    transition: none !important;
    animation: none !important;
  }

  .spl-reveal,
  .spl-reveal.is-visible,
  html:not(.spl-js) .spl-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .spl-marquee__track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
  }

  .bricks-button:hover,
  .spl-btn:hover,
  .spl-card:hover,
  .spl-panel:hover,
  .spl-case:hover,
  .spl-lift:hover {
    transform: none !important;
  }

  .bricks-button:hover::after,
  .spl-btn:hover::after {
    left: -75px !important;
  }
}