/* ======================================== Preloader — schermata d'apertura Compare solo al primo caricamento della sessione (vedi preloader.js): sulle pagine successive lo script bloccante in aggiunge .bacco-intro-seen a prima che questo blocco venga dipinto, così il preloader resta display:none dal primissimo frame — nessun lampo, nessuna ricomparsa cambiando pagina. Meccanica del reveal: il contenitore porta SOLO backdrop-filter, senza un proprio colore — la sfocatura del sito sotto resta quindi attiva finché il raggio non viene animato a zero, non finché esiste un elemento nel DOM. Il rosso vive tutto su .site-preloader-tint, un livello sopra il blur che sfuma per conto suo (.is-hiding): mentre sparisce si vede il sito, ma ancora sfocato. Con un piccolo ritardo (.is-unblurring, aggiunta da preloader.js mentre il rosso sta ancora finendo di sfumare) il raggio della sfocatura stessa si scioglie, lento, fino a 0 — è quello il passaggio sfocato→nitido, ed è un'unica transizione fluida, non più uno scatto alla rimozione dal DOM: quella arriva solo a sfocatura già arrivata a zero, quindi invisibile. ======================================== */ html.bacco-intro-seen .site-preloader { display: none; } /* Per la durata del preloader il resto della pagina non deve scorrere né essere raggiungibile: è ancora nel DOM, solo coperto. */ body.bacco-preloading { overflow: hidden; } .site-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: transparent; backdrop-filter: blur(32px) saturate(1.1); -webkit-backdrop-filter: blur(32px) saturate(1.1); transition: backdrop-filter 1.7s cubic-bezier(0.22, 1, 0.36, 1), -webkit-backdrop-filter 1.7s cubic-bezier(0.22, 1, 0.36, 1); } .site-preloader.is-hiding { pointer-events: none; } .site-preloader.is-unblurring { backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); } .site-preloader-tint { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 42%, hsl(350 42% 12%) 0%, hsl(350 55% 6%) 55%, hsl(350 62% 3%) 100%); opacity: 1; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); } .site-preloader.is-hiding .site-preloader-tint { opacity: 0; } .site-preloader-logo { position: relative; z-index: 1; /* Piccolo di proposito: un marchio, non un protagonista. */ width: min(56px, 14vw); height: auto; opacity: 0; transform: scale(0.86); filter: drop-shadow(0 6px 18px hsl(350 70% 3% / 0.5)); animation: baccoPreloaderIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards, baccoPreloaderBreathe 1.6s ease-in-out 0.9s infinite; transition: opacity 0.6s ease; } /* Il logo si spegne un poco prima che il rosso finisca di sfumare, così non resta come un fantasma sullo sfondo ormai quasi trasparente. */ .site-preloader.is-hiding .site-preloader-logo { animation: none; opacity: 0; } @keyframes baccoPreloaderIn { to { opacity: 1; transform: scale(1); } } /* Un respiro leggerissimo mentre il sito si prepara dietro le quinte: dà vita al fermo immagine senza distrarre dall'attesa. */ @keyframes baccoPreloaderBreathe { 0%, 100% { filter: drop-shadow(0 6px 18px hsl(350 70% 3% / 0.5)) brightness(1); } 50% { filter: drop-shadow(0 6px 22px hsl(350 70% 3% / 0.6)) brightness(1.08); } } @media (prefers-reduced-motion: reduce) { .site-preloader-logo { animation: none; opacity: 1; transform: none; } .site-preloader-tint, .site-preloader.is-hiding .site-preloader-logo { transition: opacity 0.2s linear; } .site-preloader { transition: backdrop-filter 0.3s linear, -webkit-backdrop-filter 0.3s linear; } }