/* ==========================================================================
   twot.it — sito pubblico di The Wolf of TCG's
   Palette e font dal brandbook (gli stessi token dello store).
   ========================================================================== */

:root {
  --viola: #571eb8;
  --viola-500: #6d35cc;
  --viola-700: #48189c;
  --viola-800: #3a137e;
  --viola-900: #2c0e60;
  --viola-950: #1d0941;
  --viola-100: #e9e0fa;
  --viola-50: #f4effc;
  --arancio: #fa5707;
  --arancio-300: #ffa06b;
  --arancio-50: #fff3ec;
  --inchiostro: #212529;
  --superficie: #eef0f4;
  --bianco: #ffffff;
  --display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --testo: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --raggio: 1.25rem;
  --ombra: 0 1px 2px rgba(33, 37, 41, 0.06), 0 8px 24px rgba(87, 30, 184, 0.08);
  --ombra-forte: 0 2px 4px rgba(33, 37, 41, 0.08), 0 14px 32px rgba(87, 30, 184, 0.16);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--testo);
  color: var(--inchiostro);
  background: var(--superficie);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.salta {
  position: absolute; left: -999px; top: 0; padding: .6rem 1rem;
  background: var(--bianco); color: var(--viola); font-weight: 700; z-index: 100; border-radius: 0 0 .75rem 0;
}
.salta:focus { left: 0; }

:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; }

.contenitore { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.contenitore--stretto { width: min(760px, 100% - 2.5rem); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s, color .18s;
}
.btn:active { transform: scale(.97); }
.btn--grande { padding: .95rem 1.6rem; font-size: 1.08rem; }
.btn--bianco { background: var(--bianco); color: var(--viola); box-shadow: 0 6px 20px rgba(29, 9, 65, .28); }
.btn--bianco:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29, 9, 65, .34); }
.btn--vetro {
  background: rgba(255, 255, 255, .12); color: var(--bianco);
  border: 1.5px solid rgba(255, 255, 255, .45); backdrop-filter: blur(6px);
}
.btn--vetro:hover { background: rgba(255, 255, 255, .2); }
.btn--viola { background: var(--viola); color: var(--bianco); box-shadow: var(--ombra); }
.btn--viola:hover { background: var(--viola-700); transform: translateY(-2px); box-shadow: var(--ombra-forte); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--viola) radial-gradient(rgba(255, 255, 255, .14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--bianco);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
/* aloni di atmosfera dietro allo slab */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.hero::before { width: 46rem; height: 46rem; right: -14rem; top: -12rem; background: rgba(255, 255, 255, .13); }
.hero::after { width: 24rem; height: 24rem; right: 8%; bottom: -8rem; background: rgba(250, 87, 7, .28); }

.testata {
  position: relative; z-index: 2;
  width: min(1120px, 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0;
}
.testata__logo img { height: 44px; width: auto; }

.hero__griglia {
  position: relative; z-index: 1;
  width: min(1120px, 100% - 2.5rem); margin-inline: auto;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2rem, 6vw, 4.5rem);
}
.occhiello {
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--arancio-300);
}
.occhiello--viola { color: var(--viola); }
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.9rem); font-weight: 800; letter-spacing: -.01em;
  margin: .6rem 0 1.1rem;
}
.evidenzia { position: relative; display: inline-block; white-space: nowrap; }
.evidenzia::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .22em;
  background: var(--arancio); border-radius: 999px; z-index: -1; opacity: .95;
  transform-origin: left; animation: sottolinea .7s var(--curva) .9s both;
}
.hero__sotto { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34rem; color: rgba(255, 255, 255, .86); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.tag {
  list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem;
}
.tag li {
  font-size: .85rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
}

/* ---------- Lo slab ---------- */
.hero__slab { display: grid; place-items: center; perspective: 1200px; }
.slab {
  width: min(300px, 78vw); aspect-ratio: 3 / 4.5;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1));
  border: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px rgba(29, 9, 65, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  transform: rotate(-6deg) rotateY(-10deg);
  transition: transform .6s var(--curva);
  animation: galleggia 6s ease-in-out infinite;
}
.hero__slab:hover .slab { transform: rotate(-2deg) rotateY(6deg) scale(1.03); }
.slab__etichetta {
  background: var(--bianco); color: var(--inchiostro); border-radius: 12px;
  padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.slab__marchio { display: block; font-family: var(--display); font-weight: 800; color: var(--viola); letter-spacing: .04em; font-size: .95rem; }
.slab__riga { display: block; font-size: .72rem; font-weight: 600; color: rgba(33, 37, 41, .6); letter-spacing: .04em; text-transform: uppercase; }
.slab__seriale { font-variant-numeric: tabular-nums; color: rgba(33, 37, 41, .85); }
.slab__voto { text-align: right; line-height: 1; }
.slab__voto span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(33, 37, 41, .55); }
.slab__voto strong { display: block; font-family: var(--display); font-size: 2.4rem; font-weight: 800; color: var(--arancio); }
.slab__carta {
  position: relative; flex: 1; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(170deg, var(--viola-500), var(--viola-900) 70%, var(--viola-950));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.slab__carta img { width: 44%; height: auto; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
/* riflesso olografico che scorre */
.slab__carta::after {
  content: ""; position: absolute; inset: -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 48%, rgba(250, 87, 7, .18) 52%, transparent 62%);
  animation: olo 5.5s linear infinite;
}

/* ---------- Sezioni ---------- */
.sezione { padding: clamp(4rem, 9vw, 7rem) 0; }
.sezione--chiara { background: var(--bianco); }
.sezione h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; color: var(--viola-800);
  margin: .5rem 0 2.25rem; max-width: 22ch;
}
.carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.carta {
  position: relative; background: var(--bianco); border-radius: var(--raggio); padding: 1.75rem;
  box-shadow: var(--ombra); border: 1px solid rgba(33, 37, 41, .06);
  transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.carta:hover { transform: translateY(-4px); box-shadow: var(--ombra-forte); }
.carta__numero {
  position: absolute; top: 1.1rem; right: 1.35rem;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--viola-100);
}
.carta__icona {
  width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center;
  background: var(--viola-50); color: var(--viola); margin-bottom: 1.1rem;
}
.carta__icona svg { width: 1.6rem; height: 1.6rem; }
.carta h3 { font-size: 1.35rem; font-weight: 800; color: var(--viola-800); margin-bottom: .4rem; }
.carta p { color: rgba(33, 37, 41, .72); }

