/* ============================================================================ animations.css — motion layer for the Nikah.App landing page ---------------------------------------------------------------------------- Entrance motion only: every animation settles to exactly the layout and appearance the design already specifies, so a settled page still matches the design pixel for pixel. Nothing here loops, drifts, or parallaxes — a page that never stops moving can never be verified against its source, and the restraint is what keeps it feeling expensive rather than busy. Nothing applies until animations.js adds `nk-motion` to , so with JavaScript off the page renders normally with everything visible. `prefers-reduced-motion: reduce` disables the whole file. ========================================================================== */ :root { --nk-ease: cubic-bezier(0.22, 0.65, 0.3, 1); --nk-dur: 0.62s; } /* ── Scroll reveal ──────────────────────────────────────────────────────────── Elements start slightly low and transparent, then settle to `none` / `1` — both the design's own values, so the resting state is untouched. */ .nk-motion [data-nk-reveal] { opacity: 0; transform: translate3d(0, 20px, 0); will-change: opacity, transform; } .nk-motion [data-nk-reveal].nk-in { opacity: 1; transform: none; transition: opacity var(--nk-dur) var(--nk-ease), transform var(--nk-dur) var(--nk-ease); transition-delay: var(--nk-delay, 0s); } /* Drop the compositor hint once the element has landed. */ .nk-motion [data-nk-reveal].nk-done { will-change: auto; } /* Screenshots and the hero portrait get a touch more travel and a hair of scale, so they feel like they settle rather than just fade. */ .nk-motion [data-nk-reveal="media"] { transform: translate3d(0, 32px, 0) scale(0.985); } /* ── Hero ───────────────────────────────────────────────────────────────────── Runs on load rather than on scroll — it is already in view. */ .nk-motion [data-nk-hero] { opacity: 0; transform: translate3d(0, 22px, 0); } .nk-motion [data-nk-hero].nk-in { opacity: 1; transform: none; transition: opacity 0.7s var(--nk-ease), transform 0.7s var(--nk-ease); transition-delay: var(--nk-delay, 0s); } /* "Not a Dating App" — the strike is the whole positioning of the product, so it lands last, as its own beat. `text-decoration-color` is animatable, which means the native decoration is kept exactly as designed rather than faked with an overlay that would never settle to the same pixels. */ .nk-motion [data-nk-strike] { text-decoration-color: transparent !important; } .nk-motion [data-nk-strike].nk-in { text-decoration-color: rgba(166, 133, 255, 0.5) !important; transition: text-decoration-color 0.5s ease-out 0.15s; } /* ── Counters ───────────────────────────────────────────────────────────────── The research figures tick up when their row arrives. Tabular numerals stop the width jittering while the digits change. */ .nk-motion [data-nk-count] { font-variant-numeric: tabular-nums; } /* ── Hover polish ───────────────────────────────────────────────────────────── Additive only: the design's own :hover colours in styles.css still apply. */ .nk-motion a[href="#waitlist"], .nk-motion a[href^="http"] { transition: transform 0.18s var(--nk-ease), box-shadow 0.18s var(--nk-ease), background 0.16s ease; } .nk-motion a[href="#waitlist"]:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 6, 60, 0.24); } .nk-motion a[href="#waitlist"]:active { transform: translateY(0); transition-duration: 0.08s; } /* Footer social buttons. */ .nk-motion a[href^="http"][style*="border-radius: 50%"]:hover { transform: translateY(-3px); } /* Numbered rows and research rows lift their text slightly on hover, which makes the long lists feel responsive without adding any chrome. */ .nk-motion [data-nk-row] { transition: transform 0.22s var(--nk-ease); } .nk-motion [data-nk-row]:hover { transform: translateX(4px); } /* ── Header ─────────────────────────────────────────────────────────────────── Gains depth once the page scrolls under it. */ .nk-motion [data-nk-header] { transition: box-shadow 0.3s ease, background 0.3s ease; } /* Tuned for the white bar — a heavy dark shadow would look like a smudge. */ .nk-motion [data-nk-header].nk-stuck { box-shadow: 0 4px 20px rgba(23, 22, 28, 0.09); } /* ── Opt out ───────────────────────────────────────────────────────────────── Anyone who has asked their system for less motion gets the static page, with every element at its final value. */ @media (prefers-reduced-motion: reduce) { .nk-motion [data-nk-reveal], .nk-motion [data-nk-hero], .nk-motion [data-nk-reveal="media"] { opacity: 1 !important; transform: none !important; transition: none !important; } .nk-motion [data-nk-strike] { text-decoration-color: rgba(166, 133, 255, 0.5) !important; transition: none !important; } .nk-motion a[href="#waitlist"]:hover, .nk-motion a[href^="http"][style*="border-radius: 50%"]:hover, .nk-motion [data-nk-row]:hover { transform: none; } .nk-motion a[href="#waitlist"], .nk-motion [data-nk-row], .nk-motion [data-nk-header] { transition: none; } }