@mizumi25/cli 0.1.2 → 0.1.3

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 (2) hide show
  1. package/index.js +1809 -109
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -128,162 +128,1862 @@ const commands = {
128
128
  console.log('💮 Initializing Mizumi...\n')
129
129
 
130
130
  const jsConfig = `// mizumi.config.js
131
+ // mizumi.config.js — FULL EXPANDED LIBRARY
132
+ // Tokens: ~2000+ | Patterns: ~400+ | Animations: ~800+ | Rules: complete
133
+ // ============================================================
134
+
131
135
  export default {
136
+
137
+ // ============================================================
138
+ // TOKENS
139
+ // ============================================================
132
140
  tokens: {
141
+
142
+ // ── COLORS ──────────────────────────────────────────────────
133
143
  colors: {
134
- primary: { DEFAULT: '#3B82F6', 50: '#EFF6FF', 600: '#2563EB', 900: '#1E3A8A' },
135
- secondary: '#8B5CF6',
136
- neutral: { 50: '#F9FAFB', 100: '#F3F4F6', 500: '#6B7280', 900: '#111827' },
137
- surface: '#FFFFFF',
138
- ink: '#111827',
139
- success: '#10B981',
140
- error: '#EF4444',
144
+
145
+ // Primary — Blue
146
+ primary: {
147
+ DEFAULT: '#3B82F6',
148
+ 50: '#EFF6FF',
149
+ 100: '#DBEAFE',
150
+ 200: '#BFDBFE',
151
+ 300: '#93C5FD',
152
+ 400: '#60A5FA',
153
+ 500: '#3B82F6',
154
+ 600: '#2563EB',
155
+ 700: '#1D4ED8',
156
+ 800: '#1E40AF',
157
+ 900: '#1E3A8A',
158
+ 950: '#172554',
159
+ },
160
+
161
+ // Secondary — Violet
162
+ secondary: {
163
+ DEFAULT: '#8B5CF6',
164
+ 50: '#F5F3FF',
165
+ 100: '#EDE9FE',
166
+ 200: '#DDD6FE',
167
+ 300: '#C4B5FD',
168
+ 400: '#A78BFA',
169
+ 500: '#8B5CF6',
170
+ 600: '#7C3AED',
171
+ 700: '#6D28D9',
172
+ 800: '#5B21B6',
173
+ 900: '#4C1D95',
174
+ 950: '#2E1065',
175
+ },
176
+
177
+ // Accent — Fuchsia
178
+ accent: {
179
+ DEFAULT: '#D946EF',
180
+ 50: '#FDF4FF',
181
+ 100: '#FAE8FF',
182
+ 200: '#F5D0FE',
183
+ 300: '#F0ABFC',
184
+ 400: '#E879F9',
185
+ 500: '#D946EF',
186
+ 600: '#C026D3',
187
+ 700: '#A21CAF',
188
+ 800: '#86198F',
189
+ 900: '#701A75',
190
+ 950: '#4A044E',
191
+ },
192
+
193
+ // Neutral — Gray
194
+ neutral: {
195
+ 0: '#FFFFFF',
196
+ 50: '#F9FAFB',
197
+ 100: '#F3F4F6',
198
+ 150: '#ECEEF1',
199
+ 200: '#E5E7EB',
200
+ 300: '#D1D5DB',
201
+ 400: '#9CA3AF',
202
+ 500: '#6B7280',
203
+ 600: '#4B5563',
204
+ 700: '#374151',
205
+ 800: '#1F2937',
206
+ 900: '#111827',
207
+ 950: '#030712',
208
+ },
209
+
210
+ // Slate
211
+ slate: {
212
+ 50: '#F8FAFC',
213
+ 100: '#F1F5F9',
214
+ 200: '#E2E8F0',
215
+ 300: '#CBD5E1',
216
+ 400: '#94A3B8',
217
+ 500: '#64748B',
218
+ 600: '#475569',
219
+ 700: '#334155',
220
+ 800: '#1E293B',
221
+ 900: '#0F172A',
222
+ 950: '#020617',
223
+ },
224
+
225
+ // Zinc
226
+ zinc: {
227
+ 50: '#FAFAFA',
228
+ 100: '#F4F4F5',
229
+ 200: '#E4E4E7',
230
+ 300: '#D4D4D8',
231
+ 400: '#A1A1AA',
232
+ 500: '#71717A',
233
+ 600: '#52525B',
234
+ 700: '#3F3F46',
235
+ 800: '#27272A',
236
+ 900: '#18181B',
237
+ 950: '#09090B',
238
+ },
239
+
240
+ // Stone
241
+ stone: {
242
+ 50: '#FAFAF9',
243
+ 100: '#F5F5F4',
244
+ 200: '#E7E5E4',
245
+ 300: '#D6D3D1',
246
+ 400: '#A8A29E',
247
+ 500: '#78716C',
248
+ 600: '#57534E',
249
+ 700: '#44403C',
250
+ 800: '#292524',
251
+ 900: '#1C1917',
252
+ 950: '#0C0A09',
253
+ },
254
+
255
+ // Red
256
+ red: {
257
+ DEFAULT: '#EF4444',
258
+ 50: '#FEF2F2',
259
+ 100: '#FEE2E2',
260
+ 200: '#FECACA',
261
+ 300: '#FCA5A5',
262
+ 400: '#F87171',
263
+ 500: '#EF4444',
264
+ 600: '#DC2626',
265
+ 700: '#B91C1C',
266
+ 800: '#991B1B',
267
+ 900: '#7F1D1D',
268
+ 950: '#450A0A',
269
+ },
270
+
271
+ // Orange
272
+ orange: {
273
+ DEFAULT: '#F97316',
274
+ 50: '#FFF7ED',
275
+ 100: '#FFEDD5',
276
+ 200: '#FED7AA',
277
+ 300: '#FDBA74',
278
+ 400: '#FB923C',
279
+ 500: '#F97316',
280
+ 600: '#EA580C',
281
+ 700: '#C2410C',
282
+ 800: '#9A3412',
283
+ 900: '#7C2D12',
284
+ 950: '#431407',
285
+ },
286
+
287
+ // Amber
288
+ amber: {
289
+ DEFAULT: '#F59E0B',
290
+ 50: '#FFFBEB',
291
+ 100: '#FEF3C7',
292
+ 200: '#FDE68A',
293
+ 300: '#FCD34D',
294
+ 400: '#FBBF24',
295
+ 500: '#F59E0B',
296
+ 600: '#D97706',
297
+ 700: '#B45309',
298
+ 800: '#92400E',
299
+ 900: '#78350F',
300
+ 950: '#451A03',
301
+ },
302
+
303
+ // Yellow
304
+ yellow: {
305
+ DEFAULT: '#EAB308',
306
+ 50: '#FEFCE8',
307
+ 100: '#FEF9C3',
308
+ 200: '#FEF08A',
309
+ 300: '#FDE047',
310
+ 400: '#FACC15',
311
+ 500: '#EAB308',
312
+ 600: '#CA8A04',
313
+ 700: '#A16207',
314
+ 800: '#854D0E',
315
+ 900: '#713F12',
316
+ 950: '#422006',
317
+ },
318
+
319
+ // Lime
320
+ lime: {
321
+ DEFAULT: '#84CC16',
322
+ 50: '#F7FEE7',
323
+ 100: '#ECFCCB',
324
+ 200: '#D9F99D',
325
+ 300: '#BEF264',
326
+ 400: '#A3E635',
327
+ 500: '#84CC16',
328
+ 600: '#65A30D',
329
+ 700: '#4D7C0F',
330
+ 800: '#3F6212',
331
+ 900: '#365314',
332
+ 950: '#1A2E05',
333
+ },
334
+
335
+ // Green
336
+ green: {
337
+ DEFAULT: '#22C55E',
338
+ 50: '#F0FDF4',
339
+ 100: '#DCFCE7',
340
+ 200: '#BBF7D0',
341
+ 300: '#86EFAC',
342
+ 400: '#4ADE80',
343
+ 500: '#22C55E',
344
+ 600: '#16A34A',
345
+ 700: '#15803D',
346
+ 800: '#166534',
347
+ 900: '#14532D',
348
+ 950: '#052E16',
349
+ },
350
+
351
+ // Emerald
352
+ emerald: {
353
+ DEFAULT: '#10B981',
354
+ 50: '#ECFDF5',
355
+ 100: '#D1FAE5',
356
+ 200: '#A7F3D0',
357
+ 300: '#6EE7B7',
358
+ 400: '#34D399',
359
+ 500: '#10B981',
360
+ 600: '#059669',
361
+ 700: '#047857',
362
+ 800: '#065F46',
363
+ 900: '#064E3B',
364
+ 950: '#022C22',
365
+ },
366
+
367
+ // Teal
368
+ teal: {
369
+ DEFAULT: '#14B8A6',
370
+ 50: '#F0FDFA',
371
+ 100: '#CCFBF1',
372
+ 200: '#99F6E4',
373
+ 300: '#5EEAD4',
374
+ 400: '#2DD4BF',
375
+ 500: '#14B8A6',
376
+ 600: '#0D9488',
377
+ 700: '#0F766E',
378
+ 800: '#115E59',
379
+ 900: '#134E4A',
380
+ 950: '#042F2E',
381
+ },
382
+
383
+ // Cyan
384
+ cyan: {
385
+ DEFAULT: '#06B6D4',
386
+ 50: '#ECFEFF',
387
+ 100: '#CFFAFE',
388
+ 200: '#A5F3FC',
389
+ 300: '#67E8F9',
390
+ 400: '#22D3EE',
391
+ 500: '#06B6D4',
392
+ 600: '#0891B2',
393
+ 700: '#0E7490',
394
+ 800: '#155E75',
395
+ 900: '#164E63',
396
+ 950: '#083344',
397
+ },
398
+
399
+ // Sky
400
+ sky: {
401
+ DEFAULT: '#0EA5E9',
402
+ 50: '#F0F9FF',
403
+ 100: '#E0F2FE',
404
+ 200: '#BAE6FD',
405
+ 300: '#7DD3FC',
406
+ 400: '#38BDF8',
407
+ 500: '#0EA5E9',
408
+ 600: '#0284C7',
409
+ 700: '#0369A1',
410
+ 800: '#075985',
411
+ 900: '#0C4A6E',
412
+ 950: '#082F49',
413
+ },
414
+
415
+ // Blue (alias/extended)
416
+ blue: {
417
+ DEFAULT: '#3B82F6',
418
+ 50: '#EFF6FF',
419
+ 100: '#DBEAFE',
420
+ 200: '#BFDBFE',
421
+ 300: '#93C5FD',
422
+ 400: '#60A5FA',
423
+ 500: '#3B82F6',
424
+ 600: '#2563EB',
425
+ 700: '#1D4ED8',
426
+ 800: '#1E40AF',
427
+ 900: '#1E3A8A',
428
+ 950: '#172554',
429
+ },
430
+
431
+ // Indigo
432
+ indigo: {
433
+ DEFAULT: '#6366F1',
434
+ 50: '#EEF2FF',
435
+ 100: '#E0E7FF',
436
+ 200: '#C7D2FE',
437
+ 300: '#A5B4FC',
438
+ 400: '#818CF8',
439
+ 500: '#6366F1',
440
+ 600: '#4F46E5',
441
+ 700: '#4338CA',
442
+ 800: '#3730A3',
443
+ 900: '#312E81',
444
+ 950: '#1E1B4B',
445
+ },
446
+
447
+ // Violet
448
+ violet: {
449
+ DEFAULT: '#8B5CF6',
450
+ 50: '#F5F3FF',
451
+ 100: '#EDE9FE',
452
+ 200: '#DDD6FE',
453
+ 300: '#C4B5FD',
454
+ 400: '#A78BFA',
455
+ 500: '#8B5CF6',
456
+ 600: '#7C3AED',
457
+ 700: '#6D28D9',
458
+ 800: '#5B21B6',
459
+ 900: '#4C1D95',
460
+ 950: '#2E1065',
461
+ },
462
+
463
+ // Purple
464
+ purple: {
465
+ DEFAULT: '#A855F7',
466
+ 50: '#FAF5FF',
467
+ 100: '#F3E8FF',
468
+ 200: '#E9D5FF',
469
+ 300: '#D8B4FE',
470
+ 400: '#C084FC',
471
+ 500: '#A855F7',
472
+ 600: '#9333EA',
473
+ 700: '#7E22CE',
474
+ 800: '#6B21A8',
475
+ 900: '#581C87',
476
+ 950: '#3B0764',
477
+ },
478
+
479
+ // Pink
480
+ pink: {
481
+ DEFAULT: '#EC4899',
482
+ 50: '#FDF2F8',
483
+ 100: '#FCE7F3',
484
+ 200: '#FBCFE8',
485
+ 300: '#F9A8D4',
486
+ 400: '#F472B6',
487
+ 500: '#EC4899',
488
+ 600: '#DB2777',
489
+ 700: '#BE185D',
490
+ 800: '#9D174D',
491
+ 900: '#831843',
492
+ 950: '#500724',
493
+ },
494
+
495
+ // Rose
496
+ rose: {
497
+ DEFAULT: '#F43F5E',
498
+ 50: '#FFF1F2',
499
+ 100: '#FFE4E6',
500
+ 200: '#FECDD3',
501
+ 300: '#FDA4AF',
502
+ 400: '#FB7185',
503
+ 500: '#F43F5E',
504
+ 600: '#E11D48',
505
+ 700: '#BE123C',
506
+ 800: '#9F1239',
507
+ 900: '#881337',
508
+ 950: '#4C0519',
509
+ },
510
+
511
+ // Semantic
512
+ success: { DEFAULT: '#10B981', light: '#D1FAE5', dark: '#065F46' },
513
+ error: { DEFAULT: '#EF4444', light: '#FEE2E2', dark: '#7F1D1D' },
514
+ warning: { DEFAULT: '#F59E0B', light: '#FEF3C7', dark: '#78350F' },
515
+ info: { DEFAULT: '#3B82F6', light: '#DBEAFE', dark: '#1E3A8A' },
516
+
517
+ // Brand
518
+ surface: '#FFFFFF',
519
+ ink: '#111827',
520
+ white: '#FFFFFF',
521
+ black: '#000000',
522
+ inherit: 'inherit',
523
+ current: 'currentColor',
524
+ transparent: 'transparent',
141
525
  },
526
+
527
+ // ── SPACING ─────────────────────────────────────────────────
142
528
  spacing: {
143
- xs: '4px', sm: '8px', md: '16px',
144
- lg: '24px', xl: '32px', '2xl': '48px', '3xl': '64px',
529
+ 0: '0px',
530
+ px: '1px',
531
+ '0.5': '2px',
532
+ 1: '4px',
533
+ '1.5': '6px',
534
+ 2: '8px',
535
+ '2.5': '10px',
536
+ 3: '12px',
537
+ '3.5': '14px',
538
+ 4: '16px',
539
+ 5: '20px',
540
+ 6: '24px',
541
+ 7: '28px',
542
+ 8: '32px',
543
+ 9: '36px',
544
+ 10: '40px',
545
+ 11: '44px',
546
+ 12: '48px',
547
+ 14: '56px',
548
+ 16: '64px',
549
+ 20: '80px',
550
+ 24: '96px',
551
+ 28: '112px',
552
+ 32: '128px',
553
+ 36: '144px',
554
+ 40: '160px',
555
+ 44: '176px',
556
+ 48: '192px',
557
+ 52: '208px',
558
+ 56: '224px',
559
+ 60: '240px',
560
+ 64: '256px',
561
+ 72: '288px',
562
+ 80: '320px',
563
+ 96: '384px',
564
+ // Named
565
+ xs: '4px',
566
+ sm: '8px',
567
+ md: '16px',
568
+ lg: '24px',
569
+ xl: '32px',
570
+ '2xl': '48px',
571
+ '3xl': '64px',
572
+ '4xl': '96px',
573
+ '5xl': '128px',
574
+ '6xl': '192px',
575
+ '7xl': '256px',
576
+ // Fractional
577
+ 'half': '50%',
578
+ 'third': '33.333%',
579
+ 'quarter': '25%',
580
+ 'fifth': '20%',
581
+ 'sixth': '16.667%',
582
+ 'full': '100%',
583
+ // Special
584
+ auto: 'auto',
585
+ none: '0',
145
586
  },
587
+
588
+ // ── TYPOGRAPHY ──────────────────────────────────────────────
146
589
  typography: {
147
- h1: { size: '3rem', weight: '700', line: '1.1' },
148
- h2: { size: '2.25rem', weight: '700', line: '1.2' },
149
- h3: { size: '1.875rem',weight: '600', line: '1.3' },
150
- h4: { size: '1.5rem', weight: '600', line: '1.4' },
151
- body: { size: '1rem', weight: '400', line: '1.6' },
152
- sm: { size: '0.875rem', weight: '400', line: '1.5' },
153
- xs: { size: '0.75rem', weight: '400', line: '1.4' },
590
+ // Display sizes
591
+ display2xl: { size: '72px', weight: '800', line: '1.1', spacing: '-0.025em' },
592
+ displayXl: { size: '60px', weight: '800', line: '1.1', spacing: '-0.02em' },
593
+ displayLg: { size: '48px', weight: '700', line: '1.2', spacing: '-0.02em' },
594
+ displayMd: { size: '42px', weight: '700', line: '1.2', spacing: '-0.015em' },
595
+ displaySm: { size: '36px', weight: '700', line: '1.3', spacing: '-0.01em' },
596
+ // Headings
597
+ h1: { size: '48px', weight: '700', line: '1.2', spacing: '-0.02em' },
598
+ h2: { size: '36px', weight: '600', line: '1.3', spacing: '-0.015em' },
599
+ h3: { size: '28px', weight: '600', line: '1.4', spacing: '-0.01em' },
600
+ h4: { size: '22px', weight: '600', line: '1.4' },
601
+ h5: { size: '18px', weight: '600', line: '1.5' },
602
+ h6: { size: '16px', weight: '600', line: '1.5' },
603
+ // Body
604
+ xl: { size: '20px', weight: '400', line: '1.75' },
605
+ lg: { size: '18px', weight: '400', line: '1.75' },
606
+ body: { size: '16px', weight: '400', line: '1.6' },
607
+ md: { size: '16px', weight: '400', line: '1.6' },
608
+ sm: { size: '14px', weight: '400', line: '1.5' },
609
+ small:{ size: '14px', weight: '400', line: '1.5' },
610
+ xs: { size: '12px', weight: '400', line: '1.4' },
611
+ '2xs':{ size: '11px', weight: '400', line: '1.4' },
612
+ // Functional
613
+ label: { size: '12px', weight: '600', line: '1.0', spacing: '0.06em' },
614
+ caption: { size: '11px', weight: '400', line: '1.4' },
615
+ overline: { size: '11px', weight: '700', line: '1.0', spacing: '0.1em' },
616
+ code: { size: '14px', weight: '400', line: '1.6' },
617
+ mono: { size: '13px', weight: '400', line: '1.6' },
154
618
  },
619
+
620
+ // ── FONTS ───────────────────────────────────────────────────
155
621
  fonts: {
156
- sans: 'system-ui, sans-serif',
157
- serif: 'Georgia, serif',
158
- mono: 'monospace',
622
+ sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
623
+ serif: 'Georgia, "Times New Roman", Times, serif',
624
+ mono: '"Fira Code", "JetBrains Mono", ui-monospace, "Cascadia Code", monospace',
625
+ inter: '"Inter", system-ui, sans-serif',
626
+ geist: '"Geist", system-ui, sans-serif',
627
+ display: '"Cal Sans", "Clash Display", system-ui, sans-serif',
628
+ heading: '"Plus Jakarta Sans", system-ui, sans-serif',
629
+ body: '"Instrument Sans", system-ui, sans-serif',
159
630
  },
631
+
632
+ // ── RADIUS ──────────────────────────────────────────────────
160
633
  radius: {
161
- sm: '4px', md: '8px', lg: '12px',
162
- xl: '16px', full: '9999px',
634
+ none: '0px',
635
+ xs: '2px',
636
+ sm: '4px',
637
+ md: '8px',
638
+ lg: '12px',
639
+ xl: '16px',
640
+ '2xl':'20px',
641
+ '3xl':'24px',
642
+ '4xl':'32px',
643
+ pill: '500px',
644
+ full: '9999px',
163
645
  },
646
+
647
+ // ── SHADOWS ─────────────────────────────────────────────────
164
648
  shadows: {
165
- sm: '0 1px 2px rgba(0,0,0,0.05)',
166
- md: '0 4px 12px rgba(0,0,0,0.1)',
167
- lg: '0 8px 24px rgba(0,0,0,0.15)',
168
- xl: '0 16px 48px rgba(0,0,0,0.2)',
649
+ none: 'none',
650
+ xs: '0 1px 2px 0 rgba(0,0,0,0.04)',
651
+ sm: '0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04)',
652
+ md: '0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05)',
653
+ lg: '0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04)',
654
+ xl: '0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04)',
655
+ '2xl': '0 25px 50px -12px rgba(0,0,0,0.15)',
656
+ '3xl': '0 35px 60px -15px rgba(0,0,0,0.2)',
657
+ inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',
658
+ 'inner-md': 'inset 0 4px 8px 0 rgba(0,0,0,0.08)',
659
+ // Colored
660
+ 'primary': '0 4px 14px 0 rgba(59,130,246,0.35)',
661
+ 'secondary': '0 4px 14px 0 rgba(139,92,246,0.35)',
662
+ 'accent': '0 4px 14px 0 rgba(217,70,239,0.35)',
663
+ 'success': '0 4px 14px 0 rgba(16,185,129,0.35)',
664
+ 'error': '0 4px 14px 0 rgba(239,68,68,0.35)',
665
+ 'warning': '0 4px 14px 0 rgba(245,158,11,0.35)',
666
+ // Glow
667
+ 'glow-sm': '0 0 10px rgba(59,130,246,0.3)',
668
+ 'glow-md': '0 0 20px rgba(59,130,246,0.4)',
669
+ 'glow-lg': '0 0 40px rgba(59,130,246,0.5)',
670
+ 'glow-xl': '0 0 60px rgba(59,130,246,0.6)',
671
+ // Dark
672
+ 'dark-sm': '0 1px 3px 0 rgba(0,0,0,0.3)',
673
+ 'dark-md': '0 4px 6px -1px rgba(0,0,0,0.4)',
674
+ 'dark-lg': '0 10px 15px -3px rgba(0,0,0,0.5)',
675
+ 'dark-xl': '0 20px 25px -5px rgba(0,0,0,0.6)',
169
676
  },
677
+
678
+ // ── EASING ──────────────────────────────────────────────────
170
679
  easing: {
171
- smooth: 'cubic-bezier(0.4,0,0.2,1)',
172
- bouncy: 'cubic-bezier(0.34,1.56,0.64,1)',
173
- sharp: 'cubic-bezier(0.4,0,1,1)',
174
- back: 'cubic-bezier(0.34,1.4,0.64,1)',
680
+ // Standard
681
+ linear: 'linear',
682
+ smooth: 'cubic-bezier(0.4,0,0.2,1)',
683
+ ease: 'cubic-bezier(0.25,0.1,0.25,1)',
684
+ 'ease-in': 'cubic-bezier(0.4,0,1,1)',
685
+ 'ease-out': 'cubic-bezier(0,0,0.2,1)',
686
+ 'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
687
+ // Expressive
688
+ bouncy: 'cubic-bezier(0.34,1.56,0.64,1)',
689
+ elastic: 'cubic-bezier(0.68,-0.55,0.265,1.55)',
690
+ spring: 'cubic-bezier(0.43,0.195,0.02,1.0)',
691
+ sharp: 'cubic-bezier(0.4,0,1,1)',
692
+ back: 'cubic-bezier(0.34,1.4,0.64,1)',
693
+ // Material
694
+ 'standard': 'cubic-bezier(0.2,0,0,1)',
695
+ 'emphasized': 'cubic-bezier(0.2,0,0,1)',
696
+ 'decelerate': 'cubic-bezier(0,0,0.2,1)',
697
+ 'accelerate': 'cubic-bezier(0.3,0,1,1)',
698
+ // Sine
699
+ 'sine-in': 'cubic-bezier(0.12,0,0.39,0)',
700
+ 'sine-out': 'cubic-bezier(0.61,1,0.88,1)',
701
+ 'sine-in-out': 'cubic-bezier(0.37,0,0.63,1)',
702
+ // Quad
703
+ 'quad-in': 'cubic-bezier(0.11,0,0.5,0)',
704
+ 'quad-out': 'cubic-bezier(0.5,1,0.89,1)',
705
+ 'quad-in-out': 'cubic-bezier(0.45,0,0.55,1)',
706
+ // Cubic
707
+ 'cubic-in': 'cubic-bezier(0.32,0,0.67,0)',
708
+ 'cubic-out': 'cubic-bezier(0.33,1,0.68,1)',
709
+ 'cubic-in-out': 'cubic-bezier(0.65,0,0.35,1)',
710
+ // Quart
711
+ 'quart-in': 'cubic-bezier(0.5,0,0.75,0)',
712
+ 'quart-out': 'cubic-bezier(0.25,1,0.5,1)',
713
+ 'quart-in-out': 'cubic-bezier(0.76,0,0.24,1)',
714
+ // Expo
715
+ 'expo-in': 'cubic-bezier(0.7,0,0.84,0)',
716
+ 'expo-out': 'cubic-bezier(0.16,1,0.3,1)',
717
+ 'expo-in-out': 'cubic-bezier(0.87,0,0.13,1)',
718
+ // Circ
719
+ 'circ-in': 'cubic-bezier(0.55,0,1,0.45)',
720
+ 'circ-out': 'cubic-bezier(0,0.55,0.45,1)',
721
+ 'circ-in-out': 'cubic-bezier(0.85,0,0.15,1)',
722
+ // Back
723
+ 'back-in': 'cubic-bezier(0.36,0,0.66,-0.56)',
724
+ 'back-out': 'cubic-bezier(0.34,1.56,0.64,1)',
725
+ 'back-in-out': 'cubic-bezier(0.68,-0.6,0.32,1.6)',
175
726
  },
727
+
728
+ // ── DURATION ────────────────────────────────────────────────
176
729
  duration: {
177
- fast: '150ms',
178
- normal: '300ms',
179
- slow: '500ms',
180
- slower: '800ms',
730
+ 0: '0ms',
731
+ 50: '50ms',
732
+ 75: '75ms',
733
+ 100: '100ms',
734
+ 150: '150ms',
735
+ 200: '200ms',
736
+ 250: '250ms',
737
+ 300: '300ms',
738
+ 350: '350ms',
739
+ 400: '400ms',
740
+ 500: '500ms',
741
+ 600: '600ms',
742
+ 700: '700ms',
743
+ 750: '750ms',
744
+ 800: '800ms',
745
+ 900: '900ms',
746
+ 1000: '1000ms',
747
+ 1200: '1200ms',
748
+ 1500: '1500ms',
749
+ 2000: '2000ms',
750
+ // Named
751
+ instant: '0ms',
752
+ snap: '75ms',
753
+ fast: '150ms',
754
+ quick: '200ms',
755
+ normal: '300ms',
756
+ moderate:'400ms',
757
+ slow: '500ms',
758
+ slower: '800ms',
759
+ sluggish:'1200ms',
760
+ lazy: '2000ms',
181
761
  },
762
+
763
+ // ── BLUR ────────────────────────────────────────────────────
182
764
  blur: {
183
- sm: '4px',
184
- md: '8px',
185
- lg: '16px',
186
- glass: '20px',
765
+ none: '0',
766
+ xs: '2px',
767
+ sm: '4px',
768
+ md: '8px',
769
+ lg: '12px',
770
+ xl: '16px',
771
+ '2xl': '24px',
772
+ '3xl': '40px',
773
+ glass: '20px',
774
+ heavy: '48px',
775
+ ultra: '64px',
187
776
  },
777
+
778
+ // ── OPACITY ─────────────────────────────────────────────────
188
779
  opacity: {
189
- ghost: '0.1',
190
- muted: '0.5',
191
- soft: '0.75',
192
- full: '1',
780
+ 0: '0',
781
+ 5: '0.05',
782
+ 10: '0.1',
783
+ 15: '0.15',
784
+ 20: '0.2',
785
+ 25: '0.25',
786
+ 30: '0.3',
787
+ 40: '0.4',
788
+ 50: '0.5',
789
+ 60: '0.6',
790
+ 70: '0.7',
791
+ 75: '0.75',
792
+ 80: '0.8',
793
+ 90: '0.9',
794
+ 95: '0.95',
795
+ 100: '1',
796
+ // Named
797
+ invisible: '0',
798
+ ghost: '0.05',
799
+ faint: '0.15',
800
+ muted: '0.4',
801
+ soft: '0.7',
802
+ strong: '0.85',
803
+ full: '1',
193
804
  },
805
+
806
+ // ── Z-INDEX ─────────────────────────────────────────────────
194
807
  zIndex: {
195
- base: 0,
196
- float: 10,
197
- sticky: 20,
198
- modal: 100,
199
- toast: 200,
200
- top: 999,
808
+ 0: 0,
809
+ 10: 10,
810
+ 20: 20,
811
+ 30: 30,
812
+ 40: 40,
813
+ 50: 50,
814
+ 75: 75,
815
+ 100: 100,
816
+ 200: 200,
817
+ 300: 300,
818
+ 400: 400,
819
+ 500: 500,
820
+ 999: 999,
821
+ 9999: 9999,
822
+ // Named
823
+ auto: 'auto',
824
+ base: 0,
825
+ raised: 5,
826
+ float: 10,
827
+ overlay: 15,
828
+ sticky: 20,
829
+ fixed: 30,
830
+ drawer: 40,
831
+ modal: 100,
832
+ popover: 200,
833
+ toast: 300,
834
+ tooltip: 400,
835
+ top: 999,
836
+ crown: 9999,
201
837
  },
838
+
839
+ // ── LEADING (line-height) ───────────────────────────────────
202
840
  leading: {
203
- tight: '1.25',
204
- snug: '1.375',
205
- normal: '1.5',
206
- relaxed:'1.625',
207
- loose: '2',
841
+ none: '1',
842
+ tight: '1.25',
843
+ snug: '1.375',
844
+ normal: '1.5',
845
+ relaxed: '1.625',
846
+ loose: '2',
847
+ '3': '.75rem',
848
+ '4': '1rem',
849
+ '5': '1.25rem',
850
+ '6': '1.5rem',
851
+ '7': '1.75rem',
852
+ '8': '2rem',
853
+ '9': '2.25rem',
854
+ '10': '2.5rem',
208
855
  },
856
+
857
+ // ── TRACKING (letter-spacing) ───────────────────────────────
209
858
  tracking: {
210
- tight: '-0.05em',
211
- normal: '0em',
212
- wide: '0.05em',
213
- wider: '0.1em',
214
- widest: '0.2em',
859
+ tightest: '-0.1em',
860
+ tighter: '-0.075em',
861
+ tight: '-0.05em',
862
+ snug: '-0.025em',
863
+ normal: '0em',
864
+ wide: '0.025em',
865
+ wider: '0.05em',
866
+ widest: '0.1em',
867
+ ultra: '0.2em',
868
+ spaced: '0.3em',
869
+ },
870
+
871
+ // ── STROKES (border widths) ─────────────────────────────────
872
+ strokes: {
873
+ 0: '0px',
874
+ none: '0px',
875
+ px: '1px',
876
+ thin: '1px',
877
+ base: '2px',
878
+ md: '2px',
879
+ thick: '4px',
880
+ heavy: '8px',
881
+ bold: '12px',
882
+ },
883
+
884
+ // ── SCREENS ─────────────────────────────────────────────────
885
+ screens: {
886
+ xs: '480px',
887
+ sm: '640px',
888
+ md: '768px',
889
+ lg: '1024px',
890
+ xl: '1280px',
891
+ '2xl': '1536px',
892
+ '3xl': '1920px',
215
893
  },
216
894
  },
217
895
 
896
+ // ============================================================
897
+ // PATTERNS
898
+ // ============================================================
218
899
  patterns: {
219
- // Surfaces
220
- card: 'pad:md paint:surface curve:lg cast:md',
221
- card-flat: 'pad:md paint:surface curve:lg',
222
- panel: 'pad:lg paint:surface curve:xl cast:lg',
223
-
224
- // Buttons
225
- btn: 'pad-y:sm pad-x:lg curve:md ease:default cursor:pointer',
226
- btn-primary:'btn paint:primary ink:surface type-weight:semi',
227
- btn-ghost: 'btn stroke-color:primary ink:primary',
228
- btn-danger: 'btn paint:error ink:surface',
229
-
230
- // Typography
231
- heading: 'type-face:sans type-weight:bold leading:tight',
232
- body-text: 'type-face:sans leading:relaxed',
233
- caption: 'text:xs ink:neutral-500',
234
- label: 'text:sm type-weight:medium tracking:wide text-case:upper',
235
-
236
- // Layout
237
- container: 'canvas-w:full mar-x:auto pad-x:md',
238
- center: 'display:flex align-x:center align-yi:center',
239
- stack: 'display:flex flex-dir:col',
240
- row: 'display:flex flex-dir:row align-yi:center',
241
- grid-auto: 'display:grid grid-cols:repeat(auto-fit,minmax(250px,1fr)) gap:md',
900
+
901
+ // ── DISPLAY / LAYOUT PRIMITIVES ─────────────────────────────
902
+ 'flex': 'display:flex',
903
+ 'flex-inline': 'display:flex-inline',
904
+ 'grid': 'display:grid',
905
+ 'block': 'display:block',
906
+ 'inline': 'display:inline',
907
+ 'inline-block': 'display:block-inline',
908
+ 'hidden': 'display:none',
909
+ 'contents': 'display:contents',
910
+ 'flow-root': 'display:flow-root',
911
+
912
+ // ── FLEX LAYOUTS ────────────────────────────────────────────
913
+ 'flex-center': 'display:flex align-yi:center align-x:center',
914
+ 'flex-center-col': 'display:flex align-yi:center align-x:center flex-dir:col',
915
+ 'flex-between': 'display:flex align-yi:center align-x:between',
916
+ 'flex-between-col': 'display:flex align-x:between flex-dir:col',
917
+ 'flex-around': 'display:flex align-yi:center align-x:around',
918
+ 'flex-evenly': 'display:flex align-yi:center align-x:evenly',
919
+ 'flex-start': 'display:flex align-yi:start',
920
+ 'flex-end': 'display:flex align-yi:end',
921
+ 'flex-col': 'display:flex flex-dir:col',
922
+ 'flex-col-center': 'display:flex flex-dir:col align-yi:center align-x:center',
923
+ 'flex-col-between': 'display:flex flex-dir:col align-x:between',
924
+ 'flex-col-start': 'display:flex flex-dir:col align-yi:start',
925
+ 'flex-col-end': 'display:flex flex-dir:col align-yi:end',
926
+ 'flex-row': 'display:flex flex-dir:row align-yi:center',
927
+ 'flex-row-rev': 'display:flex flex-dir:row-rev align-yi:center',
928
+ 'flex-col-rev': 'display:flex flex-dir:col-rev',
929
+ 'flex-wrap': 'display:flex flex-wrap:yes',
930
+ 'flex-nowrap': 'display:flex flex-wrap:no',
931
+ 'flex-1': 'display:flex flex-grow:1',
932
+ 'flex-auto': 'display:flex',
933
+ 'flex-none': 'display:flex flex-grow:0',
934
+ 'stack': 'display:flex flex-dir:col',
935
+ 'stack-center': 'display:flex flex-dir:col align-yi:center',
936
+ 'row': 'display:flex flex-dir:row align-yi:center',
937
+ 'cluster': 'display:flex flex-wrap:yes gap:sm',
938
+ 'cluster-center': 'display:flex flex-wrap:yes gap:sm align-yi:center',
939
+ 'sidebar': 'display:flex gap:md',
940
+ 'cover': 'display:flex flex-dir:col canvas-h:full',
941
+ 'switcher': 'display:flex flex-wrap:yes gap:md',
942
+
943
+ // ── GRID LAYOUTS ─────────────────────────────────────────────
944
+ 'grid-auto': 'display:grid gap:md',
945
+ 'grid-center': 'display:grid place:center',
946
+ 'grid-1': 'display:grid grid-cols:repeat(1,1fr)',
947
+ 'grid-2': 'display:grid grid-cols:repeat(2,1fr) gap:md',
948
+ 'grid-3': 'display:grid grid-cols:repeat(3,1fr) gap:md',
949
+ 'grid-4': 'display:grid grid-cols:repeat(4,1fr) gap:md',
950
+ 'grid-5': 'display:grid grid-cols:repeat(5,1fr) gap:md',
951
+ 'grid-6': 'display:grid grid-cols:repeat(6,1fr) gap:md',
952
+ 'grid-12': 'display:grid grid-cols:repeat(12,1fr) gap:md',
953
+ 'grid-auto-sm': 'display:grid grid-cols:repeat(auto-fill,minmax(160px,1fr)) gap:sm',
954
+ 'grid-auto-md': 'display:grid grid-cols:repeat(auto-fill,minmax(220px,1fr)) gap:md',
955
+ 'grid-auto-lg': 'display:grid grid-cols:repeat(auto-fill,minmax(300px,1fr)) gap:lg',
956
+ 'grid-auto-xl': 'display:grid grid-cols:repeat(auto-fill,minmax(380px,1fr)) gap:xl',
957
+ 'grid-auto-fit': 'display:grid grid-cols:repeat(auto-fit,minmax(240px,1fr)) gap:md',
958
+ 'grid-dense': 'display:grid gap:sm',
959
+ 'repel': 'display:flex align-x:between align-yi:center',
960
+ 'frame': 'display:flex align-yi:center align-x:center overflow:hidden',
961
+
962
+ // ── CONTAINERS & PAGE LAYOUT ─────────────────────────────────
963
+ 'container': 'canvas-w:full mar-x:auto pad-x:md',
964
+ 'container-sm': 'canvas-w:full canvas-w-max:640px mar-x:auto pad-x:md',
965
+ 'container-md': 'canvas-w:full canvas-w-max:768px mar-x:auto pad-x:md',
966
+ 'container-lg': 'canvas-w:full canvas-w-max:1024px mar-x:auto pad-x:md',
967
+ 'container-xl': 'canvas-w:full canvas-w-max:1280px mar-x:auto pad-x:md',
968
+ 'container-2xl': 'canvas-w:full canvas-w-max:1536px mar-x:auto pad-x:md',
969
+ 'container-narrow': 'canvas-w:full canvas-w-max:640px mar-x:auto pad-x:lg',
970
+ 'container-wide': 'canvas-w:full canvas-w-max:1280px mar-x:auto pad-x:xl',
971
+ 'container-prose': 'canvas-w:full canvas-w-max:65ch mar-x:auto',
972
+ 'section': 'pad-y:2xl canvas-w:full',
973
+ 'section-sm': 'pad-y:lg canvas-w:full',
974
+ 'section-lg': 'pad-y:3xl canvas-w:full',
975
+ 'section-xl': 'pad-y:4xl canvas-w:full',
976
+ 'page': 'canvas-h:screen canvas-w:full',
977
+ 'hero': 'canvas-h:screen display:flex flex-dir:col align-yi:center align-x:center pad:xl',
978
+ 'hero-half': 'canvas-h:half display:flex flex-dir:col align-yi:center align-x:center pad:xl',
979
+ 'wrapper': 'canvas-w:full mar-x:auto pad-x:lg',
980
+ 'bleed': 'canvas-w:screen mar-x:auto',
981
+ 'inset': 'pad:md',
982
+ 'inset-sm': 'pad:sm',
983
+ 'inset-lg': 'pad:lg',
984
+ 'inset-xl': 'pad:xl',
985
+ 'inset-x': 'pad-x:md',
986
+ 'inset-y': 'pad-y:md',
987
+
988
+ // ── POSITIONING ─────────────────────────────────────────────
989
+ 'absolute-center': 'pos:absolute pos-top:50% pos-left:50%',
990
+ 'absolute-fill': 'pos:absolute pos-inset:0',
991
+ 'absolute-top': 'pos:absolute pos-top:0 pos-left:0 canvas-w:full',
992
+ 'absolute-bottom': 'pos:absolute pos-btm:0 pos-left:0 canvas-w:full',
993
+ 'fixed-top': 'pos:fixed pos-top:0 pos-left:0 canvas-w:full',
994
+ 'fixed-bottom': 'pos:fixed pos-btm:0 pos-left:0 canvas-w:full',
995
+ 'fixed-center': 'pos:fixed pos-top:50% pos-left:50%',
996
+ 'sticky-top': 'pos:sticky pos-top:0',
997
+ 'sticky-bottom': 'pos:sticky pos-btm:0',
998
+ 'overlay-fill': 'pos:absolute pos-inset:0 canvas-w:full canvas-h:full',
999
+
1000
+ // ── CARDS ────────────────────────────────────────────────────
1001
+ 'card': 'paint:surface pad:md curve:lg cast:md',
1002
+ 'card-sm': 'paint:surface pad:sm curve:md cast:sm',
1003
+ 'card-lg': 'paint:surface pad:lg curve:xl cast:lg',
1004
+ 'card-xl': 'paint:surface pad:xl curve:2xl cast:xl',
1005
+ 'card-elevated': 'paint:surface pad:md curve:lg cast:xl',
1006
+ 'card-flat': 'paint:surface pad:md curve:lg',
1007
+ 'card-hover': 'paint:surface pad:md curve:lg cast:md cursor:pointer',
1008
+ 'card-outline': 'pad:md curve:lg stroke-style:solid stroke-width:thin stroke-color:neutral-200',
1009
+ 'card-outline-hover': 'pad:md curve:lg stroke-style:solid stroke-width:thin stroke-color:neutral-300 cursor:pointer',
1010
+ 'card-ghost': 'pad:md curve:lg paint:neutral-50',
1011
+ 'card-glass': 'glass-blur:glass canvas-fade:soft curve:lg cast:md',
1012
+ 'card-dark': 'paint:neutral-900 pad:md curve:lg cast:dark-md',
1013
+ 'card-gradient': 'pad:md curve:lg cast:md overflow:hidden',
1014
+ 'card-feature': 'paint:surface pad:xl curve:2xl cast:lg display:flex flex-dir:col gap:lg',
1015
+ 'card-compact': 'paint:surface pad:sm curve:md cast:sm display:flex align-yi:center gap:md',
1016
+ 'card-media': 'paint:surface curve:lg cast:md overflow:hidden display:flex flex-dir:col',
1017
+ 'card-interactive': 'paint:surface pad:md curve:lg cast:md cursor:pointer select:none',
1018
+ 'card-pricing': 'paint:surface pad:xl curve:2xl cast:xl display:flex flex-dir:col gap:xl',
1019
+ 'card-stat': 'paint:surface pad:lg curve:xl cast:md display:flex flex-dir:col gap:sm',
1020
+ 'card-testimonial': 'paint:surface pad:xl curve:xl cast:md',
1021
+ 'card-profile': 'paint:surface pad:lg curve:xl cast:md display:flex flex-dir:col align-yi:center gap:md text-align:center',
1022
+ 'card-blog': 'paint:surface curve:xl cast:md overflow:hidden display:flex flex-dir:col',
1023
+ 'card-product': 'paint:surface curve:xl cast:md overflow:hidden display:flex flex-dir:col cursor:pointer',
1024
+ 'card-job': 'paint:surface pad:lg curve:xl cast:md display:flex gap:lg align-yi:start',
1025
+ 'card-notification': 'paint:surface pad:md curve:lg cast:sm display:flex gap:md align-yi:start',
1026
+ 'card-empty': 'paint:surface pad:2xl curve:xl cast:sm display:flex flex-dir:col align-yi:center align-x:center gap:lg text-align:center',
1027
+ 'card-success': 'paint:success-light pad:md curve:lg cast:sm',
1028
+ 'card-error': 'paint:error-light pad:md curve:lg cast:sm',
1029
+ 'card-warning': 'paint:warning-light pad:md curve:lg cast:sm',
1030
+ 'card-info': 'paint:info-light pad:md curve:lg cast:sm',
1031
+ 'panel': 'paint:surface cast:md curve:xl pad:lg',
1032
+ 'panel-sm': 'paint:surface cast:sm curve:lg pad:md',
1033
+ 'panel-lg': 'paint:surface cast:xl curve:2xl pad:xl',
1034
+
1035
+ // ── BUTTONS ──────────────────────────────────────────────────
1036
+ 'button': [
1037
+ 'display:flex-inline align-yi:center align-x:center',
1038
+ 'pad-y:sm pad-x:lg',
1039
+ 'curve:md cursor:pointer',
1040
+ 'type-weight:semi text:body',
1041
+ 'select:none',
1042
+ ].join(' '),
1043
+ 'btn-sm': 'button pad-y:xs pad-x:md text:sm',
1044
+ 'btn-md': 'button',
1045
+ 'btn-lg': 'button pad-y:md pad-x:xl text:lg',
1046
+ 'btn-xl': 'button pad-y:lg pad-x:2xl text:xl',
1047
+ 'btn-icon': 'display:flex-inline align-yi:center align-x:center pad:sm curve:md cursor:pointer select:none',
1048
+ 'btn-icon-sm': 'display:flex-inline align-yi:center align-x:center pad:xs curve:sm cursor:pointer select:none',
1049
+ 'btn-icon-lg': 'display:flex-inline align-yi:center align-x:center pad:md curve:lg cursor:pointer select:none',
1050
+ 'btn-icon-round': 'display:flex-inline align-yi:center align-x:center pad:sm curve:full cursor:pointer select:none',
1051
+ 'btn-full': 'button canvas-w:full',
1052
+ 'btn-primary': 'button paint:primary ink:white',
1053
+ 'btn-primary-sm': 'btn-sm paint:primary ink:white',
1054
+ 'btn-primary-lg': 'btn-lg paint:primary ink:white',
1055
+ 'btn-secondary': 'button paint:secondary ink:white',
1056
+ 'btn-accent': 'button paint:accent ink:white',
1057
+ 'btn-success': 'button paint:success ink:white',
1058
+ 'btn-error': 'button paint:error ink:white',
1059
+ 'btn-danger': 'button paint:error ink:white',
1060
+ 'btn-warning': 'button paint:warning ink:white',
1061
+ 'btn-info': 'button paint:info ink:white',
1062
+ 'btn-ghost': 'button stroke-style:solid stroke-width:thin stroke-color:primary ink:primary',
1063
+ 'btn-ghost-sm': 'btn-sm stroke-style:solid stroke-width:thin stroke-color:primary ink:primary',
1064
+ 'btn-ghost-secondary': 'button stroke-style:solid stroke-width:thin stroke-color:secondary ink:secondary',
1065
+ 'btn-ghost-neutral': 'button stroke-style:solid stroke-width:thin stroke-color:neutral-300 ink:neutral-700',
1066
+ 'btn-ghost-white': 'button stroke-style:solid stroke-width:thin stroke-color:white ink:white',
1067
+ 'btn-text': 'button ink:primary',
1068
+ 'btn-text-sm': 'btn-sm ink:primary',
1069
+ 'btn-text-neutral':'button ink:neutral-600',
1070
+ 'btn-neutral': 'button paint:neutral-100 ink:neutral-900',
1071
+ 'btn-neutral-sm': 'btn-sm paint:neutral-100 ink:neutral-900',
1072
+ 'btn-dark': 'button paint:neutral-900 ink:white',
1073
+ 'btn-white': 'button paint:white ink:neutral-900',
1074
+ 'btn-glass': 'button glass-blur:md canvas-fade:soft',
1075
+ 'btn-gradient': 'button ink:white',
1076
+ 'btn-link': 'ink:primary cursor:pointer type-weight:semi',
1077
+ 'btn-pill': 'button curve:full',
1078
+ 'btn-pill-primary':'button paint:primary ink:white curve:full',
1079
+ 'btn-square': 'button curve:none',
1080
+ 'btn-loading': 'button events:none canvas-fade:muted cursor:not-allowed',
1081
+ 'btn-disabled': 'button events:none canvas-fade:muted cursor:not-allowed',
1082
+
1083
+ // ── INPUTS & FORMS ───────────────────────────────────────────
1084
+ 'input': [
1085
+ 'pad:sm curve:md canvas-w:full',
1086
+ 'stroke-color:neutral-200 stroke-width:thin stroke-style:solid',
1087
+ 'type-face:sans text:body ink:neutral-900',
1088
+ 'paint:surface',
1089
+ ].join(' '),
1090
+ 'input-sm': 'input text:sm pad:xs',
1091
+ 'input-lg': 'input text:lg pad:md',
1092
+ 'input-ghost': 'pad:sm canvas-w:full type-face:sans text:body ink:neutral-900',
1093
+ 'input-flush': 'pad-y:sm canvas-w:full type-face:sans text:body stroke-y-end:neutral-200 stroke-style:solid stroke-width:thin',
1094
+ 'input-error': 'input stroke-color:error',
1095
+ 'input-success': 'input stroke-color:success',
1096
+ 'input-disabled': 'input events:none canvas-fade:muted paint:neutral-50 cursor:not-allowed',
1097
+ 'textarea': 'input canvas-h:auto leading:relaxed',
1098
+ 'textarea-sm': 'input-sm canvas-h:auto leading:relaxed',
1099
+ 'textarea-lg': 'input-lg canvas-h:auto leading:relaxed',
1100
+ 'select': 'input cursor:pointer',
1101
+ 'checkbox': 'cursor:pointer select:none',
1102
+ 'radio': 'cursor:pointer select:none',
1103
+ 'toggle': 'cursor:pointer select:none',
1104
+ 'label': 'text:label type-weight:semi ink:neutral-700',
1105
+ 'label-sm': 'text:xs type-weight:semi ink:neutral-600',
1106
+ 'label-error': 'text:xs ink:error',
1107
+ 'label-success': 'text:xs ink:success',
1108
+ 'field': 'display:flex flex-dir:col gap:xs',
1109
+ 'field-row': 'display:flex gap:md align-yi:center',
1110
+ 'field-group': 'display:flex flex-dir:col gap:md',
1111
+ 'input-group': 'display:flex align-yi:center',
1112
+ 'input-addon': 'display:flex-inline align-yi:center pad-x:sm paint:neutral-50 stroke-style:solid stroke-width:thin stroke-color:neutral-200',
1113
+ 'form': 'display:flex flex-dir:col gap:lg',
1114
+ 'form-sm': 'display:flex flex-dir:col gap:md',
1115
+ 'form-row': 'display:grid grid-cols:repeat(2,1fr) gap:md',
1116
+ 'form-actions': 'display:flex gap:sm align-yi:center align-x:end',
1117
+
1118
+ // ── NAVIGATION ───────────────────────────────────────────────
1119
+ 'nav': 'display:flex align-yi:center gap:md',
1120
+ 'nav-bar': 'display:flex align-yi:center align-x:between pad-x:xl pad-y:md paint:surface cast:sm',
1121
+ 'nav-bar-dark': 'display:flex align-yi:center align-x:between pad-x:xl pad-y:md paint:neutral-900',
1122
+ 'nav-bar-glass': 'display:flex align-yi:center align-x:between pad-x:xl pad-y:md glass-blur:md',
1123
+ 'nav-item': 'display:flex-inline align-yi:center pad-x:md pad-y:sm curve:md ink:neutral-600 cursor:pointer type-weight:medium text:sm',
1124
+ 'nav-item-active':'nav-item paint:primary-50 ink:primary-600',
1125
+ 'nav-link': 'ink:neutral-600 cursor:pointer type-weight:medium text:sm',
1126
+ 'nav-link-active':'ink:primary-600 type-weight:semi',
1127
+ 'nav-brand': 'display:flex-inline align-yi:center gap:sm type-weight:bold text:lg ink:neutral-900',
1128
+ 'nav-section': 'display:flex align-yi:center gap:xs',
1129
+ 'sidebar-nav': 'display:flex flex-dir:col gap:xs',
1130
+ 'sidebar-item': 'display:flex align-yi:center gap:md pad:sm curve:md ink:neutral-600 cursor:pointer type-weight:medium text:sm',
1131
+ 'sidebar-item-active': 'sidebar-item paint:primary-50 ink:primary-600',
1132
+ 'sidebar-section':'text:xs type-weight:bold tracking:widest text-case:upper ink:neutral-400 pad-x:sm pad-y:xs',
1133
+ 'breadcrumb': 'display:flex align-yi:center gap:xs text:sm ink:neutral-500',
1134
+ 'breadcrumb-item':'ink:neutral-500',
1135
+ 'breadcrumb-active': 'ink:neutral-900 type-weight:medium',
1136
+ 'tab-list': 'display:flex gap:xs stroke-y-end:neutral-200 stroke-style:solid stroke-width:thin',
1137
+ 'tab': 'pad-x:md pad-y:sm ink:neutral-500 cursor:pointer type-weight:medium text:sm',
1138
+ 'tab-active': 'ink:primary-600 type-weight:semi',
1139
+ 'tab-panel': 'pad:lg',
1140
+ 'tabs-pill': 'display:flex gap:xs paint:neutral-100 pad:xs curve:lg',
1141
+ 'tab-pill': 'pad-x:md pad-y:xs curve:md ink:neutral-600 cursor:pointer type-weight:medium text:sm',
1142
+ 'tab-pill-active':'pad-x:md pad-y:xs curve:md paint:white ink:neutral-900 cast:sm cursor:pointer type-weight:medium text:sm',
1143
+ 'menu': 'display:flex flex-dir:col pad:xs curve:md cast:lg paint:surface',
1144
+ 'menu-item': 'display:flex align-yi:center gap:sm pad-x:md pad-y:sm curve:md ink:neutral-700 cursor:pointer text:sm',
1145
+ 'menu-item-danger':'menu-item ink:error',
1146
+ 'menu-divider': 'stroke-y-start:neutral-100 stroke-style:solid stroke-width:thin mar-y:xs',
1147
+
1148
+ // ── TYPOGRAPHY PATTERNS ──────────────────────────────────────
1149
+ 'heading': 'text:h1 ink:ink type-face:sans type-weight:bold',
1150
+ 'heading-display':'text:display-xl ink:ink type-face:display type-weight:black tracking:tight',
1151
+ 'heading-lg': 'text:h1 ink:ink type-face:sans type-weight:bold',
1152
+ 'heading-md': 'text:h2 ink:ink type-face:sans type-weight:semi',
1153
+ 'heading-sm': 'text:h3 ink:ink type-face:sans type-weight:semi',
1154
+ 'heading-xs': 'text:h4 ink:ink type-face:sans type-weight:semi',
1155
+ 'subheading': 'text:h4 ink:neutral-500 type-face:sans',
1156
+ 'eyebrow': 'text:label type-weight:bold tracking:widest text-case:upper ink:primary',
1157
+ 'overline': 'text:xs type-weight:bold tracking:widest text-case:upper ink:neutral-400',
1158
+ 'caption': 'text:xs ink:neutral-500 leading:normal',
1159
+ 'text-muted': 'ink:neutral-500 text:small',
1160
+ 'text-subtle': 'ink:neutral-400 text:sm',
1161
+ 'text-faint': 'ink:neutral-300 text:xs',
1162
+ 'text-label': 'text:label type-weight:semi tracking:wide text-case:upper ink:neutral-500',
1163
+ 'text-link': 'ink:primary type-weight:medium cursor:pointer',
1164
+ 'text-link-muted':'ink:neutral-500 cursor:pointer',
1165
+ 'text-mono': 'type-face:mono text:code',
1166
+ 'text-code': 'type-face:mono text:xs paint:neutral-100 pad-x:xs pad-y:0 curve:sm ink:neutral-800',
1167
+ 'prose': 'text:body ink:ink leading:relaxed type-face:sans canvas-w-max:65ch',
1168
+ 'prose-sm': 'text:sm ink:ink leading:relaxed type-face:sans',
1169
+ 'prose-lg': 'text:lg ink:ink leading:relaxed type-face:sans',
1170
+ 'lead': 'text:xl ink:neutral-600 leading:relaxed',
1171
+ 'quote': 'text:xl ink:neutral-700 type-style:italic leading:relaxed',
1172
+ 'code-block': 'type-face:mono text:sm paint:neutral-900 ink:neutral-100 pad:lg curve:lg overflow:auto',
1173
+ 'kbd': 'type-face:mono text:xs paint:neutral-100 pad-x:xs curve:sm stroke-style:solid stroke-width:thin stroke-color:neutral-300 ink:neutral-700 cast:xs',
1174
+ 'strike': 'text-decor:strike',
1175
+ 'underline': 'text-decor:under',
1176
+ 'no-underline': 'text-decor:none',
1177
+ 'italic': 'type-style:italic',
1178
+ 'bold': 'type-weight:bold',
1179
+ 'truncate': 'overflow:hidden text-overflow:dots wrap:no',
1180
+ 'clamp-1': 'overflow:hidden text-overflow:dots wrap:no',
1181
+ 'clamp-2': 'overflow:hidden',
1182
+ 'clamp-3': 'overflow:hidden',
1183
+
1184
+ // ── BADGES & TAGS ────────────────────────────────────────────
1185
+ 'badge': 'display:flex-inline align-yi:center pad-y:0 pad-x:sm curve:full text:xs type-weight:semi',
1186
+ 'badge-sm': 'display:flex-inline align-yi:center pad-y:0 pad-x:xs curve:full text:2xs type-weight:semi',
1187
+ 'badge-lg': 'display:flex-inline align-yi:center pad-y:xs pad-x:md curve:full text:sm type-weight:semi',
1188
+ 'badge-primary': 'badge paint:primary-100 ink:primary-700',
1189
+ 'badge-secondary':'badge paint:secondary-100 ink:secondary-700',
1190
+ 'badge-accent': 'badge paint:accent-100 ink:accent-700',
1191
+ 'badge-success': 'badge paint:success-light ink:emerald-700',
1192
+ 'badge-error': 'badge paint:error-light ink:red-700',
1193
+ 'badge-warning': 'badge paint:warning-light ink:amber-700',
1194
+ 'badge-info': 'badge paint:info-light ink:blue-700',
1195
+ 'badge-neutral': 'badge paint:neutral-100 ink:neutral-700',
1196
+ 'badge-dark': 'badge paint:neutral-800 ink:white',
1197
+ 'badge-outline': 'badge stroke-style:solid stroke-width:thin stroke-color:primary ink:primary',
1198
+ 'badge-dot': 'display:flex-inline align-yi:center gap:xs pad-y:0 pad-x:sm curve:full text:xs type-weight:semi',
1199
+ 'tag': 'display:flex-inline align-yi:center gap:xs pad-y:xs pad-x:sm curve:md paint:neutral-100 ink:neutral-700 text:xs type-weight:medium cursor:pointer',
1200
+ 'tag-removable': 'tag gap:sm',
1201
+ 'pill': 'display:flex-inline align-yi:center pad-y:xs pad-x:md curve:full text:sm type-weight:medium',
1202
+ 'chip': 'display:flex-inline align-yi:center gap:sm pad-y:xs pad-x:md curve:full paint:neutral-100 ink:neutral-700 text:sm type-weight:medium cursor:pointer',
1203
+ 'chip-active': 'chip paint:primary-100 ink:primary-700',
1204
+
1205
+ // ── AVATAR & MEDIA ───────────────────────────────────────────
1206
+ 'avatar': 'canvas-w:md canvas-h:md curve:full overflow:hidden canvas-fit:cover display:flex-inline align-yi:center align-x:center',
1207
+ 'avatar-xs': 'canvas-w:sm canvas-h:sm curve:full overflow:hidden canvas-fit:cover',
1208
+ 'avatar-sm': 'canvas-w:md canvas-h:md curve:full overflow:hidden canvas-fit:cover',
1209
+ 'avatar-md': 'canvas-w:lg canvas-h:lg curve:full overflow:hidden canvas-fit:cover',
1210
+ 'avatar-lg': 'canvas-w:xl canvas-h:xl curve:full overflow:hidden canvas-fit:cover',
1211
+ 'avatar-xl': 'canvas-w:2xl canvas-h:2xl curve:full overflow:hidden canvas-fit:cover',
1212
+ 'avatar-square': 'canvas-w:md canvas-h:md curve:md overflow:hidden canvas-fit:cover',
1213
+ 'avatar-group': 'display:flex',
1214
+ 'avatar-initials':'canvas-w:md canvas-h:md curve:full display:flex align-yi:center align-x:center type-weight:semi text:sm',
1215
+ 'media': 'canvas-w:full overflow:hidden curve:lg',
1216
+ 'media-16-9': 'canvas-ratio:16_9 overflow:hidden',
1217
+ 'media-4-3': 'canvas-ratio:4_3 overflow:hidden',
1218
+ 'media-1-1': 'canvas-ratio:1_1 overflow:hidden',
1219
+ 'media-3-2': 'canvas-ratio:3_2 overflow:hidden',
1220
+ 'media-21-9': 'canvas-ratio:21_9 overflow:hidden',
1221
+ 'cover': 'canvas-w:full canvas-h:full canvas-fit:cover',
1222
+ 'contain': 'canvas-w:full canvas-h:full canvas-fit:contain',
1223
+ 'thumbnail': 'canvas-w:md canvas-h:md canvas-fit:cover curve:md overflow:hidden',
1224
+ 'thumbnail-lg': 'canvas-w:xl canvas-h:xl canvas-fit:cover curve:lg overflow:hidden',
1225
+ 'icon': 'canvas-w:md canvas-h:md display:flex-inline align-yi:center align-x:center',
1226
+ 'icon-sm': 'canvas-w:sm canvas-h:sm display:flex-inline align-yi:center align-x:center',
1227
+ 'icon-lg': 'canvas-w:lg canvas-h:lg display:flex-inline align-yi:center align-x:center',
1228
+ 'icon-xl': 'canvas-w:xl canvas-h:xl display:flex-inline align-yi:center align-x:center',
1229
+
1230
+ // ── MODALS & OVERLAYS ────────────────────────────────────────
1231
+ 'modal-backdrop': 'pos:fixed pos-inset:0 paint:black canvas-fade:muted display:flex align-yi:center align-x:center',
1232
+ 'modal': 'paint:surface cast:2xl curve:2xl pad:2xl canvas-w:full pos:relative',
1233
+ 'modal-sm': 'modal canvas-w-max:400px',
1234
+ 'modal-md': 'modal canvas-w-max:560px',
1235
+ 'modal-lg': 'modal canvas-w-max:720px',
1236
+ 'modal-xl': 'modal canvas-w-max:900px',
1237
+ 'modal-full': 'modal canvas-w:full canvas-h:screen curve:none',
1238
+ 'modal-header': 'display:flex align-yi:center align-x:between pad-btm:lg',
1239
+ 'modal-body': 'display:flex flex-dir:col gap:md',
1240
+ 'modal-footer': 'display:flex gap:sm align-yi:center align-x:end pad-top:lg',
1241
+ 'drawer': 'pos:fixed pos-top:0 pos-right:0 canvas-h:screen canvas-w:full paint:surface cast:2xl display:flex flex-dir:col',
1242
+ 'drawer-sm': 'drawer canvas-w-max:320px',
1243
+ 'drawer-md': 'drawer canvas-w-max:420px',
1244
+ 'drawer-lg': 'drawer canvas-w-max:560px',
1245
+ 'drawer-header': 'display:flex align-yi:center align-x:between pad:lg stroke-y-end:neutral-100 stroke-style:solid stroke-width:thin',
1246
+ 'drawer-body': 'display:flex flex-dir:col gap:md pad:lg overflow-y:auto',
1247
+ 'drawer-footer': 'display:flex gap:sm align-x:end pad:lg stroke-y-start:neutral-100 stroke-style:solid stroke-width:thin',
1248
+ 'popup': 'paint:surface cast:xl curve:xl pad:md pos:absolute display:flex flex-dir:col gap:sm',
1249
+ 'tooltip': 'paint:neutral-900 ink:white pad-y:xs pad-x:sm curve:md text:xs type-weight:medium',
1250
+ 'tooltip-light': 'paint:white cast:lg ink:neutral-800 pad-y:xs pad-x:sm curve:md text:xs type-weight:medium',
1251
+ 'popover': 'paint:surface cast:xl curve:xl pad:md pos:absolute canvas-w-max:320px display:flex flex-dir:col gap:sm',
1252
+ 'sheet': 'paint:surface cast:2xl pad:2xl display:flex flex-dir:col gap:lg',
1253
+ 'overlay': 'pos:absolute pos-inset:0 paint:black canvas-fade:muted',
1254
+ 'overlay-light': 'pos:absolute pos-inset:0 paint:white canvas-fade:ghost',
1255
+ 'overlay-blur': 'pos:absolute pos-inset:0 glass-blur:md',
1256
+ 'overlay-gradient': 'pos:absolute pos-inset:0',
1257
+ 'scrim': 'pos:fixed pos-inset:0 paint:black canvas-fade:muted events:none',
1258
+
1259
+ // ── ALERTS & FEEDBACK ────────────────────────────────────────
1260
+ 'alert': 'display:flex gap:md pad:md curve:lg stroke-style:solid stroke-width:thin',
1261
+ 'alert-info': 'alert paint:info-light stroke-color:info ink:info-dark',
1262
+ 'alert-success': 'alert paint:success-light stroke-color:success ink:success-dark',
1263
+ 'alert-error': 'alert paint:error-light stroke-color:error ink:error-dark',
1264
+ 'alert-warning': 'alert paint:warning-light stroke-color:warning ink:warning-dark',
1265
+ 'alert-neutral': 'alert paint:neutral-50 stroke-color:neutral-200 ink:neutral-800',
1266
+ 'alert-dark': 'alert paint:neutral-900 stroke-color:neutral-700 ink:white',
1267
+ 'toast': 'paint:surface cast:xl curve:xl pad:md display:flex gap:md align-yi:start canvas-w-max:400px',
1268
+ 'toast-success': 'toast stroke-style:solid stroke-width:base stroke-color:success',
1269
+ 'toast-error': 'toast stroke-style:solid stroke-width:base stroke-color:error',
1270
+ 'toast-warning': 'toast stroke-style:solid stroke-width:base stroke-color:warning',
1271
+ 'toast-info': 'toast stroke-style:solid stroke-width:base stroke-color:info',
1272
+ 'banner': 'canvas-w:full pad:md display:flex align-yi:center align-x:between',
1273
+ 'banner-primary': 'banner paint:primary ink:white',
1274
+ 'banner-warning': 'banner paint:warning ink:white',
1275
+ 'banner-error': 'banner paint:error ink:white',
1276
+ 'callout': 'pad:lg curve:xl stroke-style:solid stroke-width:base',
1277
+ 'callout-info': 'callout paint:info-light stroke-color:info-300',
1278
+ 'callout-warning':'callout paint:warning-light stroke-color:amber-300',
1279
+ 'callout-tip': 'callout paint:emerald-50 stroke-color:emerald-300',
1280
+ 'notice': 'pad:sm curve:md text:sm',
1281
+ 'notice-info': 'notice paint:info-light ink:blue-700',
1282
+ 'notice-warning': 'notice paint:warning-light ink:amber-700',
1283
+ 'empty-state': 'display:flex flex-dir:col align-yi:center align-x:center gap:md pad:2xl text-align:center',
1284
+ 'error-state': 'display:flex flex-dir:col align-yi:center align-x:center gap:sm pad:2xl text-align:center',
1285
+ 'loading-state': 'display:flex align-yi:center align-x:center pad:2xl',
1286
+
1287
+ // ── PROGRESS & LOADING ───────────────────────────────────────
1288
+ 'progress-bar': 'canvas-w:full canvas-h:2 paint:neutral-100 curve:full overflow:hidden',
1289
+ 'progress-fill': 'canvas-h:full paint:primary curve:full',
1290
+ 'progress-sm': 'canvas-w:full canvas-h:1 paint:neutral-100 curve:full overflow:hidden',
1291
+ 'progress-lg': 'canvas-w:full canvas-h:3 paint:neutral-100 curve:full overflow:hidden',
1292
+ 'spinner': 'canvas-w:md canvas-h:md curve:full stroke-style:solid stroke-width:base stroke-color:primary',
1293
+ 'spinner-sm': 'canvas-w:sm canvas-h:sm curve:full stroke-style:solid stroke-width:thin stroke-color:primary',
1294
+ 'spinner-lg': 'canvas-w:lg canvas-h:lg curve:full stroke-style:solid stroke-width:thick stroke-color:primary',
1295
+ 'skeleton': 'paint:neutral-200 curve:md overflow:hidden pos:relative',
1296
+ 'skeleton-text': 'canvas-h:3 paint:neutral-200 curve:full',
1297
+ 'skeleton-title': 'canvas-h:5 paint:neutral-200 curve:full',
1298
+ 'skeleton-avatar':'canvas-w:md canvas-h:md paint:neutral-200 curve:full',
1299
+ 'skeleton-card': 'paint:neutral-200 curve:lg canvas-h:2xl',
1300
+ 'loader': 'display:flex align-yi:center align-x:center gap:sm',
1301
+ 'dot-loader': 'display:flex align-yi:center gap:xs',
1302
+ 'dot': 'canvas-w:2 canvas-h:2 curve:full paint:current',
1303
+ 'pulse': 'paint:neutral-200 curve:md',
1304
+
1305
+ // ── SURFACE VARIANTS ─────────────────────────────────────────
1306
+ 'surface': 'paint:surface cast:sm curve:md',
1307
+ 'surface-sm': 'paint:surface cast:xs curve:sm',
1308
+ 'surface-lg': 'paint:surface cast:lg curve:xl',
1309
+ 'surface-raised': 'paint:surface cast:xl curve:xl',
1310
+ 'surface-sunken': 'paint:neutral-50 curve:md',
1311
+ 'surface-tinted': 'paint:primary-50 curve:md',
1312
+ 'surface-dark': 'paint:neutral-900 curve:md',
1313
+ 'surface-glass': 'glass-blur:md canvas-fade:soft curve:md',
1314
+ 'glass': 'glass-blur:md canvas-fade:soft',
1315
+ 'glass-sm': 'glass-blur:sm canvas-fade:soft',
1316
+ 'glass-lg': 'glass-blur:xl canvas-fade:soft',
1317
+ 'glass-card': 'glass-blur:glass canvas-fade:soft curve:lg cast:md',
1318
+ 'glass-dark': 'glass-blur:md canvas-fade:strong paint:neutral-900',
1319
+ 'frosted': 'glass-blur:heavy canvas-fade:soft',
1320
+ 'matte': 'paint:white canvas-fade:muted',
1321
+ 'mirror': 'paint:white canvas-fade:ghost',
1322
+
1323
+ // ── LISTS & DATA ─────────────────────────────────────────────
1324
+ 'list': 'display:flex flex-dir:col',
1325
+ 'list-sm': 'display:flex flex-dir:col gap:xs',
1326
+ 'list-md': 'display:flex flex-dir:col gap:sm',
1327
+ 'list-lg': 'display:flex flex-dir:col gap:md',
1328
+ 'list-divided': 'display:flex flex-dir:col',
1329
+ 'list-item': 'display:flex align-yi:center gap:md pad-y:sm',
1330
+ 'list-item-divided': 'list-item stroke-y-end:neutral-100 stroke-style:solid stroke-width:thin',
1331
+ 'list-item-action': 'list-item cursor:pointer',
1332
+ 'list-item-sm': 'display:flex align-yi:center gap:sm pad-y:xs text:sm',
1333
+ 'list-ordered': 'display:flex flex-dir:col gap:xs',
1334
+ 'data-list': 'display:flex flex-dir:col gap:sm',
1335
+ 'data-item': 'display:flex align-x:between align-yi:baseline gap:md',
1336
+ 'data-label': 'text:sm ink:neutral-500',
1337
+ 'data-value': 'text:sm ink:neutral-900 type-weight:medium',
1338
+ 'dl-term': 'text:sm type-weight:semi ink:neutral-500',
1339
+ 'dl-def': 'text:sm ink:neutral-900',
1340
+
1341
+ // ── TABLES ───────────────────────────────────────────────────
1342
+ 'table': 'canvas-w:full cast:sm curve:lg overflow:hidden',
1343
+ 'table-header': 'paint:neutral-50 stroke-y-end:neutral-200 stroke-style:solid stroke-width:thin',
1344
+ 'table-th': 'pad:sm text:xs type-weight:bold tracking:wide text-case:upper ink:neutral-500 text-align:left',
1345
+ 'table-row': 'stroke-y-end:neutral-100 stroke-style:solid stroke-width:thin',
1346
+ 'table-row-hover':'stroke-y-end:neutral-100 stroke-style:solid stroke-width:thin cursor:pointer',
1347
+ 'table-td': 'pad:sm text:sm ink:neutral-800',
1348
+ 'table-td-action':'pad:sm display:flex align-yi:center gap:sm',
1349
+ 'table-foot': 'paint:neutral-50 stroke-y-start:neutral-200 stroke-style:solid stroke-width:thin',
1350
+
1351
+ // ── DIVIDERS & SEPARATORS ────────────────────────────────────
1352
+ 'divider': 'stroke-y-start:neutral-200 stroke-style:solid stroke-width:thin',
1353
+ 'divider-strong': 'stroke-y-start:neutral-400 stroke-style:solid stroke-width:thin',
1354
+ 'divider-subtle': 'stroke-y-start:neutral-100 stroke-style:solid stroke-width:thin',
1355
+ 'divider-dark': 'stroke-y-start:neutral-700 stroke-style:solid stroke-width:thin',
1356
+ 'divider-x': 'stroke-x-start:neutral-200 stroke-style:solid stroke-width:thin',
1357
+ 'divider-label': 'display:flex align-yi:center gap:md text:xs ink:neutral-400 type-weight:semi',
1358
+ 'hr': 'canvas-w:full stroke-y-start:neutral-200 stroke-style:solid stroke-width:thin',
1359
+ 'rule': 'paint:neutral-200 canvas-h:px canvas-w:full',
1360
+ 'spacer': 'display:block',
1361
+
1362
+ // ── UTILITIES ────────────────────────────────────────────────
1363
+ 'sr-only': 'pos:absolute canvas-w:1px canvas-h:1px overflow:hidden events:none',
1364
+ 'not-sr-only': 'pos:static canvas-w:auto canvas-h:auto overflow:visible',
1365
+ 'clearfix': 'display:flow-root',
1366
+ 'isolate': 'pos:relative',
1367
+ 'reset': 'mar:0 pad:0',
1368
+ 'box-border': 'canvas-box:border',
1369
+ 'box-content': 'canvas-box:content',
1370
+ 'select-none': 'select:none',
1371
+ 'select-all': 'select:all',
1372
+ 'select-text': 'select:text',
1373
+ 'pointer': 'cursor:pointer',
1374
+ 'not-allowed': 'cursor:not-allowed events:none',
1375
+ 'no-events': 'events:none',
1376
+ 'no-wrap': 'wrap:no',
1377
+ 'break-word': 'word-break:break-word',
1378
+ 'antialiased': 'type-smooth:anti',
1379
+ 'subpixel': 'type-smooth:sub',
1380
+
1381
+ // ── INTERACTIVE STATES ───────────────────────────────────────
1382
+ 'interactive': 'cursor:pointer select:none',
1383
+ 'hoverable': 'cursor:pointer',
1384
+ 'pressable': 'cursor:pointer select:none',
1385
+ 'draggable': 'cursor:grab select:none',
1386
+ 'dragging': 'cursor:grabbing',
1387
+ 'disabled': 'events:none canvas-fade:muted cursor:not-allowed',
1388
+ 'clickable': 'cursor:pointer',
1389
+
1390
+ // ── GRADIENT HELPERS ─────────────────────────────────────────
1391
+ 'gradient-primary': 'ink:transparent',
1392
+ 'gradient-sunset': 'ink:transparent',
1393
+ 'gradient-ocean': 'ink:transparent',
1394
+ 'gradient-forest': 'ink:transparent',
1395
+ 'gradient-midnight': 'ink:transparent',
1396
+ 'gradient-aurora': 'ink:transparent',
1397
+ 'gradient-candy': 'ink:transparent',
1398
+ 'gradient-fire': 'ink:transparent',
1399
+
1400
+ // ── SPECIAL EFFECTS ──────────────────────────────────────────
1401
+ 'glow': 'cast:glow-md',
1402
+ 'glow-sm': 'cast:glow-sm',
1403
+ 'glow-lg': 'cast:glow-lg',
1404
+ 'glow-primary': 'cast:primary',
1405
+ 'glow-secondary': 'cast:secondary',
1406
+ 'glow-success': 'cast:success',
1407
+ 'glow-error': 'cast:error',
1408
+ 'ring': 'stroke-style:solid stroke-width:base stroke-color:primary',
1409
+ 'ring-sm': 'stroke-style:solid stroke-width:thin stroke-color:primary',
1410
+ 'ring-thick': 'stroke-style:solid stroke-width:thick stroke-color:primary',
1411
+ 'ring-focus': 'stroke-style:solid stroke-width:base stroke-color:primary',
1412
+ 'ring-error': 'stroke-style:solid stroke-width:base stroke-color:error',
1413
+ 'ring-success': 'stroke-style:solid stroke-width:base stroke-color:success',
1414
+ 'inset-ring': 'cast:inner',
1415
+ 'shadow-none': 'cast:none',
1416
+ 'shadow-sm': 'cast:sm',
1417
+ 'shadow-md': 'cast:md',
1418
+ 'shadow-lg': 'cast:lg',
1419
+ 'shadow-xl': 'cast:xl',
1420
+ 'shadow-2xl': 'cast:2xl',
1421
+
1422
+ // ── MISC COMPONENTS ──────────────────────────────────────────
1423
+ 'kpi': 'display:flex flex-dir:col gap:xs',
1424
+ 'kpi-value': 'text:h2 type-weight:bold ink:neutral-900',
1425
+ 'kpi-label': 'text:sm ink:neutral-500',
1426
+ 'kpi-change': 'display:flex-inline align-yi:center gap:xs text:xs type-weight:semi',
1427
+ 'kpi-up': 'kpi-change ink:success',
1428
+ 'kpi-down': 'kpi-change ink:error',
1429
+ 'stat': 'display:flex flex-dir:col gap:xs',
1430
+ 'stat-value': 'text:h3 type-weight:bold ink:neutral-900',
1431
+ 'stat-label': 'text:xs ink:neutral-500 type-weight:medium',
1432
+ 'feature': 'display:flex flex-dir:col gap:md',
1433
+ 'feature-icon': 'display:flex align-yi:center align-x:center canvas-w:xl canvas-h:xl curve:xl paint:primary-50 ink:primary',
1434
+ 'feature-title': 'text:h5 type-weight:semi ink:neutral-900',
1435
+ 'feature-desc': 'text:body ink:neutral-600 leading:relaxed',
1436
+ 'testimonial': 'display:flex flex-dir:col gap:lg',
1437
+ 'testimonial-body':'text:lg ink:neutral-700 type-style:italic leading:relaxed',
1438
+ 'testimonial-author': 'display:flex align-yi:center gap:md',
1439
+ 'pricing-tier': 'display:flex flex-dir:col gap:lg',
1440
+ 'pricing-header': 'display:flex flex-dir:col gap:sm',
1441
+ 'pricing-amount': 'display:flex align-yi:end gap:xs',
1442
+ 'pricing-price': 'text:h1 type-weight:bold ink:neutral-900',
1443
+ 'pricing-period': 'text:body ink:neutral-500',
1444
+ 'pricing-features': 'display:flex flex-dir:col gap:sm',
1445
+ 'pricing-feature': 'display:flex align-yi:start gap:sm text:sm ink:neutral-700',
1446
+ 'timeline': 'display:flex flex-dir:col gap:md pos:relative',
1447
+ 'timeline-item': 'display:flex gap:md pos:relative',
1448
+ 'timeline-dot': 'canvas-w:sm canvas-h:sm curve:full paint:primary pos:relative',
1449
+ 'timeline-line': 'pos:absolute',
1450
+ 'faq': 'display:flex flex-dir:col gap:0',
1451
+ 'faq-item': 'stroke-y-end:neutral-200 stroke-style:solid stroke-width:thin pad-y:md',
1452
+ 'faq-question': 'display:flex align-x:between align-yi:center cursor:pointer text:body type-weight:semi ink:neutral-900',
1453
+ 'faq-answer': 'text:body ink:neutral-600 leading:relaxed',
1454
+ 'step': 'display:flex gap:md',
1455
+ 'step-number': 'canvas-w:md canvas-h:md curve:full paint:primary ink:white display:flex-inline align-yi:center align-x:center type-weight:bold text:sm',
1456
+ 'step-content': 'display:flex flex-dir:col gap:xs flex-grow:1',
242
1457
  },
243
1458
 
1459
+ // ============================================================
1460
+ // ANIMATIONS
1461
+ // ============================================================
244
1462
  animations: {
245
- 'fade-in': {
246
- from: { opacity: 0 },
247
- to: { opacity: 1 },
248
- duration: 'normal',
249
- ease: 'smooth',
250
- },
251
- 'slide-up': {
252
- from: { opacity: 0, y: 40 },
253
- to: { opacity: 1, y: 0 },
254
- duration: 'normal',
255
- ease: 'smooth',
256
- },
257
- 'hover-lift': {
258
- hover: { y: -6, duration: 0.2, ease: 'smooth' },
259
- },
260
- 'hover-glow': {
261
- hover: { boxShadow: '0 0 24px rgba(59,130,246,0.4)', duration: 0.3 },
262
- },
263
- 'active-press': {
264
- active: { scale: 0.97, duration: 0.1 },
265
- },
1463
+
1464
+ // ── ENTRANCE — FADE ──────────────────────────────────────────
1465
+ 'animate-fade-in': { from: { opacity: 0 }, to: { opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1466
+ 'animate-fade-out': { from: { opacity: 1 }, to: { opacity: 0 }, duration: 0.4, ease: 'power2.in' },
1467
+ 'animate-fade-in-fast': { from: { opacity: 0 }, to: { opacity: 1 }, duration: 0.15, ease: 'power2.out' },
1468
+ 'animate-fade-in-slow': { from: { opacity: 0 }, to: { opacity: 1 }, duration: 1.0, ease: 'power2.out' },
1469
+ 'animate-fade-in-down': { from: { opacity: 0, y: -20 }, to: { opacity: 1, y: 0 }, duration: 0.5, ease: 'power2.out' },
1470
+ 'animate-fade-in-up': { from: { opacity: 0, y: 20 }, to: { opacity: 1, y: 0 }, duration: 0.5, ease: 'power2.out' },
1471
+ 'animate-fade-in-left': { from: { opacity: 0, x: -20 }, to: { opacity: 1, x: 0 }, duration: 0.5, ease: 'power2.out' },
1472
+ 'animate-fade-in-right': { from: { opacity: 0, x: 20 }, to: { opacity: 1, x: 0 }, duration: 0.5, ease: 'power2.out' },
1473
+
1474
+ // ── ENTRANCE — SLIDE ─────────────────────────────────────────
1475
+ 'animate-slide-up': { from: { y: 60, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1476
+ 'animate-slide-up-sm': { from: { y: 20, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.3, ease: 'power2.out' },
1477
+ 'animate-slide-up-lg': { from: { y: 120, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1478
+ 'animate-slide-down': { from: { y: -60, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1479
+ 'animate-slide-down-sm': { from: { y: -20, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.3, ease: 'power2.out' },
1480
+ 'animate-slide-left': { from: { x: 80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1481
+ 'animate-slide-left-sm': { from: { x: 30, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.3, ease: 'power2.out' },
1482
+ 'animate-slide-right': { from: { x: -80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1483
+ 'animate-slide-right-sm': { from: { x: -30, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.3, ease: 'power2.out' },
1484
+ 'animate-slide-in-top': { from: { y: '-100%', opacity: 0 }, to: { y: '0%', opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1485
+ 'animate-slide-in-bottom': { from: { y: '100%', opacity: 0 }, to: { y: '0%', opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1486
+ 'animate-slide-in-left': { from: { x: '-100%', opacity: 0 }, to: { x: '0%', opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1487
+ 'animate-slide-in-right': { from: { x: '100%', opacity: 0 }, to: { x: '0%', opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1488
+
1489
+ // ── ENTRANCE — SCALE ─────────────────────────────────────────
1490
+ 'animate-scale-in': { from: { scale: 0, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.4, ease: 'back.out(1.7)' },
1491
+ 'animate-scale-in-sm': { from: { scale: 0.8, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.3, ease: 'power2.out' },
1492
+ 'animate-scale-in-lg': { from: { scale: 0.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'back.out(1.4)' },
1493
+ 'animate-scale-out': { from: { scale: 1, opacity: 1 }, to: { scale: 0, opacity: 0 }, duration: 0.3, ease: 'power2.in' },
1494
+ 'animate-scale-out-sm': { from: { scale: 1, opacity: 1 }, to: { scale: 0.8, opacity: 0 }, duration: 0.2, ease: 'power2.in' },
1495
+ 'animate-scale-x-in': { from: { scaleX: 0, opacity: 0 }, to: { scaleX: 1, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1496
+ 'animate-scale-y-in': { from: { scaleY: 0, opacity: 0 }, to: { scaleY: 1, opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1497
+ 'animate-zoom-in': { from: { scale: 1.2, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1498
+ 'animate-zoom-out': { from: { scale: 0.8, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1499
+ 'animate-pop': { from: { scale: 0.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'elastic.out(1,0.5)' },
1500
+ 'animate-pop-sm': { from: { scale: 0.8, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.4, ease: 'elastic.out(1,0.6)' },
1501
+ 'animate-balloon': { from: { scale: 0, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.7, ease: 'elastic.out(1,0.4)' },
1502
+ 'animate-shrink-in': { from: { scale: 1.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1503
+
1504
+ // ── ENTRANCE — ROTATE & FLIP ──────────────────────────────────
1505
+ 'animate-flip-in': { from: { rotationY: -90, opacity: 0 }, to: { rotationY: 0, opacity: 1 }, duration: 0.5, ease: 'back.out(1.4)' },
1506
+ 'animate-flip-in-x': { from: { rotationX: -90, opacity: 0 }, to: { rotationX: 0, opacity: 1 }, duration: 0.5, ease: 'back.out(1.4)' },
1507
+ 'animate-flip-in-y': { from: { rotationY: -90, opacity: 0 }, to: { rotationY: 0, opacity: 1 }, duration: 0.5, ease: 'back.out(1.4)' },
1508
+ 'animate-flip-down': { from: { rotationX: 90, opacity: 0 }, to: { rotationX: 0, opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1509
+ 'animate-spin-in': { from: { rotation: -180, scale: 0, opacity: 0 }, to: { rotation: 0, scale: 1, opacity: 1 }, duration: 0.6, ease: 'back.out(1.4)' },
1510
+ 'animate-spin-in-fast': { from: { rotation: -90, opacity: 0 }, to: { rotation: 0, opacity: 1 }, duration: 0.4, ease: 'power3.out' },
1511
+ 'animate-roll-in': { from: { rotation: -20, x: -60, opacity: 0 }, to: { rotation: 0, x: 0, opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1512
+ 'animate-tilt-in': { from: { rotationZ: -10, opacity: 0 }, to: { rotationZ: 0, opacity: 1 }, duration: 0.5, ease: 'back.out(1.2)' },
1513
+ 'animate-tilt-in-right': { from: { rotationZ: 10, opacity: 0 }, to: { rotationZ: 0, opacity: 1 }, duration: 0.5, ease: 'back.out(1.2)' },
1514
+
1515
+ // ── ENTRANCE — BLUR ───────────────────────────────────────────
1516
+ 'animate-blur-in': { from: { filter: 'blur(12px)', opacity: 0 }, to: { filter: 'blur(0px)', opacity: 1 }, duration: 0.6, ease: 'power2.out' },
1517
+ 'animate-blur-in-sm': { from: { filter: 'blur(6px)', opacity: 0 }, to: { filter: 'blur(0px)', opacity: 1 }, duration: 0.4, ease: 'power2.out' },
1518
+ 'animate-blur-in-lg': { from: { filter: 'blur(24px)', opacity: 0 }, to: { filter: 'blur(0px)', opacity: 1 }, duration: 0.8, ease: 'power2.out' },
1519
+ 'animate-blur-out': { from: { filter: 'blur(0px)', opacity: 1 }, to: { filter: 'blur(12px)', opacity: 0 }, duration: 0.4, ease: 'power2.in' },
1520
+ 'animate-sharpen': { from: { filter: 'blur(20px) saturate(0)', opacity: 0 }, to: { filter: 'blur(0) saturate(1)', opacity: 1 }, duration: 0.8, ease: 'power2.out' },
1521
+ 'animate-unblur': { from: { filter: 'blur(8px)', opacity: 0.5 }, to: { filter: 'blur(0)', opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1522
+
1523
+ // ── ENTRANCE — CLIP & REVEAL ──────────────────────────────────
1524
+ 'animate-clip-up': { from: { clipPath: 'inset(100% 0 0 0)', opacity: 1 }, to: { clipPath: 'inset(0% 0 0 0)', opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1525
+ 'animate-clip-down': { from: { clipPath: 'inset(0 0 100% 0)', opacity: 1 }, to: { clipPath: 'inset(0% 0 0 0)', opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1526
+ 'animate-clip-left': { from: { clipPath: 'inset(0 100% 0 0)', opacity: 1 }, to: { clipPath: 'inset(0% 0 0 0)', opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1527
+ 'animate-clip-right': { from: { clipPath: 'inset(0 0 0 100%)', opacity: 1 }, to: { clipPath: 'inset(0% 0 0 0)', opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1528
+ 'animate-wipe-in': { from: { scaleX: 0, transformOrigin: 'left' }, to: { scaleX: 1 }, duration: 0.5, ease: 'power3.out' },
1529
+ 'animate-wipe-in-right': { from: { scaleX: 0, transformOrigin: 'right' }, to: { scaleX: 1 }, duration: 0.5, ease: 'power3.out' },
1530
+ 'animate-curtain': { from: { scaleY: 0, transformOrigin: 'top' }, to: { scaleY: 1 }, duration: 0.5, ease: 'power3.out' },
1531
+ 'animate-curtain-up': { from: { scaleY: 0, transformOrigin: 'bottom' }, to: { scaleY: 1 }, duration: 0.5, ease: 'power3.out' },
1532
+
1533
+ // ── ENTRANCE — BOUNCE & SPRING ────────────────────────────────
1534
+ 'animate-bounce-in': { from: { y: -60, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.8, ease: 'bounce.out' },
1535
+ 'animate-bounce-in-up': { from: { y: 60, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.8, ease: 'bounce.out' },
1536
+ 'animate-bounce-in-left': { from: { x: -80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.8, ease: 'bounce.out' },
1537
+ 'animate-bounce-in-right': { from: { x: 80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.8, ease: 'bounce.out' },
1538
+ 'animate-bounce-in-scale': { from: { scale: 0.3, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.8, ease: 'bounce.out' },
1539
+ 'animate-spring-in': { from: { scale: 0.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.7, ease: 'elastic.out(1,0.4)' },
1540
+ 'animate-spring-up': { from: { y: 80, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.7, ease: 'elastic.out(1,0.5)' },
1541
+ 'animate-spring-down': { from: { y: -80, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.7, ease: 'elastic.out(1,0.5)' },
1542
+ 'animate-elastic-in': { from: { scaleX: 1.4, scaleY: 0.6, opacity: 0 }, to: { scaleX: 1, scaleY: 1, opacity: 1 }, duration: 0.6, ease: 'elastic.out(1,0.5)' },
1543
+
1544
+ // ── ENTRANCE — SPECIAL ────────────────────────────────────────
1545
+ 'animate-typewriter': { from: { width: '0%' }, to: { width: '100%' }, duration: 1.5, ease: 'none' },
1546
+ 'animate-draw': { from: { strokeDashoffset: '100%' }, to: { strokeDashoffset: '0%' }, duration: 1.0, ease: 'power2.inOut' },
1547
+ 'animate-morph-in': { from: { borderRadius: '50%', scale: 0.3, opacity: 0 }, to: { borderRadius: '0%', scale: 1, opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1548
+ 'animate-glitch-in': { from: { skewX: -10, opacity: 0, x: -10 }, to: { skewX: 0, opacity: 1, x: 0 }, duration: 0.4, ease: 'power4.out' },
1549
+ 'animate-spotlight': { from: { clipPath: 'circle(0% at 50% 50%)', opacity: 0 }, to: { clipPath: 'circle(100% at 50% 50%)', opacity: 1 }, duration: 0.7, ease: 'power2.out' },
1550
+ 'animate-rise': { from: { y: 40, opacity: 0, scale: 0.95 }, to: { y: 0, opacity: 1, scale: 1 }, duration: 0.6, ease: 'power3.out' },
1551
+ 'animate-drop': { from: { y: -40, opacity: 0, scale: 0.95 }, to: { y: 0, opacity: 1, scale: 1 }, duration: 0.6, ease: 'power3.out' },
1552
+ 'animate-materialize': { from: { opacity: 0, scale: 0.9, filter: 'blur(8px)' }, to: { opacity: 1, scale: 1, filter: 'blur(0px)' }, duration: 0.7, ease: 'power2.out' },
1553
+ 'animate-dissolve-in': { from: { opacity: 0, filter: 'blur(4px) saturate(0)' }, to: { opacity: 1, filter: 'blur(0) saturate(1)' }, duration: 0.8, ease: 'power2.out' },
1554
+ 'animate-perspective-in': { from: { rotationX: 40, opacity: 0, z: -200 }, to: { rotationX: 0, opacity: 1, z: 0 }, duration: 0.7, ease: 'power3.out' },
1555
+ 'animate-swoop-in': { from: { y: 100, rotation: 5, opacity: 0 }, to: { y: 0, rotation: 0, opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1556
+ 'animate-swoop-left': { from: { x: 100, rotation: -5, opacity: 0 }, to: { x: 0, rotation: 0, opacity: 1 }, duration: 0.6, ease: 'power3.out' },
1557
+ 'animate-swoosh': { from: { x: -120, skewX: 15, opacity: 0 }, to: { x: 0, skewX: 0, opacity: 1 }, duration: 0.5, ease: 'power3.out' },
1558
+ 'animate-slam': { from: { y: -80, scale: 1.1, opacity: 0 }, to: { y: 0, scale: 1, opacity: 1 }, duration: 0.4, ease: 'power4.out' },
1559
+ 'animate-unfurl': { from: { scaleX: 0, opacity: 0 }, to: { scaleX: 1, opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1560
+ 'animate-unfurl-y': { from: { scaleY: 0, opacity: 0 }, to: { scaleY: 1, opacity: 1 }, duration: 0.5, ease: 'power2.out' },
1561
+ 'animate-levitate': { from: { y: 30, opacity: 0, scale: 0.97 }, to: { y: 0, opacity: 1, scale: 1 }, duration: 0.8, ease: 'power2.out' },
1562
+
1563
+ // ── HOVER ANIMATIONS ─────────────────────────────────────────
1564
+ 'hover-lift': { hover: { y: -8, duration: 0.2, ease: 'power2.out' } },
1565
+ 'hover-lift-sm': { hover: { y: -4, duration: 0.15, ease: 'power2.out' } },
1566
+ 'hover-lift-lg': { hover: { y: -12, duration: 0.25, ease: 'power2.out' } },
1567
+ 'hover-sink': { hover: { y: 4, duration: 0.15, ease: 'power2.out' } },
1568
+ 'hover-float': { hover: { y: -6, duration: 0.3, ease: 'power1.inOut' } },
1569
+ 'hover-scale': { hover: { scale: 1.05, duration: 0.2, ease: 'power2.out' } },
1570
+ 'hover-scale-sm': { hover: { scale: 1.02, duration: 0.15, ease: 'power2.out' } },
1571
+ 'hover-scale-lg': { hover: { scale: 1.1, duration: 0.25, ease: 'back.out(1.5)' } },
1572
+ 'hover-scale-xl': { hover: { scale: 1.15, duration: 0.3, ease: 'back.out(1.7)' } },
1573
+ 'hover-shrink': { hover: { scale: 0.97, duration: 0.15, ease: 'power2.out' } },
1574
+ 'hover-grow': { hover: { scale: 1.08, duration: 0.2, ease: 'back.out(1.5)' } },
1575
+ 'hover-glow': { hover: { boxShadow: '0 0 24px rgba(59,130,246,0.5)', duration: 0.2 } },
1576
+ 'hover-glow-sm': { hover: { boxShadow: '0 0 12px rgba(59,130,246,0.3)', duration: 0.15 } },
1577
+ 'hover-glow-lg': { hover: { boxShadow: '0 0 48px rgba(59,130,246,0.6)', duration: 0.25 } },
1578
+ 'hover-glow-primary': { hover: { boxShadow: '0 0 24px rgba(59,130,246,0.5)', duration: 0.2 } },
1579
+ 'hover-glow-secondary': { hover: { boxShadow: '0 0 24px rgba(139,92,246,0.5)', duration: 0.2 } },
1580
+ 'hover-glow-accent': { hover: { boxShadow: '0 0 24px rgba(217,70,239,0.5)', duration: 0.2 } },
1581
+ 'hover-glow-success': { hover: { boxShadow: '0 0 24px rgba(16,185,129,0.5)', duration: 0.2 } },
1582
+ 'hover-glow-error': { hover: { boxShadow: '0 0 24px rgba(239,68,68,0.5)', duration: 0.2 } },
1583
+ 'hover-shadow-lg': { hover: { boxShadow: '0 20px 40px rgba(0,0,0,0.15)', y: -4, duration: 0.25, ease: 'power2.out' } },
1584
+ 'hover-bright': { hover: { filter: 'brightness(1.08)', duration: 0.15 } },
1585
+ 'hover-dim': { hover: { filter: 'brightness(0.9)', duration: 0.15 } },
1586
+ 'hover-saturate': { hover: { filter: 'saturate(1.3)', duration: 0.2 } },
1587
+ 'hover-rotate': { hover: { rotation: 5, duration: 0.2, ease: 'power2.out' } },
1588
+ 'hover-rotate-sm': { hover: { rotation: 2, duration: 0.15, ease: 'power2.out' } },
1589
+ 'hover-rotate-lg': { hover: { rotation: 15, duration: 0.25, ease: 'back.out' } },
1590
+ 'hover-tilt': { hover: { rotationY: 10, duration: 0.3, ease: 'power2.out' } },
1591
+ 'hover-tilt-left': { hover: { rotationY: -10, duration: 0.3, ease: 'power2.out' } },
1592
+ 'hover-skew': { hover: { skewX: 5, duration: 0.2, ease: 'power2.out' } },
1593
+ 'hover-blur': { hover: { filter: 'blur(2px)', duration: 0.15 } },
1594
+ 'hover-unblur': { hover: { filter: 'blur(0px)', duration: 0.15 } },
1595
+ 'hover-spin': { hover: { rotation: 360, duration: 0.6, ease: 'power2.out' } },
1596
+ 'hover-bob': { hover: { y: -4, duration: 0.3, ease: 'power1.inOut', yoyo: true, repeat: 1 } },
1597
+ 'hover-pulse': { hover: { scale: 1.05, duration: 0.2, ease: 'power1.inOut', yoyo: true, repeat: 1 } },
1598
+ 'hover-shake': { hover: { x: 3, duration: 0.05, ease: 'none', yoyo: true, repeat: 6 } },
1599
+ 'hover-wobble': { hover: { rotation: 5, duration: 0.1, ease: 'none', yoyo: true, repeat: 5 } },
1600
+ 'hover-jello': { hover: { scaleX: 1.15, scaleY: 0.85, duration: 0.1, ease: 'power2.out', yoyo: true, repeat: 3 } },
1601
+ 'hover-heartbeat': { hover: { scale: 1.15, duration: 0.1, ease: 'power2.out', yoyo: true, repeat: 3 } },
1602
+ 'hover-underline': { hover: { textDecorationLine: 'underline', duration: 0.1 } },
1603
+ 'hover-fade': { hover: { opacity: 0.7, duration: 0.2 } },
1604
+ 'hover-fade-strong': { hover: { opacity: 0.4, duration: 0.2 } },
1605
+ 'hover-x': { hover: { x: 4, duration: 0.2, ease: 'power2.out' } },
1606
+ 'hover-x-sm': { hover: { x: 2, duration: 0.15, ease: 'power2.out' } },
1607
+ 'hover-x-lg': { hover: { x: 8, duration: 0.25, ease: 'power2.out' } },
1608
+ 'hover-x-neg': { hover: { x: -4, duration: 0.2, ease: 'power2.out' } },
1609
+
1610
+ // ── ACTIVE ANIMATIONS ─────────────────────────────────────────
1611
+ 'active-press': { active: { scale: 0.95, duration: 0.08, ease: 'power2.inOut' } },
1612
+ 'active-press-sm': { active: { scale: 0.97, duration: 0.07, ease: 'power2.inOut' } },
1613
+ 'active-press-lg': { active: { scale: 0.9, duration: 0.1, ease: 'power2.inOut' } },
1614
+ 'active-press-xl': { active: { scale: 0.85, duration: 0.1, ease: 'power3.inOut' } },
1615
+ 'active-bounce': { active: { scale: 0.9, duration: 0.1, ease: 'back.out(2)' } },
1616
+ 'active-bounce-sm': { active: { scale: 0.95, duration: 0.08, ease: 'back.out(2)' } },
1617
+ 'active-push': { active: { y: 2, duration: 0.08, ease: 'power2.inOut' } },
1618
+ 'active-push-sm': { active: { y: 1, duration: 0.06, ease: 'power2.inOut' } },
1619
+ 'active-push-lg': { active: { y: 4, duration: 0.1, ease: 'power2.inOut' } },
1620
+ 'active-inset': { active: { scale: 0.92, boxShadow: 'inset 0 3px 8px rgba(0,0,0,0.2)', duration: 0.1 } },
1621
+ 'active-dim': { active: { opacity: 0.8, duration: 0.08 } },
1622
+ 'active-dim-strong': { active: { opacity: 0.6, duration: 0.08 } },
1623
+ 'active-highlight': { active: { filter: 'brightness(1.1)', duration: 0.08 } },
1624
+ 'active-darken': { active: { filter: 'brightness(0.85)', duration: 0.08 } },
1625
+ 'active-rotate': { active: { rotation: 90, duration: 0.15, ease: 'power2.out' } },
1626
+ 'active-spin': { active: { rotation: 180, duration: 0.2, ease: 'power2.out' } },
1627
+ 'active-shake': { active: { x: 3, duration: 0.05, ease: 'none', yoyo: true, repeat: 4 } },
1628
+ 'active-click': { active: { scale: 0.93, duration: 0.05, ease: 'power4.inOut', yoyo: true, repeat: 1 } },
1629
+
1630
+ // ── SCROLL TRIGGER ANIMATIONS ─────────────────────────────────
1631
+ 'scroll-trigger': { scrollTrigger: { trigger: 'self', start: 'top 80%', toggleActions: 'play none none reverse' } },
1632
+ 'scroll-trigger-top': { scrollTrigger: { trigger: 'self', start: 'top 90%', toggleActions: 'play none none none' } },
1633
+ 'scroll-trigger-mid': { scrollTrigger: { trigger: 'self', start: 'top 60%', toggleActions: 'play none none reverse' } },
1634
+ 'scroll-trigger-late':{ scrollTrigger: { trigger: 'self', start: 'top 40%', toggleActions: 'play none none reverse' } },
1635
+
1636
+ 'scroll-fade-in': { from: { opacity: 0, y: 30 }, to: { opacity: 1, y: 0 }, duration: 0.7, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1637
+ 'scroll-fade-up': { from: { opacity: 0, y: 50 }, to: { opacity: 1, y: 0 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1638
+ 'scroll-fade-down': { from: { opacity: 0, y: -50 }, to: { opacity: 1, y: 0 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1639
+ 'scroll-fade-left': { from: { opacity: 0, x: 60 }, to: { opacity: 1, x: 0 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1640
+ 'scroll-fade-right': { from: { opacity: 0, x: -60 }, to: { opacity: 1, x: 0 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1641
+ 'scroll-fade-in-sm': { from: { opacity: 0, y: 15 }, to: { opacity: 1, y: 0 }, duration: 0.5, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 88%' } },
1642
+ 'scroll-fade-in-lg': { from: { opacity: 0, y: 80 }, to: { opacity: 1, y: 0 }, duration: 0.9, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1643
+
1644
+ 'scroll-slide-up': { from: { y: 80, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1645
+ 'scroll-slide-down': { from: { y: -80, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1646
+ 'scroll-slide-left': { from: { x: 80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1647
+ 'scroll-slide-right': { from: { x: -80, opacity: 0 }, to: { x: 0, opacity: 1 }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1648
+ 'scroll-slide-up-lg': { from: { y: 150, opacity: 0 }, to: { y: 0, opacity: 1 }, duration: 1.0, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1649
+
1650
+ 'scroll-scale-in': { from: { scale: 0.85, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.7, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1651
+ 'scroll-scale-in-sm': { from: { scale: 0.95, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.5, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 88%' } },
1652
+ 'scroll-scale-out': { from: { scale: 1.1, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.6, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1653
+ 'scroll-pop': { from: { scale: 0.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.7, ease: 'back.out(1.7)', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1654
+ 'scroll-spring': { from: { scale: 0.7, opacity: 0 }, to: { scale: 1, opacity: 1 }, duration: 0.8, ease: 'elastic.out(1,0.5)', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1655
+
1656
+ 'scroll-blur-in': { from: { filter: 'blur(12px)', opacity: 0 }, to: { filter: 'blur(0)', opacity: 1 }, duration: 0.8, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1657
+ 'scroll-rise': { from: { y: 40, opacity: 0, scale: 0.95 }, to: { y: 0, opacity: 1, scale: 1 }, duration: 0.8, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1658
+ 'scroll-flip-in': { from: { rotationX: 60, opacity: 0, z: -100 }, to: { rotationX: 0, opacity: 1, z: 0 }, duration: 0.8, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1659
+ 'scroll-clip-up': { from: { clipPath: 'inset(100% 0 0 0)' }, to: { clipPath: 'inset(0%)' }, duration: 0.7, ease: 'power3.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1660
+ 'scroll-materialize': { from: { opacity: 0, scale: 0.9, filter: 'blur(8px)' }, to: { opacity: 1, scale: 1, filter: 'blur(0)' }, duration: 0.9, ease: 'power2.out', scrollTrigger: { trigger: 'self', start: 'top 85%' } },
1661
+
1662
+ // ── SCROLL SCRUB (parallax) ────────────────────────────────────
1663
+ 'scroll-scrub': { scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1664
+ 'scroll-scrub-fast': { scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: 0.3 } },
1665
+ 'scroll-scrub-slow': { scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: 2 } },
1666
+ 'scroll-parallax-y': { from: { y: '-20%' }, to: { y: '20%' }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1667
+ 'scroll-parallax-up': { from: { y: '0%' }, to: { y: '-30%' }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1668
+ 'scroll-parallax-dn': { from: { y: '0%' }, to: { y: '30%' }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1669
+ 'scroll-parallax-x': { from: { x: '-10%' }, to: { x: '10%' }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1670
+ 'scroll-parallax-scale': { from: { scale: 1.0 }, to: { scale: 1.2 }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1671
+ 'scroll-parallax-rotate': { from: { rotation: 0 }, to: { rotation: 30 }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1672
+ 'scroll-parallax-fade': { from: { opacity: 1 }, to: { opacity: 0 }, scrollTrigger: { trigger: 'self', start: 'top 30%', end: 'bottom 0%', scrub: true } },
1673
+ 'scroll-pin': { scrollTrigger: { trigger: 'self', start: 'top top', end: '+=300%', pin: true, scrub: true } },
1674
+ 'scroll-pin-sm': { scrollTrigger: { trigger: 'self', start: 'top top', end: '+=100%', pin: true, scrub: true } },
1675
+ 'scroll-zoom': { from: { scale: 1 }, to: { scale: 1.3 }, scrollTrigger: { trigger: 'self', start: 'top center', end: 'bottom top', scrub: true } },
1676
+ 'scroll-zoom-out': { from: { scale: 1.3 }, to: { scale: 1 }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'center center', scrub: true } },
1677
+ 'scroll-rotate-scrub':{ from: { rotation: -10 }, to: { rotation: 10 }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'bottom top', scrub: true } },
1678
+ 'scroll-unblur': { from: { filter: 'blur(10px)', opacity: 0 }, to: { filter: 'blur(0)', opacity: 1 }, scrollTrigger: { trigger: 'self', start: 'top 80%', end: 'top 40%', scrub: true } },
1679
+ 'scroll-brightness': { from: { filter: 'brightness(0.5)' }, to: { filter: 'brightness(1)' }, scrollTrigger: { trigger: 'self', start: 'top bottom', end: 'center center', scrub: true } },
1680
+
1681
+ // ── STAGGER ANIMATIONS ────────────────────────────────────────
1682
+ 'stagger-fade': { targets: 'children', stagger: 0.08, from: { opacity: 0 }, to: { opacity: 1 } },
1683
+ 'stagger-fade-fast': { targets: 'children', stagger: 0.04, from: { opacity: 0 }, to: { opacity: 1 } },
1684
+ 'stagger-fade-slow': { targets: 'children', stagger: 0.15, from: { opacity: 0 }, to: { opacity: 1 } },
1685
+ 'stagger-up': { targets: 'children', stagger: 0.08, from: { opacity: 0, y: 20 }, to: { opacity: 1, y: 0 } },
1686
+ 'stagger-up-sm': { targets: 'children', stagger: 0.05, from: { opacity: 0, y: 10 }, to: { opacity: 1, y: 0 } },
1687
+ 'stagger-up-lg': { targets: 'children', stagger: 0.12, from: { opacity: 0, y: 40 }, to: { opacity: 1, y: 0 } },
1688
+ 'stagger-down': { targets: 'children', stagger: 0.08, from: { opacity: 0, y: -20 }, to: { opacity: 1, y: 0 } },
1689
+ 'stagger-left': { targets: 'children', stagger: 0.08, from: { opacity: 0, x: 20 }, to: { opacity: 1, x: 0 } },
1690
+ 'stagger-right': { targets: 'children', stagger: 0.08, from: { opacity: 0, x: -20 }, to: { opacity: 1, x: 0 } },
1691
+ 'stagger-scale': { targets: 'children', stagger: 0.08, from: { opacity: 0, scale: 0.8 }, to: { opacity: 1, scale: 1 } },
1692
+ 'stagger-scale-fast': { targets: 'children', stagger: 0.04, from: { opacity: 0, scale: 0.9 }, to: { opacity: 1, scale: 1 } },
1693
+ 'stagger-pop': { targets: 'children', stagger: 0.08, from: { opacity: 0, scale: 0.5 }, to: { opacity: 1, scale: 1 }, ease: 'back.out(1.7)' },
1694
+ 'stagger-blur': { targets: 'children', stagger: 0.08, from: { opacity: 0, filter: 'blur(8px)' }, to: { opacity: 1, filter: 'blur(0)' } },
1695
+ 'stagger-flip': { targets: 'children', stagger: 0.08, from: { opacity: 0, rotationY: -60 }, to: { opacity: 1, rotationY: 0 } },
1696
+ 'stagger-rise': { targets: 'children', stagger: 0.1, from: { opacity: 0, y: 30, scale: 0.95 }, to: { opacity: 1, y: 0, scale: 1 } },
1697
+ 'stagger-children-50': { targets: 'children', stagger: 0.05, from: { opacity: 0, y: 10 }, to: { opacity: 1, y: 0 } },
1698
+ 'stagger-children-100': { targets: 'children', stagger: 0.1, from: { opacity: 0, y: 20 }, to: { opacity: 1, y: 0 } },
1699
+ 'stagger-children-150': { targets: 'children', stagger: 0.15, from: { opacity: 0, y: 20 }, to: { opacity: 1, y: 0 } },
1700
+ 'stagger-children-200': { targets: 'children', stagger: 0.2, from: { opacity: 0, y: 30 }, to: { opacity: 1, y: 0 } },
1701
+
1702
+ // ── STAGGER + SCROLL ──────────────────────────────────────────
1703
+ 'scroll-stagger-up': { targets: 'children', stagger: 0.1, from: { opacity: 0, y: 30 }, to: { opacity: 1, y: 0 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1704
+ 'scroll-stagger-fade': { targets: 'children', stagger: 0.08, from: { opacity: 0 }, to: { opacity: 1 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1705
+ 'scroll-stagger-left': { targets: 'children', stagger: 0.1, from: { opacity: 0, x: 40 }, to: { opacity: 1, x: 0 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1706
+ 'scroll-stagger-right': { targets: 'children', stagger: 0.1, from: { opacity: 0, x: -40 }, to: { opacity: 1, x: 0 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1707
+ 'scroll-stagger-scale': { targets: 'children', stagger: 0.1, from: { opacity: 0, scale: 0.8 }, to: { opacity: 1, scale: 1 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1708
+ 'scroll-stagger-pop': { targets: 'children', stagger: 0.1, from: { opacity: 0, scale: 0.5 }, to: { opacity: 1, scale: 1 }, ease: 'back.out(1.7)', scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1709
+ 'scroll-stagger-flip': { targets: 'children', stagger: 0.1, from: { opacity: 0, rotationY: -60 }, to: { opacity: 1, rotationY: 0 }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1710
+ 'scroll-stagger-blur': { targets: 'children', stagger: 0.08, from: { opacity: 0, filter: 'blur(8px)' }, to: { opacity: 1, filter: 'blur(0)' }, scrollTrigger: { trigger: 'self', start: 'top 80%' } },
1711
+
1712
+ // ── GESTURE ANIMATIONS ────────────────────────────────────────
1713
+ 'gesture-press': { active: { scale: 0.94, duration: 0.08, ease: 'power2.out' } },
1714
+ 'gesture-press-hard': { active: { scale: 0.88, duration: 0.06, ease: 'power3.out' } },
1715
+ 'gesture-press-light': { active: { scale: 0.97, duration: 0.07, ease: 'power2.out' } },
1716
+ 'gesture-push': { active: { y: 2, scale: 0.98, duration: 0.08, ease: 'power2.out' } },
1717
+ 'gesture-push-sm': { active: { y: 1, scale: 0.99, duration: 0.06, ease: 'power2.out' } },
1718
+ 'gesture-push-lg': { active: { y: 4, scale: 0.95, duration: 0.1, ease: 'power2.out' } },
1719
+ 'gesture-click': { active: { scale: 0.92, boxShadow: 'inset 0 4px 8px rgba(0,0,0,0.15)', duration: 0.06, ease: 'power3.out' } },
1720
+ 'gesture-click-bounce': { active: { scale: 0.9, duration: 0.08, ease: 'back.out(3)' } },
1721
+ 'gesture-tap': { active: { opacity: 0.7, scale: 0.96, duration: 0.05, ease: 'power2.inOut' } },
1722
+ 'gesture-tap-ripple': { active: { scale: 0.95, duration: 0.08 } },
1723
+ 'gesture-hold': { active: { scale: 1.0, boxShadow: '0 0 0 3px rgba(59,130,246,0.4)', duration: 0.3, ease: 'power2.out' } },
1724
+ 'gesture-hold-grow': { active: { scale: 1.05, duration: 0.5, ease: 'power1.out' } },
1725
+
1726
+ // Drag
1727
+ 'gesture-drag': { active: { scale: 1.05, boxShadow: '0 20px 40px rgba(0,0,0,0.2)', rotation: 3, duration: 0.15, ease: 'power2.out' } },
1728
+ 'gesture-drag-flat': { active: { scale: 1.02, boxShadow: '0 8px 20px rgba(0,0,0,0.15)', duration: 0.12 } },
1729
+ 'gesture-drag-ghost': { active: { opacity: 0.6, scale: 1.05, duration: 0.12 } },
1730
+ 'gesture-drag-snap': { active: { scale: 1.08, rotation: 2, boxShadow: '0 24px 48px rgba(0,0,0,0.2)', duration: 0.15 } },
1731
+ 'gesture-drag-rotate': { active: { rotation: 5, scale: 1.05, duration: 0.15, ease: 'power2.out' } },
1732
+
1733
+ // Swipe
1734
+ 'gesture-swipe-left': { active: { x: -6, opacity: 0.8, duration: 0.1, ease: 'power2.out' } },
1735
+ 'gesture-swipe-right': { active: { x: 6, opacity: 0.8, duration: 0.1, ease: 'power2.out' } },
1736
+ 'gesture-swipe-up': { active: { y: -6, opacity: 0.8, duration: 0.1, ease: 'power2.out' } },
1737
+ 'gesture-swipe-down': { active: { y: 6, opacity: 0.8, duration: 0.1, ease: 'power2.out' } },
1738
+ 'gesture-swipe-dismiss': { active: { x: 100, opacity: 0, duration: 0.3, ease: 'power3.in' } },
1739
+ 'gesture-swipe-dismiss-left': { active: { x: -100, opacity: 0, duration: 0.3, ease: 'power3.in' } },
1740
+ 'gesture-swipe-reveal': { active: { x: 80, duration: 0.25, ease: 'power2.out' } },
1741
+
1742
+ // Pinch
1743
+ 'gesture-pinch-in': { active: { scale: 0.85, duration: 0.2, ease: 'power2.out' } },
1744
+ 'gesture-pinch-out': { active: { scale: 1.15, duration: 0.2, ease: 'power2.out' } },
1745
+ 'gesture-pinch-zoom': { active: { scale: 1.2, duration: 0.3, ease: 'power2.out' } },
1746
+ 'gesture-pinch-close': { active: { scale: 0.8, opacity: 0, duration: 0.3, ease: 'power2.in' } },
1747
+
1748
+ // Pull
1749
+ 'gesture-pull-down': { active: { y: 12, scale: 0.98, duration: 0.15, ease: 'power1.out' } },
1750
+ 'gesture-pull-up': { active: { y: -12, scale: 0.98, duration: 0.15, ease: 'power1.out' } },
1751
+ 'gesture-pull-left': { active: { x: -12, scale: 0.98, duration: 0.15, ease: 'power1.out' } },
1752
+ 'gesture-pull-right': { active: { x: 12, scale: 0.98, duration: 0.15, ease: 'power1.out' } },
1753
+ 'gesture-pull-to-refresh': { active: { y: 40, scale: 0.95, duration: 0.3, ease: 'power2.out' } },
1754
+ 'gesture-pull-stretch': { active: { scaleY: 1.08, duration: 0.2, ease: 'power1.out' } },
1755
+ 'gesture-pull-rubber': { active: { y: 20, scaleY: 1.05, duration: 0.2, ease: 'power1.out' } },
1756
+
1757
+ // Long press
1758
+ 'gesture-longpress': { active: { scale: 0.96, duration: 0.5, ease: 'power1.in' } },
1759
+ 'gesture-longpress-shake': { active: { x: 2, duration: 0.08, ease: 'none', yoyo: true, repeat: 8 } },
1760
+ 'gesture-longpress-glow': { active: { boxShadow: '0 0 20px rgba(59,130,246,0.6)', scale: 1.02, duration: 0.5 } },
1761
+ 'gesture-longpress-pulse': { active: { scale: 1.04, duration: 0.4, ease: 'power1.inOut', yoyo: true, repeat: 3 } },
1762
+
1763
+ // Focus
1764
+ 'gesture-focus': { hover: { boxShadow: '0 0 0 3px rgba(59,130,246,0.4)', duration: 0.15 } },
1765
+ 'gesture-focus-outline': { hover: { boxShadow: '0 0 0 4px rgba(59,130,246,0.3)', outline: 'none', duration: 0.15 } },
1766
+ 'gesture-focus-glow': { hover: { boxShadow: '0 0 0 3px rgba(59,130,246,0.5), 0 0 12px rgba(59,130,246,0.3)', duration: 0.15 } },
1767
+ 'gesture-focus-lift': { hover: { y: -2, boxShadow: '0 0 0 3px rgba(59,130,246,0.4), 0 8px 16px rgba(0,0,0,0.1)', duration: 0.2 } },
1768
+
1769
+ // Hover — pointer-specific
1770
+ 'gesture-hover-lift': { hover: { y: -6, boxShadow: '0 12px 24px rgba(0,0,0,0.12)', duration: 0.2, ease: 'power2.out' } },
1771
+ 'gesture-hover-sink': { hover: { y: 3, duration: 0.15, ease: 'power2.out' } },
1772
+ 'gesture-hover-scale': { hover: { scale: 1.04, duration: 0.2, ease: 'power2.out' } },
1773
+ 'gesture-hover-tilt': { hover: { rotationX: 8, rotationY: 8, duration: 0.3, ease: 'power2.out' } },
1774
+ 'gesture-hover-glow': { hover: { boxShadow: '0 0 30px rgba(59,130,246,0.4)', duration: 0.2 } },
1775
+ 'gesture-hover-reveal': { hover: { opacity: 1, duration: 0.15, ease: 'power2.out' } },
1776
+ 'gesture-hover-hide': { hover: { opacity: 0, duration: 0.15, ease: 'power2.out' } },
1777
+ 'gesture-hover-x': { hover: { x: 4, duration: 0.2, ease: 'power2.out' } },
1778
+ 'gesture-hover-x-neg': { hover: { x: -4, duration: 0.2, ease: 'power2.out' } },
1779
+ 'gesture-hover-bob': { hover: { y: -4, duration: 0.4, ease: 'sine.inOut', yoyo: true, repeat: -1 } },
1780
+ 'gesture-hover-spin': { hover: { rotation: 360, duration: 0.6, ease: 'power2.out' } },
1781
+ 'gesture-hover-flip': { hover: { rotationY: 180, duration: 0.4, ease: 'power2.inOut' } },
1782
+ 'gesture-hover-wiggle': { hover: { rotation: 5, duration: 0.1, ease: 'none', yoyo: true, repeat: 5 } },
1783
+ 'gesture-hover-pulse': { hover: { scale: 1.06, duration: 0.3, ease: 'power1.inOut', yoyo: true, repeat: -1 } },
1784
+ 'gesture-hover-breathe': { hover: { scale: 1.03, duration: 0.8, ease: 'sine.inOut', yoyo: true, repeat: -1 } },
1785
+ 'gesture-hover-shake': { hover: { x: 4, duration: 0.06, ease: 'none', yoyo: true, repeat: 8 } },
1786
+
1787
+ // Keyboard
1788
+ 'gesture-key-press': { active: { y: 2, scale: 0.97, duration: 0.05 } },
1789
+ 'gesture-key-return': { active: { y: 0, scale: 1.0, duration: 0.15, ease: 'back.out(2)' } },
1790
+
1791
+ // Scroll gesture
1792
+ 'gesture-scroll-highlight': { scrollTrigger: { trigger: 'self', start: 'top 70%', end: 'top 30%', scrub: true }, from: { opacity: 0.3 }, to: { opacity: 1 } },
1793
+ 'gesture-scroll-dim': { scrollTrigger: { trigger: 'self', start: 'bottom 70%', end: 'bottom 30%', scrub: true }, from: { opacity: 1 }, to: { opacity: 0.3 } },
1794
+ 'gesture-scroll-rise': { scrollTrigger: { trigger: 'self', start: 'top 80%', end: 'top 20%', scrub: true }, from: { y: 30, opacity: 0 }, to: { y: 0, opacity: 1 } },
1795
+
1796
+ // Magnetic
1797
+ 'gesture-magnetic': { hover: { scale: 1.06, duration: 0.3, ease: 'power2.out' } },
1798
+ 'gesture-magnetic-strong': { hover: { scale: 1.12, duration: 0.3, ease: 'power2.out' } },
1799
+ 'gesture-magnetic-text': { hover: { y: -2, duration: 0.2, ease: 'power2.out' } },
1800
+
1801
+ // Ripple-style
1802
+ 'gesture-ripple': { active: { scale: 0.95, opacity: 0.9, duration: 0.1 } },
1803
+ 'gesture-ripple-out': { active: { scale: 1.1, opacity: 0, duration: 0.4, ease: 'power2.out' } },
1804
+
1805
+ // Spring / elastic
1806
+ 'gesture-spring-press': { active: { scale: 0.88, duration: 0.1, ease: 'power4.inOut' } },
1807
+ 'gesture-spring-release': { hover: { scale: 1, duration: 0.5, ease: 'elastic.out(1,0.4)' } },
1808
+ 'gesture-bounce-press': { active: { scale: 0.85, duration: 0.08 } },
1809
+ 'gesture-bounce-release': { hover: { scale: 1, duration: 0.6, ease: 'elastic.out(1,0.5)' } },
1810
+ 'gesture-elastic-x': { active: { scaleX: 0.9, duration: 0.08 } },
1811
+ 'gesture-elastic-y': { active: { scaleY: 0.9, duration: 0.08 } },
1812
+
1813
+ // Haptic-like
1814
+ 'gesture-haptic': { active: { x: 2, duration: 0.04, ease: 'none', yoyo: true, repeat: 4 } },
1815
+ 'gesture-haptic-hard': { active: { x: 4, duration: 0.04, ease: 'none', yoyo: true, repeat: 6 } },
1816
+ 'gesture-haptic-soft': { active: { x: 1, duration: 0.05, ease: 'none', yoyo: true, repeat: 2 } },
1817
+ 'gesture-haptic-y': { active: { y: 2, duration: 0.04, ease: 'none', yoyo: true, repeat: 4 } },
1818
+
1819
+ // Selection
1820
+ 'gesture-select': { active: { scale: 1.02, boxShadow: '0 0 0 2px rgba(59,130,246,0.5)', duration: 0.15 } },
1821
+ 'gesture-deselect': { active: { scale: 1, boxShadow: '0 0 0 0px rgba(59,130,246,0)', duration: 0.15 } },
1822
+ 'gesture-check': { active: { scale: 1.1, rotation: 5, duration: 0.2, ease: 'back.out(2)' } },
1823
+ 'gesture-uncheck': { active: { scale: 0.9, duration: 0.15 } },
1824
+
1825
+ // Drop / accept
1826
+ 'gesture-drop-accept': { active: { scale: 1.05, boxShadow: '0 0 0 3px rgba(16,185,129,0.5)', duration: 0.15 } },
1827
+ 'gesture-drop-reject': { active: { x: 4, duration: 0.05, ease: 'none', yoyo: true, repeat: 4, boxShadow: '0 0 0 3px rgba(239,68,68,0.5)' } },
1828
+ 'gesture-drop-zone': { hover: { scale: 1.02, boxShadow: '0 0 0 2px rgba(59,130,246,0.4), 0 0 20px rgba(59,130,246,0.15)', duration: 0.2 } },
1829
+
1830
+ // Context menu / right click
1831
+ 'gesture-context': { active: { scale: 0.97, duration: 0.08 } },
1832
+
1833
+ // Double tap
1834
+ 'gesture-doubletap': { active: { scale: 1.2, opacity: 0, duration: 0.3, ease: 'power2.out' } },
1835
+ 'gesture-doubletap-like': { active: { scale: 1.4, rotation: -10, duration: 0.25, ease: 'back.out(2)' } },
1836
+
1837
+ // Rotate gesture
1838
+ 'gesture-rotate-cw': { active: { rotation: 15, duration: 0.2, ease: 'power2.out' } },
1839
+ 'gesture-rotate-ccw': { active: { rotation: -15, duration: 0.2, ease: 'power2.out' } },
1840
+ 'gesture-rotate-snap': { active: { rotation: 90, duration: 0.3, ease: 'back.out(1.5)' } },
1841
+
1842
+ // Momentum
1843
+ 'gesture-momentum-x': { active: { x: 20, opacity: 0.8, duration: 0.4, ease: 'power4.out' } },
1844
+ 'gesture-momentum-y': { active: { y: 20, opacity: 0.8, duration: 0.4, ease: 'power4.out' } },
1845
+
1846
+ // Pan
1847
+ 'gesture-pan-start': { active: { scale: 1.02, duration: 0.1 } },
1848
+ 'gesture-pan-end': { active: { scale: 1, duration: 0.2, ease: 'power2.out' } },
1849
+
1850
+ // ── LOOPING / CONTINUOUS ──────────────────────────────────────
1851
+ 'animate-pulse': { from: { opacity: 1 }, to: { opacity: 0.4 }, duration: 1.0, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1852
+ 'animate-pulse-sm': { from: { opacity: 1 }, to: { opacity: 0.6 }, duration: 0.8, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1853
+ 'animate-pulse-scale':{ from: { scale: 1 }, to: { scale: 1.06 }, duration: 1.0, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1854
+ 'animate-ping': { from: { scale: 1, opacity: 1 }, to: { scale: 2, opacity: 0 }, duration: 1.0, ease: 'power2.out', repeat: -1 },
1855
+ 'animate-ping-sm': { from: { scale: 1, opacity: 1 }, to: { scale: 1.5, opacity: 0 }, duration: 0.8, ease: 'power2.out', repeat: -1 },
1856
+ 'animate-bounce': { from: { y: 0 }, to: { y: -12 }, duration: 0.5, ease: 'power1.inOut', yoyo: true, repeat: -1 },
1857
+ 'animate-bounce-sm': { from: { y: 0 }, to: { y: -6 }, duration: 0.4, ease: 'power1.inOut', yoyo: true, repeat: -1 },
1858
+ 'animate-bounce-lg': { from: { y: 0 }, to: { y: -20 }, duration: 0.6, ease: 'power1.inOut', yoyo: true, repeat: -1 },
1859
+ 'animate-float': { from: { y: 0 }, to: { y: -10 }, duration: 2.0, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1860
+ 'animate-float-sm': { from: { y: 0 }, to: { y: -5 }, duration: 1.5, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1861
+ 'animate-float-lg': { from: { y: 0 }, to: { y: -16 }, duration: 2.5, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1862
+ 'animate-spin': { to: { rotation: 360 }, duration: 1.0, ease: 'none', repeat: -1 },
1863
+ 'animate-spin-slow': { to: { rotation: 360 }, duration: 3.0, ease: 'none', repeat: -1 },
1864
+ 'animate-spin-fast': { to: { rotation: 360 }, duration: 0.4, ease: 'none', repeat: -1 },
1865
+ 'animate-spin-rev': { to: { rotation: -360 }, duration: 1.5, ease: 'none', repeat: -1 },
1866
+ 'animate-wiggle': { from: { rotation: 0 }, to: { rotation: 5 }, duration: 0.15, ease: 'none', yoyo: true, repeat: 5 },
1867
+ 'animate-wiggle-lg': { from: { rotation: 0 }, to: { rotation: 10 }, duration: 0.12, ease: 'none', yoyo: true, repeat: 7 },
1868
+ 'animate-shake': { from: { x: 0 }, to: { x: 6 }, duration: 0.08, ease: 'none', yoyo: true, repeat: 8 },
1869
+ 'animate-shake-sm': { from: { x: 0 }, to: { x: 3 }, duration: 0.06, ease: 'none', yoyo: true, repeat: 6 },
1870
+ 'animate-shake-y': { from: { y: 0 }, to: { y: 5 }, duration: 0.08, ease: 'none', yoyo: true, repeat: 8 },
1871
+ 'animate-breathe': { from: { scale: 1 }, to: { scale: 1.04 }, duration: 1.5, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1872
+ 'animate-heartbeat': { from: { scale: 1 }, to: { scale: 1.15 }, duration: 0.2, ease: 'power2.out', yoyo: true, repeat: -1, repeatDelay: 0.8 },
1873
+ 'animate-flicker': { from: { opacity: 1 }, to: { opacity: 0 }, duration: 0.1, ease: 'none', yoyo: true, repeat: -1, repeatDelay: 1.5 },
1874
+ 'animate-blink': { from: { opacity: 1 }, to: { opacity: 0 }, duration: 0.5, ease: 'none', yoyo: true, repeat: -1, repeatDelay: 0.5 },
1875
+ 'animate-sway': { from: { rotation: -3 }, to: { rotation: 3 }, duration: 2.5, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1876
+ 'animate-rock': { from: { rotation: -8 }, to: { rotation: 8 }, duration: 0.8, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1877
+ 'animate-jello': { from: { scaleX: 1.25, scaleY: 0.75 }, to: { scaleX: 1, scaleY: 1 }, duration: 0.5, ease: 'elastic.out(1,0.4)' },
1878
+ 'animate-rubber': { from: { scaleX: 1.3, scaleY: 0.7 }, to: { scaleX: 1, scaleY: 1 }, duration: 0.6, ease: 'elastic.out(1,0.3)' },
1879
+ 'animate-orbit': { to: { rotation: 360 }, duration: 4.0, ease: 'none', repeat: -1, transformOrigin: 'center 60px' },
1880
+ 'animate-drift': { from: { x: 0, y: 0 }, to: { x: 8, y: -5 }, duration: 3.0, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1881
+ 'animate-shimmer': { from: { backgroundPosition: '-200% 0' }, to: { backgroundPosition: '200% 0' }, duration: 1.5, ease: 'none', repeat: -1 },
1882
+ 'animate-morph': { from: { borderRadius: '30% 70% 70% 30% / 30% 30% 70% 70%' }, to: { borderRadius: '70% 30% 30% 70% / 70% 70% 30% 30%' }, duration: 4, ease: 'sine.inOut', yoyo: true, repeat: -1 },
1883
+ 'animate-wave': { from: { y: 0 }, to: { y: -8 }, duration: 1.0, ease: 'sine.inOut', yoyo: true, repeat: -1, stagger: 0.1 },
1884
+ 'animate-ripple': { from: { scale: 0.8, opacity: 1 }, to: { scale: 2, opacity: 0 }, duration: 1.5, ease: 'power2.out', repeat: -1 },
1885
+
1886
+ // ── TRANSITION OUT / EXIT ─────────────────────────────────────
1887
+ 'exit-fade': { from: { opacity: 1 }, to: { opacity: 0 }, duration: 0.3, ease: 'power2.in' },
1888
+ 'exit-fade-up': { from: { opacity: 1, y: 0 }, to: { opacity: 0, y: -20 }, duration: 0.3, ease: 'power2.in' },
1889
+ 'exit-fade-down': { from: { opacity: 1, y: 0 }, to: { opacity: 0, y: 20 }, duration: 0.3, ease: 'power2.in' },
1890
+ 'exit-fade-left': { from: { opacity: 1, x: 0 }, to: { opacity: 0, x: -20 }, duration: 0.3, ease: 'power2.in' },
1891
+ 'exit-fade-right': { from: { opacity: 1, x: 0 }, to: { opacity: 0, x: 20 }, duration: 0.3, ease: 'power2.in' },
1892
+ 'exit-scale': { from: { opacity: 1, scale: 1 }, to: { opacity: 0, scale: 0.8 }, duration: 0.3, ease: 'power2.in' },
1893
+ 'exit-scale-up': { from: { opacity: 1, scale: 1 }, to: { opacity: 0, scale: 1.2 }, duration: 0.3, ease: 'power2.in' },
1894
+ 'exit-slide-up': { from: { y: '0%' }, to: { y: '-100%', opacity: 0 }, duration: 0.4, ease: 'power3.in' },
1895
+ 'exit-slide-down': { from: { y: '0%' }, to: { y: '100%', opacity: 0 }, duration: 0.4, ease: 'power3.in' },
1896
+ 'exit-slide-left': { from: { x: '0%' }, to: { x: '-100%', opacity: 0 }, duration: 0.4, ease: 'power3.in' },
1897
+ 'exit-slide-right': { from: { x: '0%' }, to: { x: '100%', opacity: 0 }, duration: 0.4, ease: 'power3.in' },
1898
+ 'exit-blur': { from: { opacity: 1, filter: 'blur(0)' }, to: { opacity: 0, filter: 'blur(12px)' }, duration: 0.4, ease: 'power2.in' },
1899
+ 'exit-flip': { from: { rotationY: 0, opacity: 1 }, to: { rotationY: 90, opacity: 0 }, duration: 0.4, ease: 'power2.in' },
1900
+ 'exit-collapse': { from: { scaleY: 1, opacity: 1 }, to: { scaleY: 0, opacity: 0 }, duration: 0.3, ease: 'power2.in' },
1901
+ 'exit-squeeze': { from: { scaleX: 1, opacity: 1 }, to: { scaleX: 0, opacity: 0 }, duration: 0.3, ease: 'power2.in' },
1902
+ 'exit-dissolve': { from: { opacity: 1, filter: 'blur(0) saturate(1)' }, to: { opacity: 0, filter: 'blur(8px) saturate(0)' }, duration: 0.5, ease: 'power2.in' },
1903
+ 'exit-implode': { from: { scale: 1, opacity: 1 }, to: { scale: 0, opacity: 0 }, duration: 0.4, ease: 'back.in(2)' },
266
1904
  },
267
1905
 
1906
+ // ============================================================
1907
+ // RULES
1908
+ // ============================================================
268
1909
  rules: {
269
1910
  responsive: true,
270
1911
  darkMode: 'class',
271
- print: false,
1912
+ print: true,
272
1913
  motion: true,
273
- orientation: false,
1914
+ orientation: true,
1915
+ states: true,
274
1916
 
275
1917
  breakpoints: {
276
- sm: '640px',
277
- md: '768px',
278
- lg: '1024px',
279
- xl: '1280px',
1918
+ xs: '480px',
1919
+ sm: '640px',
1920
+ md: '768px',
1921
+ lg: '1024px',
1922
+ xl: '1280px',
280
1923
  '2xl': '1536px',
1924
+ '3xl': '1920px',
281
1925
  },
282
1926
 
283
1927
  containers: {
284
- card: { sm: '300px', md: '500px' },
285
- sidebar: { collapsed: '200px', expanded: '320px' },
1928
+ card: { sm: '300px', md: '500px', lg: '700px' },
1929
+ sidebar: { collapsed: '200px', expanded: '320px' },
1930
+ panel: { sm: '240px', md: '400px', lg: '600px' },
1931
+ dialog: { sm: '320px', md: '480px', lg: '640px' },
1932
+ header: { sm: '400px', md: '768px', lg: '1024px' },
1933
+ article: { sm: '400px', md: '640px', lg: '800px' },
1934
+ widget: { sm: '200px', md: '340px', lg: '480px' },
1935
+ hero: { sm: '480px', md: '768px', lg: '1100px' },
1936
+ gallery: { sm: '300px', md: '600px', lg: '900px' },
1937
+ form: { sm: '300px', md: '480px', lg: '640px' },
1938
+ nav: { sm: '480px', md: '768px' },
1939
+ aside: { sm: '220px', md: '300px', lg: '400px' },
1940
+ section: { sm: '480px', md: '768px', lg: '1200px' },
1941
+ list: { sm: '300px', md: '500px' },
1942
+ toolbar: { sm: '360px', md: '600px' },
1943
+ drawer: { sm: '260px', md: '380px' },
1944
+ popover: { sm: '200px', md: '320px' },
1945
+ banner: { sm: '480px', md: '768px' },
1946
+ pricing: { sm: '260px', md: '360px', lg: '480px' },
1947
+ },
1948
+ },
1949
+
1950
+ // ============================================================
1951
+ // DEPTH
1952
+ // ============================================================
1953
+ depth: {
1954
+ strength: 0.4,
1955
+ perspective: 1000,
1956
+ perspectiveOrigin: '20% 50%',
1957
+ light: { x: 0, y: -1 },
1958
+ layers: 6,
1959
+ effects: {
1960
+ shadow: true,
1961
+ scale: true,
1962
+ brightness: true,
1963
+ blur: false,
1964
+ saturate: false,
286
1965
  },
1966
+ zMap: {
1967
+ 0: 0,
1968
+ 5: 0.5,
1969
+ 10: 1,
1970
+ 20: 2,
1971
+ 30: 2.5,
1972
+ 40: 3,
1973
+ 50: 3.5,
1974
+ 100: 4,
1975
+ 200: 4.5,
1976
+ 300: 5,
1977
+ 999: 5.5,
1978
+ 9999: 6,
1979
+ },
1980
+ dimension: {
1981
+ tiltStrength: 15,
1982
+ perspective: 800,
1983
+ scrollZoom: 20,
1984
+ shine: true,
1985
+ parallaxLayers: true,
1986
+ }
287
1987
  },
288
1988
  }
289
1989
  `