/* Landing di burracoinsieme.app, primo schermo della direzione 2a di Claude
   Design (28 ottobre 2026): il panno animato occupa tutta la finestra, il
   contenuto sta in una colonna centrata. I tempi delle animazioni sono in
   landing-tempi.js. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: #022A12; }
body { font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #FFFFFF; }
[hidden] { display: none !important; }
a:focus-visible { outline: 3px solid #FFC21A; outline-offset: 3px; }

/* Panno, luce e semi riempiono la finestra; il contenuto scorre sopra. */
.eroe { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; --luce-x: 50%; }
.panno {
  position: absolute; inset: -6%;
  background: url("/img/panno.svg"), radial-gradient(ellipse 75% 65% at var(--luce-x) 40%, #1BAA5E 0%, #0C7D40 42%, #065C2D 72%, #033D1C 100%);
}
.luce { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 48% 42% at var(--luce-x) 38%, rgba(255, 214, 140, .26) 0%, rgba(255, 214, 140, .1) 45%, rgba(255, 214, 140, 0) 75%); }
.vignetta { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 60px rgba(0, 0, 0, .5); }
.pioggia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.eroe-dentro {
  position: relative; flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 28px 20px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.js .panno, .js .eroe-dentro { opacity: 0; }
.js.pronto .panno, .js.pronto .eroe-dentro { opacity: 1; }

.logo { flex: none; width: min(calc(100vw - 110px), 270px); aspect-ratio: 1; margin-bottom: 16px; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.logo img, .logo svg { display: block; width: 100%; height: 100%; }
.logo svg { overflow: visible; }
h1 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.oro { color: #FFC21A; }
.sotto { margin: 10px 0 0; max-width: 560px; font-size: 20px; line-height: 1.4; font-weight: 500; color: #E6F5EB; text-wrap: pretty; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.nota { margin-top: 12px; font-size: 17px; font-weight: 500; color: #E6F5EB; }

/* Pulsante oro: largo quanto il testo, centrato, mai a tutta pagina. */
.gioca {
  position: relative; overflow: hidden; margin-top: 24px; height: 64px; min-width: 260px; padding: 0 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 20px;
  background: linear-gradient(180deg, #FFE27A 0%, #FFC21A 48%, #F0A500 100%);
  color: #1E1404; font-size: 22px; font-weight: 800; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(168, 106, 0, .35), 0 5px 0 #A86A00, 0 14px 24px rgba(0, 0, 0, .4);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.gioca:hover { transform: translateY(-2px); }
.gioca:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #A86A00, 0 8px 14px rgba(0, 0, 0, .35); }
.gioca > span:not(.riflesso), .gioca svg { position: relative; }
.gioca svg path { fill: #1E1404; }
.riflesso {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 26%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-20deg);
}

.store { margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.store[data-store="in-arrivo"] .badge-store, .store[data-store="disponibile"] .in-arrivo { display: none; }
.badge-store { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.badge-store a {
  height: 52px; padding: 0 12px; border-radius: 10px; background: #000000; border: 1px solid #A6A6A6;
  display: flex; align-items: center; gap: 9px; color: #FFFFFF; text-decoration: none; text-align: left;
}
.badge-store .icona { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1.5px dashed rgba(255, 255, 255, .55); }
.badge-store .righe { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.badge-store .piccolo { font-size: 12px; font-weight: 500; }
.badge-store .maiuscolo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge-store .grande { font-size: 18px; font-weight: 700; }
.in-arrivo {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; max-width: 440px; text-align: left;
  background: rgba(2, 30, 14, .42); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08);
}
.in-arrivo svg { flex: none; }
.in-arrivo div { display: flex; flex-direction: column; gap: 2px; }
.in-arrivo strong { font-size: 18px; font-weight: 800; line-height: 1.25; }
.in-arrivo span { font-size: 16px; font-weight: 500; line-height: 1.4; color: #E6F5EB; }

/* Testata del telefono, fissa in alto: marchio e pulsante Scarica. */
.testata {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 68px; padding: 0 12px;
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(2, 30, 14, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 6px 16px rgba(0, 0, 0, .3);
}
.marchio { display: flex; align-items: center; gap: 8px; min-width: 0; color: #FFFFFF; text-decoration: none; font-size: 18px; font-weight: 800; }
.marchio img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.marchio span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scarica {
  flex: none; height: 48px; padding: 0 14px; border-radius: 14px; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #FFE27A 0%, #FFC21A 48%, #F0A500 100%); color: #1E1404;
  font-size: 18px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #A86A00, 0 6px 12px rgba(0, 0, 0, .35);
}
.scarica:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 #A86A00; }
@media (max-width: 959px) {
  .con-testata .eroe-dentro { padding-top: calc(92px + env(safe-area-inset-top)); }
  .con-testata .store { scroll-margin-top: calc(96px + env(safe-area-inset-top)); }
}
.store.evidenzia .in-arrivo, .store.evidenzia .badge-store a { animation: evidenzia 1.2s ease-out 2; }
@keyframes evidenzia {
  0%, 100% { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 194, 26, 0); }
  30% { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 4px #FFC21A; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Piè di pagina sul fondo del panno. Sul telefono centrato; su desktop dati
   di legge a sinistra, documenti a destra. */
.piede {
  position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 20px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  font-size: 16px; line-height: 1.5; color: #E6F5EB; border-top: 1px solid rgba(255, 255, 255, .16);
}
.piede p { margin: 0; }
.legale { display: flex; flex-direction: column; gap: 14px; }
.piede strong { color: #FFFFFF; }
.piede a { color: #FFC21A; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link-piede { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.link-piede a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 960px) {
  .testata { display: none; }
  .eroe-dentro { padding: 32px 48px 24px; }
  .piede { text-align: left; }
  .logo { width: min(320px, 27vh); margin-bottom: 20px; }
  h1 { font-size: 52px; }
  .sotto { margin-top: 16px; font-size: 22px; }
  .gioca { margin-top: 26px; height: 68px; font-size: 24px; }
  .nota { font-size: 18px; }
  .piede { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; padding: 20px 48px 24px; }
  .link-piede { justify-content: flex-end; }
  .link-piede a { min-height: 0; }
}

@media (hover: hover) {
  .badge-store a:hover { border-color: #FFFFFF; }
}