/* VibeAnimations CSS Framework */
:root {
  --vibe-duration: 0.6s;
  --vibe-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --vibe-delay: 0s;
}

/* Base Animation Setup */
[animate] {
  transition: all var(--vibe-duration) var(--vibe-easing) var(--vibe-delay);
}

/* Smooth Scroll Progress Animations */
[vibe-animate] {
  transition: none !important;
  will-change: transform, opacity;
}

/* Fade Animations */
[data-animation="fade-in"] {
  opacity: 0;
}
[data-animation="fade-in"].vibe-active {
  animation: vibeFadeIn var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-animation="fade-in-down"] {
  opacity: 0;
}
[data-animation="fade-in-down"].vibe-active {
  animation: vibeFadeInDown var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: translateZ(0); }
}

[data-animation="fade-in-up"] {
  opacity: 0;
}
[data-animation="fade-in-up"].vibe-active {
  animation: vibeFadeInUp var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translateZ(0); }
}

[data-animation="fade-in-left"] {
  opacity: 0;
}
[data-animation="fade-in-left"].vibe-active {
  animation: vibeFadeInLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFadeInLeft {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: translateZ(0); }
}

[data-animation="fade-in-right"] {
  opacity: 0;
}
[data-animation="fade-in-right"].vibe-active {
  animation: vibeFadeInRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: translateZ(0); }
}

/* Slide Animations */
[data-animation="slide-in-down"] {
  opacity: 0;
}
[data-animation="slide-in-down"].vibe-active {
  animation: vibeSlideInDown var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeSlideInDown {
  from { transform: translate3d(0, -100%, 0); visibility: visible; }
  to { transform: translateZ(0); }
}

[data-animation="slide-in-up"] {
  opacity: 0;
}
[data-animation="slide-in-up"].vibe-active {
  animation: vibeSlideInUp var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeSlideInUp {
  from { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translateZ(0); }
}

[data-animation="slide-in-left"] {
  opacity: 0;
}
[data-animation="slide-in-left"].vibe-active {
  animation: vibeSlideInLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeSlideInLeft {
  from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translateZ(0); }
}

[data-animation="slide-in-right"] {
  opacity: 0;
}
[data-animation="slide-in-right"].vibe-active {
  animation: vibeSlideInRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeSlideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to { transform: translateZ(0);opcaity:1; }
}

/* Zoom Animations */
[data-animation="zoom-in"] {
  opacity: 0;
}
[data-animation="zoom-in"].vibe-active {
  animation: vibeZoomIn var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeZoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
  to { transform: scale3d(1, 1, 1); }
}

[data-animation="zoom-in-down"] {
  opacity: 0;
}
[data-animation="zoom-in-down"].vibe-active {
  animation: vibeZoomInDown var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeZoomInDown {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); }
  to { transform: scale3d(1, 1, 1) translateZ(0); opacity: 1; }
}

[data-animation="zoom-in-up"] {
  opacity: 0;
}
[data-animation="zoom-in-up"].vibe-active {
  animation: vibeZoomInUp var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeZoomInUp {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); }
  to { transform: scale3d(1, 1, 1) translateZ(0);  opacity: 1;}
}

[data-animation="zoom-in-left"] {
  opacity: 0;
}
[data-animation="zoom-in-left"].vibe-active {
  animation: vibeZoomInLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeZoomInLeft {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); }
  to { transform: scale3d(1, 1, 1) translateZ(0); opacity: 1; }
}

[data-animation="zoom-in-right"] {
  opacity: 0;
}
[data-animation="zoom-in-right"].vibe-active {
  animation: vibeZoomInRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeZoomInRight {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); }
  to { transform: scale3d(1, 1, 1) translateZ(0); opacity: 1; }
}

