/* Custom Global Styles for MAROC.AC */
@layer base {
  [x-cloak] { display: none !important; }
}

/* Glassmorphism & Translucency */
.glass-nav {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Custom Scrollbar */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.18);
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.3);
}

/* Neon & Subtle Glow Borders */
.glow-on-hover {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.glow-on-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px oklch(var(--p) / 0.15), 0 8px 10px -6px oklch(var(--p) / 0.1);
  border-color: oklch(var(--p) / 0.4);
}

/* Radial Grid Background */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, oklch(var(--bc) / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(var(--bc) / 0.04) 1px, transparent 1px);
}

.radial-gradient-hero {
  background: radial-gradient(circle at 50% 15%, oklch(var(--p) / 0.15) 0%, transparent 60%);
}

/* Moroccan Accent Ribbon */
.morocco-gradient-text {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.morocco-flag-badge {
  background: linear-gradient(135deg, #c1272d 0%, #006233 100%);
}

/* Animation Keyframes */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Print Styles for CV Builder */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .no-print {
    display: none !important;
  }
  #cv-preview-render {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}