/* ==========================================================================
   Pagina iniziale del dominio: schermo diviso tra i due portfolio.
   File propri (questa cartella): nessuno condiviso con i due portfolio.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-wght.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-wght-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* lato video */
  --v-bg: #130a22;
  --v-surface: #2c1b4d;
  --v-text: #f6f1ff;
  --v-text-2: #d3c7ea;
  --v-accent: #ffd23f;
  --v-on-accent: #1a0f2b;
  /* lato giochi */
  --g-bg: #ede7da;
  --g-ink: #201a14;
  --g-ink-soft: #5b5041;
  --g-accent: #8b2e2e;
  --g-accent-strong: #6f2020;
  --g-line: rgba(32, 26, 20, 0.24);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body { margin: 0; height: 100%; }
body {
  background: var(--v-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Nome al centro, sopra la linea di divisione */
.who {
  position: fixed;
  z-index: 10;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: #1a0f2b;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(10, 5, 20, 0.25);
  pointer-events: none;
}

.split {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
@media (min-width: 768px) {
  .split { flex-direction: row; }
}

/* Ogni metà è un unico grande link */
.half {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-height: 50svh;
  padding: 96px 24px 48px;
  text-decoration: none;
  overflow: hidden;
  transition: flex-grow 0.7s var(--ease);
}
@media (min-width: 768px) {
  .half { padding: 96px clamp(32px, 6vw, 96px); }
  .split:hover .half:hover,
  .split:focus-within .half:focus-visible { flex-grow: 1.35; }
}
.half:focus { outline: none; }
.half:focus-visible { outline-offset: -8px; }

.half__kicker {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.half__title {
  margin: 0;
  max-width: 14ch;
  line-height: 1;
  text-wrap: balance;
}
.half__text {
  margin: 0;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
.half__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 56px;
  padding: 16px 28px;
  font-size: 1.0625rem;
  font-weight: 700;
  transition: transform 0.3s var(--ease), background-color 0.2s ease, color 0.2s ease;
}
.half__cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s var(--ease);
}
.half:hover .half__cta svg,
.half:focus-visible .half__cta svg { transform: translateX(4px); }

/* ---------- Lato video (sinistra) ---------- */
.half--video {
  background:
    radial-gradient(40rem 30rem at 0% 100%, rgba(123, 47, 247, 0.35), transparent 60%),
    radial-gradient(30rem 24rem at 100% 0%, rgba(255, 95, 162, 0.18), transparent 60%),
    var(--v-bg);
  color: var(--v-text);
  font-family: 'Figtree', system-ui, sans-serif;
}
.half--video .half__kicker { color: var(--v-accent); }
.half--video .half__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.half--video .half__title mark {
  background: none;
  color: var(--v-accent);
}
.half--video .half__text { color: var(--v-text-2); }
.half--video .half__cta {
  border-radius: 999px;
  background: var(--v-accent);
  color: var(--v-on-accent);
  box-shadow: 0 2px 6px rgba(5, 0, 15, 0.5);
}
.half--video:hover .half__cta { background: #ffde70; transform: translateY(-2px); }
.half--video:focus-visible { outline: 3px solid var(--v-accent); }

/* striscia di reel inclinati, decorativa */
.reels {
  position: absolute;
  z-index: 0;
  right: -40px;
  top: -10%;
  display: flex;
  gap: 12px;
  height: 120%;
  transform: rotate(-10deg);
  opacity: 0.22;
  pointer-events: none;
}
.reels span {
  display: block;
  width: 72px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff5fa2, #7b2ff7 55%, #ffd23f);
}
.reels span:nth-child(2) { margin-top: 60px; background: linear-gradient(180deg, #ffd23f, #ff5fa2 50%, #3a0ca3); }
.reels span:nth-child(3) { margin-top: 20px; background: linear-gradient(180deg, #4cc9f0, #7209b7 60%, #ff5fa2); }
.half--video > :not(.reels) { position: relative; z-index: 1; }

/* ---------- Lato giochi da tavolo (destra) ---------- */
.half--games {
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: 'Archivo', system-ui, sans-serif;
}
.half--games .half__kicker { color: var(--g-accent); }
.half--games .half__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.half--games .half__title em { font-style: italic; color: var(--g-accent); }
.half--games .half__text { color: var(--g-ink-soft); }
.half--games .half__cta {
  border-radius: 4px;
  background: var(--g-accent);
  color: #fff;
}
.half--games:hover .half__cta { background: var(--g-accent-strong); transform: translateY(-2px); }
.half--games:focus-visible { outline: 3px solid var(--g-accent); }

/* tessere da gioco, decorative */
.tiles {
  position: absolute;
  z-index: 0;
  right: 32px;
  bottom: 32px;
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 10px;
  transform: rotate(8deg);
  opacity: 0.5;
  pointer-events: none;
}
.tiles span {
  aspect-ratio: 1;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: #e2dac9;
}
.tiles span:nth-child(2) { background: #a6752c; border-color: transparent; }
.tiles span:nth-child(4) { background: #2f6b63; border-color: transparent; }
.tiles span:nth-child(9) { background: var(--g-accent); border-color: transparent; }
.half--games > :not(.tiles) { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .half { padding-top: 80px; }
  .half--games { padding-top: 48px; }
  .reels { opacity: 0.16; }
  .tiles { right: 16px; top: 24px; bottom: auto; grid-template-columns: repeat(3, 28px); gap: 6px; opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}