/* Bounce Animations */
[data-animation="bounce-in"] {
  opacity: 0;
}
[data-animation="bounce-in"].vibe-active {
  animation: vibeBounceIn calc(var(--vibe-duration) * 0.75) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes vibeBounceIn {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

[data-animation="bounce-in-down"] {
  opacity: 0;
}
[data-animation="bounce-in-down"].vibe-active {
  animation: vibeBounceInDown var(--vibe-duration) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes vibeBounceInDown {
  0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(0.985); }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="bounce-in-up"] {
  opacity: 0;
}
[data-animation="bounce-in-up"].vibe-active {
  animation: vibeBounceInUp var(--vibe-duration) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes vibeBounceInUp {
  0% { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(0.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(0.985); }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="bounce-in-left"] {
  opacity: 0;
}
[data-animation="bounce-in-left"].vibe-active {
  animation: vibeBounceInLeft var(--vibe-duration) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes vibeBounceInLeft {
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(0.995); }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="bounce-in-right"] {
  opacity: 0;
}
[data-animation="bounce-in-right"].vibe-active {
  animation: vibeBounceInRight var(--vibe-duration) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes vibeBounceInRight {
  0% { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(0.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(0.995); }
  to { transform: translateZ(0); opacity: 1; }
}

/* Rotate Animations */
[data-animation="rotate-in"] {
  opacity: 0;
}
[data-animation="rotate-in"].vibe-active {
  animation: vibeRotateIn var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRotateIn {
  from { transform: rotate(-200deg); opacity: 0; }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="rotate-in-down-left"] {
  opacity: 0;
}
[data-animation="rotate-in-down-left"].vibe-active {
  animation: vibeRotateInDownLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRotateInDownLeft {
  from { transform: rotate(-45deg); opacity: 0; }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="rotate-in-down-right"] {
  opacity: 0;
}
[data-animation="rotate-in-down-right"].vibe-active {
  animation: vibeRotateInDownRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRotateInDownRight {
  from { transform: rotate(45deg); opacity: 0; }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="rotate-in-up-left"] {
  opacity: 0;
}
[data-animation="rotate-in-up-left"].vibe-active {
  animation: vibeRotateInUpLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRotateInUpLeft {
  from { transform: rotate(45deg); opacity: 0; }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="rotate-in-up-right"] {
  opacity: 0;
}
[data-animation="rotate-in-up-right"].vibe-active {
  animation: vibeRotateInUpRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRotateInUpRight {
  from { transform: rotate(-90deg); opacity: 0; }
  to { transform: translateZ(0); opacity: 1; }
}

/* Flip Animations */
[data-animation="flip-in-x"] {
  opacity: 0;
  backface-visibility: visible !important;
}
[data-animation="flip-in-x"].vibe-active {
  animation: vibeFlipInX var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFlipInX {
  0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  40% { transform: perspective(400px) rotateX(-20deg); }
  60% { transform: perspective(400px) rotateX(10deg); opacity: 1; }
  80% { transform: perspective(400px) rotateX(-5deg); }
  to { transform: perspective(400px);  opacity: 1;}
}

[data-animation="flip-in-y"] {
  opacity: 0;
  backface-visibility: visible !important;
}
[data-animation="flip-in-y"].vibe-active {
  animation: vibeFlipInY var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeFlipInY {
  0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  40% { transform: perspective(400px) rotateY(-20deg); }
  60% { transform: perspective(400px) rotateY(10deg); opacity: 1; }
  80% { transform: perspective(400px) rotateY(-5deg); }
  to { transform: perspective(400px); }
}

/* Light Speed Animations */
[data-animation="light-speed-in-right"] {
  opacity: 0;
}
[data-animation="light-speed-in-right"].vibe-active {
  animation: vibeLightSpeedInRight var(--vibe-duration) ease-out forwards;
}
@keyframes vibeLightSpeedInRight {
  0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { transform: skewX(20deg); opacity: 1; }
  80% { transform: skewX(-5deg); }
  to { transform: translateZ(0); opacity: 1; }
}

[data-animation="light-speed-in-left"] {
  opacity: 0;
}
[data-animation="light-speed-in-left"].vibe-active {
  animation: vibeLightSpeedInLeft var(--vibe-duration) ease-out forwards;
}
@keyframes vibeLightSpeedInLeft {
  0% { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; }
  60% { transform: skewX(-20deg); opacity: 1; }
  80% { transform: skewX(5deg); }
  to { transform: translateZ(0);opcaity:1; }
}

/* Back Entrance Animations */
[data-animation="back-in-down"] {
  opacity: 0;
}
[data-animation="back-in-down"].vibe-active {
  animation: vibeBackInDown var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeBackInDown {
  0% { transform: translateY(-1200px) scale(0.7); opacity: 0.7; }
  80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}

[data-animation="back-in-up"] {
  opacity: 0;
}
[data-animation="back-in-up"].vibe-active {
  animation: vibeBackInUp var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeBackInUp {
  0% { transform: translateY(1200px) scale(0.7); opacity: 0.7; }
  80% { transform: translateY(0) scale(0.7); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}

[data-animation="back-in-left"] {
  opacity: 0;
}
[data-animation="back-in-left"].vibe-active {
  animation: vibeBackInLeft var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeBackInLeft {
  0% { transform: translateX(-2000px) scale(0.7); opacity: 0.7; }
  80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}

[data-animation="back-in-right"] {
  opacity: 0;
}
[data-animation="back-in-right"].vibe-active {
  animation: vibeBackInRight var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeBackInRight {
  0% { transform: translateX(2000px) scale(0.7); opacity: 0.7; }
  80% { transform: translateX(0) scale(0.7); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}

/* Special Animations */
[data-animation="jack-in-the-box"] {
  opacity: 0;
}
[data-animation="jack-in-the-box"].vibe-active {
  animation: vibeJackInTheBox var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeJackInTheBox {
  0% { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
  50% { transform: rotate(-10deg); }
  70% { transform: rotate(3deg); }
  to { opacity: 1; transform: scale(1); }
}

[data-animation="roll-in"] {
  opacity: 0;
}
[data-animation="roll-in"].vibe-active {
  animation: vibeRollIn var(--vibe-duration) var(--vibe-easing) forwards;
}
@keyframes vibeRollIn {
  from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(-120deg); }
  to { opacity: 1; transform: translateZ(0); }
}

[data-animation="hinge"] {
  transform-origin: top left;
}
[data-animation="hinge"].vibe-active {
  animation: vibeHinge calc(var(--vibe-duration) * 2) ease-in-out forwards;
}
@keyframes vibeHinge {
  0% { animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate(80deg); animation-timing-function: ease-in-out; }
  40%, 80% { transform: rotate(60deg); animation-timing-function: ease-in-out; opacity: 1; }
  to { transform: translate3d(0, 700px, 0); opacity: 0; }
}

/* Interactive Animations */
[data-animation="pulse"] {
  animation: vibePulse 2s infinite;
}
@keyframes vibePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

[data-animation="bounce"] {
  animation: vibeBounce 2s infinite;
}
@keyframes vibeBounce {
  0%, 20%, 53%, 100% { transform: translateZ(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  40%, 43% { transform: translate3d(0, -30px, 0) scaleY(1.1); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
  70% { transform: translate3d(0, -15px, 0) scaleY(1.05); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
  80% { transform: translateZ(0) scaleY(0.95); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  90% { transform: translate3d(0, -4px, 0) scaleY(1.02); }
}

[data-animation="flash"] {
  animation: vibeFlash 2s infinite;
}
@keyframes vibeFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

[data-animation="rubber-band"] {
  animation: vibeRubberBand 1s;
}
@keyframes vibeRubberBand {
  0% { transform: scale(1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale(1); }
}

[data-animation="shake-x"] {
  animation: vibeShakeX 1s;
}
@keyframes vibeShakeX {
  0%, 100% { transform: translateZ(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

[data-animation="shake-y"] {
  animation: vibeShakeY 1s;
}
@keyframes vibeShakeY {
  0%, 100% { transform: translateZ(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}

[data-animation="head-shake"] {
  animation: vibeHeadShake 1s ease-in-out;
}
@keyframes vibeHeadShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}

[data-animation="swing"] {
  transform-origin: top center;
  animation: vibeSwing 1s;
}
@keyframes vibeSwing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

[data-animation="tada"] {
  animation: vibeTada 1s;
}
@keyframes vibeTada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
  100% { transform: scale(1); }
}

[data-animation="wobble"] {
  animation: vibeWobble 1s;
}
@keyframes vibeWobble {
  0% { transform: translateZ(0); }
  15% { transform: translate3d(-25%, 0, 0) rotate(-5deg); }
  30% { transform: translate3d(20%, 0, 0) rotate(3deg); }
  45% { transform: translate3d(-15%, 0, 0) rotate(-3deg); }
  60% { transform: translate3d(10%, 0, 0) rotate(2deg); }
  75% { transform: translate3d(-5%, 0, 0) rotate(-1deg); }
  100% { transform: translateZ(0); }
}

[data-animation="jello"] {
  animation: vibeJello 1s;
  transform-origin: center;
}
@keyframes vibeJello {
  0%, 11.1%, 100% { transform: translateZ(0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

[data-animation="heart-beat"] {
  animation: vibeHeartBeat calc(var(--vibe-duration) * 1.3) ease-in-out;
}
@keyframes vibeHeartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

/* Hover Animations */
[data-animation="glow"]:hover {
  box-shadow: 0 0 20px rgba(100, 200, 255, 0.6);
  transition: box-shadow 0.3s ease;
}

[data-animation="lift"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Loader Animations */
[data-animation="spin"] {
  animation: vibe-spin 1s linear infinite;
}
@keyframes vibe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

[data-animation="dots"] {
  display: inline-block;
}
[data-animation="dots"]::after {
  content: '...';
  animation: vibe-dots 1.5s steps(4, end) infinite;
}
@keyframes vibe-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Transition Effects */
[data-animation="crossfade"] {
  position: relative;
  overflow: hidden;
}
[data-animation="crossfade"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}
[data-animation="crossfade"]:hover::before {
  left: 100%;
}

[data-animation="morph"] {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
[data-animation="morph"]:hover {
  border-radius: 50%;
  transform: scale(1.1);
}

[data-animation="flip"] {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
[data-animation="flip"]:hover {
  transform: rotateY(180deg);
}

/* Carousel */
[vibe-carousel] {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[vibe-carousel]::-webkit-scrollbar {
  display: none;
}
[vibe-carousel] > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
}

/* Items Fade */
[vibe-items-fade] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
[vibe-items-fade] > *.vibe-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Loop Animations */
[vibe-loop="true"] {
  animation-iteration-count: infinite !important;
}

/* Breakpoints */
@media (max-width: 575px) {
  .vibe-sm-hidden { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .vibe-md-hidden { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .vibe-lg-hidden { display: none !important; }
}
@media (min-width: 992px) {
  .vibe-xl-hidden { display: none !important; }
}

/* Smooth Everything */
* {
  scroll-behavior: smooth;
}

.vibe-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}