/* Home (src/pages/index.html e la copia nascosta src/pages/home-jr.html).
   La lente di vetro è disegnata da js/3d/home-hero.js (sorgente in src/3d/home): legge testi,
   caratteri e posizioni da questa pagina, quindi per cambiare dimensioni o colori dei testi basta
   cambiarli qui. Istruzioni in LEGGIMI-HOME.txt. */
body.home-page {
  --gutter: clamp(24px, 5vw, 80px);
  /* «Ciao!» e le righe sotto: la lente si misura sulla grandezza di «Ciao!». */
  --ciao: clamp(104px, 17.5vw, 330px);
  --line: clamp(18px, 2.4vw, 44px);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #0b0b0b;
  font-family: 'custom_146852', Arial, sans-serif;
  color: #f3f3ef;
}

/* Header come in About me, ma trasparente sopra la scena. */
.home-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 var(--gutter);
}
.home-header .am-logo { display: flex; align-items: center; min-height: 44px; }
.home-header .am-logo img { display: block; width: 48px; height: auto; }
.home-header .am-menu { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 500; }
.home-header .am-menu svg { width: 28px; height: 24px; }
.home-header .lang-switch { margin-left: auto; margin-right: clamp(10px, 2vw, 28px); }
.home-header a:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }

/* Scena: lo sfondo è lo stesso che disegna la lente, così il passaggio non si vede. */
.home-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background: radial-gradient(ellipse 70% 62% at 50% 44%, #242424 0%, #161616 46%, #0b0b0b 100%);
  /* Toccare più volte la lente (per farla scoppiare) non deve ingrandire la pagina. */
  touch-action: manipulation;
}
/* Sopra la lente il cursore diventa la manina: cliccandola scoppia. */
.home-hero.is-over-lens,
.home-hero.is-over-lens .home-greeting,
.home-hero.is-over-lens .home-greeting * { cursor: pointer; }
.home-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.home-stage canvas { display: block; width: 100%; height: 100%; }
.home-hero.is-ready .home-stage { opacity: 1; }

