/* =============================================================================
   Servizi Integrati — tema "Aurora" chiaro
   Sfondo bianco + aurora WebGL colorata, sezioni glass chiare, accento dark.
   Definisce TUTTE le classi usate da index.php / grazie.php / legal-layout.php:
   glass-card, glass-panel, animationIn, animate-on-scroll, glow-text,
   font-manrope, custom-scrollbar, chart/flow animations, field, wa-fab, ...
   ========================================================================== */

:root {
  --bg:       #fafafa;   /* sfondo pagina        */
  --fg:       #18181b;   /* zinc-900 testo forte */
  --muted:    #52525b;   /* zinc-600 testo soft  */
  --line:     #e4e4e7;   /* zinc-200 bordi       */
  --line-2:   #d4d4d8;   /* zinc-300             */
  --accent:   #5E5CE6;   /* indigo brand         */
  --card:     rgba(255, 255, 255, 0.72);
  --card-2:   rgba(255, 255, 255, 0.55);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--muted);
}

.font-manrope { font-family: "Manrope", "Inter", sans-serif; }

/* Offset ancore (nav fissa) */
section[id], [id] { scroll-margin-top: 96px; }

/* Scrollbar pagina */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

::selection { background-color: #18181b; color: #fff; }

/* =========================================================================
   SFONDO: aurora WebGL + blob pastello
   ====================================================================== */
#aurora-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.7;
}
#aurora-canvas canvas { width: 100% !important; height: 100% !important; display: block; }

/* Blob morbidi dietro l'aurora — danno profondità anche senza WebGL */
#aurora-blobs {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
}
#aurora-blobs span {
  position: absolute;
  border-radius: 9999px;
  filter: blur(110px);
  will-change: transform;
}
#aurora-blobs .b1 { top: -10%; left: -10%; width: 60vw; height: 60vh;
  background: linear-gradient(135deg, #fef08a, #fbcfe8); animation: blobDriftA 16s ease-in-out infinite; }
#aurora-blobs .b2 { top: 18%; right: -15%; width: 55vw; height: 55vh;
  background: #f9a8d4; animation: blobDriftB 20s ease-in-out infinite; }
#aurora-blobs .b3 { bottom: -12%; left: 12%; width: 65vw; height: 65vh;
  background: linear-gradient(160deg, #67e8f9, #93c5fd); animation: blobDriftA 22s ease-in-out infinite reverse; }
#aurora-blobs .b4 { top: 30%; left: 25%; width: 50vw; height: 50vh;
  background: #d8b4fe; animation: blobDriftB 18s ease-in-out infinite; }

@keyframes blobDriftA { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-3%,-4%,0) scale(1.12); } }
@keyframes blobDriftB { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(3%,3%,0) scale(1.0); } }

/* Velo bianco per tenere il testo leggibile sopra l'aurora */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(250,250,250,0) 0%, rgba(250,250,250,0.35) 55%, rgba(250,250,250,0.7) 100%);
}

/* =========================================================================
   GLASS CARD / PANEL (versione chiara)
   ====================================================================== */
.glass-card {
  background: var(--card);
  border: 1px solid rgba(228, 228, 231, 0.9);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px -12px rgba(24, 24, 27, 0.16), 0 2px 8px -4px rgba(24, 24, 27, 0.08);
}
.glass-panel {
  background: var(--card-2);
  border: 1px solid rgba(228, 228, 231, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px -10px rgba(24, 24, 27, 0.12);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.glass-panel:hover {
  border-color: var(--line-2);
  box-shadow: 0 14px 40px -16px rgba(24, 24, 27, 0.22);
  transform: translateY(-2px);
}

/* Pannello accento "dark" (sezioni a contrasto) */
.dark-panel {
  background: #09090b;
  border: 1px solid #27272a;
  box-shadow: 0 30px 60px -25px rgba(9, 9, 11, 0.45);
}

/* Titolo hero con riempimento a gradiente scuro */
.glow-text { filter: drop-shadow(0 6px 24px rgba(94, 92, 230, 0.12)); }

/* =========================================================================
   ANIMAZIONI D'INGRESSO
   ====================================================================== */
@keyframes animationIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* animate-on-scroll: resta nascosto e in pausa finché non entra nel viewport.
   L'animazione inline [animation:animationIn ...] parte quando JS aggiunge .is-visible */
.animate-on-scroll:not(.is-visible) {
  opacity: 0;
  animation-play-state: paused !important;
}

/* fallback senza JS / reveal generico */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Barra di avanzamento scroll */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #5E5CE6, #f9a8d4, #67e8f9);
  z-index: 100; pointer-events: none;
}

/* Cursore custom (solo desktop) */
#custom-cursor {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px;
  border-radius: 9999px; background: rgba(94, 92, 230, 0.6);
  pointer-events: none; z-index: 100; mix-blend-mode: multiply;
  transform: translate(-50%, -50%); transition: width .2s, height .2s, background .2s;
}

/* =========================================================================
   ANIMAZIONI GRAFICI / FLUSSI (sezione Vantaggi e Processo)
   ====================================================================== */