.passi { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.25rem; }
.passi li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; align-items: start; }
.passi__numero {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--arancio); color: var(--bianco);
  font-family: var(--display); font-weight: 800; font-size: 1.3rem;
  box-shadow: 0 8px 18px rgba(250, 87, 7, .3);
}
.passi h3 { font-size: 1.3rem; font-weight: 800; color: var(--viola-800); margin-bottom: .2rem; }
.passi p { color: rgba(33, 37, 41, .72); }
.nota { color: rgba(33, 37, 41, .6); margin-bottom: 1.5rem; max-width: 52ch; }

/* ---------- Footer ---------- */
.pie { background: var(--viola-950); color: rgba(255, 255, 255, .78); padding: 3rem 0; }
.pie__griglia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.pie__logo { height: 70px; width: auto; }
.pie__link { color: var(--bianco); font-family: var(--display); font-weight: 700; text-decoration: none; }
.pie__link:hover { color: var(--arancio-300); }

/* ---------- Motion ---------- */
.anim { animation: salita .8s var(--curva) both; animation-delay: calc(var(--i, 0) * .09s + .05s); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--i, 0) * .1s); }
.js .reveal.in { opacity: 1; transform: none; }

@keyframes salita { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sottolinea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes galleggia {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@keyframes olo { from { transform: translateX(-35%) rotate(0deg); } to { transform: translateX(35%) rotate(0deg); } }

@media (prefers-reduced-motion: reduce) {
  .anim, .evidenzia::after, .slab, .slab__carta::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__griglia { grid-template-columns: 1fr; text-align: left; }
  .hero__slab { order: -1; padding-top: .5rem; }
  .slab { width: min(200px, 56vw); transform: rotate(-4deg); }
  .carte { grid-template-columns: 1fr; }
  .pie__griglia { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 520px) {
  .testata__logo img { height: 36px; }
  .btn { font-size: .92rem; padding: .6rem 1rem; }
  .hero__azioni .btn { width: 100%; justify-content: center; }
}