/* =========================================================
   Big Bang Studios Game – stile del sito
   Font ospitati in locale (niente richieste a server esterni)
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Palette */
  --night: #15123a;        /* sfondo: notte cosmica */
  --night-2: #1f1a50;      /* superfici sullo sfondo */
  --stardust: #edeafb;     /* testo principale */
  --haze: #a9a3d6;         /* testo secondario */
  --red: #ff5a4e;
  --yellow: #ffc93c;
  --green: #4cc97a;
  --blue: #4b9bff;
  --mint: #d4f5e8;         /* sfondo Magic Orbs, dall'icona */
  --ink: #1b2a3a;          /* testo su sfondo chiaro */

  /* Tipografia */
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scala tipografica (rapporto ~1.25) */
  --fs-sm: .875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(2.8rem, 1.6rem + 5.2vw, 5.6rem);

  --wrap: 72rem;
  --gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--stardust);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 1.5rem; }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { margin: 0 0 1rem; max-width: 62ch; }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.narrow > * { max-width: 46rem; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--yellow); color: var(--night);
  padding: .5rem 1rem; border-radius: 8px; z-index: 10;
}
.skip:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header { padding-block: 1.25rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  text-decoration: none;
}
.nav { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--haze); font-weight: 700; }
.nav a:hover { color: var(--stardust); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--yellow); color: var(--night); }
.btn-play { background: var(--stardust); color: var(--night); }

.text-link { font-weight: 700; text-underline-offset: .25em; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2rem, 1rem + 5vw, 6rem) clamp(3rem, 2rem + 5vw, 7rem); overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--gap);
}
.hero h1 { margin-bottom: 1.5rem; max-width: 11ch; }
.lead { font-size: var(--fs-lg); color: var(--haze); margin-bottom: 2rem; max-width: 38ch; }

.burst { width: 100%; max-width: 30rem; justify-self: end; overflow: visible; }

/* L'unico momento animato del sito: le sfere esplodono dal centro */
.orb { transform-box: view-box; transform-origin: 200px 200px; }
.o1 { --to: translate(-118px, -96px); }
.o2 { --to: translate(122px, -120px); }
.o3 { --to: translate(108px, 104px); }
.o4 { --to: translate(-124px, 112px); }
.orb { transform: var(--to); animation: bang 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.o2 { animation-delay: .06s; }
.o3 { animation-delay: .12s; }
.o4 { animation-delay: .18s; }
.core { transform-box: view-box; transform-origin: 200px 200px; animation: flash 1.1s ease-out both; }
.rings { transform-box: view-box; transform-origin: 200px 200px; animation: ripple 1.4s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes bang {
  from { transform: translate(0, 0) scale(.2); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: var(--to) scale(1); opacity: 1; }
}
@keyframes flash {
  0%   { transform: scale(.4); opacity: 0; }
  25%  { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ripple {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .core, .rings { animation: none; }
}

/* ---------- Giochi ---------- */
.games { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

.game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: 28px;
  margin-bottom: var(--gap);
}
.game-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 1.25rem; }
.game h3 { margin-bottom: .35rem; }
.game-genre { font-weight: 700; margin-bottom: 1rem; }

.facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.facts li { font-size: var(--fs-sm); font-weight: 700; padding: .3rem .8rem; border-radius: 999px; border: 1.5px solid currentColor; }

.game-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }

/* Gli screenshot come una fila di telefoni */
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.shots img { width: 100%; border-radius: 14px; aspect-ratio: 131 / 290; object-fit: cover; }
.shots img:nth-child(even) { transform: translateY(1.5rem); }

/* Worlds: spazio profondo, accento del reattore */
.game-worlds {
  background:
    radial-gradient(120% 90% at 100% 0%, #2c4fa8 0%, transparent 60%),
    linear-gradient(160deg, #24205e, #120f33);
  border: 1px solid #36308a;
}
.game-worlds .game-genre { color: #ff9a3c; }
.game-worlds .facts li { color: var(--haze); }

/* Magic Orbs: il pannello chiaro, preso dall'icona */
.game-orbs {
  background: var(--mint);
  color: var(--ink);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.game-orbs .game-info { order: 2; }
.game-orbs .shots { order: 1; }
.game-orbs .game-genre { color: #1c7a4c; }
.game-orbs .btn-play { background: var(--ink); color: var(--mint); }
.game-orbs a:focus-visible, .game-orbs .btn:focus-visible { outline-color: #b0420f; }

/* ---------- Studio e contatti ---------- */
.studio, .contact { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.studio p { color: var(--haze); font-size: var(--fs-lg); }
.contact { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.email {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2.4vw, 2.4rem);
  color: var(--yellow);
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
  word-break: break-word;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #2e2868; padding-block: 2rem; color: var(--haze); font-size: var(--fs-sm); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }

/* ---------- Pagine privacy ---------- */
.legal { padding-block: 2rem 5rem; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: .5rem; }
.legal h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; }
.legal .updated { color: var(--haze); margin-bottom: 2rem; }
.legal li { margin-bottom: .4rem; max-width: 62ch; }
.legal a { color: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .burst { order: -1; justify-self: start; max-width: 15rem; margin-bottom: -1rem; }
  .game, .game-orbs { grid-template-columns: 1fr; }
  .game-orbs .game-info { order: 1; }
  .game-orbs .shots { order: 2; }
  .shots img:nth-child(even) { transform: none; }
}
@media (max-width: 480px) {
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
  }
  .shots img { scroll-snap-align: start; }
  .nav { gap: 1rem; }
}