/* ============================================================
   public.css — Layer di ANIMAZIONI per il design "broadsheet"
   Coerente con main.css (.site-public): sobrio, preciso, editoriale.
   Caricato dopo main.css. Tutto reversibile rimuovendo questo file.
   ============================================================ */

/* ---- Scroll reveal (classe .reveal applicata da public.js) ---- */
.site-public .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.site-public .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* La sezione "metodo" è su fondo nero: niente translate (le celle hanno
   hairline chiare che stonerebbero in movimento), solo fade. */
.site-public .lp-method .reveal { transform: none; }

/* ---- Micro-interazioni: frecce che avanzano all'hover ---- */
.site-public .lp-btn .arrow,
.site-public .lp-link .arrow {
  transition: transform 0.2s ease;
}
.site-public .lp-btn:hover .arrow,
.site-public .lp-link:hover .arrow {
  transform: translateX(5px);
}

/* Sec-head: link "Tutti i casi →" con stessa logica */
.site-public .sec-head .sec-meta a {
  display: inline-block;
  transition: color 0.15s ease, transform 0.2s ease;
}
.site-public .sec-head .sec-meta a:hover {
  transform: translateX(3px);
}

/* ---- Portfolio teaser: hover sobrio coerente ---- */
.site-public .lp-pf-item {
  transition: background 0.18s ease;
}
.site-public .lp-pf-item:hover {
  background: rgba(26, 77, 255, 0.04);
}
.site-public .lp-pf-item h3 {
  transition: color 0.18s ease;
}
.site-public .lp-pf-item:hover h3 {
  color: var(--lp-accent);
}

/* ---- Fact list: etichetta che si accende all'hover di riga ---- */
.site-public .fact-list li {
  transition: background 0.15s ease;
}
.site-public .fact-list li:hover {
  background: rgba(17, 17, 17, 0.03);
}
.site-public .fact-list li .k {
  transition: color 0.15s ease;
}
.site-public .fact-list li:hover .k {
  color: var(--lp-accent);
}

/* ---- Cursore lampeggiante dopo il titolo hero (tocco "tech" discreto) ---- */
.site-public .lp-hero h1::after {
  content: "";
  display: inline-block;
  width: 0.62ch;
  height: 0.92em;
  margin-left: 0.12em;
  background: var(--lp-accent-2);
  vertical-align: -0.06em;
  animation: lp-caret 1.1s steps(1) infinite;
}

@keyframes lp-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ---- Stat value: leggero "lift" del numero quando entra ---- */
.site-public .lp-stat.reveal .lp-stat-value {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(6px);
}
.site-public .lp-stat.reveal.is-visible .lp-stat-value {
  transform: none;
}

/* ---- Fix leggibilità: cookie banner (testo era scuro su sfondo scuro) ---- */
.site-public #cookie-banner {
  background: var(--lp-text) !important;
  color: var(--lp-ground);
  border-top: 1px solid var(--lp-text);
}
.site-public #cookie-banner p,
.site-public #cookie-banner .btn-link {
  color: var(--lp-ground) !important;
}
.site-public #cookie-banner .btn-link { text-decoration: underline; }

/* ---- Pagina servizi: padding interno laterale ai contenitori ---- */
.site-public .services-container .section-card .card-body {
  padding-left: clamp(24px, 3vw, 40px);
  padding-right: clamp(24px, 3vw, 40px);
}

/* ---- Accessibilità: rispetta prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .site-public .reveal,
  .site-public .lp-stat.reveal .lp-stat-value {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-public .lp-hero h1::after { animation: none; }
  .site-public .lp-btn .arrow,
  .site-public .lp-link .arrow { transition: none; }
}