/* Banner vortex confinato al solo modulo ps_banner della Home. */
.ps-banner-vortex {
  position: relative;
  overflow: hidden;
  background: #000000;
}

body#index .page-content--home > section.ps-banner.ps-banner-vortex {
  background-color: #000000;
  box-shadow: 0 0 0 100vmax #000000;
}

.ps-banner-vortex__stage {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 1110 / 213;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
  contain: layout paint;
}

.ps-banner-vortex__stage::before,
.ps-banner-vortex__stage::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.ps-banner-vortex__stage::before {
  z-index: 2;
  width: 150%;
  height: 140%;
  background: radial-gradient(ellipse at 50% 55%, transparent 10%, #000 50%);
}

.ps-banner-vortex__stage::after {
  z-index: 5;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 75%, #a900ff 20%, transparent 75%);
  mix-blend-mode: overlay;
}

.ps-banner-vortex__canvas,
.ps-banner-vortex__aura,
.ps-banner-vortex__overlay {
  position: absolute;
  pointer-events: none;
}

.ps-banner-vortex__canvas {
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ps-banner-vortex-aura-glow {
  from { background-position: 0 100%; }
  to { background-position: 0 300%; }
}

.ps-banner-vortex__aura {
  top: -71.5%;
  left: 50%;
  z-index: 3;
  width: 30%;
  height: 140%;
  border-radius: 0 0 100% 100%;
  background: linear-gradient(
      20deg,
      #00f8f1,
      rgb(255 189 30 / 13%) 16.5%,
      #fe848f 33%,
      rgb(254 132 143 / 13%) 49.5%,
      #00f8f1 66%,
      rgb(0 248 241 / 38%) 85.5%,
      #ffbd1e 100%
    ) 0 100% / 100% 200%;
  filter: blur(clamp(18px, 4vw, 50px));
  mix-blend-mode: screen;
  opacity: .75;
  transform: translate3d(-50%, 0, 0);
  animation: ps-banner-vortex-aura-glow 5s linear infinite;
  animation-play-state: paused;
}

@supports (mix-blend-mode: plus-lighter) {
  .ps-banner-vortex__aura { mix-blend-mode: plus-lighter; }
}

.ps-banner-vortex[data-vortex-running="true"] .ps-banner-vortex__aura,
.ps-footer-vortex[data-vortex-running="true"] .ps-banner-vortex__aura {
  animation-play-state: running;
}

.ps-banner-vortex__overlay {
  inset: 0;
  z-index: 10;
  background: repeating-linear-gradient(
    transparent,
    transparent 1px,
    #fff 1px,
    #fff 2px
  );
  mix-blend-mode: overlay;
  opacity: .5;
}

.ps-banner-vortex__fallback {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .ps-banner-vortex__aura {
    animation: none;
  }
}

/* La stessa animazione come sfondo, senza modificare l'altezza del footer. */
.ps-footer-vortex {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000;
}

.ps-footer-vortex__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  opacity: .62;
  pointer-events: none;
  transform: none;
}

.ps-footer-vortex__content {
  position: relative;
  z-index: 20;
}