/* style.css */

/* Base font smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

/* Liquid glass classes */
.glass-nav-scrolled {
  background: rgba(9, 9, 11, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.btn-glass {
  background: rgba(9, 9, 11, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-glass-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Intelligent List Animation (Bento) */
.bento-list > div {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s;
  will-change: transform;
}

.bento-list > div:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.03);
}

/* Edge Masking for Infinity Stream */
.mask-edges {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}

/* Animations */
@keyframes shimmer {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(300%);
  }
}

@keyframes stream-flow {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.stream-line {
  animation: stream-flow linear infinite;
  will-change: transform;
}

/* Ensure smooth pointer events for magnetic buttons */
.magnetic-btn {
  will-change: transform;
  display: inline-flex;
}