/* ============================================================= FABLE PUBLIC — public-motion.css Vertical slice iniziale (FRONTEND-PUBLIC-VERTICAL-SLICE-001) --------------------------------------------------------------- Isolato deliberatamente da public.css: rimuovere il solo a questo file disattiva tutte le animazioni senza intaccare layout/tipografia/colori (rollback immediato, vedi piano esecutivo §5.5). Animazioni consentite qui, per istruzione esplicita del mandato: - apparizione progressiva durante lo scroll (.fbl-reveal-armed); - movimento lento delle connessioni del diagramma; - pulsazione leggera del nodo centrale del diagramma; - microinterazioni su card/link/bottoni (gia' in public.css, qui solo le keyframe usate da quelle transizioni se servono). Animazioni NON presenti qui, per istruzione esplicita: movimento continuo invasivo, parallax, autoplay, caroselli automatici, effetti da exchange, metriche animate finte. ============================================================= */ /* --- scroll reveal: progressive enhancement --- Di default (senza la classe .fbl-reveal-armed su , mai aggiunta se JS non gira o se prefers-reduced-motion e' attivo) gli elementi [data-reveal] sono SEMPRE visibili: il contenuto resta leggibile anche senza JavaScript. */ /* FRONTEND-PUBLIC-NAVBAR-AND-MOTION-LAB-013 — durata del reveal principale portata da 480ms a 720ms (fascia 650-800ms richiesta per i reveal principali): correzione proporzionata solo a questa categoria, non un moltiplicatore applicato a tutto il file. */ html.fbl-reveal-armed [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 720ms var(--fbl-p-easing-standard, ease), transform 720ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal].is-visible { opacity: 1; transform: none; } /* --- diagramma: movimento lento delle relazioni --- */ .fbl-diagram__relation { stroke-dasharray: 6 6; animation: fbl-flow 7s linear infinite; } .fbl-diagram__relation--delay { animation-delay: 1.5s; } @keyframes fbl-flow { to { stroke-dashoffset: -48; } } /* --- diagramma: pulsazione MOLTO leggera del solo nodo centrale --- Glow deliberatamente minimo (raggio ridotto, opacita' bassa): il mandato vieta esplicitamente un glow evidente. */ .fbl-diagram__hub { animation: fbl-pulse 4.2s ease-in-out infinite; transform-origin: center; } @keyframes fbl-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(73,227,194,0)); } 50% { filter: drop-shadow(0 0 3px rgba(73,227,194,0.32)); } } /* --- ambiente hero: deriva astratta minima e molto lenta (8-20s, vedi mandato FRONTEND-PUBLIC-ART-DIRECTION-PILOT-003), mai un parallax legato allo scroll, solo un respiro impercettibile --- */ .fbl-hero__ambient-shape { animation: fbl-drift 16s ease-in-out infinite; } .fbl-hero__ambient-shape--blue { animation-delay: -8s; } @keyframes fbl-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -8px) scale(1.03); } } /* --- rete economica (hero home): campi in deriva lentissima, un nodo hub con una rotazione orbitale impercettibile, tracciati che si disegnano una sola volta all'ingresso in viewport --- */ .fbl-network__field { animation: fbl-drift 20s ease-in-out infinite; } .fbl-network__field--b { animation-delay: -10s; } .fbl-network__node--orbit { animation: fbl-orbit 18s linear infinite; transform-origin: var(--fbl-orbit-cx, 160px) var(--fbl-orbit-cy, 120px); } @keyframes fbl-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } html.fbl-reveal-armed [data-reveal] .fbl-network__path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.3s var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal].is-visible .fbl-network__path { stroke-dashoffset: 0; } /* --- reveal laterale e scale-in: varianti alternative al reveal dal basso, usate su composizioni editoriali/pannelli per differenziare il ritmo fra sezioni. Sempre invisibili solo se armate da JS e mai sotto reduced-motion. --- */ /* Reveal principale (narrativo laterale): 550ms -> 680ms, stessa fascia 650-800ms di [data-reveal]. */ html.fbl-reveal-armed [data-reveal-side] { opacity: 0; transform: translateX(18px); transition: opacity 680ms var(--fbl-p-easing-standard, ease), transform 680ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal-side].is-visible { opacity: 1; transform: none; } /* Reveal secondario (pannello visuale accostato al testo): 500ms -> 600ms, fascia 500-650ms degli elementi secondari/card. */ html.fbl-reveal-armed [data-reveal-scale] { opacity: 0; transform: scale(0.96); transition: opacity 600ms var(--fbl-p-easing-standard, ease), transform 600ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal-scale].is-visible { opacity: 1; transform: none; } /* --- immagini editoriali: movimento dedicato (FRONTEND-PUBLIC-VISUAL- CORRECTIONS-004), durate/spostamenti conformi al mandato (450-700ms, 20-32px, scale minima 0.97). Sovrascrive solo l'ampiezza/durata delle regole generiche data-reveal-*/data-reveal-scale/data-reveal-side per gli elementi .fbl-edimg, senza toccarne il comportamento altrove. --- */ html.fbl-reveal-armed [data-reveal-scale].fbl-edimg { transform: scale(0.97); transition-duration: 600ms; } html.fbl-reveal-armed [data-reveal-scale].fbl-edimg.is-visible { transform: none; } html.fbl-reveal-armed [data-reveal-side].fbl-edimg { transform: translateX(26px); transition-duration: 600ms; } html.fbl-reveal-armed [data-reveal-side].fbl-edimg.is-visible { transform: none; } html.fbl-reveal-armed [data-reveal].fbl-edimg { transform: translateY(26px); transition-duration: 600ms; } html.fbl-reveal-armed [data-reveal].fbl-edimg.is-visible { transform: none; } /* --- stagger: le card di un gruppo [data-reveal-group] entrano in sequenza ravvicinata (offset crescente), non tutte insieme --- */ /* Elementi secondari/card: 480ms -> 580ms (fascia 500-650ms). Stagger: passo portato da 70ms a 110ms (fascia 90-140ms richiesta). */ html.fbl-reveal-armed [data-reveal-group] > * { opacity: 0; transform: translateY(14px); transition: opacity 580ms var(--fbl-p-easing-standard, ease), transform 580ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 110ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 220ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 330ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 440ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > *:nth-child(n+6) { transition-delay: 480ms; } html.fbl-reveal-armed [data-reveal-group].is-visible > * { opacity: 1; transform: none; } /* --- grafico di evoluzione dello stato (FRONTEND-PUBLIC-HOME-SURGICAL- CORRECTIONS-007): la linea si disegna progressivamente, l'area compare dopo, i punti appaiono in sequenza. Il contenitore usa data-reveal-repeat (categoria B): se il grafico esce chiaramente dal viewport (soglia <=0.05) e rientra (soglia >=0.6, isteresi gestita in public-interactions.js), l'animazione puo' essere riprodotta. Hover/focus/tap sui punti restano sempre attivi, anche a meta' dell'animazione (nessun pointer-events:none permanente). Di default (senza .fbl-reveal-armed, quindi senza JS o con reduced-motion) il grafico e' semplicemente sempre completo: nessuna dipendenza da JS per leggere i valori. --- */ html.fbl-reveal-armed [data-reveal-repeat] .fbl-chart__line { stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 900ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__line { stroke-dashoffset: 0; } html.fbl-reveal-armed [data-reveal-repeat] .fbl-chart__svg path[fill^="url"] { opacity: 0; transition: opacity 450ms var(--fbl-p-easing-standard, ease); transition-delay: 0ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__svg path[fill^="url"] { opacity: 1; transition-delay: 850ms; } html.fbl-reveal-armed [data-reveal-repeat] .fbl-chart__point { opacity: 0; transition: opacity 260ms var(--fbl-p-easing-standard, ease); } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point { opacity: 1; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(1) { transition-delay: 950ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(2) { transition-delay: 1010ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(3) { transition-delay: 1070ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(4) { transition-delay: 1130ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(5) { transition-delay: 1190ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(6) { transition-delay: 1250ms; } html.fbl-reveal-armed [data-reveal-repeat].is-visible .fbl-chart__point:nth-of-type(7) { transition-delay: 1310ms; } /* ============================================================= prefers-reduced-motion: disattiva TUTTE le animazioni non essenziali definite in questo file, sia quelle CSS-only (qui) sia quelle innescate da JS (public-interactions.js verifica lo stesso media query prima di attivare .fbl-reveal-armed). ============================================================= */ @media (prefers-reduced-motion: reduce) { html.fbl-reveal-armed [data-reveal] { opacity: 1; transform: none; transition: none; } .fbl-diagram__relation, .fbl-diagram__hub, .fbl-hero__ambient-shape, .fbl-network__field, .fbl-network__node--orbit { animation: none; } .fbl-chart__line, .fbl-network__path { stroke-dashoffset: 0 !important; transition: none !important; } .fbl-chart__svg path[fill^="url"], .fbl-chart__point { opacity: 1 !important; transition: none !important; transition-delay: 0ms !important; } html.fbl-reveal-armed [data-reveal-side], html.fbl-reveal-armed [data-reveal-scale], html.fbl-reveal-armed [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } }