/* =========================================================== Flowence FX — effetti scroll & flow (GSAP/CSS, no WebGL) Condiviso tra home (index.html) e pagine interne (partials.php) Tutto attivo solo con classe .js su ; degrada senza JS. =========================================================== */ /* --- Lenis smooth scroll --- */ html.lenis, html.lenis body{ height: auto; } .lenis.lenis-smooth{ scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; } .lenis.lenis-stopped{ overflow: hidden; } /* --- Reveal card fade-up --- */ html.js .fx-rev{ opacity: 0; transform: translateY(30px); will-change: opacity, transform; } /* --- Testo che entra a fuoco --- */ html.js .fx-para{ filter: blur(6px); opacity: .55; will-change: filter, opacity; } html.js .fx-word{ color: rgba(255,255,255,.20); } /* --- Immagini con scroll-zoom/parallax: wrapper con overflow --- */ .fx-media{ overflow: hidden; display: block; } .fx-media > img{ display:block; width:100%; height:auto; will-change: transform; } /* --- Frasi-manifesto --- */ html.js .fx-manifesto{ opacity: 0; } /* --- Pallino-flow: cursore CONTESTUALE e FUNZIONALE --- */ #flow-cursor, #flow-cursor-trail{ position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 999px; transform: translate(-50%,-50%); opacity: 0; transition: opacity .35s ease; } #flow-cursor{ min-width: 16px; height: 16px; padding: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ff9dd6 0%, #bb4391 45%, #824f9e 100%); box-shadow: 0 0 16px 5px rgba(187,67,145,.5); mix-blend-mode: screen; will-change: transform, height, padding; transition: height .3s ease, padding .3s ease, min-width .3s ease, background .3s ease, box-shadow .3s ease, opacity .35s ease, mix-blend-mode 0s; } #flow-cursor .fc-label{ color: #fff; font-family: "Arimo", system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px; white-space: nowrap; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease; } /* stato "disco/pillola" con etichetta */ #flow-cursor.fc-big{ min-width: 62px; height: 60px; padding: 0 26px; mix-blend-mode: normal; background: linear-gradient(135deg, #08a2b0, #824f9e 55%, #bb4391); box-shadow: 0 10px 34px rgba(130,80,158,.5); } #flow-cursor.fc-big .fc-label{ opacity: 1; transform: scale(1); } #flow-cursor-trail{ width: 44px; height: 44px; background: radial-gradient(circle, rgba(8,162,176,.42) 0%, rgba(130,207,255,0) 70%); filter: blur(4px); mix-blend-mode: screen; } html.flow-cursor-on #flow-cursor, html.flow-cursor-on #flow-cursor-trail{ opacity: 1; } @media (hover: none), (pointer: coarse){ #flow-cursor, #flow-cursor-trail{ display:none; } } @media (prefers-reduced-motion: reduce){ html.js .fx-para{ filter:none; opacity:1; } html.js .fx-word{ color: inherit; } html.js .fx-manifesto{ opacity:1; } #flow-cursor, #flow-cursor-trail{ display:none; } }