/* * Micro-animations — globaal motion-laagje. Alle animations respecteren * `prefers-reduced-motion` via de website.css-override (duration → 0ms). * * - smooth-scroll: globaal * - reveal-on-scroll: `.layer` fade-up bij intersecting * - sticky-header shrink: site-header krimpt bij scroll * - card-hover lift + soft shadow * - focus-visible ring (a11y) * - link onderstreping animation */ html { scroll-behavior: smooth; } /* Reveal-on-scroll. JS zet `data-revealed="true"` zodra een .layer in viewport komt. Initial state = onzichtbaar + iets omhoog. */ .layer { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .layer[data-revealed="true"] { opacity: 1; transform: none; } /* JS niet beschikbaar → geen reveal-flow blokkade. Class wordt door JS gezet op tijdens initialization; afwezig = no-js → forceer revealed. */ html:not(.has-motion) .layer { opacity: 1; transform: none; } /* Header sla 't reveal-effect over — die moet direct staan. */ .layer__header[data-revealed="false"], .layer__header { opacity: 1; transform: none; transition: none; } /* Ignite-reveal: zodra een sectie in beeld komt "ontvlamt" 'ie kort — een warme gloed-puls bovenop de fade-up, alsof 'ie wordt aangestoken. Kleur via `--ignite-glow` (themable: neutrale lijn = kaarsgoud-default, kleurrijke lijn kan 'm bv. naar roze/oranje zetten in website.css). Header uitgezonderd. */ .layer[data-revealed="true"]:not(.layer__header) { animation: mm-ignite var(--dur-slow) var(--ease-out); } @keyframes mm-ignite { 0% { filter: drop-shadow(0 0 0 transparent); } 35% { filter: drop-shadow(0 10px 30px var(--ignite-glow, rgba(200, 144, 42, .42))); } 100% { filter: drop-shadow(0 0 0 transparent); } } /* `.site-header` transition zit in layers.css (transform-based hide/show via `data-header-hidden`). De `data-scrolled`-rules zijn weg — die werden nergens gezet. Voor logo-height-transition: blijft, wordt door andere features mogelijk nog ingezet. */ .site-logo img { transition: height var(--dur-fast) var(--ease-out); } /* Card / banner-card lift on hover. */ .card, .inspiration-tile, .suggestion-card, .postcard { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); } .card:hover, .inspiration-tile:hover, .suggestion-card:hover, .postcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } /* Focus-visible ring — a11y. Subtiel, gebruikt de primary-kleur. */ :where(a, button, [role="button"], input, select, textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Link underline grow on hover. */ .layer__text-text a, .layer__text-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-thickness var(--dur-fast) var(--ease-out); } .layer__text-text a:hover, .layer__text-content a:hover { text-decoration-thickness: 2px; } /* Buttons — lift + soft press */ .button { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .button:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } .button:active { transform: translateY(0); } /* Reduced-motion: keyframe-animaties (vaste duur) expliciet uit — de globale token-versoepeling in variables.css raakt `animation` niet. */ @media (prefers-reduced-motion: reduce) { .layer[data-revealed="true"]:not(.layer__header) { animation: none; } }