/**
 * Pagina d'anteprima — base comune: font, barra in alto, pulsanti, titoli di sezione, comparse allo scorrere, footer.
 * Solo tema chiaro, colori del sito (shared/css/tokens.css). Animazioni proprie di questa pagina (prefisso tz-).
 */

@font-face {
  font-family: "Inter";
  src: url("../shared/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Proprietà animabili: servono a far scorrere sfumature e angoli in modo fluido. */
@property --tz-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tz-shine { syntax: "<percentage>"; inherits: false; initial-value: -30%; }

:root {
  --tz-blue: #0250ff;
  --tz-sky: #3a8bff;
  --tz-ice: #eef4ff;
  --tz-line: #e2e8f5;
  --tz-gold: #ffb020;
  --tz-gold-ink: #7a4b00;
  --tz-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tz-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: var(--im-color-text);
  font-family: var(--im-font-family);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--tz-blue); }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin: 0; }

.tz-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 3.2vw, 2rem); }
.tz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* —— Barra in alto: trasparente sull'apertura, vetro smerigliato quando scorri —— */
.tz-top { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.tz-top.is-scrolled { background: #ffffffd9; backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--tz-line), 0 10px 30px #01083b0d; }
.tz-top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.tz-top__logo img { width: clamp(132px, 30vw, 168px); height: auto; }
.tz-top__nav { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.tz-top__link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.35rem 0.8rem; border-radius: 999px; color: var(--im-color-navy); font-weight: 650; font-size: 0.92rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.tz-top__link i { color: var(--tz-blue); }
.tz-top__link:hover, .tz-top__link:focus-visible { background: var(--tz-ice); color: var(--tz-blue); }
@media (max-width: 480px) { .tz-top__link--game span { display: none; } }

/* —— Pulsanti —— */
.tz-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.7rem 1.35rem;
  border: 0; border-radius: 14px;
  background: var(--tz-blue); color: #fff;
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  transition: transform .25s var(--tz-ease-spring), box-shadow .25s;
  box-shadow: 0 10px 24px #0250ff40;
}
.tz-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px #0250ff4d; }
.tz-btn:active { transform: translateY(0) scale(.98); }
.tz-btn:focus-visible { outline: 3px solid #0250ff55; outline-offset: 3px; }
.tz-btn--sm { min-height: 40px; padding: 0.4rem 1rem; border-radius: 11px; font-size: 0.92rem; box-shadow: 0 6px 16px #0250ff33; }
.tz-btn--ghost { background: #fff; color: var(--im-color-navy); box-shadow: inset 0 0 0 1.5px var(--tz-line), 0 8px 20px #01083b0d; }
.tz-btn--ghost i { color: var(--tz-blue); }
.tz-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--tz-blue), 0 14px 26px #01083b14; }
/* Riflesso che attraversa il pulsante principale a intervalli. */
.tz-btn--glow::after, .tz-btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent calc(var(--tz-shine) - 12%), #ffffff59 var(--tz-shine), transparent calc(var(--tz-shine) + 12%));
  animation: tz-shine 4.5s var(--tz-ease-out) infinite 1.5s;
}
@keyframes tz-shine { 0%, 55% { --tz-shine: -30%; } 100% { --tz-shine: 130%; } }
.tz-btn--gold { background: linear-gradient(135deg, #ffc53d, #ff9f0a); color: #3d2600; box-shadow: 0 10px 24px #ff9f0a52; }
.tz-btn--gold:hover { box-shadow: 0 16px 30px #ff9f0a66; }

/* —— Titoli di sezione —— */
.tz-sec { position: relative; padding-block: clamp(4rem, 9vw, 7rem); }
.tz-sec--soft { background: linear-gradient(180deg, #f6f9ff, #fbfcff); }
.tz-head { max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3.2rem); text-align: center; }
.tz-kicker { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem; padding: 0.32rem 0.8rem; border-radius: 999px; background: var(--tz-ice); color: var(--tz-blue); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.tz-kicker--gold { background: #fff4d6; color: var(--tz-gold-ink); }
.tz-h2 { color: var(--im-color-navy); font-size: clamp(1.8rem, 4.6vw, 2.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.tz-lead { margin-top: 0.9rem; color: var(--im-color-text-muted); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; text-wrap: pretty; }

/* —— Comparsa allo scorrere: il blocco sale e si svela dal basso con un bordo sfumato —— */
.tz-js [data-tz-reveal]:not(.is-done) {
  -webkit-mask: linear-gradient(to top, #000 calc(100% - 80px), transparent) 50% 100% / 100% 0% no-repeat;
  mask: linear-gradient(to top, #000 calc(100% - 80px), transparent) 50% 100% / 100% 0% no-repeat;
  transform: translateY(28px);
  transition: -webkit-mask-size 1.1s var(--tz-ease-out), mask-size 1.1s var(--tz-ease-out), transform 1s var(--tz-ease-out);
}
.tz-js [data-tz-reveal].is-in:not(.is-done) { -webkit-mask-size: 100% calc(100% + 80px); mask-size: 100% calc(100% + 80px); transform: none; }

/* —— Footer: come quello del sito, senza link legali —— */
.tz-foot { border-top: 1px solid var(--tz-line); background: #fff; padding: 2.4rem 0 calc(1.8rem + env(safe-area-inset-bottom, 0px)); }
.tz-foot__grid { display: grid; gap: 1.6rem; }
.tz-foot__logo { width: 168px; height: auto; margin-bottom: 0.7rem; }
.tz-foot__text { max-width: 30rem; color: var(--im-color-text-muted); font-size: 0.96rem; }
.tz-foot__game { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; margin-top: 0.85rem; padding: 0.3rem 0.85rem; border: 1px solid var(--tz-line); border-radius: 999px; color: var(--im-color-navy); font-size: 0.88rem; font-weight: 650; text-decoration: none; transition: border-color .15s, color .15s; }
.tz-foot__game i { color: var(--tz-blue); }
.tz-foot__game:hover, .tz-foot__game:focus-visible { border-color: var(--tz-blue); color: var(--tz-blue); }
.tz-foot__title { margin: 0 0 0.6rem; color: var(--im-color-navy); font-size: 1rem; font-weight: 720; }
.tz-foot__list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.tz-foot__link { display: inline-flex; align-items: center; gap: 0.55rem; max-width: 100%; min-height: 32px; color: var(--im-color-text-muted); text-decoration: none; transition: color .15s; }
.tz-foot__link span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-foot__link i { color: var(--tz-blue); }
.tz-foot__link:hover, .tz-foot__link:focus-visible { color: var(--tz-blue); }
.tz-foot__legal { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--tz-line); }
.tz-foot__copy { color: var(--im-color-text-muted); font-size: 0.86rem; }
.tz-foot__vat { display: inline-block; margin-left: 0.35rem; }
@media (max-width: 1199.98px) {
  .tz-foot__grid { text-align: center; justify-items: center; }
  .tz-foot__text { margin-inline: auto; }
  .tz-foot__logo { margin-inline: auto; }
  .tz-foot__list { justify-items: center; }
  .tz-foot__list--social { display: flex; justify-content: center; gap: 1.2rem; }
  .tz-foot__legal { text-align: center; }
}
@media (min-width: 1200px) {
  .tz-foot__grid { grid-template-columns: 1.6fr 1fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}