/* ========================================================================== Wijze Wolf — Scroll reveal + signature animations Progressive enhancement: only hides content when JS is active (.js on ). ========================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Stagger helper: children reveal in sequence */ .js [data-reveal-children] > * { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .js [data-reveal-children].is-visible > * { opacity: 1; transform: none; } .js [data-reveal-children].is-visible > *:nth-child(2) { transition-delay: .08s; } .js [data-reveal-children].is-visible > *:nth-child(3) { transition-delay: .16s; } .js [data-reveal-children].is-visible > *:nth-child(4) { transition-delay: .24s; } .js [data-reveal-children].is-visible > *:nth-child(5) { transition-delay: .32s; } /* Hero keyword underline draws itself once on load (JS only; not reveal-gated so the H1/LCP text is never hidden). pathLength="1" normalises the dash. */ .js .hero__keyword path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawUnderline 1s var(--ease) .5s forwards; } @keyframes drawUnderline { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .js .hero__keyword path { stroke-dashoffset: 0 !important; animation: none !important; } /* Neutralise hover/active micro-motion too (WCAG 2.3.3). */ .btn, .card, .gallery__item img, .testi-dot, .social-link, .service-card__paw { transition: none !important; } .btn:hover, .card:hover, .social-link:hover, .about__paw-sticker { transform: none !important; } .gallery__item:hover img { transform: none !important; } }