@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/tokens.css

@@ -0,0 +1,539 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Geist:wght@100..900&display=swap');
+
+@layer base {
+  :root {
+    --bfc-white: #fff;
+    /* v2 Color Tokens - Mono */
+    --bfc-v2-color-mono-100: #fafafa;
+    --bfc-v2-color-mono-200: #f5f5f5;
+    --bfc-v2-color-mono-300: #e5e5e5;
+    --bfc-v2-color-mono-400: #d4d4d4;
+    --bfc-v2-color-mono-500: #a3a3a3;
+    --bfc-v2-color-mono-600: #737373;
+    --bfc-v2-color-mono-700: #525252;
+    --bfc-v2-color-mono-800: #404040;
+    --bfc-v2-color-mono-900: #262626;
+    /* Not remapped in `.dark`; use for assets that must stay literal mono-900 (#262626). */
+    --bfc-v2-color-mono-900-physical: #262626;
+    --bfc-v2-color-mono-1000: #171717;
+
+    /* v2 Color Tokens - Red */
+    --bfc-v2-color-red-100: #ffeceb;
+    --bfc-v2-color-red-200: #ffd5d2;
+    --bfc-v2-color-red-300: #fd9891;
+    --bfc-v2-color-red-400: #f87168;
+    --bfc-v2-color-red-500: #f15b50;
+    --bfc-v2-color-red-600: #e2483d;
+    --bfc-v2-color-red-700: #c9372c;
+    --bfc-v2-color-red-800: #ae2e24;
+    --bfc-v2-color-red-900: #5d1f1a;
+    --bfc-v2-color-red-1000: #42221f;
+
+    /* v2 Color Tokens - Orange */
+    --bfc-v2-color-orange-100: #fff3eb;
+    --bfc-v2-color-orange-200: #fedec8;
+    --bfc-v2-color-orange-300: #fec195;
+    --bfc-v2-color-orange-400: #fea362;
+    --bfc-v2-color-orange-500: #f38a3f;
+    --bfc-v2-color-orange-600: #e56910;
+    --bfc-v2-color-orange-700: #c25100;
+    --bfc-v2-color-orange-800: #a54800;
+    --bfc-v2-color-orange-900: #702e00;
+    --bfc-v2-color-orange-1000: #38291e;
+
+    /* v2 Color Tokens - Yellow */
+    --bfc-v2-color-yellow-100: #fef7c8;
+    --bfc-v2-color-yellow-200: #ffdf84;
+    --bfc-v2-color-yellow-300: #fed153;
+    --bfc-v2-color-yellow-400: #fbbf25;
+    --bfc-v2-color-yellow-500: #e5ad1d;
+    --bfc-v2-color-yellow-600: #c59109;
+    --bfc-v2-color-yellow-700: #977007;
+    --bfc-v2-color-yellow-800: #7f5f01;
+    --bfc-v2-color-yellow-900: #533f04;
+    --bfc-v2-color-yellow-1000: #332e1b;
+
+    /* v2 Color Tokens - Lime */
+    --bfc-v2-color-lime-100: #e9fec8;
+    --bfc-v2-color-lime-200: #d6f589;
+    --bfc-v2-color-lime-300: #b3ee2b;
+    --bfc-v2-color-lime-400: #a3e635;
+    --bfc-v2-color-lime-500: #91cf02;
+    --bfc-v2-color-lime-600: #83b300;
+    --bfc-v2-color-lime-700: #647f01;
+    --bfc-v2-color-lime-800: #546c00;
+    --bfc-v2-color-lime-900: #3f5304;
+    --bfc-v2-color-lime-1000: #2b331b;
+
+    /* v2 Color Tokens - Green */
+    --bfc-v2-color-green-100: #dcfff1;
+    --bfc-v2-color-green-200: #baf3db;
+    --bfc-v2-color-green-300: #7ee2b8;
+    --bfc-v2-color-green-400: #4bce97;
+    --bfc-v2-color-green-500: #2abb7f;
+    --bfc-v2-color-green-600: #22a06b;
+    --bfc-v2-color-green-700: #1f845a;
+    --bfc-v2-color-green-800: #216e4e;
+    --bfc-v2-color-green-900: #164b35;
+    --bfc-v2-color-green-1000: #1c3329;
+
+    /* v2 Color Tokens - Blue */
+    --bfc-v2-color-blue-100: #e9f2fe;
+    --bfc-v2-color-blue-200: #cfe1fd;
+    --bfc-v2-color-blue-300: #8fb8f6;
+    --bfc-v2-color-blue-400: #669df1;
+    --bfc-v2-color-blue-500: #4688ec;
+    --bfc-v2-color-blue-600: #357de8;
+    --bfc-v2-color-blue-700: #1868db;
+    --bfc-v2-color-blue-800: #1558bc;
+    --bfc-v2-color-blue-900: #123263;
+    --bfc-v2-color-blue-1000: #1c2b42;
+
+    /* v2 Color Tokens - Teal */
+    --bfc-v2-color-teal-100: #e7f9ff;
+    --bfc-v2-color-teal-200: #c6edfb;
+    --bfc-v2-color-teal-300: #9dd9ee;
+    --bfc-v2-color-teal-400: #6cc3e0;
+    --bfc-v2-color-teal-500: #42b2d7;
+    --bfc-v2-color-teal-600: #2898bd;
+    --bfc-v2-color-teal-700: #227d9b;
+    --bfc-v2-color-teal-800: #206a83;
+    --bfc-v2-color-teal-900: #164555;
+    --bfc-v2-color-teal-1000: #1e3137;
+
+    /* v2 Color Tokens - Purple */
+    --bfc-v2-color-purple-100: #f8eefe;
+    --bfc-v2-color-purple-200: #dfd8fd;
+    --bfc-v2-color-purple-300: #b8acf6;
+    --bfc-v2-color-purple-400: #9f8fef;
+    --bfc-v2-color-purple-500: #8f7ee7;
+    --bfc-v2-color-purple-600: #8270db;
+    --bfc-v2-color-purple-700: #6e5dc6;
+    --bfc-v2-color-purple-800: #5e4db2;
+    --bfc-v2-color-purple-900: #352c63;
+    --bfc-v2-color-purple-1000: #2b273f;
+
+    /* v2 Color Tokens - Magenta */
+    --bfc-v2-color-magenta-100: #ffecf8;
+    --bfc-v2-color-magenta-200: #fdd0ec;
+    --bfc-v2-color-magenta-300: #f797d2;
+    --bfc-v2-color-magenta-400: #e774bb;
+    --bfc-v2-color-magenta-500: #da62ac;
+    --bfc-v2-color-magenta-600: #cd519d;
+    --bfc-v2-color-magenta-700: #ae4787;
+    --bfc-v2-color-magenta-800: #943d73;
+    --bfc-v2-color-magenta-900: #50253f;
+    --bfc-v2-color-magenta-1000: #3d2232;
+
+    /* Typography */
+    --bfc-font-family: 'Geist', sans-serif;
+    --font-fraunces: 'Fraunces', serif;
+    --font-geist: 'Geist', sans-serif;
+    --font-inter: var(--font-geist);
+    --bfc-v2-font-family: 'Geist', sans-serif;
+    --bfc-heading-xxl-font-family: 'Fraunces', serif;
+
+    --bfc-background: var(--bfc-v2-color-mono-100); /* #FAFAFA */
+    --bfc-foreground: var(--bfc-v2-color-mono-1000); /* #171717 */
+    --bfc-link: var(--bfc-v2-color-green-700); /* #348019 */
+
+    --bfc-card: var(--bfc-surface); /* #FAFAFA */
+    --bfc-card-foreground: var(--bfc-v2-color-mono-900); /* #0A0A0A */
+
+    --bfc-popover: var(--bfc-v2-color-mono-100); /* #FAFAFA */
+
+    --bfc-primary: #a3e635; /* #A3E635 */
+    --bfc-primary-foreground: #262626; /* #262626 */
+
+    --bfc-secondary: var(--bfc-v2-color-mono-200); /* #F5F5F5 */
+    --bfc-secondary-foreground: var(--bfc-v2-color-mono-900); /* #4B5563 */
+
+    --bfc-muted: var(--bfc-v2-color-mono-200); /* #F5F5F5 */
+    --bfc-muted-foreground: var(--bfc-v2-color-mono-600); /* #737373 */
+
+    --bfc-accent: var(--bfc-v2-color-mono-300); /* #F5F5F5 */
+    --bfc-accent-foreground: var(--bfc-v2-color-mono-900); /* #262626 */
+
+    --bfc-border: var(--bfc-v2-color-mono-1000); /* #171717 */
+    --bfc-border-subtle: rgb(from var(--bfc-v2-color-mono-1000) r g b / 0.15); /* #19191926 */
+    --bfc-input: var(--bfc-v2-color-mono-300); /* #E5E5E5 */
+    --bfc-ring: var(--bfc-v2-color-mono-1000); /* #171717 */
+
+    --bfc-radius: 0.5rem;
+
+    --bfc-feedback-positive: var(--bfc-v2-color-green-500); /* #2abb7f */
+    --bfc-feedback-negative: var(--bfc-v2-color-red-600); /* #EF4444 */
+
+    --bfc-surface: var(--bfc-white); /* #FFFFFF */
+    --bfc-surface-border: var(--bfc-v2-color-mono-300); /* #E5E5E5 */
+    --bfc-white: #ffffff;
+
+    --bcf-shimmer-outer: var(--bfc-v2-color-mono-200); /* #F5F5F5 */
+    --bcf-shimmer-inner: var(--bfc-v2-color-mono-300); /* #E5E5E5 */
+
+    /* Text Colors */
+    --bfc-text-default: var(--bfc-v2-color-mono-900); /* #262626 */
+    --bfc-text-subtle: var(--bfc-v2-color-mono-700); /* #525252 */
+    --bfc-text-subtlest: var(--bfc-v2-color-mono-600); /* #737373 */
+
+    /* Semantic Colors */
+    --bfc-success-bg: var(--bfc-v2-color-green-100);
+    --bfc-success-text: var(--bfc-v2-color-green-700);
+    --bfc-success-border: var(--bfc-v2-color-green-300);
+    --bfc-destructive-bg: var(--bfc-v2-color-red-100);
+    --bfc-destructive-text: var(--bfc-v2-color-red-800);
+    --bfc-destructive-border: var(--bfc-v2-color-red-800);
+    --bfc-warning-bg: var(--bfc-v2-color-yellow-100);
+    --bfc-warning-text: var(--bfc-v2-color-yellow-800);
+    --bfc-warning-border: var(--bfc-v2-color-yellow-300);
+  }
+
+  .dark {
+    --bfc-white: #000;
+    /* v2 Color Tokens - Mono (mirrored) */
+    --bfc-v2-color-mono-100: #171717; /* light 1000 */
+    --bfc-v2-color-mono-200: #262626; /* light 900 */
+    --bfc-v2-color-mono-300: #404040; /* light 800 */
+    --bfc-v2-color-mono-400: #525252; /* light 700 */
+    --bfc-v2-color-mono-500: #737373; /* light 600 */
+    --bfc-v2-color-mono-600: #a3a3a3; /* light 500 */
+    --bfc-v2-color-mono-700: #d4d4d4; /* light 400 */
+    --bfc-v2-color-mono-800: #e5e5e5; /* light 300 */
+    --bfc-v2-color-mono-900: #f5f5f5; /* light 200 */
+    --bfc-v2-color-mono-1000: #fafafa; /* light 100 */
+
+    /* v2 Color Tokens - Red (mirrored) */
+    --bfc-v2-color-red-100: #42221f; /* light 1000 */
+    --bfc-v2-color-red-200: #5d1f1a; /* light 900 */
+    --bfc-v2-color-red-300: #ae2e24; /* light 800 */
+    --bfc-v2-color-red-400: #c9372c; /* light 700 */
+    --bfc-v2-color-red-500: #e2483d; /* light 600 */
+    --bfc-v2-color-red-600: #f15b50; /* light 500 */
+    --bfc-v2-color-red-700: #f87168; /* light 400 */
+    --bfc-v2-color-red-800: #fd9891; /* light 300 */
+    --bfc-v2-color-red-900: #ffd5d2; /* light 200 */
+    --bfc-v2-color-red-1000: #ffeceb; /* light 100 */
+
+    /* v2 Color Tokens - Orange (mirrored) */
+    --bfc-v2-color-orange-100: #38291e; /* light 1000 */
+    --bfc-v2-color-orange-200: #702e00; /* light 900 */
+    --bfc-v2-color-orange-300: #a54800; /* light 800 */
+    --bfc-v2-color-orange-400: #c25100; /* light 700 */
+    --bfc-v2-color-orange-500: #e56910; /* light 600 */
+    --bfc-v2-color-orange-600: #f38a3f; /* light 500 */
+    --bfc-v2-color-orange-700: #fea362; /* light 400 */
+    --bfc-v2-color-orange-800: #fec195; /* light 300 */
+    --bfc-v2-color-orange-900: #fedec8; /* light 200 */
+    --bfc-v2-color-orange-1000: #fff3eb; /* light 100 */
+
+    /* v2 Color Tokens - Yellow (mirrored) */
+    --bfc-v2-color-yellow-100: #332e1b; /* light 1000 */
+    --bfc-v2-color-yellow-200: #533f04; /* light 900 */
+    --bfc-v2-color-yellow-300: #7f5f01; /* light 800 */
+    --bfc-v2-color-yellow-400: #946f00; /* light 700 */
+    --bfc-v2-color-yellow-500: #b38600; /* light 600 */
+    --bfc-v2-color-yellow-600: #cf9f02; /* light 500 */
+    --bfc-v2-color-yellow-700: #ddb30e; /* light 400 */
+    --bfc-v2-color-yellow-800: #eed12b; /* light 300 */
+    --bfc-v2-color-yellow-900: #f5e989; /* light 200 */
+    --bfc-v2-color-yellow-1000: #fef7c8; /* light 100 */
+
+    /* v2 Color Tokens - Lime (mirrored) */
+    --bfc-v2-color-lime-100: #2b331b; /* light 1000 */
+    --bfc-v2-color-lime-200: #3f5304; /* light 900 */
+    --bfc-v2-color-lime-300: #546c00; /* light 800 */
+    --bfc-v2-color-lime-400: #647f01; /* light 700 */
+    --bfc-v2-color-lime-500: #83b300; /* light 600 */
+    --bfc-v2-color-lime-600: #91cf02; /* light 500 */
+    --bfc-v2-color-lime-700: #a3e635; /* light 400 */
+    --bfc-v2-color-lime-800: #b3ee2b; /* light 300 */
+    --bfc-v2-color-lime-900: #d6f589; /* light 200 */
+    --bfc-v2-color-lime-1000: #e9fec8; /* light 100 */
+
+    /* v2 Color Tokens - Green (mirrored) */
+    --bfc-v2-color-green-100: #1c3329; /* light 1000 */
+    --bfc-v2-color-green-200: #164b35; /* light 900 */
+    --bfc-v2-color-green-300: #216e4e; /* light 800 */
+    --bfc-v2-color-green-400: #1f845a; /* light 700 */
+    --bfc-v2-color-green-500: #22a06b; /* light 600 */
+    --bfc-v2-color-green-600: #2abb7f; /* light 500 */
+    --bfc-v2-color-green-700: #4bce97; /* light 400 */
+    --bfc-v2-color-green-800: #7ee2b8; /* light 300 */
+    --bfc-v2-color-green-900: #baf3db; /* light 200 */
+    --bfc-v2-color-green-1000: #dcfff1; /* light 100 */
+
+    /* v2 Color Tokens - Blue (mirrored) */
+    --bfc-v2-color-blue-100: #1c2b42; /* light 1000 */
+    --bfc-v2-color-blue-200: #123263; /* light 900 */
+    --bfc-v2-color-blue-300: #1558bc; /* light 800 */
+    --bfc-v2-color-blue-400: #1868db; /* light 700 */
+    --bfc-v2-color-blue-500: #357de8; /* light 600 */
+    --bfc-v2-color-blue-600: #4688ec; /* light 500 */
+    --bfc-v2-color-blue-700: #669df1; /* light 400 */
+    --bfc-v2-color-blue-800: #8fb8f6; /* light 300 */
+    --bfc-v2-color-blue-900: #cfe1fd; /* light 200 */
+    --bfc-v2-color-blue-1000: #e9f2fe; /* light 100 */
+
+    /* v2 Color Tokens - Teal (mirrored) */
+    --bfc-v2-color-teal-100: #1e3137; /* light 1000 */
+    --bfc-v2-color-teal-200: #164555; /* light 900 */
+    --bfc-v2-color-teal-300: #206a83; /* light 800 */
+    --bfc-v2-color-teal-400: #227d9b; /* light 700 */
+    --bfc-v2-color-teal-500: #2898bd; /* light 600 */
+    --bfc-v2-color-teal-600: #42b2d7; /* light 500 */
+    --bfc-v2-color-teal-700: #6cc3e0; /* light 400 */
+    --bfc-v2-color-teal-800: #9dd9ee; /* light 300 */
+    --bfc-v2-color-teal-900: #c6edfb; /* light 200 */
+    --bfc-v2-color-teal-1000: #e7f9ff; /* light 100 */
+
+    /* v2 Color Tokens - Purple (mirrored) */
+    --bfc-v2-color-purple-100: #2b273f; /* light 1000 */
+    --bfc-v2-color-purple-200: #352c63; /* light 900 */
+    --bfc-v2-color-purple-300: #5e4db2; /* light 800 */
+    --bfc-v2-color-purple-400: #6e5dc6; /* light 700 */
+    --bfc-v2-color-purple-500: #8270db; /* light 600 */
+    --bfc-v2-color-purple-600: #8f7ee7; /* light 500 */
+    --bfc-v2-color-purple-700: #9f8fef; /* light 400 */
+    --bfc-v2-color-purple-800: #b8acf6; /* light 300 */
+    --bfc-v2-color-purple-900: #dfd8fd; /* light 200 */
+    --bfc-v2-color-purple-1000: #f8eefe; /* light 100 */
+
+    /* v2 Color Tokens - Magenta (mirrored) */
+    --bfc-v2-color-magenta-100: #3d2232; /* light 1000 */
+    --bfc-v2-color-magenta-200: #50253f; /* light 900 */
+    --bfc-v2-color-magenta-300: #943d73; /* light 800 */
+    --bfc-v2-color-magenta-400: #ae4787; /* light 700 */
+    --bfc-v2-color-magenta-500: #cd519d; /* light 600 */
+    --bfc-v2-color-magenta-600: #da62ac; /* light 500 */
+    --bfc-v2-color-magenta-700: #e774bb; /* light 400 */
+    --bfc-v2-color-magenta-800: #f797d2; /* light 300 */
+    --bfc-v2-color-magenta-900: #fdd0ec; /* light 200 */
+    --bfc-v2-color-magenta-1000: #ffecf8; /* light 100 */
+  }
+}
+
+@layer components {
+  .link {
+    @apply text-[var(--bfc-link)] underline decoration-[var(--bfc-link)] decoration-2 underline-offset-2 opacity-90 transition-all hover:opacity-100 hover:decoration-[3px];
+  }
+}
+
+@layer utilities {
+  .shimmer {
+    animation: shimmer 3s infinite linear;
+    background: linear-gradient(90deg, var(--bcf-shimmer-outer) 0%, var(--bcf-shimmer-inner) 20%, var(--bcf-shimmer-outer) 40%);
+    background-size: 200% 100%;
+  }
+
+  .modern-spinner {
+    @apply relative flex items-center justify-center;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .modern-spinner::before,
+  .modern-spinner::after {
+    content: '';
+    @apply absolute rounded-full;
+  }
+
+  .modern-spinner::before {
+    @apply inset-0 border-[1.5px];
+  }
+
+  .modern-spinner::after {
+    @apply inset-0 border-[1.5px] border-primary border-t-transparent;
+    animation: spin 1s linear infinite;
+  }
+
+  .animate-spin {
+    animation: rotate 2s linear infinite;
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: none;
+  }
+
+  .custom-dashed-border {
+    --dashed-border-bg: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23${dark[900].replace('#', '')}' stroke-width='2' stroke-dasharray='5%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  }
+
+  .animate-original-pulse {
+    animation: original-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
+/* Unlayered: beats Preflight `font-weight: bolder` after editor re-imports base. */
+b,
+strong {
+  font-weight: 600;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes original-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scroll-driven fade: opacity 1 at top, 0 at bottom (use with animation-timeline: scroll()) */
+@keyframes scroll-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+.main-scroll-fade {
+  animation: scroll-fade-out linear;
+  animation-timeline: scroll();
+}
+
+@keyframes moveInCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moveVertical {
+  0% {
+    transform: translateY(-50%);
+  }
+  50% {
+    transform: translateY(50%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes moveHorizontal {
+  0% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+  50% {
+    transform: translateX(50%) translateY(10%);
+  }
+  100% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+}
+
+.blurry-blob {
+  --circle-size: 40%;
+  --orbit-size: 80px;
+  --opacity: 0.35;
+  --blending: hard-light;
+
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  overflow: visible;
+  z-index: 0;
+  top: -10vh;
+  left: 0;
+  pointer-events: none;
+
+  .gradients-container {
+    filter: url(#goo) blur(40px);
+    width: 100%;
+    height: 100%;
+  }
+
+  .g1,
+  .g2,
+  .g3,
+  .g4 {
+    position: absolute;
+    mix-blend-mode: var(--blending);
+    width: var(--circle-size);
+    height: var(--circle-size);
+    top: 0;
+    left: 0;
+    opacity: 1;
+  }
+
+  .g1 {
+    background: radial-gradient(
+        circle at center,
+        rgb(from var(--bfc-v2-color-lime-100) r g b / var(--opacity)) 0,
+        rgb(from var(--bfc-v2-color-lime-100) r g b / 0) 50%
+      )
+      no-repeat;
+    transform-origin: center center;
+    animation: moveVertical 10s ease infinite;
+  }
+
+  .g2 {
+    background: radial-gradient(
+        circle at center,
+        rgb(from var(--bfc-v2-color-lime-200) r g b / var(--opacity)) 0,
+        rgb(from var(--bfc-v2-color-lime-200) r g b / 0) 50%
+      )
+      no-repeat;
+    transform-origin: calc(50% - calc(var(--orbit-size) * 2));
+    animation: moveInCircle 5s reverse infinite;
+  }
+
+  .g3 {
+    background: radial-gradient(
+        circle at center,
+        rgb(from var(--bfc-v2-color-lime-300) r g b / var(--opacity)) 0,
+        rgb(from var(--bfc-v2-color-lime-300) r g b / 0) 50%
+      )
+      no-repeat;
+    top: 5%;
+    left: -10%;
+    transform-origin: calc(50% + calc(var(--orbit-size) * 0.5));
+    animation: moveInCircle 10s linear infinite;
+  }
+
+  .g4 {
+    background: radial-gradient(
+        circle at center,
+        rgb(from var(--bfc-v2-color-lime-400) r g b / var(--opacity)) 0,
+        rgb(from var(--bfc-v2-color-lime-400) r g b / 0) 50%
+      )
+      no-repeat;
+    transform-origin: calc(50% - var(--orbit-size));
+    animation: moveHorizontal 12s ease infinite;
+    opacity: 0.7;
+  }
+}