/* ==========================================
   TAILWIND CONFIG & CUSTOM CSS (Premium Design)
========================================== */

/* Mesh Gradients & Glassmorphism */
.mesh-hero {
  background-color: #0f172a;
  background-image: 
    radial-gradient(at 10% 20%, rgba(14, 165, 233, 0.4) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(2, 132, 199, 0.3) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(15, 23, 42, 0.8) 0px, transparent 50%);
}

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.card-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* SVG Noise Overlay */
.noise-overlay::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Scroll progress bar */
#scroll-progress { width: 0%; }

/* 3D Tilt perspective context */
.perspective-1000 { perspective: 1000px; }

/* Dynamic Float Animation Pt Particles */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-30px) rotate(180deg); opacity: 0.6; }
}
[x-cloak] { display: none !important; }