/* motion.css — caricato DOPO gli stili inline così vince sulla cascata.
   Easing custom + feedback al tocco + scroll-reveal.
   Principi: Emil Kowalski (animations.dev) — ease-out forte, durate corte,
   solo transform/opacity, scale(0.97) sui press, stagger sugli ingressi.
   NB: niente gate su prefers-reduced-motion (scelta esplicita dell'utente). */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Feedback al tocco: ogni elemento premibile "sente" la pressione ── */
.btn-primary, .btn-ghost, .nav .cta, .srv-cta, .work-cta-btn, .cta-go,
.tag-btn, .cf-submit, .price-card .btn, .final .btn, .cf-reset {
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    gap 220ms var(--ease-out),
    color 200ms var(--ease-out);
}
.btn-primary:active, .btn-ghost:active, .nav .cta:active, .srv-cta:active,
.work-cta-btn:active, .cta-go:active, .tag-btn:active, .cf-submit:active,
.price-card .btn:active, .final .btn:active, .cf-reset:active {
  transform: scale(0.97);
}

/* ── Scroll-reveal: ingresso "sale + sfuma", una volta sola ──
   Nascosti SOLO con JS (.has-js, impostato prima del paint) → niente flash, e
   senza JS resta tutto visibile. Usiamo la proprietà INDIPENDENTE `translate`
   (non `transform`) così lo scorrimento verso l'alto si COMPONE con le rotazioni
   proprie di cartellini/tagliandi senza azzerarle. js/reveal.js aggiunge .in
   quando l'elemento ENTRA in vista, con un piccolo stagger di gruppo. */
.has-js .manifesto-grid > *, .has-js .services-head, .has-js .srv,
.has-js .work-head, .has-js .ticket, .has-js .process-head, .has-js .frame,
.has-js .testi-grid > *, .has-js .tag-card, .has-js .always-inner > *,
.has-js .faq-item, .has-js .channel, .has-js .contact-stack,
.has-js .offer-inner > *, .has-js .foot-grid > *, .has-js .cs-reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 1800ms var(--ease-out), translate 1800ms var(--ease-out);
}
.has-js .manifesto-grid > *.in, .has-js .services-head.in, .has-js .srv.in,
.has-js .work-head.in, .has-js .ticket.in, .has-js .process-head.in,
.has-js .frame.in, .has-js .testi-grid > *.in, .has-js .tag-card.in,
.has-js .always-inner > *.in, .has-js .faq-item.in, .has-js .channel.in,
.has-js .contact-stack.in, .has-js .offer-inner > *.in, .has-js .foot-grid > *.in, .has-js .cs-reveal.in {
  opacity: 1;
  translate: 0 0;
}

/* ── Alone caldo "che respira": ambient + luce, riusabile su ogni pagina. ──
   Si usa come <div class="warm-glow" aria-hidden="true"> dentro una sezione
   position:relative; posizione/dimensione si impostano per-pagina nel <style>. */
.warm-glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,149,74,0.16), transparent 62%);
  animation: glowBreathe 7s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

/* ── Focus visibile coerente da tastiera (oltre all'outline UA del browser). ──
   --burn ha contrasto ≥3:1 sia su chiaro (cream/paper) sia su scuro (ink). */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--burn, #b7642d);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Skip-link: invisibile finché non riceve focus da tastiera, poi compare. ── */
.skip-link {
  position: absolute; left: 12px; top: -56px; z-index: 200;
  background: var(--ink, #1b1410); color: #fff;
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top 180ms var(--ease-out, ease);
}
.skip-link:focus { top: 0; outline: 2px solid var(--amber, #c9954a); outline-offset: 0; }