.animate-draw-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawLine 2.4s ease-out forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.animate-chart-fill { opacity: 0; animation: chartFill 1.6s ease-out .4s forwards; }
@keyframes chartFill { to { opacity: 1; } }

.animate-flow-line { stroke-dasharray: 8 10; animation: flowLine 2.2s linear infinite; }
@keyframes flowLine { to { stroke-dashoffset: -180; } }

/* Scrollbar interna ai pannelli */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* =========================================================================
   FORM
   ====================================================================== */
.field {
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: var(--fg);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field::placeholder { color: #a1a1aa; }   /* zinc-400 */
.field:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.12);
}
textarea.field { resize: none; min-height: 110px; }
select.field { appearance: none; cursor: pointer; }

.form-msg { display: none; border-radius: .6rem; padding: .8rem 1rem; font-size: .85rem; }
.form-msg.ok  { display: block; background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.35); color: #047857; }
.form-msg.err { display: block; background: rgba(244,63,94,.08);  border: 1px solid rgba(244,63,94,.30);  color: #be123c; }

.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Honeypot anti-spam */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   WHATSAPP FAB
   ====================================================================== */
.wa-fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 60;
  width: clamp(52px, 13vw, 60px);
  height: clamp(52px, 13vw, 60px);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, .55), 0 4px 12px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-fab:hover { transform: scale(1.07); }
.wa-fab:active { transform: scale(.96); }
.wa-fab iconify-icon { font-size: clamp(28px, 7vw, 32px); }
.wa-fab svg { width: clamp(28px, 7vw, 32px); height: auto; }
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: wa-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes wa-ping { 0% { transform: scale(1); opacity: .8; } 80%,100% { transform: scale(1.6); opacity: 0; } }
.wa-fab .wa-tip {
  position: absolute; right: calc(100% + 12px); white-space: nowrap;
  background: #18181b; color: #fafafa; font-size: 13px;
  padding: 7px 12px; border-radius: 9999px;
  opacity: 0; pointer-events: none; transform: translateX(8px);
  transition: opacity .25s, transform .25s;
}
.wa-fab:hover .wa-tip { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) { .wa-fab .wa-tip { display: none; } }

/* =========================================================================
   PAGINE LEGALI (tipografia chiara)
   ====================================================================== */
.legal h2 { color:#18181b; font-size:1.35rem; font-weight:500; margin:2rem 0 .75rem; font-family:"Manrope",sans-serif; letter-spacing:-.01em; }
.legal h3 { color:#27272a; font-size:1.05rem; font-weight:500; margin:1.5rem 0 .5rem; }
.legal p, .legal li { color:#52525b; font-weight:300; line-height:1.7; margin-bottom:.6rem; }
.legal ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }
.legal a { color:#5E5CE6; text-decoration:underline; text-underline-offset:2px; }
.legal strong { color:#27272a; font-weight:500; }

/* =========================================================================
   ACG REVEAL — disco neumorfico con testo che ruota in cerchio (hero)
   ====================================================================== */
.acg-reveal {
  position: relative;
  height: 86%;
  aspect-ratio: 1 / 1;
  max-height: 460px;
  border-radius: 9999px;
  background: #eceef3;
  box-shadow: 16px 16px 32px #c7cad3, -16px -16px 32px #ffffff;
  animation: acgFloat 5s ease-in-out infinite;
}
.acg-reveal::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 9999px;
  background: #eceef3;
  box-shadow: inset 6px 6px 12px #d2d5dd, inset -6px -6px 12px #ffffff;
}
.acg-reveal-rotor {
  position: absolute;
  inset: 0;
  animation: spin 34s linear infinite;
}
.acg-reveal-rotor svg { width: 100%; height: 100%; }
.acg-reveal-text {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: url(#acgTextGradient);
}
.acg-reveal-center {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.acg-reveal-center > div {
  padding: 1.1rem 1.5rem;
  border-radius: 1.5rem;
  background: #eceef3;
  box-shadow: inset 3px 3px 6px #d2d5dd, inset -3px -3px 6px #ffffff;
}
@keyframes acgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* =========================================================================
   ACCESSIBILITÀ — riduzione movimento
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll:not(.is-visible), .reveal { opacity: 1 !important; transform: none !important; }
  #aurora-canvas { opacity: 0.5; }
  /* Lo sfondo resta vivo anche con movimento ridotto: blob in deriva molto lenta */
  #aurora-blobs .b1 { animation: blobDriftA 28s ease-in-out infinite !important; }
  #aurora-blobs .b2 { animation: blobDriftB 32s ease-in-out infinite !important; }
  #aurora-blobs .b3 { animation: blobDriftA 36s ease-in-out infinite reverse !important; }
  #aurora-blobs .b4 { animation: blobDriftB 30s ease-in-out infinite !important; }
  /* Il disco hero continua a ruotare (lento) anche con movimento ridotto */
  .acg-reveal-rotor { animation: spin 70s linear infinite !important; }
  .acg-reveal { animation: acgFloat 9s ease-in-out infinite !important; }
}