/* ============================================================ TEMA · Neon — notte elettrica Variabili più il vestito dell'aria (passata temi, fase B — in fondo al file): il tema continua a non sapere nulla dell'evento (architettura §2), e ciò che si muove anima SOLO transform e opacity. Idea guida: l'insegna al neon ben fatta, non la discoteca in foto mossa. Tutto ciò che qui somiglia a un bagliore è colore e ombra STATICI (dottrina §5: niente filtri animati, niente blend). ============================================================ */ /* Unbounded Bold — display geometrico per l'hero. Il descrittore dice il peso VERO del file (unb.woff2 è usWeightClass 700, statico), come chiede architettura §10: il congelamento porta questo descrittore dentro l'@font-face che serializza, così bitmap e vettore scelgono la stessa faccia. Il motore disegna l'hero a 900 e il browser ingrassa da sé quel tanto che manca — su tutte e due le strade, che è il punto. Un solo @font-face per la famiglia: facciaFontHero() prende il primo che trova. */ @font-face{font-family:'Unb';src:url(../font/unb.woff2) format('woff2'); font-weight:700;font-display:block} /* Damion — lo script da insegna. Monolineare per scelta: un tubo al neon ha spessore costante, e un corsivo a forte contrasto sparirebbe nei tratti sottili sotto il bagliore. Scelto anche per le maiuscole non ambigue: le alternative da insegna provate (Grand Hotel su tutte) hanno la A svolazzante che si legge G — su un invito il nome è la cosa che non si può sbagliare. */ @font-face{font-family:'Damion';src:url(../font/damion.woff2) format('woff2'); font-weight:400;font-display:block} /* Space Grotesk (variabile) — date, luoghi, testo: tecnico e contemporaneo */ @font-face{font-family:'Grotesk';src:url(../font/grot.woff2) format('woff2'); font-weight:300 700;font-display:block} /* Space Mono — le etichette. Stessa radice di Space Grotesk: in maiuscoletto spaziato dà il passo del biglietto stampato a macchina. Due file perché il motore chiede 500 (→400) e 600 (→700): meglio i tagli veri del finto neretto. */ @font-face{font-family:'Mono';src:url(../font/mono.woff2) format('woff2'); font-weight:400;font-display:block} @font-face{font-family:'Mono';src:url(../font/mono-b.woff2) format('woff2'); font-weight:700;font-display:block} :root{ /* --- fondamenta --- */ /* nero-blu, non nero neutro: il neon canta solo su un fondo freddo */ --bg:#05041c; --fondo-rgb:5,4,28; /* base del velo radiale, in RGB */ --ink:#e4ebff; --ink-forte:#fff; --ink-caldo:#f3f7ff; /* qui "caldo" vale "il bianco più acceso" */ --muted:#96a5d6; --hair:rgba(138,190,255,.26); /* La vignetta è un'immagine intera. Qui non è nera ma del blu-nero del tema portato quasi a fondo: un nero neutro spegnerebbe la virata fredda proprio dove il fondale è più scuro. Un po' più stretta e più profonda del ripiego del motore — un'insegna si guarda in una strada buia, non in una vetrina illuminata. */ --vignetta:radial-gradient(126% 94% at 50% 44%,transparent 42%,rgba(2,1,12,.30) 76%,rgba(1,0,7,.62) 100%); /* --- "ori" → il metallo del tema: iridescenza ciano→magenta --- Il motore usa questi cinque per il filo della busta, il rombo del filetto, le etichette (--oro-2 è anche colore di testo: deve reggere a 9,5px) e la pillola della firma. */ --oro-1:#eafdff; --oro-2:#5ce8ff; --oro-3:#ff4fd8; --oro-scuro:#3a0f6b; --oro-bagliore:rgba(92,232,255,.75); --cta-inchiostro:#12002e; --cta-ombra:rgba(255,79,216,.34); /* --- accenti: i veli del fondale e gli aloni --- */ --acc-1:rgba(255,64,200,1); --acc-alone:rgba(255,64,200,.38); /* l'alone dietro la busta: l'insegna accesa */ --acc-velo-1:rgba(255,54,186,.28); /* magenta in alto a destra */ --acc-velo-2:rgba(126,60,255,.26); /* viola in basso a sinistra */ --acc-aur-1:rgba(0,190,255,.19); /* la lenta aurora ciano */ --acc-aur-2:rgba(190,50,255,.18); /* I due colori con cui è fatta la luce dell'insegna. Sono COLORI, uno per variabile: le liste di ombre stanno più in basso, fra le variabili di contratto. (Prima qui c'era un valore che si portava dietro altre due ombre sfruttando il fatto che la variabile chiudeva la dichiarazione: legale ma fragile, e non serve più da quando ogni bagliore è una lista intera — revisione, rilievo 11.) --acc-glow-testo è il gas: ciano acceso, il colore che sta appena fuori dal vetro. --acc-glow-testo-2 è la stanza: il magenta che il tubo butta sul muro, largo e basso di alfa. Un'insegna vera ha UN gas e un ambiente, non due gas che si mescolano in un grigio. */ --acc-glow-testo:rgba(122,240,255,.6); --acc-glow-testo-2:rgba(255,72,214,.38); --anello:rgba(140,240,255,.85); /* --- scintillii e particelle (glint, twinkle, sprite e coriandoli) --- */ /* La forma dei burst è la SCHEGGIA (vocabolario fase A): un'insegna che esplode fa schegge di vetro acceso, non coriandoli di carta — la lama ha il cuore bianco freddo al centro e si spegne verso i capi. */ --fx-forma:scheggia; /* il puntino acceso al centro di ogni scintilla: bianco ghiaccio, non bianco puro — è la stessa scarica del tubo, vista piccola */ --fx-cuore:#f0feff; --fx-scia:rgba(150,245,255,.92); --fx-scia-fine:rgba(0,160,255,0); --fx-scia-oro:rgba(255,150,238,.92); /* la seconda scia è magenta, non oro */ --fx-scia-oro-fine:rgba(255,40,180,0); /* Le schegge-coriandolo restano nei due gas più il bianco: il viola cupo di prima (#b06bff), diventato lama di luce, si spegneva in plastica sul fondo blu-nero — al suo posto un ghiaccio acceso. */ --fx-coriandoli:#ffffff #cffaff #8ef4ff #5ce8ff #ff4fd8 #ff9ae8; /* --- flora: il pulviscolo elettrico (vestito in fondo al file) --- */ /* Acceso, non silenzio: fra un'onda di glint e l'altra il fondale era una notte qualunque — e l'aria attorno a un'insegna vera è piena di pulviscolo che ne attraversa la luce. Rado (12, che su LOW diventano 6) e lento (19 s a giro): è aria che sale, non una nevicata. */ --flora-n:12; --flora-durata:19; /* --- vetro finto (velature, mai backdrop-filter) --- */ --glass:rgba(150,190,255,.10); --glass-chiaro:rgba(164,204,255,.17); --glass-line:rgba(150,210,255,.24); /* --- caratteri (ruoli, non nomi: il motore usa i ruoli) --- */ --font-hero:'Unb',system-ui,sans-serif; --font-corsivo:'Damion',cursive; --font-testo:'Grotesk',system-ui,sans-serif; --font-etichetta:'Mono',ui-monospace,monospace; /* cosa scaricare prima del segnale d'invito: "peso corpo ruolo" (§3) */ --precarica:400 36 corsivo, 300 17 testo, 400 11 etichetta, 700 10 etichetta, 900 200 hero; /* --- easing: qui la corrente arriva un filo più svelta e con più rimbalzo --- */ --spring:cubic-bezier(.16,1.16,.3,1); --ease:cubic-bezier(.2,.9,.24,1); --flap:cubic-bezier(.5,.02,.2,1); /* --- busta: carta notte, fodera fluo --- I tre corpi restano quasi neri con virata blu-viola: la busta è la parete buia su cui l'insegna è accesa. Il colore sta nella fodera e nel filo iridescente del bordo (i cinque --oro-*). */ --busta-corpo-0:#201a50; --busta-corpo-1:#130f32; --busta-corpo-2:#08061b; --busta-fronte-0:#2c2466; --busta-fronte-1:#18133b; --busta-fronte-2:#0a0721; --busta-falda-0:#342a74; --busta-falda-1:#1c1648; --busta-falda-2:#100c2e; /* La fodera è ROSA FLUO PIENO: è l'unica cosa accesa della busta e si vede solo mentre la falda si apre — un mezzo secondo di colore che sbatte in faccia, come la carta velina fluorescente dentro una busta nera. Stava sul viola-magenta smorzato perché su WebKit la faccia interna si vedeva anche a busta chiusa e faceva da falda: corretto nel motore il 28/08 (revisione, rilievo 10), e la fodera torna piena. */ --busta-fodera-0:#ff6ad6; --busta-fodera-1:#d81fa4; --busta-fodera-2:#6e0a5c; /* riflesso in alto sul fronte, e colore del lampo all'apertura: ciano */ --busta-riflesso:rgba(110,220,255,.32); --busta-riflesso-fine:rgba(110,220,255,0); /* dove il riflesso si spegne */ /* --- biglietto: carta fredda, inchiostro fluo --- Scelta: cartoncino CHIARO. È l'unico oggetto di materia della scena — la luce che esce dalla scatola nera — e a miniatura è ciò che si legge per primo. Il registro non è "carta da lettere" ma stampa riso su carta fredda con inchiostro fluorescente: il filo interno è viola, non oro. */ --biglietto-0:#f7f9ff; --biglietto-1:#dee6fb; --biglietto-filo:rgba(120,70,220,.32); --biglietto-inchiostro:#5b12b0; /* inchiostro dei nomi sulla partecipazione */ /* Il cartoncino chiaro esce da una scatola nera: sotto stacca con un'ombra blu-nera, e tutt'intorno perde un filo di luce fredda sul buio — una superficie chiara in una stanza scura la butta addosso alle pareti. */ --biglietto-ombra:0 -8px 26px rgba(1,0,10,.62),0 0 40px rgba(120,225,255,.12); /* --- sigillo: ceralacca fluo --- Stesso tondo, stessa iniziale: cambia la materia. Il gradiente radiale va da un colpo di luce rosa alla magenta piena, poi al viola d'ombra del bordo colato. L'inchiostro è quasi nero perché il motore aggiunge da sé un rilievo bianco sotto la lettera. */ --sigillo-0:#ff9ae8; --sigillo-1:#f53fce; --sigillo-2:#bf1aa8; --sigillo-3:#530c72; --sigillo-inchiostro:#40045c; /* Due drop-shadow: la ceralacca fa ombra sulla busta E accende il magenta tutt'intorno — è la sola cosa viva sulla parete buia, e a busta chiusa è ciò che si guarda. Statiche entrambe (dottrina §5.3: filtri fermi, mai animati); il sigillo si trasforma una volta sola all'apertura. */ --sigillo-ombra:drop-shadow(0 7px 15px rgba(1,0,10,.62)) drop-shadow(0 0 15px rgba(255,64,200,.55)); --sigillo-rilievo:0 1px 0 rgba(255,214,246,.55); /* l'iniziale impressa nella cera fluo */ /* --- ombre e bagliori dei blocchi --- Ognuna è la LISTA INTERA di ombre, non un colore (contratto del motore). La ricetta del tubo è una sola, scalata sul corpo del testo — TRE ombre: 1. il vetro: nucleo strettissimo quasi bianco, che tiene i tratti netti invece di annegarli; 2. il gas: ciano, il raggio che si vede davvero — è questo che fa «insegna» e non «testo sfocato»; 3. il muro: magenta larghissimo e basso di alfa, la luce che il tubo butta sulla parete dietro. Ora si può essere larghi: il contenimento non taglia più le ombre alla rivelazione (revisione, rilievo 12), quindi niente aloni compressi e niente sagome a zero sfocatura per rimediare. Il bagliore dei nomi dipinge DIETRO il testo, perciò non porta più ombra scura: un'insegna non fa ombra su se stessa. TRE e non quattro per una ragione misurata, non per gusto: sui nomi — il testo più grande della pagina — una quarta ombra larga costa un fotogramma alla rivelazione con CPU 6×. Misurato sul banco matrimonio-neon, fase di apertura: quattro ombre con il muro a 120px danno 2–4 fotogrammi oltre i 17 ms e uno oltre i 34; a 80px, 2 e uno; con tre ombre e il muro a 72px si torna a 1–2 e zero, che è il riferimento di Noir Glitter e del Neon di ieri. Il muro magenta c'è lo stesso: basta portare più largo il ciano. I raggi calano col corpo del testo — nomi, titolo del pannello, chiusura, titolo di un testo libero — così le quattro insegne sono la stessa insegna. */ --nomi-bagliore: 0 0 7px rgba(226,252,255,.92), 0 0 32px var(--acc-glow-testo), 0 0 72px var(--acc-glow-testo-2); --chiusura-bagliore: 0 0 5px rgba(226,252,255,.86), 0 0 22px var(--acc-glow-testo), 0 0 56px var(--acc-glow-testo-2); --titolo-bagliore: 0 0 4px rgba(226,252,255,.72), 0 0 17px var(--acc-glow-testo), 0 0 44px var(--acc-glow-testo-2); /* Data e luogo sono la roba che si legge davvero: nessun nucleo bianco che le ingrassi, solo l'aria accesa attorno. Niente ombra scura — su questo fondo non serve, e sporcherebbe il colore. */ --data-ombra:0 0 24px rgba(92,232,255,.26),0 0 62px rgba(255,72,214,.14); --luogo-ombra:0 0 18px rgba(92,232,255,.22),0 0 46px rgba(255,72,214,.11); /* la lastra di vetro appena accennata di countdown e IBAN: azzurrina, non bianca — su un fondo blu-nero il bianco puro fa cenere */ --riquadro-fondo:rgba(122,190,255,.07); --riquadro-filo:rgba(126,214,255,.17); /* rilievo dei tre vetri: pastiglia (mappa, lista), bottone, torna-alla-busta. Ombra portata blu-nera, e il filo di luce in alto è ghiaccio: sono lastre appoggiate in una stanza illuminata di ciano. */ --pastiglia-ombra:0 8px 18px rgba(1,0,10,.40),inset 0 1px 0 rgba(164,228,255,.22); --btn-ombra:0 12px 26px rgba(1,0,10,.50),inset 0 1px 0 rgba(164,228,255,.28); --replay-ombra:0 8px 20px rgba(1,0,10,.50),inset 0 1px 0 rgba(164,228,255,.18); /* --- pannello (dress code e simili) --- */ --pannello-0:#1a1246; --pannello-1:#080520; --pannello-velo:rgba(3,2,14,.86); --pannello-ombra:0 -26px 70px rgba(1,0,8,.80); --pan-titolo-bagliore: 0 0 6px rgba(226,252,255,.82), 0 0 25px var(--acc-glow-testo), 0 0 64px var(--acc-glow-testo-2); /* i dischi dei colori del dress code restano col filo bianco: sono campioni di colore, un filo ciano li falserebbe */ --colori-ombra:0 3px 14px rgba(1,0,10,.55),inset 0 1px 0 rgba(255,255,255,.30); /* --- hero: la scena su cui poggia (le finiture dicono il metallo) --- Il ripiego del motore è un nero caldo, buono su Noir: qui l'ombra e l'ellisse d'appoggio sono blu-nere come tutto il resto, o il numero poggerebbe su una macchia marrone. */ --hero-ombra:rgba(3,1,18,.58); /* ombra portata, in basso a destra */ --hero-suolo:rgba(2,1,14,.50); /* l'ellisse d'appoggio sotto il numero */ /* --- finiture dell'hero: 7 fermate di gradiente + colori estrusione --- Sette fermate su un gradiente verticale: la rottura fra la 3ª e la 4ª è l'orizzonte del metallo. Le estrusioni non sono grigie ma colorate e profonde: dietro un fronte fluo, la scia scura fa metà del lavoro. estr-a è la copia più vicina al fronte, estr-b la più lontana. I primi quattro nomi sono gli stessi di Noir Glitter, reinterpretati nel registro: la finitura sta nel dato-invito, e un invito che cambia tema non deve ricadere sul ripiego. Gli ultimi tre sono di questo tema. */ /* champagne — obbligo di ripiego del motore, qui reinterpretata come BIANCO-NEON: tubo acceso, ombre ciano, estrusione viola */ --fin-champagne:#ffffff #e6f9ff #ffffff #5aa8cc #a9e4fa #f4fdff #7cc6e4; --fin-champagne-estr-a:92 74 190; --fin-champagne-estr-b:16 8 46; /* argento — cromo freddo: quando il numero deve stare zitto */ --fin-argento:#ffffff #ccd6ea #f4f8ff #4a5578 #9fb0d0 #eaf0fb #6f7d9e; --fin-argento-estr-a:60 68 96; --fin-argento-estr-b:10 12 24; /* oro-rosa — qui è rosa acceso con un rimando caldo, non oro */ --fin-oro-rosa:#fff2f6 #ffb0c8 #ffe4ec #c43a68 #ff86ab #ffd5e2 #e06188; --fin-oro-rosa-estr-a:160 44 84; --fin-oro-rosa-estr-b:40 6 20; /* nero-lucido — laccato nero con le luci dell'insegna sopra */ --fin-nero-lucido:#7fd8f0 #1b2a38 #63e8ff #05080f #26404f #4fb8d8 #101a24; --fin-nero-lucido-estr-a:18 40 54; --fin-nero-lucido-estr-b:3 5 10; --fin-magenta:#fff0fb #ff9ae8 #ffd9f6 #a8127e #ff5cd0 #ffc3ef #d43fa8; --fin-magenta-estr-a:150 26 120; --fin-magenta-estr-b:34 4 30; --fin-ciano:#f0ffff #7ef0ff #d9fbff #0f7ea8 #4fd8f5 #c3f6ff #3fb8d4; --fin-ciano-estr-a:18 96 140; --fin-ciano-estr-b:4 18 44; --fin-viola:#f6efff #c79aff #eadcff #5a1ea8 #a06cff #ded0ff #7f45d8; --fin-viola-estr-a:74 30 150; --fin-viola-estr-b:16 6 42; /* --- texture e decorazioni del tema --- Grana fredda in SVG: su un fondo così scuro i gradienti fanno bande, e la grana le rompe. È un'immagine dipinta una volta e ripetuta (nessun filtro vivo): color-interpolation-filters=sRGB perché il colore esca come lo scrivo, stitchTiles perché il quadrotto si ripeta senza cuciture. */ --texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .80 0 0 0 0 1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23g)'/%3E%3C/svg%3E"); --texture-dim-1:210px 210px; --texture-dim-2:131px 131px; /* scintilla a quattro punte, sottile: una scarica, non un fiocco */ --stella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.9 4.2 10.2 12 12-7.8 1.8-11.1 5.1-12 12-.9-6.9-4.2-10.2-12-12C7.8 10.2 11.1 6.9 12 0Z' fill='%23dffbff'/%3E%3C/svg%3E"); } /* ============================================================ LE GRAFIE (decisione 12) — le due alternative curate alla Damion per la voce corsiva. Ogni grafia è un'unità sola: @font-face + :root[data-grafia=…] — l'attributo lo posa il guscio (o il motore) SOLO quando il dato la sceglie, e chi non la sceglie non scarica nulla: l'@font-face da solo non scarica (il browser prende il file solo quando la famiglia è in uso), e i file NON stanno in tema.font, quindi niente preload. La serie non chiede regole: grafia assente = il --font-corsivo di base. La ricetta vetro/gas/muro qui sopra è TARATA SULLA DAMION: le tre ombre dipendono dal peso del tratto — una faccia più sottile brucia (il nucleo bianco si mangia il glifo), una più grassa impasta (le controforme si chiudono). Perciò ogni grafia RIMISURA le quattro insegne (nomi, chiusura, titolo del testo, titolo del pannello) e data/luogo restano com'erano: lì il corsivo non c'è. Gerarchia invariata — vetro stretto, gas ciano, muro magenta — e il muro dei nomi MAI oltre 72px: è il tetto del bilancio 6× misurato nel commento della ricetta. ============================================================ */ /* Norican — il corsivo da insegna anni '50: la candidata storica (alla nascita del tema si valutò «Damion vs Norican»). Più eretta, più piena e più compatta della Damion, monolineare quanto basta, maiuscole che non si possono sbagliare: è l'insegna del diner, dove la Damion è il pennello dell'insegnista. */ @font-face{font-family:'Norican';src:url(../font/norican.woff2) format('woff2'); font-weight:400;font-display:block} :root[data-grafia=norican]{ --font-corsivo:'Norican',cursive; /* RIMISURA — il tratto è più grasso e le controforme più strette: il rischio è l'impasto. Vetro più stretto e un filo più basso (il nucleo a 7px chiudeva le anse di a/e/o), gas com'era — il tubo più pieno lo regge — muro fermo al tetto. */ --nomi-bagliore: 0 0 5px rgba(226,252,255,.85), 0 0 32px var(--acc-glow-testo), 0 0 72px var(--acc-glow-testo-2); --chiusura-bagliore: 0 0 4px rgba(226,252,255,.80), 0 0 22px var(--acc-glow-testo), 0 0 56px var(--acc-glow-testo-2); --titolo-bagliore: 0 0 3px rgba(226,252,255,.66), 0 0 17px var(--acc-glow-testo), 0 0 44px var(--acc-glow-testo-2); --pan-titolo-bagliore: 0 0 4px rgba(226,252,255,.76), 0 0 25px var(--acc-glow-testo), 0 0 64px var(--acc-glow-testo-2); } /* Tilt Neon — lo stampatello morbido: disegnata apposta per imitare il tubo piegato (monolineare vera, curve larghe, terminali tondi). La terza via dell'insegna: non calligrafia ma lettere da vetrina — il nome scritto «a tubo», tondo e disteso. */ @font-face{font-family:'TiltNeon';src:url(../font/tilt.woff2) format('woff2'); font-weight:400;font-display:block} :root[data-grafia=tilt-neon]{ --font-corsivo:'TiltNeon',cursive; /* RIMISURA — tratto un filo più sottile della Damion e controforme larghissime: il rischio è la bruciatura. Vetro più tenue, gas e muro appena più stretti — un tubo fine emette meno, e le lettere distese coprono più muro con meno luce. */ --nomi-bagliore: 0 0 6px rgba(226,252,255,.82), 0 0 28px var(--acc-glow-testo), 0 0 66px var(--acc-glow-testo-2); --chiusura-bagliore: 0 0 4px rgba(226,252,255,.78), 0 0 19px var(--acc-glow-testo), 0 0 52px var(--acc-glow-testo-2); --titolo-bagliore: 0 0 3px rgba(226,252,255,.64), 0 0 15px var(--acc-glow-testo), 0 0 42px var(--acc-glow-testo-2); --pan-titolo-bagliore: 0 0 5px rgba(226,252,255,.72), 0 0 22px var(--acc-glow-testo), 0 0 60px var(--acc-glow-testo-2); } /* ============================================================ L'ARIA ELETTRICA — il vestito che il tema mette sui ganci del motore (passata temi, fase B). Regole oltre le variabili, ma la dottrina è la stessa: in movimento SOLO transform e opacity; ogni colore è un gradiente statico dipinto una volta. ============================================================ */ /* I twinkle non brillano: SCATTANO. Il sospiro sinusoidale del motore è il gesto romantico dei temi di carta — qui è il gas che prende la scarica: due colpi a vuoto, l'accensione che tiene un attimo, poi il buio. Acceso il 12% del giro (era il 50%): la notte resta notte, e il lampo raro si guadagna l'occhio invece di comprarlo. Ritardi e durate restano quelli seminati dal motore (sono inline e vincono comunque); la curva è linear perché una scarica non ha morbidezze. */ .mv-tw i{animation-name:neon-scarica;animation-timing-function:linear} @keyframes neon-scarica{ 0%,78%{opacity:0;transform:scale(.5)} 79%{opacity:.85;transform:scale(1.1)} 80.5%{opacity:.1;transform:scale(.7)} 82%{opacity:1;transform:scale(1.35)} 87%{opacity:.8;transform:scale(1.25)} 90%,100%{opacity:0;transform:scale(.5)}} /* uno su quattro scatta nell'altro gas: il magenta del muro, non un secondo ciano — l'insegna ha due gas, come i bagliori del testo. */ .mv-tw i:nth-child(4n){background:radial-gradient(circle, var(--fx-cuore,#f0feff) 0 24%, var(--fx-scia-oro,rgba(255,150,238,.92)) 42%, var(--fx-scia-oro-fine,rgba(255,40,180,0)) 74%)} /* Il pulviscolo SALE: l'aria scaldata dal tubo porta su i granelli — il Botanico li lascia cadere, e la direzione è metà della firma. Due sagome sole: il punto di gas e la lineetta di luce. Il motore consegna posizione, ritardo negativo, durata, --fs e --fr; qui solo la veste. */ .mv-flora i{width:5px;height:5px; background:radial-gradient(circle,rgba(240,254,255,.9) 0 28%, rgba(122,240,255,.55) 52%,rgba(0,160,255,0) 74%); animation:neon-gas-sale 19s linear infinite both} /* la lineetta: un frammento di tubo quasi verticale — la rotazione seminata (0–360°) si stringe a ±15°, perché un'insegna è fatta di tratti dritti, non di trucioli che girano */ .mv-flora i:nth-child(3n){width:2px;height:13px;border-radius:1px; background:linear-gradient(to top,rgba(0,160,255,0), rgba(150,245,255,.85) 38%,var(--fx-cuore,#f0feff) 50%, rgba(150,245,255,.85) 62%,rgba(0,160,255,0)); animation-name:neon-scia-sale} /* e un punto su cinque è magenta: il muro respira anche nel pulviscolo */ .mv-flora i:nth-child(5n):not(:nth-child(3n)){ background:radial-gradient(circle,rgba(255,240,251,.9) 0 28%, rgba(255,120,230,.5) 52%,rgba(255,40,180,0) 74%)} /* La salita: 14vh in un giro con una deriva breve di lato, nasce e muore trasparente così il riciclo non si vede; a metà volo l'opacità cala — il granello esce dalla luce dell'insegna e ci rientra. */ @keyframes neon-gas-sale{ 0%{opacity:0;transform:translate3d(0,4.5vh,0) scale(var(--fs,1))} 10%{opacity:.5} 55%{opacity:.26} 82%{opacity:.42} 100%{opacity:0;transform:translate3d(2.4vw,-9.5vh,0) scale(var(--fs,1))}} @keyframes neon-scia-sale{ 0%{opacity:0;transform:translate3d(0,4.5vh,0) rotate(calc(var(--fr,180deg)/12 - 15deg)) scale(var(--fs,1))} 10%{opacity:.6} 55%{opacity:.3} 82%{opacity:.5} 100%{opacity:0;transform:translate3d(2.4vw,-11vh,0) rotate(calc(var(--fr,180deg)/12 - 15deg)) scale(var(--fs,1))}}