/* ===== Colori del brand di Giulio (system/memoria/brand.md) ===== */
:root {
  --arancio: #eb6f09;
  --arancio-chiaro: #ff9a3d;
  --nero: #000000;
  --grigio: #474640;
  --bianco: #ffffff;

  --testo-tenue: rgba(255, 255, 255, .62);
  --carta: rgba(255, 255, 255, .05);       /* sfondo delle schede */
  --carta-bordo: rgba(255, 255, 255, .09);
  --raggio: 18px;
  --larghezza: 30rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

/* ===== Base (mobile-first) ===== */
*, *::before, *::after { box-sizing: border-box; }
/* Niente scroll orizzontale: si taglia ciò che sfora ("clip" non crea un'area
   di scorrimento; "hidden" resta come riserva per i browser vecchi) */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
img, svg { max-width: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--nero);
  color: var(--bianco);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Bagliori arancio e grigio dietro la pagina, come nell'esempio */
.sfondo {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(235, 111, 9, .38), transparent 70%),
    radial-gradient(50% 40% at 95% 30%, rgba(71, 70, 64, .55), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(235, 111, 9, .18), transparent 70%),
    var(--nero);
}

.pagina {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 4.5rem 1.1rem 1.5rem;
  flex: 1;
  transition: opacity .2s ease;
}
.pagina.cambio { opacity: 0; } /* dissolvenza al cambio lingua */

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

/* ===== Intestazione ===== */
.profilo { text-align: center; margin-bottom: 1.75rem; }
.cornice {
  width: 132px; height: 132px;
  margin: 0 auto 1.1rem;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--arancio), var(--arancio-chiaro), var(--grigio), var(--arancio));
  box-shadow: 0 0 40px rgba(235, 111, 9, .35);
}
/* Iniziali di riserva (solo se la foto non si carica) */
.avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--nero);
  display: grid; place-items: center;
  background: var(--grigio);
  font-size: 2.4rem; font-weight: 700;
}
/* Foto ritagliata a cerchio dentro la cornice arancione */
.foto-tonda {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--nero);
  overflow: hidden;
  background: var(--grigio);
}
.foto-tonda img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* Il ritratto è quadrato e intero: si ingrandisce verso l'alto così il viso
     (a circa 1/3 dell'altezza) finisce al centro del cerchio, spalle sotto */
  transform: scale(1.7);
  transform-origin: 50% 5%;
}
.profilo h1 { font-size: 1.65rem; margin: 0; letter-spacing: -.01em; }
.ruolo { margin: .2rem 0 0; color: var(--arancio-chiaro); font-weight: 500; }
.bio { margin: .7rem auto 0; max-width: 22rem; color: var(--testo-tenue); }

/* ===== Elenco dei link ===== */
/* minmax(0, 1fr): senza, la colonna della griglia si allarga fino al testo più
   lungo su una riga (sottotitoli con nowrap) e la pagina sfora a destra */
.elenco { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.elenco li { min-width: 0; }
.link {
  min-width: 0;
  display: flex; align-items: center; gap: .95rem;
  padding: .85rem 1rem;
  border-radius: var(--raggio);
  background: var(--carta);
  border: 1px solid var(--carta-bordo);
  color: inherit; text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  /* comparsa scaglionata all'avvio */
  animation: entra .45s ease both;
  animation-delay: calc(var(--i) * 60ms);
}
.link:hover { transform: translateY(-2px); border-color: rgba(235, 111, 9, .6); }
.link:active { transform: scale(.98); }

/* Link in risalto (sito personale) */
.link.evidenza {
  background: linear-gradient(110deg, var(--arancio) 0%, #c45a05 55%, var(--grigio) 130%);
  border-color: transparent;
  box-shadow: 0 8px 30px rgba(235, 111, 9, .3);
}

.icona {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--arancio), #b85404);
}
.icona.grigia { background: linear-gradient(135deg, #5c5b54, var(--grigio)); }
.evidenza .icona { background: rgba(255, 255, 255, .22); }
.icona svg { width: 24px; height: 24px; }
.icona img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.testi { flex: 1; min-width: 0; }
.testi strong { display: block; font-weight: 600; }
.testi small {
  display: block; color: var(--testo-tenue); font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evidenza .testi small { color: rgba(255, 255, 255, .85); }
.freccia { flex: none; width: 18px; height: 18px; opacity: .7; }

/* ===== Selettore lingua ===== */
.lingue {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 10;
}
.btn-lingua {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--carta-bordo);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, background .2s ease;
}
.btn-lingua:hover { transform: scale(1.08); background: rgba(255, 255, 255, .14); }
.btn-lingua[aria-expanded="true"] { background: rgba(235, 111, 9, .25); }

/* Bandiera tonda con riflesso che "sventola" */
.bandiera {
  position: relative;
  display: block;
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.bandiera svg { width: 100%; height: 100%; display: block; }
.btn-lingua .bandiera::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sventola 3.2s ease-in-out infinite;
}
.bandiera.gira { animation: gira .45s ease; } /* giro al cambio lingua */

/* Menu a tendina: si apre con scala + dissolvenza, voci scaglionate */
.menu-lingue {
  position: absolute; top: calc(100% + .6rem); right: 0;
  margin: 0; padding: .4rem;
  list-style: none;
  min-width: 10.5rem;
  border-radius: 16px;
  background: rgba(20, 20, 18, .92);
  border: 1px solid var(--carta-bordo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  transform-origin: top right;
  opacity: 0; visibility: hidden;
  transform: scale(.85) translateY(-6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.3), visibility 0s linear .25s;
}
.menu-lingue.aperto {
  opacity: 1; visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu-lingue li { opacity: 0; transform: translateX(8px); transition: opacity .2s ease, transform .2s ease; }
.menu-lingue.aperto li {
  opacity: 1; transform: none;
  transition-delay: calc(60ms + var(--i) * 50ms);
}
.voce-lingua {
  width: 100%;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--bianco);
  font: inherit; text-align: left;
  cursor: pointer;
}
.voce-lingua:hover, .voce-lingua:focus-visible { background: rgba(255, 255, 255, .08); }
.voce-lingua[aria-checked="true"] { background: rgba(235, 111, 9, .22); }
.voce-lingua .bandiera { width: 22px; height: 22px; }

/* ===== Piede ===== */
.piede { text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .45); padding: 1.5rem 1rem 2rem; }

/* ===== Animazioni ===== */
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes sventola { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes gira { from { transform: rotateY(180deg) scale(.7); } }

/* Niente animazioni se il telefono chiede di ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}