/* ============================================================
   Hero Animation Widget — stile
   Tutte le regole sono scoping su .hero-animation-wrap per
   permettere più istanze nella stessa pagina.

   Ordine dei livelli (dal più lontano al più vicino):
   0. sfondo (colore/immagine/video)
   1. texture di grana
   2. overlay intermedio (opzionale)
   3. canvas (palline/quadrati + linee prospettiche)
   4. claim (titolo + descrizione)
   5. logo
============================================================ */

.hero-animation-wrap{
  position:relative;
  width:100%;
  min-height:320px;
  overflow:hidden;
  border-radius:var(--haw-radius, 0px);
  background-color:#0a0c12; /* fallback, sovrascritto inline dallo shortcode (bg_color) */
  touch-action:none;
  box-sizing:border-box;
}
.hero-animation-wrap *{
  box-sizing:border-box;
}

/* Immagine di sfondo opzionale (attributo bg_image) */
.hero-animation-bgimage{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

/* Video di sfondo opzionale (attributo bg_video).
   autoplay + muted + playsinline sono obbligatori per l'autoplay su mobile. */
.hero-animation-bgvideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
/* Se bg_video_desktop_only="yes", il video viene nascosto sotto i 700px
   e torna visibile il livello sottostante (immagine o colore di fallback) */
@media (max-width: 700px){
  .hero-animation-bgvideo.haw-desktop-only{
    display:none;
  }
}

/* Gradiente decorativo di default: attivo solo quando NON è impostata
   un'immagine o un video di sfondo personalizzati, per non coprirli. */
.hero-animation-decor{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(90,70,220,0.55) 0%, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(30,190,180,0.45) 0%, transparent 45%),
    linear-gradient(160deg, rgba(23,19,38,0.9) 0%, rgba(10,12,18,0.9) 100%);
  pointer-events:none;
  z-index:0;
}

.hero-animation-texture{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.09;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:1;
}

/* Layer intermedio opzionale (attributo overlay_color): sopra allo sfondo,
   SOTTO al canvas — palline/quadrati/linee prospettiche restano sempre nitidi
   sopra di esso. Diventa visibile solo quando tutto è ordinato. */
.hero-animation-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  background-color: var(--haw-overlay-color, rgba(8,10,16,0.45));
}
.hero-animation-overlay.is-visible{
  opacity:1;
}

.hero-animation-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:3;
}

.hero-animation-logo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff, #d7d9de);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  color:#1a1a1a;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  z-index:5;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .3s ease;
  overflow:hidden;
}
.hero-animation-logo:hover{
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.hero-animation-logo img{
  max-width:70%;
  max-height:70%;
  object-fit:contain;
  pointer-events:none;
}

.hero-animation-claim{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin-top:-170px;
  text-align:center;
  width:90%;
  max-width:560px;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  z-index:4;
  background-color: var(--haw-claim-bg, rgba(6,8,13,0.55));
  border-radius:14px;
  padding:22px 28px;
}
.hero-animation-claim.is-visible{
  opacity:1;
}
.hero-animation-claim h2{
  margin:0 0 8px;
  font-size:clamp(1.4rem, 3.2vw, 2.4rem);
  color:var(--haw-claim-color, #ffffff);
}
.hero-animation-claim p{
  margin:0;
  font-size:clamp(.9rem, 1.6vw, 1.1rem);
  color:var(--haw-desc-color, #d7dae0);
}

@media (max-width: 600px){
  .hero-animation-logo{
    width:90px;
    height:90px;
    font-size:12px;
  }
  .hero-animation-claim{
    margin-top:-130px;
    padding:16px 20px;
  }
}