react-motion-gallery 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +1029 -29
  2. package/dist/chunk-2AHLR3V4.mjs +1 -0
  3. package/dist/chunk-2UHS4WYL.mjs +5 -0
  4. package/dist/chunk-3HPXMD5O.mjs +10 -0
  5. package/dist/chunk-4JEELX5B.mjs +2 -0
  6. package/dist/chunk-A6MPGIEJ.mjs +1 -0
  7. package/dist/chunk-ESF6XBYF.mjs +1 -0
  8. package/dist/chunk-EV6ZK4QI.mjs +1 -0
  9. package/dist/chunk-H4BEIJAD.mjs +5 -0
  10. package/dist/chunk-HL75KJY3.mjs +2 -0
  11. package/dist/chunk-JYKEA7LO.mjs +1 -0
  12. package/dist/chunk-KA2TOUNO.mjs +59 -0
  13. package/dist/chunk-LPIHQAND.mjs +1 -0
  14. package/dist/chunk-LVYED5ZM.mjs +1 -0
  15. package/dist/chunk-NKBEYOBF.mjs +1 -0
  16. package/dist/chunk-P2GQPFSL.mjs +1 -0
  17. package/dist/chunk-TZGAHWM7.mjs +1 -0
  18. package/dist/chunk-UYTKRIYQ.mjs +1 -0
  19. package/dist/chunk-V35ILQJ4.mjs +4 -0
  20. package/dist/chunk-X4HEGEZV.mjs +1 -0
  21. package/dist/chunk-XO5LPPN6.mjs +2 -0
  22. package/dist/core.d.mts +86 -0
  23. package/dist/core.mjs +1 -0
  24. package/dist/elements-Bd1vm4Uk.d.mts +37 -0
  25. package/dist/entries.css +1 -0
  26. package/dist/entries.d.mts +77 -0
  27. package/dist/entries.mjs +1 -0
  28. package/dist/fullscreen.css +1 -0
  29. package/dist/fullscreen.d.mts +281 -0
  30. package/dist/fullscreen.mjs +1 -0
  31. package/dist/fullscreenThumbnails.css +1 -0
  32. package/dist/fullscreenThumbnails.d.mts +10 -0
  33. package/dist/fullscreenThumbnails.mjs +1 -0
  34. package/dist/grid.css +1 -0
  35. package/dist/grid.d.mts +126 -0
  36. package/dist/grid.mjs +1 -0
  37. package/dist/index-Bpj0ZM8C.d.mts +38 -0
  38. package/dist/index.css +1 -1
  39. package/dist/index.d.mts +23 -1164
  40. package/dist/index.mjs +1 -65
  41. package/dist/lazy-dGoYpcRa.d.mts +14 -0
  42. package/dist/masonry.css +1 -0
  43. package/dist/masonry.d.mts +73 -0
  44. package/dist/masonry.mjs +1 -0
  45. package/dist/media-moIXOhT1.d.mts +36 -0
  46. package/dist/metafile-esm.json +1 -1
  47. package/dist/plyrTypes-CmP9NWvX.d.mts +8 -0
  48. package/dist/responsive-CvE5dTnP.d.mts +5 -0
  49. package/dist/slider.css +1 -0
  50. package/dist/slider.d.mts +80 -0
  51. package/dist/slider.mjs +1 -0
  52. package/dist/sliderSub-DNikv2lm.d.mts +76 -0
  53. package/dist/thumbnails.css +1 -0
  54. package/dist/thumbnails.d.mts +68 -0
  55. package/dist/thumbnails.mjs +1 -0
  56. package/dist/types-Bi2iBbyG.d.mts +85 -0
  57. package/dist/types-CQ6I3EfZ.d.mts +109 -0
  58. package/dist/types-ChjyCquV.d.mts +158 -0
  59. package/dist/types-Dqm2ynv2.d.mts +262 -0
  60. package/dist/video.css +1 -0
  61. package/dist/video.d.mts +38 -0
  62. package/dist/video.mjs +1 -0
  63. package/package.json +34 -14