.home-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 96px var(--gutter) 128px;
  pointer-events: none;
}
.home-mark { position: relative; }
.home-greeting {
  position: relative;
  margin: 0;
  /* Il saluto non si seleziona: è la scena, non un testo da copiare. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  text-align: center;
  text-wrap: balance;
  pointer-events: auto;
}
.home-ciao {
  display: block;
  margin: 0 auto 0.02em;
  padding: 0 0.12em;
  width: max-content;
  font-family: 'custom_146808', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--ciao);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #e4e4e0;
  background: linear-gradient(90deg, #a9a9a5 0%, #ecece8 48%, #f6f6f2 62%, #c4c4c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-line {
  display: block;
  font-weight: 300;
  font-size: var(--line);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: #c9c9c5;
}
.home-line strong { font-weight: 500; color: #f4f4f0; }

/* Le due stelle ai lati di «Ciao!», come nella versione Readymag. */
.home-star {
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  top: calc(var(--ciao) * 0.5);
  width: clamp(16px, 2.3vw, 34px);
  height: auto;
  pointer-events: none;
}
.home-star--left { left: calc(50% - var(--ciao) * 1.66); }
.home-star--right { right: calc(50% - var(--ciao) * 1.66); }

.home-cta {
  position: absolute;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  transform: translateX(-50%);
  border-bottom: 1px solid #ffffff4d;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ecece8;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.home-cta svg { width: 18px; height: 18px; transition: transform 0.25s; }
.home-cta:hover { border-color: #fff; color: #fff; }
.home-cta:hover svg { transform: translateX(4px); }
.home-cta:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* «Inclina il telefono»: solo su iPhone e iPad, finché non dai il permesso al sensore. */
.home-tilt {
  position: absolute;
  left: 50%;
  bottom: calc(128px + env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  background: #0b0b0b8c;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ecece8;
  font: 500 12px/1 'custom_146852', Arial, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-tilt[hidden] { display: none; }
.home-tilt.is-shown { opacity: 1; transform: translate(-50%, 0); }
.home-tilt svg { width: 18px; height: 18px; flex: none; }
.home-tilt:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.motion-ok .home-tilt.is-shown svg { animation: home-tilt-rock 2.4s ease-in-out infinite; }
@keyframes home-tilt-rock { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

.home-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e8a;
}
.home-copy { margin: 0; }
.home-footer .site-legal { min-height: 32px; align-items: center; }

/* Ingresso dei testi (anche senza WebGL); con WebGL la scena li ridisegna uguali a fine ingresso. */
.motion-ok .home-greeting > span { animation: home-rise 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.motion-ok .home-greeting > span:nth-child(2) { animation-delay: 0.14s; }
.motion-ok .home-greeting > span:nth-child(3) { animation-delay: 0.26s; }
.motion-ok .home-star { animation: home-star-in 0.8s 0.5s ease both, home-star-swing 2.6s 1.3s ease-in-out infinite alternate; }
.motion-ok .home-star--right { animation-name: home-star-in, home-star-swing-back; }
.motion-ok .home-cta { animation: home-fade 0.8s 0.6s ease both; }
@keyframes home-rise {
  from { opacity: 0; transform: translateY(0.3em); filter: blur(10px); }
}
@keyframes home-fade { from { opacity: 0; } }
@keyframes home-star-in { from { opacity: 0; transform: scale(0.4) rotate(-90deg); } }
@keyframes home-star-swing { to { transform: rotate(45deg); } }
@keyframes home-star-swing-back { to { transform: rotate(-45deg); } }

/* Con la scena attiva i testi restano (selezionabili e leggibili dagli screen reader) ma
   trasparenti: si vede la loro copia disegnata sotto la lente. */
.home-hero.is-live .home-greeting,
.home-hero.is-live .home-greeting * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: none !important;
  text-shadow: none !important;
  animation: none;
}

/* ---------- Stili che cambiano a ogni taglio della lente (data-look sul body) ----------
   Li imposta js/3d/home-hero.js; la scena ridisegna i testi leggendo da qui caratteri, grandezze
   e colori. Proprietà in più lette dalla scena (non fanno niente nel CSS):
   --mark  rettangolo di colore dietro la parola (stampa)     --strip  striscia dietro la riga (collage)
   --box   blocco dietro la parola (cyber)                    --ghost  copia sfalsata del testo (cyber)
   Caratteri liberi (SIL OFL / Apache) in assets/fonts/home, con le licenze. */
@font-face { font-family: 'GDS Silkscreen'; font-weight: 700; src: url('../assets/fonts/home/silkscreen-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GDS VT323'; font-weight: 400; src: url('../assets/fonts/home/vt323-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GDS Anton'; font-weight: 400; src: url('../assets/fonts/home/anton-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GDS Special Elite'; font-weight: 400; src: url('../assets/fonts/home/special-elite-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GDS Chakra Petch'; font-weight: 700; src: url('../assets/fonts/home/chakra-petch-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GDS Rajdhani'; font-weight: 600; src: url('../assets/fonts/home/rajdhani-600.woff2') format('woff2'); font-display: swap; }

.home-page[data-look] .home-ciao { background: none; -webkit-text-fill-color: currentColor; }

/* 1. Pixel / glitch / point cloud */
.home-page[data-look="pixel"] .home-ciao { font-family: 'GDS Silkscreen', monospace; font-style: normal; font-weight: 700; font-size: calc(var(--ciao) * 0.6); line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: #eafcff; }
.home-page[data-look="pixel"] .home-line { font-family: 'GDS VT323', monospace; font-weight: 400; font-size: calc(var(--line) * 1.35); line-height: 1.1; letter-spacing: 0.02em; color: #8fe6ff; }
.home-page[data-look="pixel"] .home-line strong { font-weight: 400; color: #ffffff; }

/* 2. Stampa brutalista / grunge */
.home-page[data-look="stampa"] .home-ciao { font-family: 'GDS Anton', Impact, sans-serif; font-style: normal; font-weight: 400; font-size: calc(var(--ciao) * 1.25); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: #121212; }
.home-page[data-look="stampa"] .home-line { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: calc(var(--line) * 0.62); line-height: 1.7; letter-spacing: 0.08em; text-transform: uppercase; color: #161616; }
.home-page[data-look="stampa"] .home-line strong { font-weight: 700; color: #111; --mark: #ff4a1c; }

/* 3. Collage punk (le lettere di «Ciao!» le ritaglia la scena, ognuna con il suo carattere) */
.home-page[data-look="collage"] .home-ciao { font-family: 'GDS Anton', Impact, sans-serif; font-style: normal; font-size: calc(var(--ciao) * 1.05); line-height: 1.05; text-transform: uppercase; color: #111; }
.home-page[data-look="collage"] .home-line { font-family: 'GDS Special Elite', 'Courier New', monospace; font-weight: 400; font-size: calc(var(--line) * 0.8); line-height: 1.9; letter-spacing: 0.02em; text-transform: uppercase; color: #111; --strip: #f2efe6; }
.home-page[data-look="collage"] .home-line strong { font-weight: 400; color: #d41f1f; }

/* 4. Cyber (giallo e nero, ispirato all'immaginario cyberpunk) */
.home-page[data-look="cyber"] .home-ciao { font-family: 'GDS Chakra Petch', sans-serif; font-style: normal; font-weight: 700; font-size: calc(var(--ciao) * 0.95); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #0a0a0a; --ghost: #ff003c; }
.home-page[data-look="cyber"] .home-line { font-family: 'GDS Rajdhani', sans-serif; font-weight: 600; font-size: calc(var(--line) * 0.95); line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: #121212; }
.home-page[data-look="cyber"] .home-line strong { font-weight: 600; color: #fcee0a; --box: #0a0a0a; }

/* Logo, lingua, menu, stelle, link e footer: ognuno cambia stile quando lo raggiunge il cerchio
   del cambio (data-ui, impostato da js/3d/home-hero.js elemento per elemento).
   Su fondo chiaro (stampa, cyber) diventano scuri. */
.home-star:is([data-ui="stampa"], [data-ui="cyber"]),
.am-logo:is([data-ui="stampa"], [data-ui="cyber"]) img { filter: invert(1); }
.home-header :is([data-ui="stampa"], [data-ui="cyber"]) { color: #111; }
.home-header a:is([data-ui="stampa"], [data-ui="cyber"]):focus-visible { outline-color: #000; }
.home-cta:is([data-ui="stampa"], [data-ui="cyber"]) { color: #0d0d0d; border-color: #0d0d0d66; }
.home-footer:is([data-ui="stampa"], [data-ui="cyber"]) { color: #2a2a2a; }
.home-tilt:is([data-ui="stampa"], [data-ui="collage"], [data-ui="cyber"]) { background: #f4f1e8d9; color: #111; border-color: #1111114d; }
:is(.am-menu, .lang-switch)[data-ui="pixel"] { font-family: 'GDS VT323', monospace; letter-spacing: 0.04em; }
:is(.home-cta, .home-footer)[data-ui="pixel"] { font-family: 'GDS VT323', monospace; font-size: 17px; letter-spacing: 0.04em; }
:is(.am-menu, .home-cta, .home-footer)[data-ui="cyber"] { font-family: 'GDS Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
:is(.am-menu, .home-cta, .home-footer)[data-ui="stampa"] { font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; }
:is(.am-menu, .home-cta)[data-ui="collage"] { font-family: 'GDS Special Elite', monospace; text-transform: uppercase; }

@media (max-width: 699px) {
  body.home-page { --ciao: clamp(92px, 29vw, 200px); --line: clamp(17px, 4.9vw, 26px); }
  .home-header { height: 76px; }
  .home-header .am-logo img { width: 42px; }
  .home-header .am-menu span { display: none; }
  .home-center { padding-bottom: 150px; }
  .home-star { top: calc(var(--ciao) * -0.32); width: 18px; }
  .home-star--left { left: calc(50% - var(--ciao) * 1.02); }
  .home-star--right { right: calc(50% - var(--ciao) * 1.02); }
  .home-cta { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .home-footer { flex-direction: column; justify-content: flex-end; gap: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-height: 480px) and (orientation: landscape) {
  body.home-page { --ciao: clamp(64px, 24vh, 160px); --line: clamp(14px, 4.2vh, 22px); }
  .home-center { padding: 72px var(--gutter) 96px; }
  .home-cta { bottom: 40px; }
  .home-tilt { bottom: auto; top: 20px; }
}