/* =============================================
   Offline AI Download Site — Custom Styles
   Black & Grey Dark Theme
   ============================================= */

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(200px);
  will-change: transform;
}

.blob-1 {
  width: 120vw;
  height: 120vh;
  background: radial-gradient(circle, rgba(90, 25, 45, 0.45), transparent 70%);
  top: -10%;
  right: -30%;
  animation: blobMove 30s ease-in-out infinite alternate;
}

.blob-2 {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(60, 15, 30, 0.5), transparent 70%);
  bottom: -20%;
  right: -10%;
  animation: blobMove 25s ease-in-out infinite alternate-reverse;
}

.blob-3 {
  display: none;
}

@keyframes blobMove {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -30px) scale(1.08);
  }
  66% {
    transform: translate(-20px, 25px) scale(0.95);
  }
  100% {
    transform: translate(15px, -15px) scale(1.03);
  }
}

/* ---------- Grid Overlay ---------- */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 100%);
}

/* ---------- Download Button Shimmer ---------- */
.download-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Feature Card Glow ---------- */
.feature-card {
  overflow: hidden;
}

.card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(161, 161, 170, 0.06),
    transparent 60%
  );
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.feature-card:hover .card-glow {
  opacity: 1;
}

/* ---------- Smooth scroll & selection ---------- */
html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(161, 161, 170, 0.3);
  color: #fff;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 640px) {
  .blob {
    filter: blur(70px);
    opacity: 0.2;
  }

  .blob-1 { width: 350px; height: 350px; }
  .blob-2 { width: 300px; height: 300px; }
  .blob-3 { width: 280px; height: 280px; }
}