@@ -0,0 +1,77 @@
1
+ export { D as DEFAULT_ENTRIES, E as Entries, a as EntriesMediaContainerRender, b as EntriesProps, E as default, f as flattenEntries, n as nodeFromMediaDefault } from './index-Bpj0ZM8C.mjs';
2
+ import { E as EntriesOptions } from './types-ChjyCquV.mjs';
3
+ export { g as EntriesLoadingOptions, e as EntryCardRenderArgs, a as EntryItem, d as EntryMediaLayout, b as EntryMediaRenderArgs, c as EntryOverlayRenderArgs, h as EntrySkeletonRenderArgs, f as EntrySkeletonResolverArgs, I as IntroOptions, M as MediaEntryLink, S as SlideOwner } from './types-ChjyCquV.mjs';
4
+ import * as React from 'react';
5
+ import * as react_jsx_runtime from 'react/jsx-runtime';
6
+ import { M as MediaItem } from './media-moIXOhT1.mjs';
7
+ import { a as SliderHandle } from './types-Dqm2ynv2.mjs';
8
+ import './elements-Bd1vm4Uk.mjs';
9
+ import './responsive-CvE5dTnP.mjs';
10
+ import './sliderSub-DNikv2lm.mjs';
11
+
12
+ type UseEntryInViewOpts = IntersectionObserverInit & {
13
+ nearMargin?: string;
14
+ viewMargin?: string;
15
+ };
16
+ declare function useEntryInView(len: number, opts?: UseEntryInViewOpts): {
17
+ nearView: boolean[];
18
+ everInView: boolean[];
19
+ setEntryRef: (index: number) => (node: HTMLElement | null) => void;
20
+ };
21
+
22
+ type EntryLike = {
23
+ key?: string;
24
+ id?: string;
25
+ media?: Array<{
26
+ kind?: string;
27
+ src?: string;
28
+ }>;
29
+ };
30
+ declare function useEntryDecodeReady(enabled: boolean, entries: EntryLike[] | undefined, inView: boolean[], opts?: {
31
+ timeoutMs?: number;
32
+ }): {
33
+ decodedReady: boolean[];
34
+ entriesKey: string;
35
+ };
36
+
37
+ declare function useNormalizedEntriesLoading(entries: EntriesOptions): {
38
+ enabled: any;
39
+ force: any;
40
+ skeleton: any;
41
+ minHeight: string;
42
+ nearMargin: any;
43
+ viewMargin: any;
44
+ threshold: any;
45
+ waitForDecode: boolean;
46
+ decodeTimeoutMs: any;
47
+ skeletonWrap: any;
48
+ };
49
+ declare function useNormalizedEntriesIntro(entries: EntriesOptions): {
50
+ renderIntro: ((args: {
51
+ active: boolean;
52
+ containerProps: React.HTMLAttributes<HTMLDivElement>;
53
+ }, content: React.ReactNode) => React.ReactNode) | undefined;
54
+ staggerMs: number;
55
+ durationMs: number;
56
+ easing: string;
57
+ staggerLimit: number;
58
+ };
59
+
60
+ type Props = {
61
+ enabled: boolean;
62
+ entries: EntriesOptions;
63
+ fsEnabled: boolean;
64
+ openFullscreenAt: (globalIndex: number, originEl?: HTMLElement | null) => void;
65
+ entryFlatIndexRef: React.RefObject<number[][] | null>;
66
+ nodeFromMedia: (m: MediaItem) => React.ReactNode;
67
+ renderMediaContainer: (args: {
68
+ entryIndex: number;
69
+ mediaNodes: React.ReactNode[];
70
+ entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
71
+ }) => React.ReactNode;
72
+ registerExpandableImage?: (globalIndex: number, node: HTMLImageElement | HTMLVideoElement | null) => void;
73
+ entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
74
+ };
75
+ declare function EntryList({ enabled, entries, fsEnabled, openFullscreenAt, entryFlatIndexRef, nodeFromMedia, renderMediaContainer, registerExpandableImage, entrySliderRefs, }: Props): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
76
+
77
+ export { EntriesOptions, EntryList, type UseEntryInViewOpts, useEntryDecodeReady, useEntryInView, useNormalizedEntriesIntro, useNormalizedEntriesLoading };
@@ -0,0 +1 @@
1
+ export{a as DEFAULT_ENTRIES,i as Entries,f as EntryList,i as default,h as flattenEntries,g as nodeFromMediaDefault,c as useEntryDecodeReady,b as useEntryInView,e as useNormalizedEntriesIntro,d as useNormalizedEntriesLoading}from'./chunk-XO5LPPN6.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
@@ -0,0 +1 @@
1
+ .track{position:relative;left:0}.rtl .track{left:auto;right:0}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3;animation:rmgSpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}@keyframes rmgSpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:calc(var(--rmg-fs-z, 9999) - 1);transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1);will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 2)}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1)}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}
@@ -0,0 +1,281 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import React__default from 'react';
4
+ import { M as MediaItem } from './media-moIXOhT1.mjs';
5
+ import { E as ElementStyle } from './elements-Bd1vm4Uk.mjs';
6
+ import { a as FullscreenOpenMethod$1, F as FullscreenOpenRequest } from './sliderSub-DNikv2lm.mjs';
7
+ export { G as GalleryApi, I as IndexMode } from './sliderSub-DNikv2lm.mjs';
8
+ import { P as PlyrSourceBuilder, a as PlyrOptionsBuilder } from './plyrTypes-CmP9NWvX.mjs';
9
+ import { a as FullscreenThumbnailBridge } from './types-CQ6I3EfZ.mjs';
10
+ import { S as SliderOptions } from './types-Dqm2ynv2.mjs';
11
+ import './responsive-CvE5dTnP.mjs';
12
+ import './types-Bi2iBbyG.mjs';
13
+
14
+ type FsCounterArgs = {
15
+ index: number;
16
+ count: number;
17
+ };
18
+ type FsCaptionPlacement = "top" | "right" | "bottom" | "left";
19
+ type FsIntroRequest = null | {
20
+ originalImage: HTMLImageElement | null;
21
+ index: number;
22
+ method: FullscreenOpenMethod$1;
23
+ closestSelector?: string;
24
+ };
25
+ /**
26
+ * Custom fullscreen image renderers must output a real DOM `<img>` somewhere in
27
+ * the returned tree so zoom, pinch, pan, and close transitions can resolve the
28
+ * primary active image element. Wrapped renderers such as `next/image` are
29
+ * supported, but the wrapper should act as layout scaffolding instead of
30
+ * shrinking the fullscreen media surface on both axes or forcing the inner
31
+ * image itself to behave like a full-bleed fill box.
32
+ *
33
+ * When this callback is provided and `fullscreen.lazyLoad.images.enabled` is
34
+ * `false`, the renderer owns loading, placeholders, and image optimization
35
+ * behavior exactly as usual.
36
+ *
37
+ * When this callback is provided and `fullscreen.lazyLoad.images.enabled` is
38
+ * `true`, the built-in fullscreen lazy/decode/spinner pipeline waits on the
39
+ * primary descendant DOM `<img>`. Custom placeholders or spinners inside the
40
+ * renderer may still be visible beneath the built-in fullscreen spinner once
41
+ * the renderer mounts.
42
+ */
43
+ type FSImageRender = (args: {
44
+ item: Extract<MediaItem, {
45
+ kind: "image";
46
+ }>;
47
+ index: number;
48
+ isZoomed: boolean;
49
+ className: string;
50
+ baseStyle: React.CSSProperties;
51
+ }) => React.ReactNode;
52
+ type FullscreenArrows = {
53
+ enabled?: boolean;
54
+ arrow?: ElementStyle;
55
+ prev?: ElementStyle;
56
+ next?: ElementStyle;
57
+ render?: (args: {
58
+ dir: "prev" | "next";
59
+ }) => React.ReactNode;
60
+ renderPrev?: () => React.ReactNode;
61
+ renderNext?: () => React.ReactNode;
62
+ };
63
+ type FullscreenClose = {
64
+ enabled?: boolean;
65
+ style?: React.CSSProperties;
66
+ className?: string;
67
+ render?: () => React.ReactNode;
68
+ };
69
+ type FullscreenCounter = {
70
+ enabled?: boolean;
71
+ style?: React.CSSProperties;
72
+ className?: string;
73
+ render?: (args: FsCounterArgs) => React.ReactNode;
74
+ };
75
+ type FullscreenControlsOptions = {
76
+ close?: FullscreenClose;
77
+ arrows?: FullscreenArrows;
78
+ counter?: FullscreenCounter;
79
+ };
80
+ type FsCaptionRenderArgs = {
81
+ item: MediaItem;
82
+ index: number;
83
+ isZoomed: boolean;
84
+ };
85
+ type FullscreenCaptionOptions = {
86
+ className?: string;
87
+ style?: React.CSSProperties;
88
+ placement?: FsCaptionPlacement;
89
+ width?: number;
90
+ height?: number;
91
+ breakpoint?: number;
92
+ render?: (args: FsCaptionRenderArgs) => React.ReactNode;
93
+ };
94
+ type FullscreenEffectsOptions = {
95
+ introDuration?: number;
96
+ introEasing?: string;
97
+ introFade?: boolean;
98
+ slideFade?: boolean;
99
+ slideFadeDuration?: number;
100
+ slideFadeEasing?: string;
101
+ };
102
+ type FullscreenSliderOptions = {
103
+ duration?: number;
104
+ friction?: number;
105
+ };
106
+ type FullscreenZoomPanOptions = {
107
+ clickZoomLevel?: number;
108
+ maxZoomLevel?: number;
109
+ panDuration?: number;
110
+ panFriction?: number;
111
+ };
112
+ type FullscreenVideoOptions = {
113
+ source?: PlyrSourceBuilder;
114
+ options?: PlyrOptionsBuilder;
115
+ style?: React.CSSProperties;
116
+ className?: string;
117
+ };
118
+ type FullscreenLazyLoadKind = "image" | "video";
119
+ type FullscreenLazyLoadArgs = {
120
+ kind: FullscreenLazyLoadKind;
121
+ isClone?: boolean;
122
+ };
123
+ type FullscreenLazyLoadConfig = {
124
+ enabled?: boolean;
125
+ spinner?: boolean | React.ReactNode | ((args: FullscreenLazyLoadArgs) => React.ReactNode);
126
+ spinnerClassName?: string;
127
+ spinnerStyle?: React.CSSProperties;
128
+ };
129
+ type FullscreenLazyLoadOptions = {
130
+ images?: FullscreenLazyLoadConfig;
131
+ videos?: FullscreenLazyLoadConfig;
132
+ };
133
+ type FullscreenOptions = {
134
+ enabled?: boolean;
135
+ items?: MediaItem[] | string[];
136
+ renderImage?: FSImageRender;
137
+ video?: FullscreenVideoOptions;
138
+ controls?: FullscreenControlsOptions;
139
+ caption?: FullscreenCaptionOptions;
140
+ slider?: FullscreenSliderOptions;
141
+ zoom?: FullscreenZoomPanOptions;
142
+ effects?: FullscreenEffectsOptions;
143
+ lazyLoad?: FullscreenLazyLoadOptions;
144
+ };
145
+
146
+ type FullscreenOpenMethod = "fade" | "scale";
147
+ type UseFullscreenArgs = {
148
+ fullscreen?: FullscreenOptions;
149
+ slider?: SliderOptions;
150
+ sliderObject: any;
151
+ cellsStateLength: number;
152
+ };
153
+ declare function useFullscreenController(args: UseFullscreenArgs): {
154
+ fs: {
155
+ slider: {
156
+ duration: number;
157
+ friction: number;
158
+ };
159
+ zoom: {
160
+ clickZoomLevel: number;
161
+ maxZoomLevel: number;
162
+ panDuration: number;
163
+ panFriction: number;
164
+ };
165
+ effects: {
166
+ introDuration: number;
167
+ introEasing: string;
168
+ introFade: boolean;
169
+ slideFade: boolean;
170
+ slideFadeDuration: number;
171
+ slideFadeEasing: string;
172
+ thumbnailsFadeDuration?: number;
173
+ thumbnailsFadeEasing?: string;
174
+ };
175
+ controls: {
176
+ close?: FullscreenClose;
177
+ arrows?: FullscreenArrows;
178
+ counter?: FullscreenCounter;
179
+ };
180
+ caption: {
181
+ className?: string;
182
+ style?: React__default.CSSProperties;
183
+ placement?: FsCaptionPlacement;
184
+ width?: number;
185
+ height?: number;
186
+ breakpoint?: number;
187
+ render?: (args: FsCaptionRenderArgs) => React__default.ReactNode;
188
+ };
189
+ enabled: boolean;
190
+ items?: MediaItem[] | string[];
191
+ renderImage?: FSImageRender;
192
+ video?: FullscreenVideoOptions;
193
+ lazyLoad?: FullscreenLazyLoadOptions;
194
+ thumbnails?: unknown;
195
+ };
196
+ fullscreenNode: react_jsx_runtime.JSX.Element | null;
197
+ fullscreenThumbnailBridge: FullscreenThumbnailBridge;
198
+ openFullscreenAt: (source: FullscreenOpenRequest["source"], gridIndex: number, originEl?: HTMLElement | null, requestedMethod?: FullscreenOpenMethod) => void;
199
+ isClick: React__default.RefObject<boolean>;
200
+ expandableImageRefs: React__default.RefObject<(HTMLImageElement | null)[]>;
201
+ overlayDivRef: React__default.RefObject<HTMLDivElement | null>;
202
+ duplicateImgRef: React__default.RefObject<HTMLElement | null>;
203
+ closeButtonRef: React__default.RefObject<HTMLElement | null>;
204
+ counterRef: React__default.RefObject<HTMLElement | null>;
205
+ leftChevronRef: React__default.RefObject<HTMLElement | null>;
206
+ rightChevronRef: React__default.RefObject<HTMLElement | null>;
207
+ sliderForFullscreen: React__default.RefObject<HTMLDivElement | null>;
208
+ slidesForFullscreen: React__default.RefObject<{
209
+ cells: {
210
+ element: HTMLElement;
211
+ index: number;
212
+ }[];
213
+ target: number;
214
+ }[]>;
215
+ visibleImagesForFullscreen: React__default.RefObject<number>;
216
+ selectedIndexForFullscreen: React__default.RefObject<number>;
217
+ sliderXForFullscreen: React__default.RefObject<number>;
218
+ sliderVelocityForFullscreen: React__default.RefObject<number>;
219
+ isWrappingForFullscreen: React__default.RefObject<boolean>;
220
+ fsThumbContainerRef: React__default.RefObject<HTMLDivElement | null>;
221
+ cells: React__default.RefObject<{
222
+ element: HTMLElement;
223
+ index: number;
224
+ }[]>;
225
+ setSlideIndex: React__default.Dispatch<React__default.SetStateAction<number>>;
226
+ setShowFullscreenModal: React__default.Dispatch<React__default.SetStateAction<boolean>>;
227
+ setShowFullscreenSlider: React__default.Dispatch<React__default.SetStateAction<boolean>>;
228
+ setFsFadeOpening: React__default.Dispatch<React__default.SetStateAction<boolean>>;
229
+ showFullscreenModal: boolean;
230
+ showFullscreenSlider: boolean;
231
+ fsFadeOpening: boolean;
232
+ closingModal: boolean;
233
+ };
234
+
235
+ declare const DEFAULT_FULLSCREEN: {
236
+ readonly enabled: false;
237
+ readonly controls: {
238
+ readonly close: {
239
+ readonly enabled: true;
240
+ readonly style: {};
241
+ readonly className: "";
242
+ readonly render: undefined;
243
+ };
244
+ readonly arrows: {
245
+ readonly enabled: true;
246
+ readonly arrow: {};
247
+ readonly prev: {};
248
+ readonly next: {};
249
+ readonly render: undefined;
250
+ readonly renderPrev: undefined;
251
+ readonly renderNext: undefined;
252
+ };
253
+ readonly counter: {
254
+ readonly enabled: true;
255
+ readonly style: {};
256
+ readonly className: "";
257
+ readonly render: undefined;
258
+ };
259
+ };
260
+ readonly effects: {
261
+ readonly introDuration: 300;
262
+ readonly introEasing: "cubic-bezier(.4,0,.22,1)";
263
+ readonly introFade: false;
264
+ readonly slideFade: false;
265
+ readonly slideFadeDuration: 120;
266
+ readonly slideFadeEasing: "cubic-bezier(.4,0,.22,1)";
267
+ };
268
+ readonly slider: {
269
+ readonly duration: 25;
270
+ readonly friction: 0.68;
271
+ };
272
+ readonly zoom: {
273
+ readonly clickZoomLevel: 2.5;
274
+ readonly maxZoomLevel: 3;
275
+ readonly panDuration: 43;
276
+ readonly panFriction: 0.68;
277
+ };
278
+ readonly caption: {};
279
+ };
280
+
281
+ export { DEFAULT_FULLSCREEN, type FsCaptionPlacement, type FsIntroRequest, type FullscreenOptions, useFullscreenController };
@@ -0,0 +1 @@
1
+ export{a as DEFAULT_FULLSCREEN,b as useFullscreenController}from'./chunk-3HPXMD5O.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-LPIHQAND.mjs';import'./chunk-JYKEA7LO.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-2AHLR3V4.mjs';
@@ -0,0 +1 @@
1
+ .thumbShell{position:relative}.thumbContentLayer{position:relative;z-index:1}.thumbContentBlocked{pointer-events:none}.thumbLoadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.thumbLoadingLayerExit{opacity:0}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgThumbShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes rmgThumbShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.thumbLoadingLayer{transition:none}}.thumb{position:relative;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}
@@ -0,0 +1,10 @@
1
+ import React__default from 'react';
2
+ import { b as FullscreenThumbnailSliderProps } from './types-CQ6I3EfZ.mjs';
3
+ export { F as FSItem, a as FullscreenThumbnailBridge, c as FullscreenThumbnailSlotLayout } from './types-CQ6I3EfZ.mjs';
4
+ import './responsive-CvE5dTnP.mjs';
5
+ import './types-Bi2iBbyG.mjs';
6
+ import './elements-Bd1vm4Uk.mjs';
7
+
8
+ declare function FullscreenThumbnailSlider({ bridge, items, position, containerClassName, containerStyle, thumbnailWidth, thumbnailHeight, thumbnailsCenter, thumbnailsContainerWidth, thumbnailsContainerHeight, fadeDurationMs, fadeEasing, thumbnailItemClassName, thumbnailItemStyle, gap, freeScroll, groupCells, loop, skipSnaps, centerActiveThumb, selectDuration, freeScrollDuration, sliderFriction, breakpointMap, rippleEnabled, rippleClassName, showArrows, arrowStyles, arrowClassName, prevArrowStyles, prevArrowClassName, nextArrowStyles, nextArrowClassName, renderArrows, renderPrevArrow, renderNextArrow }: FullscreenThumbnailSliderProps): React__default.ReactPortal | null;
9
+
10
+ export { FullscreenThumbnailSlider, FullscreenThumbnailSliderProps, FullscreenThumbnailSlider as default };
@@ -0,0 +1 @@
1
+ export{a as FullscreenThumbnailSlider,a as default}from'./chunk-V35ILQJ4.mjs';import'./chunk-2UHS4WYL.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-H4BEIJAD.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
package/dist/grid.css ADDED
@@ -0,0 +1 @@
1
+ .gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridShell{display:grid;position:relative;width:100%}.gridContentLayer,.gridLoadingLayer{grid-area:1 / 1;min-width:0}.gridContentLayer{position:relative;z-index:1}.gridContentBlocked{pointer-events:none}.gridLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.gridLoadingLayerExit{opacity:0}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}.gridLoadingLayer{transition:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.gridItem:focus-visible{outline:2px solid #0066cc;outline-offset:2px;border-radius:4px}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@@ -0,0 +1,126 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React$1 from 'react';
3
+ import { R as ResponsiveNumber, a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
4
+ import { G as GalleryLazyLoadOptions } from './lazy-dGoYpcRa.mjs';
5
+
6
+ type SkeletonLength = number | string;
7
+ type SkeletonShimmer = {
8
+ enabled?: boolean;
9
+ durationMs?: number;
10
+ angleDeg?: number;
11
+ opacity?: number;
12
+ blurPx?: number;
13
+ timing?: string;
14
+ c1?: string;
15
+ c2?: string;
16
+ c3?: string;
17
+ };
18
+ type SkeletonBaseStyle = {
19
+ width?: SkeletonLength;
20
+ maxWidth?: SkeletonLength;
21
+ height?: SkeletonLength;
22
+ maxHeight?: SkeletonLength;
23
+ backgroundColor?: string;
24
+ borderRadius?: SkeletonLength;
25
+ marginTop?: SkeletonLength;
26
+ marginRight?: SkeletonLength;
27
+ marginBottom?: SkeletonLength;
28
+ marginLeft?: SkeletonLength;
29
+ alignSelf?: React$1.CSSProperties["alignSelf"];
30
+ aspectRatio?: SkeletonLength;
31
+ };
32
+ type SkeletonContainerStyle = {
33
+ gap?: SkeletonLength;
34
+ padding?: SkeletonLength;
35
+ align?: React$1.CSSProperties["alignItems"];
36
+ justify?: React$1.CSSProperties["justifyContent"];
37
+ wrap?: boolean;
38
+ width?: SkeletonLength;
39
+ maxWidth?: SkeletonLength;
40
+ };
41
+ type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
42
+ type GridSkeletonNode = {
43
+ kind: "grid";
44
+ style?: SkeletonContainerStyleResponsive;
45
+ count?: number;
46
+ item: SkeletonNode;
47
+ itemWrapStyle?: SkeletonBaseStyle;
48
+ } | SkeletonNode;
49
+ type SkeletonNode = {
50
+ kind: "stack" | "row" | "col";
51
+ style?: SkeletonContainerStyleResponsive;
52
+ children: SkeletonNode[];
53
+ } | {
54
+ kind: "rect" | "square" | "circle";
55
+ style?: SkeletonBaseStyle;
56
+ shimmer?: SkeletonShimmer;
57
+ } | {
58
+ kind: "media";
59
+ count: number;
60
+ direction?: "row" | "col";
61
+ style?: SkeletonContainerStyleResponsive;
62
+ tile?: {
63
+ shape?: "rect" | "square" | "circle";
64
+ style?: SkeletonBaseStyle;
65
+ shimmer?: SkeletonShimmer;
66
+ };
67
+ } | {
68
+ kind: "text";
69
+ fontSize: number;
70
+ lineHeight: number;
71
+ lines?: number;
72
+ style?: SkeletonBaseStyle;
73
+ shimmer?: SkeletonShimmer;
74
+ };
75
+ type GridSkeletonSpec = {
76
+ className?: string;
77
+ layout?: GridSkeletonNode;
78
+ backgroundColor?: string;
79
+ radius?: SkeletonLength;
80
+ shimmer?: SkeletonShimmer;
81
+ };
82
+
83
+ type LoadingOptions = {
84
+ enabled?: boolean;
85
+ force?: boolean;
86
+ renderLoading?: (args: {
87
+ count: number;
88
+ }) => React.ReactNode;
89
+ skeleton?: GridSkeletonSpec;
90
+ };
91
+ type IntroOptions = {
92
+ renderIntro?: (args: {
93
+ active: boolean;
94
+ containerProps: React.HTMLAttributes<HTMLDivElement>;
95
+ }, content: React.ReactNode) => React.ReactNode;
96
+ staggerMs?: number;
97
+ transform?: string;
98
+ durationMs?: number;
99
+ easing?: string;
100
+ staggerLimit?: number;
101
+ };
102
+ type FullscreenTrigger = 'item' | 'media';
103
+ type GridLazyLoadOptions = GalleryLazyLoadOptions;
104
+ type GridOptions = {
105
+ columns?: ResponsiveNumber;
106
+ minColumnWidth?: number | string;
107
+ gap?: ResponsiveNumber;
108
+ rootClassName?: string;
109
+ itemClassName?: string;
110
+ fullscreenTrigger?: FullscreenTrigger;
111
+ lazyLoad?: GridLazyLoadOptions;
112
+ loading?: LoadingOptions;
113
+ intro?: IntroOptions;
114
+ };
115
+
116
+ type Props = GridOptions & {
117
+ children?: React$1.ReactNode;
118
+ breakpoints?: BreakpointMap;
119
+ gridItemBaseClass?: string;
120
+ renderMode?: "wrap" | "passthrough";
121
+ };
122
+ declare function GridLayoutRuntime(props: Props): react_jsx_runtime.JSX.Element;
123
+
124
+ declare const DEFAULT_GRID: Required<Pick<GridOptions, "minColumnWidth" | "gap">>;
125
+
126
+ export { DEFAULT_GRID, GridLayoutRuntime as Grid, type GridLazyLoadOptions, type GridOptions, GridLayoutRuntime as default };
package/dist/grid.mjs ADDED
@@ -0,0 +1 @@
1
+ export{a as DEFAULT_GRID,b as Grid,b as default}from'./chunk-4JEELX5B.mjs';import'./chunk-A6MPGIEJ.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
@@ -0,0 +1,38 @@
1
+ import { E as EntriesOptions, M as MediaEntryLink, S as SlideOwner, a as EntryItem } from './types-ChjyCquV.mjs';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import * as React from 'react';
4
+ import { M as MediaItem } from './media-moIXOhT1.mjs';
5
+ import { a as SliderHandle } from './types-Dqm2ynv2.mjs';
6
+
7
+ declare const DEFAULT_ENTRIES: Required<Pick<EntriesOptions, "mediaLayout">>;
8
+
9
+ type EntriesMediaContainerRender = (args: {
10
+ entryIndex: number;
11
+ mediaNodes: React.ReactNode[];
12
+ entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
13
+ }) => React.ReactNode;
14
+ type FullscreenItemsInput = MediaItem[] | string[];
15
+ declare function nodeFromMediaDefault(m: MediaItem): React.ReactNode;
16
+ declare function flattenEntries(items: EntryItem[] | undefined): {
17
+ flattenedMedia: MediaItem[];
18
+ flattenedMap: MediaEntryLink[];
19
+ entryFlatIndex: number[][] | null;
20
+ owners: SlideOwner[];
21
+ };
22
+ type EntriesProps = {
23
+ enabled?: boolean;
24
+ entries: EntriesOptions;
25
+ fullscreen?: {
26
+ enabled?: boolean;
27
+ items?: FullscreenItemsInput;
28
+ };
29
+ renderMediaContainer: EntriesMediaContainerRender;
30
+ nodeFromMedia?: (m: MediaItem) => React.ReactNode;
31
+ entryFlatIndexRef?: React.RefObject<number[][] | null>;
32
+ entryMapRef?: React.RefObject<MediaEntryLink[] | null>;
33
+ fsOwnersRef?: React.RefObject<SlideOwner[]>;
34
+ entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
35
+ };
36
+ declare function Entries(props: EntriesProps): react_jsx_runtime.JSX.Element;
37
+
38
+ export { DEFAULT_ENTRIES as D, Entries as E, type EntriesMediaContainerRender as a, type EntriesProps as b, flattenEntries as f, nodeFromMediaDefault as n };
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .15s linear;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:calc(var(--rmg-entry-intro-index, 0) * var(--rmg-entry-intro-stagger, .2s))}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkeletonTile{width:100%;height:100%;overflow:hidden}.entrySkeletonShimmer{position:relative;overflow:hidden;border-radius:inherit;--rmg-shimmer-c1: #f0f2f5;--rmg-shimmer-c2: #e6e9ef;--rmg-shimmer-c3: #f0f2f5;--rmg-shimmer-size: 400% 100%;--rmg-shimmer-duration: 1.2s;--rmg-shimmer-timing: linear;background:linear-gradient(90deg,var(--rmg-shimmer-c1) 25%,var(--rmg-shimmer-c2) 37%,var(--rmg-shimmer-c3) 63%);background-size:var(--rmg-shimmer-size);animation:rmgShimmer var(--rmg-shimmer-duration) infinite var(--rmg-shimmer-timing)}.entrySkelRoot{--rmg-skel-bg: rgba(0, 0, 0, .08);--rmg-skel-hi: rgba(0, 0, 0, .12);--rmg-skel-radius: 12px;--rmg-skel-shimmer-enabled: 1;--rmg-skel-shimmer-duration: 1.2s;--rmg-skel-shimmer-band: 40%;--rmg-skel-shimmer-angle: 25deg;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;position:relative;display:block;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;opacity:calc(var(--rmg-skel-shimmer-enabled) * 1);transform:rotate(var(--rmg-skel-shimmer-angle));background:linear-gradient(90deg,transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .18)) 50%,transparent 100%);width:var(--rmg-skel-shimmer-band);inset:-40% -40% -40% -60%;animation:rmg-skel-shimmer var(--rmg-skel-shimmer-duration) linear infinite}@keyframes rmg-skel-shimmer{0%{left:-60%}to{left:160%}}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.thumb{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.thumb :global(img){display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:8999;transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:9998;will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.22,1);z-index:2147483602}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:9999}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.track{position:relative;left:0}.rtl .track{left:auto;right:0}.slider_container,.fade_container{height:100%;min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.viewport{overflow:hidden;height:100%;width:100%;position:relative}.track{position:relative;height:100%;width:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;width:100%;container-type:inline-size;height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));max-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;border-radius:var(--rmg-shimmer-radius, 10px);overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:.5rem}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block;cursor:pointer}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * 1);background:linear-gradient(var(--rmg-skel-shimmer-angle, 25deg),transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .16)) 50%,transparent 100%);transform:translate(-120%);animation:rmg_grid_skel_shimmer var(--rmg-skel-shimmer-duration, 1.2s) linear infinite;background-size:var(--rmg-skel-shimmer-band, 40%) 100%}@keyframes rmg_grid_skel_shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block;cursor:pointer}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}
1
+ .entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .22s ease;transition-delay:0ms;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkelRoot{--rmg-skel-radius: 12px;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;width:100%;height:100%;position:relative;display:block;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}.track{position:relative;left:0}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:calc(var(--rmg-fs-z, 9999) - 1);transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1);will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 2)}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1)}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.thumbShell{position:relative}.thumbContentLayer{position:relative;z-index:1}.thumbContentBlocked{pointer-events:none}.thumbLoadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.thumbLoadingLayerExit{opacity:0}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgThumbShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes rmgThumbShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.thumbLoadingLayer{transition:none}}.thumb{position:relative;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.fadeInStart{opacity:0}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.track{position:relative;left:0;display:flex;width:100%;align-items:stretch;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.track[data-rmg-axis=x]{flex-direction:row}.track[data-rmg-axis=y]{flex-direction:column}.rtl .track{left:auto;right:0}.viewport{overflow:hidden;height:auto;width:100%;position:relative}.contentLayer{position:relative;z-index:1}.contentBlocked{pointer-events:none}.loadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.loadingLayerExit,.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive,.loadingLayer{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 60ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3;animation:rmgSpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}@keyframes rmgSpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;overflow-anchor:none;width:100%;container-type:inline-size;height:auto;min-height:var(--rmg-slider-initial-height, var(--rmg-slider-height));max-height:none}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonOverlay[data-rmg-skel-mode=peek] .sliderSkeletonItem{flex:0 0 auto}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.sliderSkeleton:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@media(prefers-reduced-motion:reduce){.sliderSkeleton:after{animation:none;opacity:0}}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridShell{display:grid;position:relative;width:100%}.gridContentLayer,.gridLoadingLayer{grid-area:1 / 1;min-width:0}.gridContentLayer{position:relative;z-index:1}.gridContentBlocked{pointer-events:none}.gridLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.gridLoadingLayerExit{opacity:0}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}.gridLoadingLayer{transition:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}.introContainer{opacity:0}.gridItem:focus-visible{outline:2px solid #0066cc;outline-offset:2px;border-radius:4px}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.masonryShell{display:grid;position:relative;width:100%}.masonryContentLayer,.masonryLoadingLayer{grid-area:1 / 1;min-width:0}.masonryContentLayer{position:relative;z-index:1}.masonryContentBlocked{pointer-events:none}.masonryLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.masonryLoadingLayerExit,.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.masonrySkelItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap)}.masonrySkeletonOverlay{position:relative;inset:0;z-index:5;pointer-events:none}.masonrySkeletonRoot{width:100%}.masonrySkeletonCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonrySkeletonItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap);border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5);overflow:hidden;position:relative}.masonrySkeletonItem:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.masonryLoadingLayer{transition:none}}