/* ========================================================= CRESPI — intro "spiragli di luce" Tutto ha prefisso .cri-/#cri- per non collidere con styles.css. La classe html.cri-on e' messa da uno script inline nel PRIMA della prima pittura: senza, si vedrebbe un lampo di pagina. ========================================================= */ /* ---- pagina in attesa: nera, ferma, invisibile tranne l'intro ---- */ html.cri-on { background: #000; overflow: hidden; } html.cri-on body > *:not(#cri) { visibility: hidden; } /* (Qui c'era la pausa delle animazioni d'ingresso della vecchia hero: .hero__img.is-active, .hero__content, .hero__title, .hero__lead, .hero__actions. La hero nuova non ha animazioni CSS d'ingresso da congelare — l'ingresso del testo ora e' orchestrato DALL'intro, vedi html.cri-entra qui sotto.) */ /* ---- il livello dell'intro ---- Visibile SOLO quando l'intro e' armata (html.cri-on) o si sta dissolvendo (.cri-out): cosi' nelle visite successive della stessa sessione il markup #cri, pur presente, non copre mai la pagina — nemmeno per un fotogramma. */ #cri { position: fixed; inset: 0; z-index: 9999; background: #000; display: none; } html.cri-on #cri, #cri.cri-out { display: block; } #cri-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; } /* La dissolvenza della cucitura: il canvas mostra gia' il ritratto della hero, la pagina sotto e' identica — la curva morbida serve solo alle nuvole vive e alle micro-differenze. (Era .22s linear sulla hero scura.) */ #cri.cri-out { opacity: 0; transition: opacity .34s cubic-bezier(.33,0,.36,1); } /* ---- l'ingresso del sito DOPO l'atterraggio ---- html.cri-entra e' messa dall'intro nell'istante della cucitura, su TUTTI i percorsi d'uscita. Il fotogramma d'arrivo del canvas contiene fondo, luce e foto ma NON testo, testata e semaforo: sono loro a entrare, discreti, subito dopo. Senza intro la classe non c'e' e il sito resta identico a se stesso. */ html.cri-entra .hero__testo { animation: cri-sale .55s cubic-bezier(.22,.61,.36,1) .16s both; } /* il lockup entra INSIEME al lead (stesso tempo e stesso ritardo) ma in pura dissolvenza: una traslazione sposterebbe il rect dell'svg, e un sync() del canale-testa caduto in quella finestra cuocerebbe nella mask un offset sbagliato che poi resterebbe. Il knockout non si muove: si vela e basta. */ html.cri-entra .lk-h1 { animation: cri-vela .55s cubic-bezier(.22,.61,.36,1) .16s both; } html.cri-entra .testata { animation: cri-scende .55s cubic-bezier(.22,.61,.36,1) .30s both; } html.cri-entra .semaforo { animation: cri-vela .55s cubic-bezier(.22,.61,.36,1) .46s both; } @keyframes cri-sale { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes cri-scende { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes cri-vela { from { opacity: 0; } to { opacity: 1; } } /* ---- fallback senza WebGL: stessa narrazione, solo CSS ---- */ #cri-css { position: absolute; inset: 0; background: #000; display: none; } #cri-css.cri-live { display: block; } #cri-css .cri-mark { position: absolute; left: 50%; top: 50%; width: min(72vw, 1100px); transform: translate(-50%, -50%); color: #FFF9F0; } #cri-css .cri-mark svg { width: 100%; height: auto; display: block; overflow: visible; } #cri-css .cri-glow { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%) scale(.001); border-radius: 50%; background: radial-gradient(circle, rgba(255,244,224,.55) 0%, rgba(255,230,209,.18) 30%, transparent 62%); } #cri-css .cri-white { position: absolute; inset: 0; background: #FFF9F0; opacity: 0; } #cri-css #crespi-skeleton path { stroke: #fff; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 27; stroke-dasharray: 1000 1100; stroke-dashoffset: 1000; } #cri-css #crespi-skeleton path[data-brush="stem"] { stroke-width: 22.4; } #cri-css #crespi-fill { fill: currentColor; } /* ---- chi ha chiesto meno movimento non vede nulla di tutto questo ---- */ @media (prefers-reduced-motion: reduce) { #cri { display: none !important; } html.cri-on { background: transparent; overflow: visible; } html.cri-on body > *:not(#cri) { visibility: visible; } html.cri-entra .hero__testo, html.cri-entra .lk-h1, html.cri-entra .testata, html.cri-entra .semaforo { animation: none; } }