/* Beweging — alles hier ACHTER prefers-reduced-motion: no-preference. Buiten die query: statische eindtoestand (elementen gewoon zichtbaar, geen transform/opacity-0). */ @media (prefers-reduced-motion: no-preference) { /* Stiksel-reveal: dashed lijn "naait" zich bij scroll op sectieovergangen. De verborgen beginstaat geldt ALLEEN als JS actief is (.reveal-on op ), zodat de pagina zonder/na falend JS nooit blanco is. */ .stitch-line { position: relative; height: 4px; margin: 0 auto; max-width: var(--container-w); } .stitch-line svg { display: block; width: 100%; height: 100%; } .stitch-line path { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 6 8; fill: none; } .reveal-on .stitch-line path { stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s var(--ease-atelier); } .reveal-on .stitch-line.is-visible path { stroke-dashoffset: 0; } /* Staggered opkomen van kaarten/beelden — alleen verbergen als JS actief is */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-atelier), transform 0.7s var(--ease-atelier); } .reveal-on [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 110ms); } /* Schaar-hover in de nav */ .scissor-icon__blade { transform-origin: 8px 16px; transition: transform 0.35s var(--ease-atelier); } .nav__brand:hover .scissor-icon__blade--a, .nav__brand:focus-visible .scissor-icon__blade--a { transform: rotate(-14deg); } .nav__brand:hover .scissor-icon__blade--b, .nav__brand:focus-visible .scissor-icon__blade--b { transform: rotate(14deg); } /* Zachte Ken Burns op hero-beeld */ .hero__media img, .ken-burns { animation: ken-burns 18s ease-in-out infinite alternate; } @keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } } /* Before/after handle: kleine transitie tenzij tijdens slepen */ .ba-slider__handle { transition: left 0.05s linear; } .ba-slider.is-dragging .ba-slider__handle { transition: none; } } /* Buiten reduced-motion no-preference: garandeer statische eindtoestand */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } .stitch-line path { stroke-dashoffset: 0; } .hero__media img { animation: none; } }