/* ────────────────────────────────────────────────────────────────────────── LELAM motion layer (Revision 1 — TKT-003 rows 4 / 5 / 6) • Animated on scroll → .lelam-reveal + .is-inview (added by lelam-motion.js) • "drift" for text → slow, short-distance travel with a long ease • "breathe" for image → hover lift + gentle scale, so the block rises All classes are usable from the block editor's "Additional CSS class(es)" field, so the client can apply them without touching code. Deliberately restrained: this is a luxury fashion site, so distances are short (20–32px), durations long (0.75–1.1s) and easing is soft. Everything switches off under prefers-reduced-motion. ────────────────────────────────────────────────────────────────────────── */ :root { --lelam-ease-drift: cubic-bezier(0.22, 0.61, 0.36, 1); --lelam-dur-drift: 0.95s; --lelam-dur-breathe: 0.75s; } /* ── Scroll reveal ───────────────────────────────────────────────────────── */ /* IMPORTANT — the hidden starting state is scoped to `html.lelam-motion`, a class set by a tiny inline script in . If JavaScript is unavailable or fails to run, that class is never added and every block simply renders normally. Content must never be left stranded at opacity 0. */ .lelam-motion .lelam-reveal { opacity: 0; transition: opacity var(--lelam-dur-drift) var(--lelam-ease-drift) var(--lelam-delay, 0ms), transform var(--lelam-dur-drift) var(--lelam-ease-drift) var(--lelam-delay, 0ms); will-change: opacity, transform; } .lelam-motion .lelam-reveal.is-inview { opacity: 1; transform: none; } /* Direction variants — "drift" is the text treatment the client asked for: the block eases in from a distance rather than popping. Distances were raised after the first review ("cần sửa thêm") so the movement actually reads on the About page instead of being almost imperceptible. */ .lelam-motion .lelam-reveal--drift-up { transform: translateY(46px); } .lelam-motion .lelam-reveal--drift-left { transform: translate3d(-58px, 20px, 0); } .lelam-motion .lelam-reveal--drift-right { transform: translate3d(58px, 20px, 0); } .lelam-motion .lelam-reveal--fade { transform: none; } /* Images travel less and scale in a touch — keeps the crop feeling stable. */ .lelam-motion .lelam-reveal--rise { transform: translateY(34px) scale(1.03); } /* ── Breathe (image blocks) ────────────────────────────────────────────────── Client's words: "Thêm hiệu ứng Breathe cho các khối ảnh để nó nổi lên khi hover" — the block should lift off the page on hover. The scale lives on the inside a fixed, overflow-hidden frame so the layout never shifts. */ /* The lift uses the standalone `translate` property, NOT `transform`. A block can carry both .lelam-reveal and .lelam-breathe (the About timeline images do). `.lelam-motion .lelam-reveal.is-inview` sets `transform: none` at specificity (0,3,0), which outranks `.lelam-breathe:hover` (0,2,0) — so a transform-based lift was silently cancelled on exactly those blocks: the shadow appeared but the block never moved. `translate` composes with `transform` instead of competing with it, so both effects coexist. */ .lelam-breathe { position: relative; overflow: hidden; transition: translate var(--lelam-dur-breathe) var(--lelam-ease-drift), box-shadow var(--lelam-dur-breathe) var(--lelam-ease-drift); will-change: translate; } .lelam-breathe img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--lelam-ease-drift); will-change: transform; } /* The lift. Raised after the first review — the client wants the hovered block to clearly come off the page ("nổi lên khi hover"), so the rise, the shadow and the inner zoom are all stronger than the first pass. */ .lelam-breathe:hover, .lelam-breathe:focus-within { translate: 0 -12px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22); } .lelam-breathe:hover img, .lelam-breathe:focus-within img { transform: scale(1.07); } /* A .lelam-breathe applied to a core/image block: strip the figure's own margins so the frame hugs the picture. */ .wp-block-image.lelam-breathe, .wp-block-image.lelam-breathe figure { margin: 0; } /* ── Reduced motion ──────────────────────────────────────────────────────── */ /* Reduced motion means reduce MOVEMENT — not remove the feedback altogether. The first version switched the whole hover off, including the shadow, so on a machine with Windows animations disabled the images looked completely inert. Now the block still lights up on hover (shadow), it just doesn't travel or zoom. Scroll-reveal still resolves instantly to the final state. */ @media (prefers-reduced-motion: reduce) { .lelam-motion .lelam-reveal, .lelam-motion .lelam-reveal.is-inview { opacity: 1; transform: none; transition: none; } /* No travel, no zoom … */ .lelam-breathe, .lelam-breathe:hover, .lelam-breathe:focus-within { translate: none; transform: none; } .lelam-breathe img, .lelam-breathe:hover img, .lelam-breathe:focus-within img { transform: none; } /* … but keep the hover affordance itself. A shadow is not motion. */ .lelam-breathe { transition: box-shadow 0.2s ease; } .lelam-breathe:hover, .lelam-breathe:focus-within { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24); } }