/* =======================================================
   STAY IN TOUCH — bottone sticky elegante con SVG inline
   - Entrata "drop-down" accelerata/decelerata
   - Icona +30% (1.45rem) con micro-zoom in hover
   - Hover invertito (bianco + rosso corporate)
   ======================================================= */

:root{
  /* Palette ed effetti */
  --sti-bg: rgba(20,20,20,.72);
  --sti-fg: #ffffff;
  --sti-bd: rgba(255,255,255,.14);
  --sti-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --sti-shadow-hover: 0 16px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  --sti-red: #da291c; /* rosso corporate */

  /* Motion (tuning rapido) */
  --sti-drop-distance: 26px; /* quanto “cade” il bottone in ingresso */
  --sti-drop-duration: .44s; /* durata animazione ingresso */
  --sti-drop-ease: cubic-bezier(.22,.9,.18,1.02); /* accelera → smorza */
}

/* ------------------ Bottone sticky, centrato ------------------ */
.stay-in-touch{
  position: fixed;
  left: 50%;
  transform: translateX(-50%); /* base; i keyframes aggiungono Y */
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 6px);
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: .6rem;

  padding: .9rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;

  font: 700 .95rem/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  letter-spacing: .06em;

  color: var(--sti-fg);
  background: var(--sti-bg);
  border: 1px solid var(--sti-bd);
  box-shadow: var(--sti-shadow);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
          backdrop-filter: saturate(160%) blur(10px);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease;

  /* Entrata "drop-down" */
  animation: sti-drop-in var(--sti-drop-duration) var(--sti-drop-ease) both;
  will-change: transform, opacity;
}

/* ------------------ Hover invertito ------------------ */
.stay-in-touch:hover{
  background:#fff;
  color: var(--sti-red);
  border-color: var(--sti-red);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: var(--sti-shadow-hover);
}

/* ------------------ Focus accessibile ------------------ */
.stay-in-touch:focus-visible{
  outline:3px solid #7dd3fc;
  outline-offset:3px;
}

/* ------------------ Icona SVG inline ------------------ */
.stay-in-touch .sti-icon{
  width: 1.45rem;   /* +30% circa rispetto 1.1rem */
  height: 1.45rem;
  display: inline-block;
  flex: 0 0 auto;
  /* allinea meglio l'icona al testo */
  transform: translateY(.5px);
  transition: transform .22s ease; /* micro-zoom in hover */
}

/* Eredita il colore dal testo, a prescindere dall'export */
.stay-in-touch .sti-icon [fill],
.stay-in-touch .sti-icon path,
.stay-in-touch .sti-icon polygon,
.stay-in-touch .sti-icon circle,
.stay-in-touch .sti-icon rect,
.stay-in-touch .sti-icon line,
.stay-in-touch .sti-icon polyline {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Micro-zoom dell'icona in hover (delicato) */
.stay-in-touch:hover .sti-icon{
  transform: translateY(.5px) scale(1.05);
}

/* ------------------ Keyframes: drop-down raffinato ------------------ */
@keyframes sti-drop-in {
  0% {
    transform: translateX(-50%) translateY(calc(-1 * var(--sti-drop-distance)));
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) translateY(6px); /* micro overshoot */
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ------------------ Riduzione motion ------------------ */
@media (prefers-reduced-motion: reduce){
  .stay-in-touch{
    transition: none;
    animation: none;
  }
  .stay-in-touch .sti-icon{
    transition: none;
  }
}

/* ------------------ Mobile fine-tuning ------------------ */
@media (max-width: 480px){
  :root{
    /* un pochino più corto e rapido su mobile */
    --sti-drop-distance: 20px;
    --sti-drop-duration: .36s;
  }
  .stay-in-touch{
    padding: .82rem 1.05rem;
    font-size: .92rem;
  }
}

/* --------- (OPZIONALE) Re-trigger con Swup ----------
Se usi Swup e il body riceve classi in transizione, riattiva l’animazione. */
html.swup-enabled body.is-rendering .stay-in-touch,
html.swup-enabled body.is-changing .stay-in-touch{
  animation: sti-drop-in var(--sti-drop-duration) var(--sti-drop-ease) both;
}