/* Dualty design v3 — effetti e animazioni (riferimento: ../dualty-home-design-v3.html) */

@keyframes dualty-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes dualty-spin { to { transform: rotate(360deg) } }
@keyframes dualty-marquee { to { transform: translateX(-50%) } }
@keyframes dualty-reveal { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }

/* Aloni di sfondo della pagina */
.dualty-glow { position: relative; isolation: isolate; overflow: hidden; }
.dualty-glow::before, .dualty-glow::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.dualty-glow::before { top: -200px; right: -160px; width: 900px; height: 900px; background: radial-gradient(circle, rgba(204,0,255,0.35) 0%, rgba(7,9,15,0) 65%); }
.dualty-glow::after { top: 380px; left: -300px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(61,90,254,0.22) 0%, rgba(7,9,15,0) 65%); }

/* Visual della hero: alone + orbite che ruotano + slash luminosa */
.dualty-hero-visual { position: relative; min-height: 620px; display: grid; place-items: center; }
.dualty-hero-visual > * { grid-area: 1 / 1; }
.dualty-hero-visual__alone { width: 520px; max-width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 40%, rgba(204,0,255,0.55), rgba(61,90,254,0.35) 45%, rgba(7,9,15,0) 70%); filter: blur(30px); }
.dualty-hero-visual__orbite { width: 560px; max-width: 100%; animation: dualty-spin 40s linear infinite; }
.dualty-hero-visual__anello { width: 440px; max-width: 80%; animation: dualty-spin 60s linear infinite reverse; }
.dualty-hero-visual__slash { width: 260px; max-width: 45%; filter: drop-shadow(0 0 40px rgba(204,0,255,0.8)); }

/* Card in vetro fluttuanti (Take Off, Carlo & Matteo) */
.dualty-float { animation: dualty-float 6s ease-in-out infinite; }
.dualty-float--lenta { animation-delay: -3s; }
.dualty-hero-visual .dualty-card-caso { position: absolute; top: 40px; right: 0; width: 240px; }
.dualty-hero-visual .dualty-card-soci { position: absolute; bottom: 50px; left: 0; }
.dualty-vetro { background: rgba(20,24,36,0.7); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dualty-barra { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dualty-barra > span { display: block; height: 100%; width: 62%; border-radius: inherit; background: linear-gradient(90deg, #3D5AFE, #CC00FF); }

/* Fascia magenta inclinata con scritte che scorrono */
.dualty-fascia { transform: rotate(-1.5deg); margin-inline: -40px; overflow: hidden; box-shadow: 0 0 80px rgba(204,0,255,0.45); }
.dualty-fascia__track { display: flex; gap: 48px; width: max-content; white-space: nowrap; animation: dualty-marquee 28s linear infinite; }

/* Bottoni primari con glow */
.wp-block-button:not(.is-style-outline) .wp-block-button__link { box-shadow: 0 0 40px rgba(204,0,255,0.45); }

/* Pannello AI con griglia sottile e due aloni */
.dualty-pannello-ai { position: relative; overflow: hidden; isolation: isolate; }
.dualty-pannello-ai::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; background: url("../img/griglia.svg"); }
.dualty-pannello-ai::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 80% 20%, rgba(204,0,255,0.35), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(61,90,254,0.35), transparent 55%); }

/* Comparsa delle sezioni allo scroll (classe aggiunta da reveal.js) */
.js .dualty-reveal { opacity: 0; }
.js .dualty-reveal.is-visible { animation: dualty-reveal 0.8s cubic-bezier(.2,.7,.2,1) both; }

/* Mobile: la visual va sotto il testo e si rimpicciolisce */
@media (max-width: 781px) {
  .dualty-hero-visual { min-height: 420px; }
  .dualty-hero-visual .dualty-card-caso, .dualty-hero-visual .dualty-card-soci { position: static; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dualty-hero-visual__orbite, .dualty-hero-visual__anello, .dualty-float, .dualty-fascia__track { animation: none; }
  .js .dualty-reveal { opacity: 1; animation: none; }
}