funuicss 3.7.5 → 3.7.7

package/css/fun.css

@@ -970,165 +970,7 @@ link:hover {
 
 
 
-.text-minified  , .text-md{
-  font-size: var(--minifiedFontSize);
-  line-height: 1rem;
-}
 
-/* Content formatting */
-.article {
-  line-height: 1.7rem;
-  letter-spacing: normal;
-}
-
-/* Typography */
-.text-bold { font-weight: bold !important; }
-.text-bolder { font-weight: bolder !important; }
-.lightText { font-weight: 300 !important; }
-.lighterText { font-weight: 200 !important; }
-.underlineText { text-decoration: underline; }
-.emp { font-style: italic; }
-.italicText { font-style: italic; }
-.uppercase { text-transform: uppercase; }
-.lowercase { text-transform: lowercase; }
-.capitalize { text-transform: capitalize; }
-.monospace { font-family: monospace !important; }
-
-/* Scroll */
-.scroll-y { overflow-y: auto !important; overflow-x: visible !important; }
-.scroll-x { overflow-x: auto !important; overflow-y: visible !important; }
-.scroll { overflow: auto !important; }
-.vertical-scroll { overflow-y: scroll; }
-.horizontal-scroll { overflow-x: scroll; }
-
-/* Helpers */
-.glassy { backdrop-filter: blur(0.3rem); background-color: transparent !important; }
-.transparent { background-color: transparent !important; }
-.flat { border-radius: 0rem !important; }
-.no-padding { padding: 0px !important; }
-.no-margin { margin: 0px; }
-.line-through { text-decoration: line-through; }
-.underline { text-decoration: underline; }
-.overline { text-decoration: overline; }
-.wavy { text-decoration: wavy; }
-.borderless { border: none; }
-.border { border: var(--border); }
-.hide { display: none; }
-.show { display: block; }
-.center { margin: 0px auto; }
-.float-right { float: right; }
-.float-left { float: left; }
-.clear-both { clear: both; }
-.responsive { width: 100%; height: auto; }
-
-/* Text Alignment */
-.text-center { text-align: center !important; }
-.text-left { text-align: left !important; }
-.text-right { text-align: right !important; }
-.text-justify { text-align: justify !important; }
-
-/* Sections */
-.section { margin-top: 1rem; margin-bottom: 1rem; }
-.minSection { margin-top: 0.5rem; margin-bottom: 0.5rem; }
-.maxSection { margin-top: 2rem; margin-bottom: 2rem; }
-
-/* Opacity */
-.opacity-1, .hover-opacity-1:hover { opacity: 1; }
-.opacity-2, .hover-opacity-2:hover { opacity: 0.9; }
-.opacity-3, .hover-opacity-3:hover { opacity: 0.8; }
-.opacity-4, .hover-opacity-4:hover { opacity: 0.7; }
-.opacity-5, .hover-opacity-5:hover { opacity: 0.6; }
-.opacity-6, .hover-opacity-6:hover { opacity: 0.5; }
-.opacity-7, .hover-opacity-7:hover { opacity: 0.4; }
-.opacity-8, .hover-opacity-8:hover { opacity: 0.2; }
-.opacity-9, .hover-opacity-9:hover { opacity: 0.1; }
-
-/* Borders */
-.hr, .bb { border-bottom: var(--border); }
-.vr, .bl { border-left: var(--border); }
-.bt { border-top: var(--border); }
-.br { border-right: var(--border); }
-.top-border { border-top: var(--border); }
-.bottom-border { border-bottom: var(--border); }
-.right-border { border-right: var(--border); }
-.left-border { border-left: var(--border); }
-
-/* Z-Index */
-.z-index-1 { z-index: 1; }
-.z-index-2 { z-index: 2; }
-.z-index-3 { z-index: 3; }
-.z-index-4 { z-index: 4; }
-.z-index-5 { z-index: 5; }
-.z-index-6 { z-index: 6; }
-.z-index-7 { z-index: 7; }
-.z-index-8 { z-index: 8; }
-.z-index-9 { z-index: 9; }
-.z-index-10 { z-index: 10; }
-
-/* Positioning */
-.top-right { position: absolute; top: 0px; right: 0px; }
-.top-left { position: absolute; top: 0px; left: 0px; }
-.top { position: absolute; top: 0px; }
-.bottom-right { position: absolute; bottom: 0px; right: 0px; }
-.bottom-left { position: absolute; bottom: 0px; left: 0px; }
-.bottom { position: absolute; bottom: 0px; }
-.middle { display: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-.relative { position: relative; }
-.fixed { position: fixed; }
-.sticky { position: sticky; }
-.absolute { position: absolute; }
-.sticky-top { position: -webkit-sticky; position: sticky; top: 0px; z-index: var(--navBarZindex); width: 100%; }
-.fixed-top { position: fixed; top: 0px; z-index: var(--navBarZindex); width: 100%; }
-.fixedBottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--navBarZindex); }
-.fixedTop { position: fixed; bottom: 0; top: 0; width: 100%; z-index: var(--navBarZindex); }
-
-/* Display */
-.block { display: block; }
-.inline-block { display: inline-block; }
-.content-middle { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }
-.central { display: flex; align-items: center; justify-content: center; }
-
-/* Flexbox */
-.row-flex { display: flex !important; flex-direction: row !important; align-items: center; }
-.row-flex.gap { grid-gap: 0.5rem; gap: 0.2rem; }
-.row-flex.space-between { justify-content: space-between; }
-.row-flex.stretch { align-items: stretch !important; }
-.row-flex.space-around { justify-content: space-around; }
-.row-flex.center { justify-content: center; }
-
-/* Shadows */
-.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
-.hover-shadow { transition: 0.3s; }
-.hover-shadow:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
-.shadow-bingo { box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5), 0px 40px 40px 0px rgba(225, 225, 255, 0.6); }
-
-/* Fit */
-.fit { height: 100%; width: 100%; }
-.fit-width { width: fit-content; }
-.fit-height { height: fit-content; }
-
-/* Rounded */
-.rightRounded { border-top-right-radius: 300rem !important; border-bottom-right-radius: 300rem !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }
-.leftRounded { border-top-left-radius: 300rem !important; border-bottom-left-radius: 300rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
-
-/* Hover Effects */
-.hoverable { transition: 0.1s linear; }
-.hoverable:hover { background-color: var(--hoverable) !important; }
-.hoverable-border { border: 0.1rem solid transparent; transition: 0.3s ease-in-out; }
-.hoverable-border:hover { border: var(--border); }
-
-/* Cursor */
-.cursor-pointer { cursor: pointer; }
-.cursor-copy { cursor: copy; }
-.cursor-none { cursor: none; }
-.cursor-move { cursor: move; }
-
-/* Containers */
-.container { margin: 0 10%; }
-@media (max-width: 600px) {
-  .container { margin: 0 5%; }
-}
-.page { min-height: 80vh; padding: 2rem 0; }
 /*buttons*/
 .button {
   border: none;
@@ -1139,7 +981,7 @@ link:hover {
   cursor: pointer;
   font-size: var(--minifiedFontSize);
   position: relative;
-  overflow: visible !important;
+  overflow: visible;
   z-index: 1;
   line-height: 1 !important;
   height: var(--inputButtonHeight);
@@ -1181,6 +1023,7 @@ link:hover {
   background-color: transparent;
   position: relative;
   transition: 0.3s;
+  overflow: hidden !important;
 }
 .button_fill_span {
   position: absolute;
@@ -1213,6 +1056,7 @@ link:hover {
   transform: scale(1, 1);
 }
 
+
 .raisedBtn , .raised{
   box-shadow: var(--raised);
 }
@@ -10275,3 +10119,500 @@ z-index: 10;
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }
+
+
+
+
+
+/* HELPERS */
+
+.text-minified  , .text-md{
+  font-size: var(--minifiedFontSize);
+  line-height: 1rem;
+}
+/* Content formatting */
+.article {
+  line-height: 1.7rem;
+  letter-spacing: normal;
+}
+
+/* Typography */
+.text-bold { font-weight: bold !important; }
+.text-bolder { font-weight: bolder !important; }
+.lightText { font-weight: 300 !important; }
+.lighterText { font-weight: 200 !important; }
+.underlineText { text-decoration: underline; }
+.emp { font-style: italic; }
+.italicText { font-style: italic; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.monospace { font-family: monospace !important; }
+
+/* Scroll */
+.scroll-y { overflow-y: auto !important; overflow-x: visible !important; }
+.scroll-x { overflow-x: auto !important; overflow-y: visible !important; }
+.scroll { overflow: auto !important; }
+.vertical-scroll { overflow-y: scroll; }
+.horizontal-scroll { overflow-x: scroll; }
+
+/* Helpers */
+.glassy { backdrop-filter: blur(0.3rem); background-color: transparent !important; }
+.transparent { background-color: transparent !important; }
+.flat { border-radius: 0rem !important; }
+.no-padding { padding: 0px !important; }
+.no-margin { margin: 0px; }
+.line-through { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.overline { text-decoration: overline; }
+.wavy { text-decoration: wavy; }
+.borderless { border: none; }
+.border { border: var(--border); }
+.hide { display: none; }
+.show { display: block; }
+.center { margin: 0px auto; }
+.float-right { float: right; }
+.float-left { float: left; }
+.clear-both { clear: both; }
+.responsive { width: 100%; height: auto; }
+
+/* Text Alignment */
+.text-center { text-align: center !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+/* Sections */
+.section { margin-top: 1rem; margin-bottom: 1rem; }
+.minSection { margin-top: 0.5rem; margin-bottom: 0.5rem; }
+.maxSection { margin-top: 2rem; margin-bottom: 2rem; }
+
+/* Opacity */
+.opacity-1, .hover-opacity-1:hover { opacity: 1; }
+.opacity-2, .hover-opacity-2:hover { opacity: 0.9; }
+.opacity-3, .hover-opacity-3:hover { opacity: 0.8; }
+.opacity-4, .hover-opacity-4:hover { opacity: 0.7; }
+.opacity-5, .hover-opacity-5:hover { opacity: 0.6; }
+.opacity-6, .hover-opacity-6:hover { opacity: 0.5; }
+.opacity-7, .hover-opacity-7:hover { opacity: 0.4; }
+.opacity-8, .hover-opacity-8:hover { opacity: 0.2; }
+.opacity-9, .hover-opacity-9:hover { opacity: 0.1; }
+
+/* Borders */
+.hr, .bb { border-bottom: var(--border); }
+.vr, .bl { border-left: var(--border); }
+.bt { border-top: var(--border); }
+.br { border-right: var(--border); }
+.top-border { border-top: var(--border); }
+.bottom-border { border-bottom: var(--border); }
+.right-border { border-right: var(--border); }
+.left-border { border-left: var(--border); }
+
+/* Border Radius */
+.rounded-0 { border-radius: 0rem !important; }
+.rounded-1 { border-radius: 0.125rem !important; }
+.rounded-2 { border-radius: 0.25rem !important; }
+.rounded-3 { border-radius: 0.375rem !important; }
+.rounded-4 { border-radius: 0.5rem !important; }
+.rounded-5 { border-radius: 0.625rem !important; }
+.rounded-6 { border-radius: 0.75rem !important; }
+.rounded-8 { border-radius: 1rem !important; }
+.rounded-10 { border-radius: 1.25rem !important; }
+.rounded-12 { border-radius: 1.5rem !important; }
+.rounded-16 { border-radius: 2rem !important; }
+.rounded-20 { border-radius: 2.5rem !important; }
+.rounded-24 { border-radius: 3rem !important; }
+.rounded-full { border-radius: 9999px !important; }
+
+/* Individual Corner Radius */
+.rounded-t-0 { border-top-left-radius: 0rem !important; border-top-right-radius: 0rem !important; }
+.rounded-t-1 { border-top-left-radius: 0.125rem !important; border-top-right-radius: 0.125rem !important; }
+.rounded-t-2 { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
+.rounded-t-4 { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
+.rounded-t-8 { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }
+
+.rounded-b-0 { border-bottom-left-radius: 0rem !important; border-bottom-right-radius: 0rem !important; }
+.rounded-b-1 { border-bottom-left-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; }
+.rounded-b-2 { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
+.rounded-b-4 { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
+.rounded-b-8 { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
+
+.rounded-l-0 { border-top-left-radius: 0rem !important; border-bottom-left-radius: 0rem !important; }
+.rounded-l-1 { border-top-left-radius: 0.125rem !important; border-bottom-left-radius: 0.125rem !important; }
+.rounded-l-2 { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
+.rounded-l-4 { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
+.rounded-l-8 { border-top-left-radius: 1rem !important; border-bottom-left-radius: 1rem !important; }
+
+.rounded-r-0 { border-top-right-radius: 0rem !important; border-bottom-right-radius: 0rem !important; }
+.rounded-r-1 { border-top-right-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; }
+.rounded-r-2 { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
+.rounded-r-4 { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
+.rounded-r-8 { border-top-right-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
+
+/* Individual Corners */
+.rounded-tl-0 { border-top-left-radius: 0rem !important; }
+.rounded-tl-1 { border-top-left-radius: 0.125rem !important; }
+.rounded-tl-2 { border-top-left-radius: 0.25rem !important; }
+.rounded-tl-4 { border-top-left-radius: 0.5rem !important; }
+.rounded-tl-8 { border-top-left-radius: 1rem !important; }
+
+.rounded-tr-0 { border-top-right-radius: 0rem !important; }
+.rounded-tr-1 { border-top-right-radius: 0.125rem !important; }
+.rounded-tr-2 { border-top-right-radius: 0.25rem !important; }
+.rounded-tr-4 { border-top-right-radius: 0.5rem !important; }
+.rounded-tr-8 { border-top-right-radius: 1rem !important; }
+
+.rounded-bl-0 { border-bottom-left-radius: 0rem !important; }
+.rounded-bl-1 { border-bottom-left-radius: 0.125rem !important; }
+.rounded-bl-2 { border-bottom-left-radius: 0.25rem !important; }
+.rounded-bl-4 { border-bottom-left-radius: 0.5rem !important; }
+.rounded-bl-8 { border-bottom-left-radius: 1rem !important; }
+
+.rounded-br-0 { border-bottom-right-radius: 0rem !important; }
+.rounded-br-1 { border-bottom-right-radius: 0.125rem !important; }
+.rounded-br-2 { border-bottom-right-radius: 0.25rem !important; }
+.rounded-br-4 { border-bottom-right-radius: 0.5rem !important; }
+.rounded-br-8 { border-bottom-right-radius: 1rem !important; }
+
+/* Z-Index */
+.z-index-1 { z-index: 1; }
+.z-index-2 { z-index: 2; }
+.z-index-3 { z-index: 3; }
+.z-index-4 { z-index: 4; }
+.z-index-5 { z-index: 5; }
+.z-index-6 { z-index: 6; }
+.z-index-7 { z-index: 7; }
+.z-index-8 { z-index: 8; }
+.z-index-9 { z-index: 9; }
+.z-index-10 { z-index: 10; }
+
+/* Positioning */
+.top-right { position: absolute; top: 0px; right: 0px; }
+.top-left { position: absolute; top: 0px; left: 0px; }
+.top { position: absolute; top: 0px; }
+.bottom-right { position: absolute; bottom: 0px; right: 0px; }
+.bottom-left { position: absolute; bottom: 0px; left: 0px; }
+.bottom { position: absolute; bottom: 0px; }
+.middle { display: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.relative { position: relative; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.absolute { position: absolute; }
+.sticky-top { position: -webkit-sticky; position: sticky; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixed-top { position: fixed; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixedBottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--navBarZindex); }
+.fixedTop { position: fixed; bottom: 0; top: 0; width: 100%; z-index: var(--navBarZindex); }
+
+/* Display */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.content-middle { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }
+.central { display: flex; align-items: center; justify-content: center; }
+
+/* Flexbox */
+.row-flex { display: flex !important; flex-direction: row !important; align-items: center; }
+.row-flex.gap { grid-gap: 0.5rem; gap: 0.2rem; }
+.row-flex.space-between { justify-content: space-between; }
+.row-flex.stretch { align-items: stretch !important; }
+.row-flex.space-around { justify-content: space-around; }
+.row-flex.center { justify-content: center; }
+
+/* Shadows */
+.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+.hover-shadow { transition: 0.3s; }
+.hover-shadow:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
+.shadow-bingo { box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5), 0px 40px 40px 0px rgba(225, 225, 255, 0.6); }
+
+/* Fit */
+.fit { height: 100%; width: 100%; }
+.fit-width { width: fit-content; }
+.fit-height { height: fit-content; }
+
+/* Rounded */
+.rightRounded { border-top-right-radius: 300rem !important; border-bottom-right-radius: 300rem !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }
+.leftRounded { border-top-left-radius: 300rem !important; border-bottom-left-radius: 300rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
+
+/* Hover Effects */
+.hoverable { transition: 0.1s linear; }
+.hoverable:hover { background-color: var(--hoverable) !important; }
+.hoverable-border { border: 0.1rem solid transparent; transition: 0.3s ease-in-out; }
+.hoverable-border:hover { border: var(--border); }
+
+/* Cursor */
+.cursor-pointer { cursor: pointer; }
+.cursor-copy { cursor: copy; }
+.cursor-none { cursor: none; }
+.cursor-move { cursor: move; }
+
+/* Containers */
+.container { margin: 0 10%; }
+@media (max-width: 600px) {
+  .container { margin: 0 5%; }
+}
+.page { min-height: 80vh; padding: 2rem 0; }
+
+
+/* ===== BLUR EFFECTS ===== */
+.blur-0 { filter: blur(0) !important; }
+.blur-xs { filter: blur(0.125rem) !important; }
+.blur-sm { filter: blur(0.25rem) !important; }
+.blur-md { filter: blur(0.5rem) !important; }
+.blur-lg { filter: blur(1rem) !important; }
+.blur-xl { filter: blur(1.5rem) !important; }
+.blur-2xl { filter: blur(2rem) !important; }
+
+/* Backdrop Blur */
+.backdrop-blur-0 { backdrop-filter: blur(0) !important; }
+.backdrop-blur-xs { backdrop-filter: blur(0.125rem) !important; }
+.backdrop-blur-sm { backdrop-filter: blur(0.25rem) !important; }
+.backdrop-blur-md { backdrop-filter: blur(0.5rem) !important; }
+.backdrop-blur-lg { backdrop-filter: blur(1rem) !important; }
+.backdrop-blur-xl { backdrop-filter: blur(1.5rem) !important; }
+.backdrop-blur-2xl { backdrop-filter: blur(2rem) !important; }
+
+
+/* ===== ENTRANCE ANIMATIONS ===== */
+/* Fade In */
+.fade-in { animation: fadeIn 0.6s ease-in-out !important; }
+.fade-in-up { animation: fadeInUp 0.8s ease-out !important; }
+.fade-in-down { animation: fadeInDown 0.8s ease-out !important; }
+.fade-in-left { animation: fadeInLeft 0.8s ease-out !important; }
+.fade-in-right { animation: fadeInRight 0.8s ease-out !important; }
+
+/* Slide In */
+.slide-in-up { animation: slideInUp 0.8s ease-out !important; }
+.slide-in-down { animation: slideInDown 0.8s ease-out !important; }
+.slide-in-left { animation: slideInLeft 0.8s ease-out !important; }
+.slide-in-right { animation: slideInRight 0.8s ease-out !important; }
+
+/* Zoom In */
+.zoom-in { animation: zoomIn 0.6s ease-out !important; }
+.zoom-in-up { animation: zoomInUp 0.8s ease-out !important; }
+.zoom-in-down { animation: zoomInDown 0.8s ease-out !important; }
+.zoom-in-left { animation: zoomInLeft 0.8s ease-out !important; }
+.zoom-in-right { animation: zoomInRight 0.8s ease-out !important; }
+
+/* Bounce In */
+.bounce-in { animation: bounceIn 0.8s ease-out !important; }
+.bounce-in-up { animation: bounceInUp 0.8s ease-out !important; }
+.bounce-in-down { animation: bounceInDown 0.8s ease-out !important; }
+.bounce-in-left { animation: bounceInLeft 0.8s ease-out !important; }
+.bounce-in-right { animation: bounceInRight 0.8s ease-out !important; }
+
+/* Flip In */
+.flip-in-x { animation: flipInX 0.8s ease-out !important; }
+.flip-in-y { animation: flipInY 0.8s ease-out !important; }
+
+/* Rotate In */
+.rotate-in { animation: rotateIn 0.8s ease-out !important; }
+.rotate-in-up { animation: rotateInUp 0.8s ease-out !important; }
+.rotate-in-down { animation: rotateInDown 0.8s ease-out !important; }
+
+/* Special Entrance */
+.roll-in { animation: rollIn 0.8s ease-out !important; }
+.light-speed-in { animation: lightSpeedIn 0.8s ease-out !important; }
+.swing-in { animation: swingIn 0.8s ease-out !important; }
+.wobble-in { animation: wobbleIn 0.8s ease-out !important; }
+.pulse-in { animation: pulseIn 0.8s ease-out !important; }
+
+/* ===== HOVER ANIMATIONS ===== */
+/* Scale Hover */
+.hover-scale { transition: transform 0.3s ease !important; }
+.hover-scale:hover { transform: scale(1.05) !important; }
+.hover-scale-lg { transition: transform 0.3s ease !important; }
+.hover-scale-lg:hover { transform: scale(1.1) !important; }
+.hover-scale-sm { transition: transform 0.3s ease !important; }
+.hover-scale-sm:hover { transform: scale(1.02) !important; }
+
+/* Lift Hover */
+.hover-lift { transition: all 0.3s ease !important; }
+.hover-lift:hover { transform: translateY(-0.5rem) !important; box-shadow: var(--card) !important; }
+.hover-lift-lg { transition: all 0.3s ease !important; }
+.hover-lift-lg:hover { transform: translateY(-1rem) !important; box-shadow: var(--card) !important; }
+
+/* Glow Hover */
+.hover-glow { transition: all 0.3s ease !important; }
+.hover-glow:hover { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.4) !important; transform: translateY(-0.25rem) !important; }
+
+/* Shake Hover */
+.hover-shake:hover { animation: shake 0.5s ease-in-out !important; }
+.hover-wobble:hover { animation: wobble 0.5s ease-in-out !important; }
+.hover-bounce:hover { animation: bounce 0.5s ease-in-out !important; }
+
+/* Border Hover */
+.hover-border-grow { transition: all 0.3s ease !important; border: 2px solid transparent !important; }
+.hover-border-grow:hover { border-color: var(--gradient) !important; transform: scale(1.02) !important; }
+
+/* Text Hover */
+.hover-text-glow:hover { text-shadow: 0 0 1rem currentColor !important; }
+.hover-text-lift:hover { transform: translateY(-0.125rem) !important; text-shadow: var(--card) !important; }
+
+/* ===== CONTINUOUS ANIMATIONS ===== */
+.animate-float { animation: float 3s ease-in-out infinite !important; }
+.animate-pulse-slow { animation: pulse 3s ease-in-out infinite !important; }
+.animate-bounce-slow { animation: bounce 2s ease-in-out infinite !important; }
+.animate-spin-slow { animation: spin 3s linear infinite !important; }
+.animate-ping-slow { animation: ping 3s ease-out infinite !important; }
+
+.animate-breath { animation: breath 4s ease-in-out infinite !important; }
+.animate-wave { animation: wave 2s ease-in-out infinite !important; }
+.animate-glow { animation: glow 2s ease-in-out infinite !important; }
+
+/* ===== ANIMATION KEYFRAMES ===== */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInLeft {
+  from { opacity: 0; transform: translateX(-2rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fadeInRight {
+  from { opacity: 0; transform: translateX(2rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInDown {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes zoomIn {
+  from { opacity: 0; transform: scale(0.5); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes zoomInUp {
+  from { opacity: 0; transform: scale(0.5) translateY(2rem); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes bounceIn {
+  0% { opacity: 0; transform: scale(0.3); }
+  50% { opacity: 1; transform: scale(1.05); }
+  70% { transform: scale(0.9); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes bounceInUp {
+  0% { opacity: 0; transform: translateY(2rem) scale(0.3); }
+  50% { opacity: 1; transform: translateY(-1rem) scale(1.05); }
+  70% { transform: translateY(0.5rem) scale(0.9); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes flipInX {
+  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
+  to { transform: perspective(400px) rotateX(0deg); opacity: 1; }
+}
+
+@keyframes flipInY {
+  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
+  to { transform: perspective(400px) rotateY(0deg); opacity: 1; }
+}
+
+@keyframes rotateIn {
+  from { transform: rotate(-180deg); opacity: 0; }
+  to { transform: rotate(0deg); opacity: 1; }
+}
+
+@keyframes rollIn {
+  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
+  to { opacity: 1; transform: translateX(0px) rotate(0deg); }
+}
+
+@keyframes lightSpeedIn {
+  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
+  60% { transform: skewX(20deg); opacity: 1; }
+  80% { transform: skewX(-5deg); }
+  to { transform: translate3d(0, 0, 0); }
+}
+
+@keyframes swingIn {
+  20% { transform: rotate3d(0, 0, 1, 15deg); }
+  40% { transform: rotate3d(0, 0, 1, -10deg); }
+  60% { transform: rotate3d(0, 0, 1, 5deg); }
+  80% { transform: rotate3d(0, 0, 1, -5deg); }
+  to { transform: rotate3d(0, 0, 1, 0deg); }
+}
+
+@keyframes wobbleIn {
+  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) rotate3d(0, 0, 1, -45deg); }
+  50% { opacity: 1; transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 15deg); }
+  70% { transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); }
+  to { opacity: 1; transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); }
+}
+
+@keyframes pulseIn {
+  0% { opacity: 0; transform: scale(0.5); }
+  50% { opacity: 1; transform: scale(1.1); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+/* Hover Keyframes */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-0.5rem); }
+  40%, 80% { transform: translateX(0.5rem); }
+}
+
+@keyframes wobble {
+  0%, 100% { transform: translateX(0%); }
+  15% { transform: translateX(-25%) rotate(-5deg); }
+  30% { transform: translateX(20%) rotate(3deg); }
+  45% { transform: translateX(-15%) rotate(-3deg); }
+  60% { transform: translateX(10%) rotate(2deg); }
+  75% { transform: translateX(-5%) rotate(-1deg); }
+}
+
+/* Continuous Animations */
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-1rem); }
+}
+
+@keyframes breath {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes wave {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(0.5rem); }
+}
+
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 0.5rem rgba(var(--primary-rgb), 0.5); }
+  50% { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.8); }
+}
+
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.5",
+  "version": "3.7.7",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",