/* shift.black, la pagina «in costruzione». Non e' la console: niente kit di
   Dossiero, lo stile e' quello del marchio. Nero e bianco, un acido solo
   (--acido) per le cose vive. Il gioco: body.capovolta scambia i due colori.
   Tutto si ferma con prefers-reduced-motion. */

:root {
  --nero: #0a0a0a;
  --bianco: #f4f4f0;
  --acido: #d4ff3a;
  --carattere: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lato: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* I colori che si capovolgono stanno sul body e non su :root: --tenue e
   --riga si calcolano da --testo sull'elemento dove sono scritti, e devono
   ricalcolarsi quando body.capovolta cambia --testo. */
body.sito {
  --fondo: var(--nero);
  --testo: var(--bianco);
  --tenue: color-mix(in srgb, var(--testo) 55%, transparent);
  --riga: color-mix(in srgb, var(--testo) 14%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--carattere);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}
body.sito.capovolta {
  --fondo: var(--bianco);
  --testo: var(--nero);
  --tenue: color-mix(in srgb, var(--testo) 55%, transparent);
  --riga: color-mix(in srgb, var(--testo) 14%, transparent);
}

a { color: inherit; }
::selection { background: var(--acido); color: var(--nero); }

/* ---- Lo sfondo: una griglia di «post» che respirano ---------- */
.griglia {
  position: fixed;
  inset: -10vmin;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vmin;
  padding: 2vmin;
  opacity: 0.55;
  transform: rotate(-8deg) scale(1.15);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 18%, #000 75%);
}
.griglia span {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--riga);
  border-radius: 1.4vmin;
  background: linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--testo) 6%, transparent));
  animation: respira 7s ease-in-out infinite;
  animation-delay: calc(var(--n) * -0.83s);
}
.griglia span:nth-child(5n + 2) { background: color-mix(in srgb, var(--acido) 12%, transparent); border-color: color-mix(in srgb, var(--acido) 30%, transparent); }
@keyframes respira {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-2.5vmin); opacity: 1; }
}

/* ---- Testa e piede ------------------------------------------- */
.testa, .piede {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--lato);
}
.marchio { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; }
.marchio svg, .tasto-shift svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--tenue); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.lucina { width: 8px; height: 8px; border-radius: 50%; background: var(--acido); box-shadow: 0 0 0 0 var(--acido); animation: lucina 2s ease-out infinite; }
@keyframes lucina { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acido) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.piede { margin-top: auto; color: var(--tenue); font-size: 13px; }
.piede p { margin: 0; }
kbd { padding: 1px 6px; border: 1px solid var(--riga); border-radius: 5px; font-family: inherit; font-size: 12px; }
.tasto-shift {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1.5px solid var(--testo);
  border-radius: 12px;
  background: transparent;
  color: var(--testo);
  font: 700 14px/1 var(--carattere);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--testo);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tasto-shift:active, .tasto-shift[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 0 0 var(--testo); }
.tasto-shift:focus-visible { outline: 2px solid var(--acido); outline-offset: 4px; }

/* ---- Il centro ----------------------------------------------- */
.centro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh var(--lato) 6vh;
  flex: 1;
}

.parola {
  --mx: 0;
  --my: 0;
  display: flex;
  margin: 0 0 0 -0.04em;
  font-size: clamp(88px, 27vw, 420px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.065em;
}
.parola span {
  display: inline-block;
  animation: entra 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--k) * 0.07s);
  transform: translate(calc(var(--mx) * (var(--k) + 1) * 4px), calc(var(--my) * (var(--k) + 1) * -2px));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.35s ease;
}
/* L'ultima lettera e' quella che si «sposta» di piu': e' acida. */
.parola span:last-child { color: var(--acido); }
body.capovolta .parola span:last-child { color: var(--testo); -webkit-text-stroke: 0; }
@keyframes entra {
  from { opacity: 0; transform: translateY(0.35em) skewX(-12deg); }
  to { opacity: 1; }
}

.frase { max-width: 34ch; margin: 3vh 0 0; font-size: clamp(20px, 2.6vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }

/* Le parole che girano: una alla volta, dal basso. */
.giro { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; color: var(--tenue); font-size: clamp(15px, 1.6vw, 20px); }
.giro-fisso { color: var(--acido); font-weight: 700; }
body.capovolta .giro-fisso { color: var(--testo); }
.giro-parole { position: relative; display: inline-block; height: 1.3em; min-width: 18ch; overflow: hidden; }
.giro-parole span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation: gira calc(var(--tot) * 2.6s) infinite;
  animation-delay: calc(var(--k) * 2.6s);
}
@keyframes gira {
  0% { opacity: 0; transform: translateY(100%); }
  3%, 17% { opacity: 1; transform: translateY(0); }
  20%, 100% { opacity: 0; transform: translateY(-100%); }
}

.contatti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5vh; }
.contatti a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  padding: 14px 18px;
  border: 1px solid var(--riga);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fondo) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.contatti a:hover { border-color: var(--acido); transform: translateY(-2px); }
.contatti span { color: var(--tenue); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.contatti b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

/* ---- Il nastro che scorre ------------------------------------ */
.nastro {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-block: 1px solid var(--riga);
  background: var(--acido);
  color: var(--nero);
  transform: rotate(-1.5deg);
  margin: 0 -2vw;
}
.nastro-scorre { display: flex; width: max-content; animation: scorre 28s linear infinite; }
.nastro-scorre span { padding: 12px 0; font-size: clamp(14px, 1.5vw, 18px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.nastro i { padding: 0 18px; font-style: normal; }
@keyframes scorre { to { transform: translateX(-50%); } }

/* ---- La pagina d'errore -------------------------------------- */
.sito-errore { justify-content: center; }
.errore-box { padding: var(--lato); }
.errore-box .occhiello { margin: 0; color: var(--acido); font-weight: 800; letter-spacing: 0.1em; }
.errore-box h1 { margin: 8px 0 24px; font-size: clamp(36px, 7vw, 72px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.link-casa { color: var(--tenue); }

/* ---- Telefono ------------------------------------------------ */
@media (max-width: 640px) {
  .griglia { grid-template-columns: repeat(3, 1fr); opacity: 0.4; }
  .stato { font-size: 11px; }
  .suggerimento { display: none; }
  .piede { flex-direction: row-reverse; }
  .contatti a { flex: 1 1 100%; }
}
@media (pointer: coarse) { .suggerimento { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .giro-parole span:first-child { opacity: 1; }
}