/* ========================================================= Nuqtat Tahwul — gentle scroll-reveal animations Calm fade + rise as elements enter the viewport, plus a soft cascade for grid items. Active ONLY when is set by the JS gate, and never when the visitor prefers reduced motion — so content is always visible without JS/motion. ========================================================= */ @media (prefers-reduced-motion: no-preference) { /* ---- Single-element reveal (fade + rise) ---- */ html.nt-anim .nt-reveal, html.nt-anim .nt-section-head, html.nt-anim .nt-hero__badge, html.nt-anim .nt-hero h1, html.nt-anim .nt-hero__desc, html.nt-anim .nt-hero__cta, html.nt-anim .nt-testi-slider { opacity: 0; transform: translateY(20px); transition: opacity .65s cubic-bezier(.16, .84, .44, 1), transform .65s cubic-bezier(.16, .84, .44, 1); } html.nt-anim .nt-reveal.is-inview, html.nt-anim .nt-section-head.is-inview, html.nt-anim .nt-hero__badge.is-inview, html.nt-anim .nt-hero h1.is-inview, html.nt-anim .nt-hero__desc.is-inview, html.nt-anim .nt-hero__cta.is-inview, html.nt-anim .nt-testi-slider.is-inview { opacity: 1; transform: none; } /* Hero text reveals as a gentle cascade on first paint. (The hero IMAGE is intentionally NOT hidden — it's the LCP element, so it paints immediately while the copy eases in beside it.) */ html.nt-anim .nt-hero__badge { transition-delay: .06s; } html.nt-anim .nt-hero h1 { transition-delay: .14s; } html.nt-anim .nt-hero__desc { transition-delay: .22s; } html.nt-anim .nt-hero__cta { transition-delay: .30s; } /* ---- Staggered grids: children cascade in (delay set inline by JS) ---- */ html.nt-anim .nt-services-grid > *, html.nt-anim .nt-featured-grid > *, html.nt-anim .nt-comfort-grid > *, html.nt-anim .nt-stats__grid > * { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.16, .84, .44, 1), transform .55s cubic-bezier(.16, .84, .44, 1); } html.nt-anim .nt-services-grid.is-inview > *, html.nt-anim .nt-featured-grid.is-inview > *, html.nt-anim .nt-comfort-grid.is-inview > *, html.nt-anim .nt-stats__grid.is-inview > * { opacity: 1; transform: none; } /* Soft lift on interactive cards (subtle, not distracting) */ html.nt-anim .nt-service-card, html.nt-anim .nt-comfort-card { transition: transform .25s ease, box-shadow .25s ease; } html.nt-anim .nt-service-card:hover, html.nt-anim .nt-comfort-card:hover { transform: translateY(-4px); } }