/** * RSI Toolkit — title reveal on scroll. * * A small fade + upward slide as each title enters view, once. Modelled on the * Apple product pages: short travel, soft ease-out, no bounce, no stagger. * * ── ⚠️ WHY EVERY RULE IS GATED ON html.rsi-anim ────────────────────────────── * * The hidden state is the STARTING state of an animation, which means a page * whose JavaScript never runs would show no titles at all — the worst possible * failure for a content site. So nothing here applies until a tiny inline * snippet in puts `rsi-anim` on , and that snippet also arms a * failsafe that strips the class again if the reveal script has not started * within a couple of seconds. No JS, blocked JS, or a 404 on the script all end * with plainly visible titles. * * The snippet has to be INLINE AND IN THE HEAD, not in the footer bundle: the * class must exist before first paint, or titles paint visible, then vanish, then * animate — a flash far more annoying than no animation. * * ── Why the selectors are listed rather than added by JS ───────────────────── * * Tempting to have JS tag the elements, but JS runs after first paint: the * titles would show, then hide. Listing them here means the initial paint is * already correct and JS only ever adds `.is-in`. */ /* * The two dials. Bigger travel over a longer duration is what makes Apple's * reveal read as clearly moving rather than merely appearing — the first pass * here used 14px/0.7s and was so restrained it was easy to miss. 32px is enough * to register as motion; the 0.95s duration is what keeps it unhurried, because * travelling further in the same time would feel snappy instead of smooth. */ :root { --rsi-anim-travel: 32px; --rsi-anim-duration: .95s; /* Ease-out, no overshoot: decelerate into place and stop. */ --rsi-anim-ease: cubic-bezier(.22, .61, .36, 1); } html.rsi-anim .rsi-hero-title, html.rsi-anim .rsi-hero-title__sub, html.rsi-anim .rsi-statement__label, html.rsi-anim .rsi-statement__text, html.rsi-anim .rsi-knowledge__title, html.rsi-anim .rsi-projects__title, html.rsi-anim .rsi-tst__heading, html.rsi-anim .rsi-contact__heading, html.rsi-anim .rsi-faq__heading, html.rsi-anim .rsi-careers__heading, html.rsi-anim .rsi-apply__heading, html.rsi-anim .rsi-media-card__title, html.rsi-anim .rsi-galaxy__heading, html.rsi-anim .rsi-initiatives__title, html.rsi-anim .rsi-ipro__title, html.rsi-anim .rsi-careers__job-title, html.rsi-anim .rsi-contact__name, html.rsi-anim .rsi-job__title, html.rsi-anim .rsi-job__apply-title, html.rsi-anim .rsi-coming-soon__title, /* Woodmart's own title widget. Several section headings on About, Achievements and Contact are wd_title rather than an RSI widget — "About Us", "Our Goal", "Our Vision", "Our Values" and their Arabic twins — so leaving it out meant those headings were the only ones on the page NOT reacting. Scoped inside .elementor so this only ever touches titles placed in page content, never the theme's own chrome. */ html.rsi-anim .elementor .woodmart-title-container.title { opacity: 0; transform: translateY(var(--rsi-anim-travel)); /* Painting hints, dropped again the moment the element settles. */ will-change: opacity, transform; } html.rsi-anim .rsi-hero-title.is-in, html.rsi-anim .rsi-hero-title__sub.is-in, html.rsi-anim .rsi-statement__label.is-in, html.rsi-anim .rsi-statement__text.is-in, html.rsi-anim .rsi-knowledge__title.is-in, html.rsi-anim .rsi-projects__title.is-in, html.rsi-anim .rsi-tst__heading.is-in, html.rsi-anim .rsi-contact__heading.is-in, html.rsi-anim .rsi-faq__heading.is-in, html.rsi-anim .rsi-careers__heading.is-in, html.rsi-anim .rsi-apply__heading.is-in, html.rsi-anim .rsi-media-card__title.is-in, html.rsi-anim .rsi-galaxy__heading.is-in, html.rsi-anim .rsi-initiatives__title.is-in, html.rsi-anim .rsi-ipro__title.is-in, html.rsi-anim .rsi-careers__job-title.is-in, html.rsi-anim .rsi-contact__name.is-in, html.rsi-anim .rsi-job__title.is-in, html.rsi-anim .rsi-job__apply-title.is-in, html.rsi-anim .rsi-coming-soon__title.is-in, html.rsi-anim .elementor .woodmart-title-container.title.is-in { opacity: 1; transform: none; /* The transition lives on the SETTLED state so it describes the way in and never fires on first paint. Opacity finishes earlier than the movement — the text is fully readable while it is still gliding the last few pixels, which is what stops a longer travel feeling slow. */ transition: opacity calc(var(--rsi-anim-duration) * .7) var(--rsi-anim-ease), transform var(--rsi-anim-duration) var(--rsi-anim-ease); will-change: auto; } /* * NOT animated, deliberately: .rsi-ms__title. Milestone cards already slide in * from their side of the spine, and animating the title inside an animating card * makes the text drift against its own background. */ /* * Belt and braces. anim.js strips the gate class outright under reduced motion, * so this only matters in the window before it runs — but that window is exactly * when a title would otherwise sit invisible. */ @media (prefers-reduced-motion: reduce) { html.rsi-anim [class*="rsi-"], html.rsi-anim .elementor .woodmart-title-container.title { opacity: 1 !important; transform: none !important; transition: none !important; } }