/* ===== APPLE GLASS BASE ===== */
.glass {
  position: relative;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  background: rgba(255, 255, 255, 0.55);
  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  transition: all 0.35s ease;
}

/* ===== DARK MODE ===== */
.dark .glass {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ===== HOVER EFFECT (APPLE STYLE) ===== */
.glass:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* DARK HOVER */
.dark .glass:hover {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ===== OPTIONAL: GLOW EDGE ON HOVER ===== */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.1),
    rgba(255,255,255,0.4)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.glass:hover::before {
  opacity: 1;
}

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

.animate-scroll {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

.glass-card {
  @apply backdrop-blur-xl bg-white/30 dark:bg-white/10 border border-white/20 rounded-2xl p-6 shadow-lg transition hover:scale-105;
}
  
body {
      background: linear-gradient(to bottom right, #f8fafc, #e2e8f0);
    }
    .dark body {
      background: linear-gradient(to bottom right, #0f172a, #020617);
    }