/** * TEAB Moduler — Reveal-motor (sajtövergripande). * * Laddas på alla sidor så reveal-effekten kan användas på VALFRI rad/modul, * inte bara TEAB-modulerna. Lägg klassen via Beaver Builders Avancerat-flik * (fältet "CSS-klass"): * * teab-reveal – toning + lyft (standard) * teab-reveal-stagger – direkta barn tonar in i sekvens (grids) * teab-reveal-build – clip-svep uppåt ("byggs upp"), använd sparsamt * * Progressive enhancement: det dolda utgångsläget gäller ENDAST när * teab-reveal.js körts och satt klassen .teab-reveal-js på . Körs inte * JS:en (cache, skriptfel, defer-race) saknas flaggan och allt innehåll visas * direkt – det kan aldrig fastna dolt. JS lägger .is-in när elementet scrollas in. */ /* Dolt utgångsläge – kräver JS-flaggan på . */ .teab-reveal-js .teab-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); } .teab-reveal-js .teab-reveal.is-in { opacity: 1; transform: none; } .teab-reveal-js .teab-reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--teab-i, 0) * 80ms); } .teab-reveal-js .teab-reveal-stagger.is-in > * { opacity: 1; transform: none; } .teab-reveal-js .teab-reveal-build { clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.2, .6, .2, 1); } .teab-reveal-js .teab-reveal-build.is-in { clip-path: inset(0 0 0 0); } /* I Beaver Builder-editorn: visa alltid allt. JS körs bara vid sidladdning, så moduler som läggs till/uppdateras under redigering (AJAX) skulle annars fastna på opacity 0. !important garanterar synlighet oavsett flagga/JS. */ .fl-builder-edit .teab-reveal, .fl-builder-edit .teab-reveal-stagger > *, .fl-builder-edit .teab-reveal-build { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } /* Respektera användarens rörelseinställning – visa allt direkt. */ @media (prefers-reduced-motion: reduce) { .teab-reveal, .teab-reveal-stagger > *, .teab-reveal-build { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } }