/* ===================================================================== Villadränering – delad reveal-animation (klassbaserad). Sätt klassen .vd-reveal på valfritt element i valfri modul (eller i en vanlig BB-text/HTML-modul) så tonar det in när det scrollas in i vyn. Kräver att har klassen .vd-js (sätts av pluginet före render) – utan JS visas allt direkt (ingen risk för dolt innehåll). Respekterar prefers-reduced-motion. Modifierare (kombinera fritt med .vd-reveal): Riktning/effekt: --up (standard) --down --left --right --fade --scale --blur Varaktighet: --fast --slow Fördröjning: --d1 … --d6 (manuell stagger) Auto-stagger: sätt .vd-stagger på en förälder – direkta .vd-reveal-barn får löpande fördröjning (steg via data-vd-stagger="0.08"). ===================================================================== */ /* Utgångsläge – endast när JS är aktivt */ .vd-js .vd-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--vd-rv-dur, .8s) var(--vd-rv-ease, cubic-bezier(.2, .7, .2, 1)) var(--vd-rv-delay, 0s), transform var(--vd-rv-dur, .8s) var(--vd-rv-ease, cubic-bezier(.2, .7, .2, 1)) var(--vd-rv-delay, 0s), filter var(--vd-rv-dur, .8s) var(--vd-rv-ease, cubic-bezier(.2, .7, .2, 1)) var(--vd-rv-delay, 0s); will-change: opacity, transform; } /* Inrevealat läge – nollställer all förflyttning/oskärpa */ .vd-js .vd-reveal.vd-in { opacity: 1; transform: none; filter: none; } /* ---- Riktningar/effekter (definieras EFTER basen så de vinner) ---- */ .vd-js .vd-reveal--up { transform: translateY(24px); } .vd-js .vd-reveal--down { transform: translateY(-24px); } .vd-js .vd-reveal--left { transform: translateX(-28px); } .vd-js .vd-reveal--right { transform: translateX(28px); } .vd-js .vd-reveal--fade { transform: none; } .vd-js .vd-reveal--scale { transform: scale(.94); } .vd-js .vd-reveal--blur { transform: none; filter: blur(12px); } /* ---- Varaktighet ---- */ .vd-reveal--fast { --vd-rv-dur: .5s; } .vd-reveal--slow { --vd-rv-dur: 1.1s; } /* ---- Manuella fördröjningar (enkel stagger) ---- */ .vd-reveal--d1 { --vd-rv-delay: .08s; } .vd-reveal--d2 { --vd-rv-delay: .16s; } .vd-reveal--d3 { --vd-rv-delay: .24s; } .vd-reveal--d4 { --vd-rv-delay: .32s; } .vd-reveal--d5 { --vd-rv-delay: .40s; } .vd-reveal--d6 { --vd-rv-delay: .48s; } /* ---- Reducerad rörelse: ingen förflyttning, bara en mjuk fade ---- */ @media (prefers-reduced-motion: reduce) { .vd-js .vd-reveal { transform: none !important; filter: none !important; transition: opacity .3s ease !important; } } /* ============================================================ STÖR ALDRIG BEAVER BUILDER-REDIGERAREN (backup till JS-vakten). BB sätter .fl-builder-edit på vid redigering. Reveal-effekter (denna delade + modulernas egna) får ALDRIG dölja något där – annars "försvinner" moduler eftersom IntersectionObservern inte triggar i redigeraren. Vi tvingar synligt utan att röra transform som används för layout (t.ex. vd-bilds centrerade bild) i den andra regeln. ============================================================ */ .fl-builder-edit .vd-reveal, .fl-builder-edit [class*="--js"] * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; visibility: visible !important; animation: none !important; transition: none !important; } /* vd-bild: bilden använder transform för centrering – återställ bara döljningen */ .fl-builder-edit .is-armed, .fl-builder-edit .is-armed * { opacity: 1 !important; clip-path: none !important; visibility: visible !important; animation: none !important; }