/* ============================================
   ABBIATI ENGINEERING — Animazioni premium
   Hero 3D · sfondi vivi · micro-interazioni
   ============================================ */

/* Token estesi brand (vedi brand-book.html) */
:root{
  --ambra:#fbbf24;
  --notte:#0b1d29;
  --petrolio-3:#27475c;
}

/* ---------- HERO: canvas 3D + glow animato ---------- */
.hero{overflow:hidden;isolation:isolate}
#hero-3d{position:absolute;inset:0;z-index:0;pointer-events:none}
#hero-3d canvas{display:block;width:100%;height:100%}

/* Bagliore "brace" che respira dietro il contenuto */
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-18%;bottom:-42%;width:70%;height:110%;
  background:radial-gradient(closest-side,rgba(249,115,22,.34),rgba(251,191,36,.10) 55%,transparent 75%);
  filter:blur(14px);
  animation:brace-respiro 9s ease-in-out infinite;
}
@keyframes brace-respiro{
  0%,100%{opacity:.65;transform:scale(1) translateY(0)}
  50%{opacity:1;transform:scale(1.12) translateY(-3%)}
}

/* Titolo hero: entrata cinematografica */
.hero h1,.hero p,.hero .azioni{opacity:0;transform:translateY(28px);animation:hero-in .9s cubic-bezier(.22,1,.36,1) forwards}
.hero p{animation-delay:.18s}
.hero .azioni{animation-delay:.34s}
@keyframes hero-in{to{opacity:1;transform:none}}

/* ---------- Fiamma del logo: tremolio vivo ---------- */
@keyframes fiamma-viva{
  0%,100%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.06,.96) rotate(-2deg)}
  60%{transform:scale(.97,1.05) rotate(2deg)}
}
.logo .fiamma svg{animation:fiamma-viva 2.8s ease-in-out infinite;transform-origin:50% 85%}
.logo .fiamma{box-shadow:0 0 18px rgba(249,115,22,.45);transition:box-shadow .3s}
.logo:hover .fiamma{box-shadow:0 0 28px rgba(249,115,22,.75)}

/* ---------- CARD: tilt 3D + riflesso che segue il mouse ---------- */
.griglia{perspective:1100px}
.card{
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .3s;
  border:1px solid transparent;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.13),transparent 42%);
  transition:opacity .3s;
}
.card:hover::after{opacity:1}
.card:hover{border-color:rgba(249,115,22,.25);box-shadow:0 18px 40px rgba(29,58,79,.16)}
.card:hover .icona{transform:translateZ(26px) scale(1.08)}
.card .icona{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.card h3,.card p{transform:translateZ(12px)}

/* Ventola SVOF: rotazione al hover */
@keyframes ruota{to{transform:rotate(360deg)}}
.card:hover .anim-ruota{animation:ruota 1.6s linear infinite;transform-origin:50% 50%}

/* ---------- Corsi: slide + barra fuoco ---------- */
.corso{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.corso::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--fuoco),var(--ambra));
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.corso:hover{transform:translateX(8px);box-shadow:var(--ombra)}
.corso:hover::before{transform:scaleY(1)}
.corso:hover .liv{background:var(--fuoco);color:#fff;transform:rotate(-6deg) scale(1.06)}
.corso .liv{transition:.3s cubic-bezier(.34,1.56,.64,1)}

/* ---------- BOTTONI: shine sweep + profondità ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:none;
}
.btn:hover::before{left:130%;transition:left .6s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(249,115,22,.35)}
.btn.dark:hover{box-shadow:0 10px 24px rgba(22,48,63,.4)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .freccia{display:inline-block;transition:transform .25s}
.btn:hover .freccia{transform:translateX(5px)}

/* ---------- BANDA CTA: braci in canvas + gradiente vivo ---------- */
.banda{position:relative;overflow:hidden;background:linear-gradient(130deg,var(--notte),var(--navy) 55%,var(--petrolio-3));background-size:200% 200%;animation:banda-flusso 14s ease-in-out infinite}
@keyframes banda-flusso{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#embers{position:absolute;inset:0;pointer-events:none}
.banda .container{position:relative;z-index:1}

/* ---------- Timeline: pallini che pulsano quando appaiono ---------- */
.tappa.vista::before{animation:tappa-eco 1.6s ease-out .2s 2}
@keyframes tappa-eco{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,.45)}
  100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}
}

/* ---------- Numeri: leggero pop ---------- */
.numeri > div{transition:transform .25s}
.numeri > div:hover{transform:translateY(-4px) scale(1.04)}

/* ---------- Icone contatti ---------- */
.dato:hover .ic{transform:rotate(-8deg) scale(1.1);background:var(--fuoco);color:#fff}
.dato .ic{transition:.3s cubic-bezier(.34,1.56,.64,1)}

/* ---------- Header: ombra al scroll ---------- */
header.main{transition:box-shadow .3s}
header.main.scrolled{box-shadow:0 4px 24px rgba(29,58,79,.12)}

/* ---------- Accessibilità ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::after,.logo .fiamma svg,.banda,.tappa.vista::before,.card:hover .anim-ruota{animation:none}
  .hero h1,.hero p,.hero .azioni{animation:none;opacity:1;transform:none}
  .card,.corso,.btn,.numeri > div{transition:none}
  #hero-3d,#embers{display:none}
}
@media (max-width:680px){
  .hero::after{right:-40%;width:110%}
}