/* L'Académie Visionnaire — custom styles that go beyond Tailwind utilities */

:root {
  --av-navy-950: #050b1e;
  --av-navy-900: #0a1330;
  --av-navy-800: #101c44;
  --av-navy-700: #16265c;
  --av-gold-400: #f0c674;
  --av-gold-500: #e0ac3f;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f7f8fb;
}

/* Hero gradient accents (base gradient background is applied via Tailwind
   arbitrary utility classes directly in the markup so it is guaranteed to
   win the cascade against the Tailwind Play CDN's own injected stylesheet) */
.av-hero {
  background-color: #050b1e;
}

.av-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(240, 198, 116, 0.16), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(99, 132, 255, 0.16), transparent 45%);
  pointer-events: none;
}

/* Grid texture overlay intentionally removed — the radial gradient accents
   in .av-hero::before provide enough depth without a busy pattern. */

/* Product card entrance animation */
@keyframes av-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.av-card {
  animation: av-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.av-card:hover .av-cover {
  transform: scale(1.045);
}

.av-cover {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Delete button */
.av-delete-btn {
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.av-delete-btn:hover {
  transform: scale(1.08);
}

/* Custom scrollbar for category pill row on mobile */
.av-scroll-x::-webkit-scrollbar {
  height: 6px;
}
.av-scroll-x::-webkit-scrollbar-thumb {
  background-color: rgba(10, 19, 48, 0.2);
  border-radius: 999px;
}

/* Toast */
#av-toast {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Admin lock icon pulse */
@keyframes av-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 172, 63, 0.35);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(224, 172, 63, 0);
  }
}

.av-admin-lock {
  animation: av-pulse-ring 2.2s ease-out infinite;
}

/* Empty state illustration float */
@keyframes av-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.av-float {
  animation: av-float 4s ease-in-out infinite;
}