/* ========================================================= Animation initial states Only applied when JS is available (.js on ) and the user has not requested reduced motion. Motion (motion.dev) animates elements from these states. ========================================================= */ @media (prefers-reduced-motion: no-preference) { /* ---- Above-fold h1 titles ---- */ .js .archive-hero__title, .js .ruimte-hero__title { opacity: 0; transform: translateY(28px); } /* ---- Fade-up targets ---- */ .js .section-heading, .js .content-block__content, .js .content-block__media, .js .cta-section__text, .js .cta-section__actions, .js .archive-hero__text, .js .partners-intro, .js .logo-strip, .js .contact-form, .js .brochure-form, .js .ruimte-contact__inner { opacity: 0; transform: translateY(28px); } /* ---- Staggered card targets ---- */ .js .rooms-grid .room-card, .js .feature-grid .feature-card, .js .partners-grid .partner-card { opacity: 0; transform: translateY(28px); } /* ---- Gallery items ---- */ .js .gallery__item { opacity: 0; transform: scale(0.94); } }