/* ===== home.css — Custom effects only (Tailwind handles layout/spacing) ===== */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* --- SVG icon sizing fallback (Tailwind w-4/h-4 etc may not apply on production) --- */
svg.w-4 { width: 1rem; height: 1rem; min-width: 1rem; }
svg.h-4 { width: 1rem; height: 1rem; min-width: 1rem; }
svg.w-5 { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; }
svg.h-5 { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-11 { height: 2.75rem; }

/* --- Skip link --- */
.skip-link {
  position: absolute; left: 12px; top: 12px;
  padding: 10px 12px; background: #fff; border: 1px solid rgba(17,24,39,0.14);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(17,24,39,0.10);
  transform: translateY(-200%); transition: transform 160ms ease; z-index: 9999;
}
.skip-link:focus { transform: translateY(0); }

/* --- Hero dot grid background --- */
.hero-dot-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(95,58,221,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
}

/* --- Hero cursor glow --- */
.hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(95,58,221,0.10), transparent 60%);
}

/* --- Gradient text animation --- */
.hero-gradient-text {
  color: #7c3aed;
  font-style: italic;
  font-weight: 500;
  animation: hero-color-shift 6s ease infinite;
}

@keyframes hero-color-shift {
  0%, 100% { color: #5f3add; }
  33% { color: #a78bfa; }
  66% { color: #7c3aed; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Shimmer button --- */
.btn-shimmer {
  position: relative; overflow: hidden;
}
.btn-shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.20) 40%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.20) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out infinite;
}

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

/* --- Privacy section mesh gradient --- */
.privacy-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(95,58,221,0.12), transparent),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(139,92,246,0.08), transparent);
}

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Perspective container for tilt --- */
.perspective-1000 { perspective: 1000px; }