/* ==========================================================================
   Premium UX Plugin - Visual Enhancement Layer
   Provides a sophisticated, high-conversion feel without modifying components
   ========================================================================== */

:root {
  /* Dynamic Spacing using Clamp for responsive scaling */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 5vw, 3rem);
  --space-xl: clamp(3rem, 8vw, 6rem);
  
  /* Smooth Transitions */
  --premium-transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --premium-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --premium-transition-slow: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. TYPOGRAPHY ENHANCEMENTS */
body {
  letter-spacing: -0.01em;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* 2. SPACING & LAYOUT ENHANCEMENTS */
section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* 3. HEADER PREMIUM (Glassmorphism applied via JS class) */
header {
  transition: var(--premium-transition);
  border-bottom: 1px solid transparent;
}

header.header-scrolled {
  background: hsl(var(--background) / 0.7) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 30px -4px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid hsl(var(--border) / 0.4) !important;
}

/* 4. MICROINTERACTIONS & CARDS */
.card, [class*="rounded-xl"], [class*="rounded-2xl"] {
  transition: var(--premium-transition);
}

.card:hover, .premium-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15), 0 10px 15px -5px rgba(0,0,0,0.05);
}

/* 5. BUTTON ANIMATIONS */
button, a[role="button"], .unified-btn {
  position: relative;
  overflow: hidden; /* For ripple */
  transition: var(--premium-transition-fast) !important;
  will-change: transform, box-shadow;
}

button:not(:disabled):hover, a[role="button"]:hover, .unified-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

button:not(:disabled):active, a[role="button"]:active, .unified-btn:not(:disabled):active {
  transform: scale(0.98);
}

/* Ripple Effect */
.premium-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: premium-ripple-anim 0.6s linear forwards;
  background-color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

@keyframes premium-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 6. FORM INPUT FEEDBACK */
input, textarea, select {
  transition: var(--premium-transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.15) !important;
  transform: translateY(-1px);
}

/* 7. LOADING STATES (Skeleton Pulse) */
.premium-skeleton {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--muted)/0.4), hsl(var(--muted)));
  background-size: 200% 100%;
  color: transparent !important;
  border-color: transparent !important;
  user-select: none;
}

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

/* 8. FADE-IN REVEAL ANIMATIONS */
.premium-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity, transform;
}

.premium-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Delay staggered items inside reveal sections */
.premium-reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.premium-reveal-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.premium-reveal-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.premium-reveal-stagger > *:nth-child(4) { transition-delay: 0.4s; }