/* Gli effetti morbidi del sito (D-348): riflesso sui pulsanti, sottolineatura lenta del menù, carte che si sollevano,
   entrata dolce dei blocchi, intestazione sfumata, nastro che scorre e sfondo che respira piano. Per spegnere tutto
   basta togliere questo file e motion.js da base.html. Con «riduci movimento» attivo non si muove niente. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --gold-1: #ffdd8c; --gold-2: #ffc85a; --gold-3: #f3b746; --gold-line: #e8a92f; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* intestazione fissa, trasparente in alto e sfocata quando si scorre */
.site-head { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: 8px 16px 2px; }
.site-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1;
  background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity .45s; }
.site-head.is-scrolled::before { opacity: 1; }

/* menù: la linea nasce da sinistra piano e, uscendo, si ritira a destra */
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; transition: color .3s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--gold-line);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease); }
.nav a:hover, .nav a:focus-visible { text-decoration: none; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.lang a { transition: background .3s, color .3s; }

/* pulsanti: fondo a lingotto, riflesso che attraversa, sollevamento e bagliore */
button, .btn { position: relative; overflow: hidden; border: 1px solid #ffdf94;
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
button::after, .btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); }
button:hover, .btn:hover, button:focus-visible, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(232, 169, 47, .85); }
button:hover::after, .btn:hover::after { animation: shine .9s var(--ease); }
button:active, .btn:active { transform: translateY(0) scale(.98); }
.btn.ghost { background: transparent; border: 2px solid var(--line); box-shadow: none; transition: background .35s, border-color .35s, transform .35s var(--ease); }
.btn.ghost::after { display: none; }
.btn.ghost:hover, .btn.ghost:focus-visible { background: color-mix(in srgb, var(--gold-2) 22%, transparent); border-color: var(--gold-2); box-shadow: none; }
@keyframes shine { 100% { left: 150%; } }

/* campi: alone caldo quando si scrive */
input:focus, select:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(255, 200, 90, .35); }
input, select { transition: border-color .3s, box-shadow .3s; }

/* carte e domande: si sollevano piano */
.tile, .faq details, .band, .chat { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.tile:hover, .faq details:hover { transform: translateY(-4px); border-color: var(--gold-2); box-shadow: 0 16px 30px -18px rgba(52, 71, 107, .45); }
@media (prefers-color-scheme: dark) { .tile:hover, .faq details:hover { box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7); } }
.faq summary { transition: color .3s; }

/* entrata dolce: i blocchi salgono di pochi pixel mentre appaiono (la classe la mette motion.js e poi la toglie) */
html .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
html .reveal.in { opacity: 1; transform: none; }

/* titolo: le lettere entrano una dopo l'altra */
.hero h1 { perspective: 600px; }
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; transform-origin: 50% 100%; animation: chin .8s var(--ease) calc(var(--i) * 22ms + 80ms) both; }
/* telefono: l'intestazione scorre via con la pagina (da ferma si tagliava a metà) */
@media (max-width: 560px) {
  .site-head { position: static; }
  table.prices th, table.prices td { padding: 10px 5px; font-size: .86rem; }
  table.prices td + td { white-space: nowrap; }  /* i numeri non vanno a capo */
}
@keyframes chin { 0% { opacity: 0; transform: translateY(.4em) rotateX(-70deg); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: blur(0); } }

/* sfondo della prima schermata: due macchie di luce che respirano piano (al posto dell'immagine che si muove) */
.hero { position: relative; }
.aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aura i { position: absolute; border-radius: 50%; filter: blur(8px); animation: drift 38s ease-in-out infinite alternate; }
.aura i:nth-child(1) { width: 440px; height: 440px; right: -60px; top: -80px; background: radial-gradient(circle, rgba(255, 200, 90, .42), transparent 68%); }
.aura i:nth-child(2) { width: 380px; height: 380px; left: -80px; bottom: -120px; background: radial-gradient(circle, rgba(120, 150, 220, .2), transparent 68%); animation-duration: 46s; }
@keyframes drift { 0% { transform: scale(1.04) translate3d(0, 0, 0); } 100% { transform: scale(1.18) translate3d(-3%, 4%, 0); } }

/* nastro che scorre: a tutta larghezza, con un riflesso che lo attraversa ogni tanto */
.marquee { position: relative; overflow: hidden; width: 100vw; margin: 26px 0 0 calc(50% - 50vw); border-block: 2px solid var(--gold-3);
  background: linear-gradient(100deg, #e9b94c 0%, #f6cf78 30%, #ffdd8c 50%, #f6cf78 70%, #e9b94c 100%); color: #34476b;
  box-shadow: inset 0 0 0 1px rgba(52, 71, 107, .08); }
.marquee::after { content: ""; position: absolute; top: 0; left: -130%; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg); animation: bandshine 5.5s var(--ease) 2.4s infinite; }
@keyframes bandshine { 0% { left: -130%; } 26%, 100% { left: 150%; } }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee ul { display: flex; margin: 0; padding: 0; list-style: none; }
.marquee li { padding: 11px 0; font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.marquee li::after { content: "\2726"; margin: 0 1.6rem; opacity: .6; }
@keyframes marquee { 100% { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .marquee { width: auto; margin-left: 0; border-radius: 12px; }
  .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee ul[aria-hidden="true"] { display: none; }
  .marquee ul { flex-wrap: wrap; justify-content: center; }
}