/* ============================================================
   SALESLIN - LUXURY BEAUTY & HAIRCARE THEME UPGRADE
   Premium CSS Enhancement for a Luxury Beauty Brand
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES - LUXURY PALETTE
   ============================================================ */
:root {
  /* Brand Colors */
  --primary: #e91e8c;
  --primary-light: #ff6bb5;
  --primary-dark: #b5006e;
  --secondary: #f5a623;
  --secondary-light: #ffc85a;
  --secondary-dark: #c47d00;
  --dark: #1a0a2e;
  --dark-mid: #2d1554;
  --dark-light: #3d1f6e;
  --light: #fff9fc;
  --light-mid: #ffeef6;
  --accent: #7c3aed;
  --accent-light: #a855f7;
  --accent-dark: #5b21b6;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #e91e8c 0%, #f5a623 100%);
  --grad-primary-rev: linear-gradient(135deg, #f5a623 0%, #e91e8c 100%);
  --grad-dark: linear-gradient(135deg, #1a0a2e 0%, #3d1f6e 100%);
  --grad-accent: linear-gradient(135deg, #7c3aed 0%, #e91e8c 100%);
  --grad-hero: linear-gradient(135deg, #1a0a2e 0%, #3d1f6e 40%, #7c3aed 70%, #e91e8c 100%);
  --grad-gold: linear-gradient(135deg, #f5a623 0%, #ffd700 50%, #f5a623 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  --grad-card: linear-gradient(180deg, transparent 0%, rgba(26,10,46,0.85) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(233,30,140,0.15);
  --shadow-md: 0 8px 32px rgba(233,30,140,0.2);
  --shadow-lg: 0 16px 64px rgba(233,30,140,0.25);
  --shadow-xl: 0 24px 80px rgba(26,10,46,0.4);
  --shadow-glow: 0 0 30px rgba(233,30,140,0.4);
  --shadow-gold: 0 0 20px rgba(245,166,35,0.4);

  /* Typography */
  --font-primary: 'Playfair Display', 'Georgia', serif;
  --font-secondary: 'Poppins', 'Helvetica Neue', sans-serif;
  --font-accent: 'Cormorant Garamond', serif;

  /* Spacing */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-mid: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
}

/* ============================================================
   2. GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--light);
  color: var(--dark);
  font-family: var(--font-secondary);
  overflow-x: hidden;
}

/* ============================================================
   3. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(5deg); }
  66%       { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes floatDown {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(15px) rotate(-5deg); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(233,30,140,0.4); }
  50%       { box-shadow: 0 0 40px rgba(233,30,140,0.8), 0 0 60px rgba(245,166,35,0.3); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--primary); box-shadow: 0 0 10px rgba(233,30,140,0.3); }
  50%       { border-color: var(--secondary); box-shadow: 0 0 20px rgba(245,166,35,0.5); }
}

@keyframes textGradientMove {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes whatsappBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%       { transform: scale(1.1) rotate(-5deg); }
  75%       { transform: scale(1.1) rotate(5deg); }
}

@keyframes shapeFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(30px, -30px) rotate(120deg); }
  66%       { transform: translate(-20px, 20px) rotate(240deg); }
}

@keyframes shapeFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-40px, -20px) scale(1.2); }
}