/*
 * Anti-Slop Design System
 * Professional frontend polish to avoid AI-generated aesthetics
 */

/* =============================================================================
 * 1. IMPERFECT GRID SYSTEM
 * Breaks perfect alignment for human touch
 * ============================================================================= */

.imperfect-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 20px 20px;
}

/* Organic spacing rhythm */
.spacing organic {
  --space-xs: 0.25rem;
  --space-sm: 0.625rem;   /* 1.5x base */
  --space-md: 1rem;
  --space-lg: 1.5rem;     /* 1.5x lg */
  --space-xl: 2.5rem;     /* 1.67x xl */
  --space-2xl: 4rem;
}

/* Broken grid columns */
.grid-broken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* =============================================================================
 * 2. TEXTURE OVERLAYS
 * Subtle textures that don't look like stock AI effects
 * ============================================================================= */

.card-textured {
  position: relative;
  overflow: hidden;
  border-radius: clamp(8px, 2vw, 14px);
}

.card-textured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.05) 0%, transparent 15%),
    radial-gradient(circle at 90% 80%, rgba(0,0,0,0.02) 0%, transparent 10%);
  pointer-events: none;
  opacity: 0.7;
  z-index: 1;
}

.card-textured > * {
  position: relative;
  z-index: 2;
}

/* Paper-like texture for backgrounds */
.bg-paper {
  background: 
    linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0.02) 4px
    );
}

/* =============================================================================
 * 3. VARIETED BORDER RADII
 * Mixed radii instead of uniform corners
 * ============================================================================= */

.varied-radius {
  border-radius: clamp(8px, 2vw, 14px);
}

.card-lg {
  border-radius: clamp(12px, 3vw, 20px);
}

.card-rounded {
  border-radius: 16px 4px 16px 4px; /* Asymmetric */
}

/* =============================================================================
 * 4. ORGANIC SHADOWS
 * Natural-looking shadows, not harsh AI defaults
 * ============================================================================= */

.shadow-organic {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -2px rgba(0, 0, 0, 0.05),
    0 0 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.shadow-warm {
  box-shadow: 
    0 8px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -4px rgba(0, 0, 0, 0.05),
    0 0 30px rgba(255, 150, 50, 0.1);
}

/* =============================================================================
 * 5. HOVER ANIMATIONS WITH SPRING PHYSICS
 * Natural motion, not linear AI animations
 * ============================================================================= */

.card-hover {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0); /* Enable hardware acceleration */
}

.card-hover:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: 
    0 15px 25px -5px rgba(0, 0, 0, 0.12),
    0 8px 10px -6px rgba(0, 0, 0, 0.08),
    0 0 40px rgba(99, 102, 241, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Scale with rotation */
.card-hover:hover {
  transform: translateY(-4px) scale(1.01);
}

/* =============================================================================
 * 6. NATURAL COLOR BREATHING
 * Subtle color shifts that feel alive
 * ============================================================================= */

.color-breathe {
  animation: colorBreathe 8s ease-in-out infinite;
}

@keyframes colorBreathe {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  25% { filter: hue-rotate(1.5deg) saturate(1.02); }
  50% { filter: hue-rotate(-1deg) saturate(0.98); }
  75% { filter: hue-rotate(0.5deg) saturate(1.01); }
}

/* Subtle opacity breathing */
.opacity-breathe {
  animation: opacityBreathe 6s ease-in-out infinite;
}

@keyframes opacityBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

/* =============================================================================
 * 7. ASYMMETRICAL LAYOUTS
 * Break the perfect grid
 * ============================================================================= */

.asymmetrical-section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.asymmetrical-section.reverse {
  flex-direction: row-reverse;
}

/* Staggered content */
.stagger-left {
  animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.stagger-right {
  animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* =============================================================================
 * 8. TYPOGRAPHY WITH PERSONALITY
 * Human-sounding hierarchy
 * ============================================================================= */

.heading-hands-on {
  font-variant-scripts: normal;
  text-rendering: optimizeLegibility;
}

Heading with character variation
<h1 class="text-heading-hands-on">
  Websites that <span class="text-accent-subtle">work for you</span>, not against you
</h1>

.text-warm-white {
  color: color-mix(in srgb, white 90%, transparent 10%);
}

.text-muted {
  color: color-mix(in srgb, slate.600 80%, transparent 20%);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.6;
}

/* =============================================================================
 * 9. MICRO-INTERACTIONS
 * Small details that make it feel alive
 * ============================================================================= */

.btn-interactive {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
}

.btn-interactive::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, white 20%, transparent);
  transition: left 0.6s;
}

.btn-interactive:hover::after {
  left: 100%;
}

/* =============================================================================
 * 10. GRADIENT BORDER EFFECTS
 * Instead of flat borders
 * ============================================================================= */

.border-gradient {
  border: 1px solid;
  border-image: linear-gradient(45deg, 
    rgba(100, 116, 189, 0.15), 
    rgba(99, 102, 241, 0.1), 
    rgba(34, 197, 94, 0.15)) 1;
  border-radius: inherit;
}

.border-warm {
  border: 1px solid;
  border-image: linear-gradient(135deg,
    rgba(255, 150, 50, 0.2),
    rgba(255, 200, 50, 0.1)) 1;
}

/* =============================================================================
 * 11. TEXT INTEGRITY
 * Subtle text enhancements that don't scream "AI"
 * ============================================================================= */

.text-subtle-shadow {
  background: linear-gradient(
    to bottom, 
    transparent 45%, 
    rgba(0,0,0,0.02) 50%, 
    transparent 55%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transparent: 1;
}

.text-letter-spaced {
  letter-spacing: -0.02em;
  word-spacing: 0.1em;
}

.text-line-height {
  line-height: 1.65;
}

/* =============================================================================
 * 12. RESPONSIVE FLUID TYPOGRAPHY
 * Smooth scaling, not harsh breakpoints
 * ============================================================================= */

.text-fluid {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  line-height: clamp(1.2, 1.2vw + 0.8, 1.4);
}

.text-fluid-lg {
  font-size: clamp(2rem, 5vw + 1.5rem, 4rem);
  line-height: clamp(1.15, 1.2vw + 0.75, 1.3);
}

/* =============================================================================
 * COMPOSITE CLASSES FOR QUICK USE
 * ============================================================================= */

.craft-card {
  @apply card-textured varied-radius shadow-organic border-gradient;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateZ(0);
}

.craft-card:hover {
  @apply shadow-warm;
  transform: translateY(-3px) scale(1.005);
}

.btn-craft {
  @apply btn-interactive px-6 py-3 rounded-lg font-semibold;
  background: linear-gradient(135deg, 
    color-mix(in srgb, #6366F1 70%, black 30%),
    color-mix(in srgb, #34D399 70%, black 30%)) 1;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-craft:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(0,0,0,0.15),
              0 0 20px rgba(99,102,241,0.2);
}

.btn-craft-cold {
  background: linear-gradient(135deg,
    color-mix(in srgb, #3B82F6 80%, black 20%),
    color-mix(in srgb, #6366F1 80%, black 20%)) 1;
}

.btn-craft-warm {
  background: linear-gradient(135deg,
    color-mix(in srgb, #F59E0B 80%, black 20%),
    color-mix(in srgb, #FCD34D 80%, black 20%)) 1;
}

/* ======================