/* ==========================================================================
AI · Data · Design · Human — le sfere decorative (ricetta CSS)
Ricavata dalle sfere del disegno Figma («Hero / Sphere …» nella home e il
componente «Sfera» della pagina 02). Richiede tokens.css e movimento.css.
Una sfera = cinque livelli, tutti proporzionali al diametro --d della sfera-base:
1. alone cerchio ~1,34 × d, lilla 9,5%, sfocatura
2. ombra ellisse ~0,92 × 0,72 d sotto la sfera, sfocata (non tutte ce l'hanno)
3. vetro la sfera: gradiente radiale (ruota con --rot)
4. corpo filetto bianco + 2 ombre interne + 2 ombre esterne (non ruotano)
5. luce cerchio ~0,43 × d, riflesso, sfocato
Markup:
--x e --y sono il CENTRO della sfera nelle coordinate della pagina.
Ogni sfera del disegno ha posizioni leggermente diverse di alone, ombra e
luce (piazzate a mano). I valori esatti, sfera per sfera, sono in
linee/ancore.json (chiavi x, y, d, rot, alone, luce, ombra) e si passano
come variabili CSS in linea, per esempio:
style="--d:88px; --x:1180px; --y:7148px; --rot:97deg;
--lx:.214; --ly:-.106; --ls:.44; --senza-ombra:1"
Le variabili non indicate usano i valori più comuni del disegno (qui sotto).
Le sfere vanno riallineate come la linea (linee/LEGGIMI-linee.md).
Sono decorative: aria-hidden, nessun focus, nessun puntatore, sempre sotto
ai testi e ai link.
========================================================================== */
.sfera {
--d: 118px; /* diametro della sfera-base */
--x: 0px; /* centro, orizzontale */
--y: 0px; /* centro, verticale */
--rot: 0deg; /* rotazione della sfera (solo alcune del desktop: 97° e −75°) */
/* alone: centro rispetto al centro della sfera (frazioni di d) e diametro (frazione di d) */
--ax: 0; --ay: 0.02; --as: 1.34;
/* luce */
--lx: -0.13; --ly: -0.2; --ls: 0.44;
/* ombra ellittica: centro e dimensioni (frazioni di d) */
--ox: 0; --oy: 0.34; --ow: 0.92; --oh: 0.72;
/* 1 = nessuna ombra ellittica (le sfere ruotate del desktop non l'hanno) */
--senza-ombra: 0;
position: absolute;
left: calc(var(--x) - var(--d) / 2);
top: calc(var(--y) - var(--d) / 2);
width: var(--d);
height: var(--d);
pointer-events: none;
z-index: 0; /* sotto al contenuto (che sta a z-index ≥ 1) */
}
.sfera > i {
position: absolute;
display: block;
border-radius: 50%;
}
/* 1 · alone (sfocatura di livello 0,308 d ≈ CSS blur metà: 0,154 d) */
.sfera__alone {
width: calc(var(--d) * var(--as));
height: calc(var(--d) * var(--as));
left: calc(var(--d) * (0.5 + var(--ax) - var(--as) / 2));
top: calc(var(--d) * (0.5 + var(--ay) - var(--as) / 2));
background: var(--sfera-alone); /* #dbd4fc18 */
filter: blur(calc(var(--d) * 0.154));
}
/* 2 · ombra ellittica a terra */
.sfera__ombra {
width: calc(var(--d) * var(--ow));
height: calc(var(--d) * var(--oh));
left: calc(var(--d) * (0.5 + var(--ox) - var(--ow) / 2));
top: calc(var(--d) * (0.5 + var(--oy) - var(--oh) / 2));
background: var(--sfera-ombra); /* #4a40851f */
opacity: calc(0.92 * (1 - var(--senza-ombra)));
filter: blur(calc(var(--d) * 0.069));
}
/* 3 · vetro: gradiente radiale (centro 54,5% 59,6%, raggio 0,641 d), ruota con --rot */
.sfera__vetro {
inset: 0;
background: radial-gradient(
circle calc(var(--d) * 0.641) at 54.5% 59.6%,
#ffffff 0%,
#feffff 20%,
#f8f6ff 46%,
#e2dbfd 72%,
#998ae5fc 100%
);
opacity: 0.995;
transform: rotate(var(--rot));
}
/* 4 · corpo: trasparente, porta filetto e ombre (le ombre non ruotano) */
.sfera__corpo {
inset: 0;
box-sizing: border-box;
border: calc(var(--d) * 0.0045) solid #fff; /* filetto bianco, 1 px a 220 px */
box-shadow:
/* due ombre interne */
inset calc(var(--d) * 0.040) calc(var(--d) * 0.060) calc(var(--d) * 0.120) rgba(87, 74, 158, 0.22),
inset calc(var(--d) * -0.035) calc(var(--d) * -0.040) calc(var(--d) * 0.085) rgba(255, 255, 255, 0.82),
/* due ombre esterne */
calc(var(--d) * -0.045) calc(var(--d) * 0.105) calc(var(--d) * 0.180) rgba(74, 64, 133, 0.18),
0 calc(var(--d) * 0.050) calc(var(--d) * 0.310) rgba(184, 173, 242, 0.12);
}
/* 5 · luce: riflesso in alto a sinistra (in alcune sfere ruotate, a destra) */
.sfera__luce {
width: calc(var(--d) * var(--ls));
height: calc(var(--d) * var(--ls));
left: calc(var(--d) * (0.5 + var(--lx) - var(--ls) / 2));
top: calc(var(--d) * (0.5 + var(--ly) - var(--ls) / 2));
background: radial-gradient(
circle calc(var(--d) * var(--ls) * 0.556) at 53.3% 53.3%,
#ffffff 0%,
rgba(255, 255, 255, 0.88) 24%,
rgba(255, 255, 255, 0.34) 56%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0.98;
filter: blur(calc(var(--d) * 0.012));
}
/* ---------- Ingresso (foglio C, sequenza 4) ----------
Le sfere dell'hero (hero: true in ancore.json) sono visibili dal caricamento.
Le altre partono nascoste e si rivelano UNA SOLA VOLTA quando la punta
della linea arriva a 120 px sopra la loro posizione: il codice aggiunge .e-visibile. */
.sfera--da-rivelare {
opacity: 0;
transform: scale(var(--scala-ingresso, 0.92));
transition:
opacity var(--durata-lenta) var(--curva),
transform var(--durata-lenta) var(--curva);
}
.sfera--da-rivelare.e-visibile {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
/* visibili subito e ferme */
.sfera--da-rivelare { opacity: 1; transform: none; transition: none; }
}
/* ---------- Alone ambientale (senza sfera) ----------
Solo desktop: alcuni aloni di luce sciolti (ancore.json → desktop.aloni_ambientali).
*/
.alone-ambientale {
position: absolute;
left: calc(var(--x) - var(--w) / 2);
top: calc(var(--y) - var(--h) / 2);
width: var(--w);
height: var(--h);
border-radius: 50%;
background: var(--sfera-alone);
filter: blur(calc(var(--r) / 2));
pointer-events: none;
z-index: 0;
}