/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero Dashboard Floating Animation */
.hero-mockup-wrapper {
  perspective: 1000px;
  margin-top: 3rem;
  margin-bottom: -6rem; /* Overlap into the next section */
  position: relative;
  z-index: 10;
}

.hero-mockup {
  transform: rotateX(15deg) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 4px solid var(--color-border);
}

.hero-mockup:hover {
  transform: rotateX(0deg) scale(1);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25);
}

/* Bento Grid Card Micro-Animations */
.bento-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

.bento-image-wrapper {
  margin-top: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

/* Infinite Scrolling Marquee */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  padding: 2rem 0;
  background: linear-gradient(90deg, var(--color-surface) 0%, transparent 5%, transparent 95%, var(--color-surface) 100%);
}

.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-content img {
  display: inline-block;
  height: 40px;
  margin: 0 3rem;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}

.marquee-content img:hover {
  filter: grayscale(0%) opacity(1);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fade In on Scroll (Requires simple IntersectionObserver JS) */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}