/* EQwise motion-tokens — hoort in de tokenlaag van het thema, nooit in een blok. Zie de skill eqwise-motion, §1. */ :root{ /* ---- de knop ---------------------------------------------------------- Beweging is een instelling, geen code. De vier duren zijn afgeleid van één factor, dus je stelt ze nooit los bij: draai aan de factor en de onderlinge verhouding blijft staan. Een site waarin hover 200ms is en openklappen 320ms voelt als één ding; een site waarin iemand die twee los heeft bijgesteld niet meer. 1 de norm .6 merkbaar rapper, alles nog leesbaar 1.4 rustiger, voor een pagina met veel tegelijk 0 stil, zonder een regel code aan te raken De waarde komt uit Global Styles zodra hij daar gezet is; staat er niets, dan geldt 1. max(1ms, …) en niet gewoon calc(): bij 0ms vuurt transitionend niet meer en blijft script dat op het einde van een overgang wacht hangen. */ --eqw-motion-factor: var(--wp--custom--eqw-motion-factor, 1); /* duren — afgeleid, niet los instellen */ --eqw-motion-snel: max(1ms, calc(120ms * var(--eqw-motion-factor))); /* kleurwissel, focusring, iconen */ --eqw-motion-basis: max(1ms, calc(200ms * var(--eqw-motion-factor))); /* hover, knoppen, links — de standaard */ --eqw-motion-rustig: max(1ms, calc(320ms * var(--eqw-motion-factor))); /* openklappen, FAQ, menu */ --eqw-motion-traag: max(1ms, calc(600ms * var(--eqw-motion-factor))); /* entree van een sectie, hero */ /* easings */ --eqw-ease-uit: cubic-bezier(.2,0,0,1); /* iets verschijnt / komt binnen */ --eqw-ease-in: cubic-bezier(.4,0,1,1); /* iets verdwijnt / gaat weg */ --eqw-ease-inuit: cubic-bezier(.4,0,.2,1); /* iets verplaatst binnen beeld */ /* De curve uit het Claude Design-ontwerp: komt snel op gang en remt lang uit, waardoor een element lijkt aan te komen in plaats van aan te schuiven. Overgenomen op 23 augustus 2026 uit de export van de homepage. */ --eqw-ease-veer: cubic-bezier(.16,1,.3,1); /* Verplaatsing. Acht pixels en niet zestien: het ontwerp beweegt korter dan de catalogus voorschreef, en op een korte afstand leest een entree als een accent in plaats van als een beweging. Gemeten uit de Claude Design-export, waar elke eqrise op translateY(8px) staat. */ --eqw-motion-afstand: calc(8px * var(--eqw-motion-factor)); /* De entree van een sectie duurt in het ontwerp 280ms, niet 600. Traag blijft bestaan voor wat echt traag moet (een hero die opbouwt), maar verschijnen hangt hier aan. */ --eqw-motion-entree: max(1ms, calc(280ms * var(--eqw-motion-factor))); } /* ---- het niveau -------------------------------------------------------- Niet hoe snel iets beweegt maar hoe zwaar een pagina mág bewegen. Op het html-element, zodat één attribuut de hele pagina bedient en script het kan uitlezen. data-eqw-motion-niveau="0" niets data-eqw-motion-niveau="1" alleen hover en openklappen data-eqw-motion-niveau="2" ook verschijnen en tellen ontbreekt of "4" alles Zonder attribuut geldt 4: een bestaande pagina die het niet kent blijft doen wat hij deed. */ :root[data-eqw-motion-niveau="0"]{ --eqw-motion-factor: 0; } :root[data-eqw-motion-niveau="0"] [data-eqw-motion], :root[data-eqw-motion-niveau="1"] [data-eqw-motion]{ opacity: 1 !important; translate: none !important; } /* Eén schakelaar voor de hele site. Nooit een @media-blok per animatie. 1ms en niet 0ms: scripts die op transitionend wachten blijven anders hangen. */ @media (prefers-reduced-motion: reduce){ :root{ --eqw-motion-snel: 1ms; --eqw-motion-basis: 1ms; --eqw-motion-rustig: 1ms; --eqw-motion-traag: 1ms; --eqw-motion-afstand: 0px; } /* vangnet voor alles wat toch een eigen duur meekreeg */ *, *::before, *::after{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ---- Trede 1: de standaardbewegingen ---------------------------------- */ .eqw-hover-lift{ transition: translate var(--eqw-motion-basis) var(--eqw-ease-uit), box-shadow var(--eqw-motion-basis) var(--eqw-ease-uit); } .eqw-hover-lift:hover{ translate: 0 -2px; /* De transition noemde box-shadow al, maar er was geen schaduw om naartoe te gaan. Twee pixels omhoog zonder schaduw leest niet als optillen. */ box-shadow: 0 6px 20px rgb(17 17 20 / .10); } .eqw-hover-onderstreep{ background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--eqw-motion-basis) var(--eqw-ease-uit); } .eqw-hover-onderstreep:hover{ background-size: 100% 1px; } /* ---- Trede 2b: verschijnen bij in beeld komen ------------------------- */ /* Begintoestand staat achter .js-motion (door het script op gezet), zodat de pagina zonder JavaScript gewoon zichtbaar is. */ /* De begintoestand draagt GEEN transition. Dat is niet netjes-doen maar een reparatie: stond de transition hier, dan animeert het aanzetten van .js-motion het verbergen zelf. Gemeten op 23 augustus 2026 op /huisstijl-methodiek/: de sectie stond op opacity 1, .js-motion landde na 102 ms, en daarna fadete de sectie 600 ms lang weg naar 0 — met de eerste paint op 248 ms, dus midden in die uitfade. De bezoeker zag inhoud verdwijnen. LCP en CLS merkten er niets van; dit is precies het stille falen waar §5 van de skill voor waarschuwt. Nu: verbergen gebeurt in één keer en vóór de eerste paint, en alleen het tevoorschijn komen beweegt. */ .js-motion [data-eqw-motion="verschijn-op"]{ opacity: 0; translate: 0 var(--eqw-motion-afstand); } .js-motion [data-eqw-motion="verschijn-in"]{ opacity: 0; } .js-motion [data-eqw-motion].is-in{ opacity: 1; translate: 0 0; transition: opacity var(--eqw-motion-entree) var(--eqw-ease-veer), translate var(--eqw-motion-entree) var(--eqw-ease-veer); } /* ---- De keyframes uit het Claude Design-ontwerp ------------------------ * Overgenomen op 23 augustus 2026 uit de export van de homepage. Ze stonden * daar als inline stijl per element; hier staan ze één keer, zodat een tweede * pagina ze kan gebruiken zonder ze te herhalen. * * Alle vier zijn afhankelijk van de bewegingsfactor: zet die op 0 en er * gebeurt niets meer, ook hier niet. */ /* Een element komt aan: acht pixels omhoog en tegelijk zichtbaar. Dit is het werkpaard van het ontwerp — het staat er vijftien keer in. */ @keyframes eqrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Alleen zichtbaar worden, zonder verplaatsing. Voor beeld en tabellen. */ @keyframes eqfade { from { opacity: 0; } to { opacity: 1; } } /* Een lijn tekent zichzelf. Vraagt een stroke-dasharray op het pad zelf; zonder dat gebeurt er niets, en dat is de veilige uitkomst. */ @keyframes eqdraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } } /* Een balk of vlak vult zich, horizontaal of verticaal. Op transform en niet op width of height: dat laatste dwingt de browser tot herberekenen van de opmaak bij elke stap. */ @keyframes eqfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes eqfillY { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Een statusstip die ademt. Loopt oneindig door, en dat is precies waarom hij spaarzaam hoort te worden ingezet: een bewegend puntje in de ooghoek is vermoeiend. Staat niet in de bewegingscatalogus en hoort daar als voorstel in, met een limiet van één per pagina. */ @keyframes eqpulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } /* Toepassing als klasse, zodat een blok in de editor eraan kan hangen zonder dat er inline stijl aan te pas komt. */ .js-motion .eqw-rise.is-in { animation: eqrise var(--eqw-motion-entree) var(--eqw-ease-veer) both; } .js-motion .eqw-fade.is-in { animation: eqfade var(--eqw-motion-entree) var(--eqw-ease-uit) both; } .eqw-pulse { animation: eqpulse calc(var(--eqw-motion-traag) * 4) var(--eqw-ease-inuit) infinite; } .js-motion .eqw-draw.is-in { animation: eqdraw calc(var(--eqw-motion-traag) * 2.7) var(--eqw-ease-inuit) forwards; } .js-motion .eqw-fill.is-in { animation: eqfill var(--eqw-motion-entree) var(--eqw-ease-veer) both; transform-origin: left center; } @media (prefers-reduced-motion: reduce) { /* Geen uitzondering: een oneindige puls hoort hier helemaal te stoppen, niet op 1ms te gaan pulseren. */ .eqw-pulse { animation: none; opacity: 1; transform: none; } }