/* ==========================================================================
malikrahmouni.com — motion layer
--------------------------------------------------------------------------
Additive layer over the Pixieset "flex" theme. Nothing here edits the
vendored theme; every rule is scoped so that if motion.js never boots,
the site renders exactly as it did before.
Gating classes (added to ):
.mrx-ready set by the inline head script before first paint, removed
by a failsafe if motion.js never boots. ALL hiding depends
on it, so a JS failure can never leave the page blank.
.mrx-fx hover micro-interactions (CONFIG.microInteractions)
.mrx-hdr sticky hide-on-scroll header (CONFIG.stickyHeader)
Element ownership — deliberately kept apart so nothing fights:
.fb-element theme's rotate() — NEVER touched here
.fb-element__content reveal: opacity / translateY / clip-path
.fb-element-type-image hover zoom on linked images
.fb-element-type-image__img-wrapper reveal: scale
img...__img parallax only (inline, JS-owned)
========================================================================== */
:root {
/* Slow and confident — wedding photography is timeless, not urgent. */
--mrx-ease: cubic-bezier(0.16, 1, 0.3, 1);
--mrx-dur-text: 900ms;
--mrx-dur-image: 1100ms;
--mrx-dur-soft: 700ms;
--mrx-dur-grid: 900ms;
--mrx-delay: 0ms;
}
/* --------------------------------------------------------------------------
1. Scroll reveals
Only opacity / small transform / clip-path are used. The theme lazily
initialises its own components (menu, lightbox, image grids, back-to-top)
with IntersectionObserver, and those observers are purely geometric —
opacity and clip-path do not affect them, and a 24px shift is negligible
against their 100px rootMargin. visibility/display would break them.
-------------------------------------------------------------------------- */
html.mrx-ready [data-mrx] {
transition-delay: var(--mrx-delay, 0ms);
transition-timing-function: var(--mrx-ease);
}
/* text ------------------------------------------------------------------- */
html.mrx-ready [data-mrx="text"] {
transition-property: opacity, transform;
transition-duration: var(--mrx-dur-text);
}
html.mrx-ready [data-mrx="text"]:not([data-mrx-in]) {
opacity: 0;
transform: translateY(24px);
}
/* soft: buttons, shapes, lines, social links ------------------------------ */
html.mrx-ready [data-mrx="soft"] {
transition-property: opacity, transform;
transition-duration: var(--mrx-dur-soft);
}
html.mrx-ready [data-mrx="soft"]:not([data-mrx-in]) {
opacity: 0;
transform: translateY(16px);
}
/* image: the photograph is unveiled, not faded ---------------------------- */
html.mrx-ready [data-mrx="image"] {
transition-property: clip-path;
transition-duration: var(--mrx-dur-image);
}
html.mrx-ready [data-mrx="image"]:not([data-mrx-in]) {
clip-path: inset(0 0 100% 0);
}
html.mrx-ready [data-mrx="image"] .fb-element-type-image__img-wrapper {
transition: transform calc(var(--mrx-dur-image) * 1.15) var(--mrx-ease) var(--mrx-delay, 0ms);
}
html.mrx-ready [data-mrx="image"]:not([data-mrx-in]) .fb-element-type-image__img-wrapper {
transform: scale(1.08);
}
/* gallery grid items ------------------------------------------------------
The grid container ships inline opacity:0 and reveals itself after Masonry
settles — never touched here. Only its children animate, and only after
that reveal has happened. */
html.mrx-ready [data-mrx="grid"] {
transition-property: opacity, transform;
transition-duration: var(--mrx-dur-grid);
}
html.mrx-ready [data-mrx="grid"]:not([data-mrx-in]) {
opacity: 0;
transform: scale(1.06);
}
/* --------------------------------------------------------------------------
2. Parallax
JS writes the transform inline on the ![]()
. This element is reserved for
parallax alone so nothing else can clobber it.
-------------------------------------------------------------------------- */
html.mrx-ready img[data-mrx-parallax] {
will-change: auto;
}
html.mrx-ready img[data-mrx-parallax][data-mrx-active] {
will-change: transform;
}
/* --------------------------------------------------------------------------
3. Hover micro-interactions
NOTE: the theme ships