/**
 * Premium Design System - Mystic Mangrove Theme
 * Ruayaverse Platform
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* Dark Base Colors */
  --color-dark-ocean: #0a1216;
  --color-dark-sea: #0d1b1e;
  --color-dark-surface: #0f2027;
  --color-card-bg: rgba(255, 255, 255, 0.03);
  --color-card-border: rgba(255, 255, 255, 0.08);

  /* Typography Base */
  --font-base: 16px;
}

html {
  font-size: var(--font-base);
}

/* Accent Colors - Bioluminescent */
--color-primary: #10b981;
--color-primary-bright: #34d399;
--color-secondary: #14b8a6;
--color-accent: #6ee7b7;

/* Text Colors */
--color-text-primary: #f0fdf4;
--color-text-secondary: #a7f3d0;
--color-text-muted: #6ee7b7;
--color-text-dark: #064e3b;

/* Glow Effects */
--glow-primary: 0 0 30px rgba(16, 185, 129, 0.3);
--glow-intense: 0 0 50px rgba(16, 185, 129, 0.5);
--glow-soft: 0 0 20px rgba(16, 185, 129, 0.2);

/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);

/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;

/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-3xl: 2rem;
--radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 700ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   GLASSMORPHISM UTILITIES
   ============================================ */

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-lg);
}

.glass-hover {
  transition: all var(--transition-base);
}

.glass-hover:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: var(--glow-primary), var(--shadow-xl);
  transform: translateY(-4px);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow {
  box-shadow: var(--glow-primary);
}

.glow-intense {
  box-shadow: var(--glow-intense);
}

.glow-hover {
  transition: box-shadow var(--transition-base);
}

.glow-hover:hover {
  box-shadow: var(--glow-intense);
}

.text-glow {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.gradient-bright {
  background: linear-gradient(135deg, var(--color-primary-bright) 0%, var(--color-accent) 100%);
}

.gradient-dark {
  background: linear-gradient(180deg, var(--color-dark-ocean) 0%, var(--color-dark-sea) 100%);
}

.gradient-overlay {
  position: relative;
}

.gradient-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(10, 18, 22, 0) 0%,
      rgba(10, 18, 22, 0.8) 100%);
  pointer-events: none;
}

/* ============================================
   ANIMATED GRADIENT BACKGROUND
   ============================================ */

.animated-gradient {
  background: linear-gradient(-45deg,
      #0a1216,
      #0d1b1e,
      #064e3b,
      #0f2027);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* ============================================
   3D TRANSFORM UTILITIES
   ============================================ */

.transform-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl), var(--glow-primary);
}

.tilt {
  transition: transform var(--transition-smooth);
}

.tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.05);
}

/* ============================================
   CARD ENHANCEMENTS
   ============================================ */

.premium-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: all var(--transition-base);
}

.premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(16, 185, 129, 0.1) 50%,
      transparent 100%);
  transition: left var(--transition-slow);
}

.premium-card:hover::before {
  left: 100%;
}

.premium-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: var(--glow-primary), var(--shadow-lg);
  transform: translateY(-4px);
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */

.btn-premium {
  position: relative;
  padding: 0.875rem 2rem;
  font-weight: 700;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

.btn-premium:hover::before {
  transform: translateX(100%);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--glow-primary);
}

.btn-premium:active {
  transform: translateY(0);
}

/* ============================================
   INPUT ENHANCEMENTS
   ============================================ */

.input-premium {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  padding: 0.75rem 1rem;
  transition: all var(--transition-base);
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.input-premium::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.input-premium:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), var(--glow-soft);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   PARTICLE EFFECTS (CSS-Only)
   ============================================ */

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  opacity: 0.3;
  animation: float 10s infinite ease-in-out;
  box-shadow: var(--glow-soft);
}

.particle:nth-child(2) {
  animation-delay: 1s;
  left: 20%;
}

.particle:nth-child(3) {
  animation-delay: 2s;
  left: 40%;
}

.particle:nth-child(4) {
  animation-delay: 3s;
  left: 60%;
}

.particle:nth-child(5) {
  animation-delay: 4s;
  left: 80%;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.overflow-hidden {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* FIX INPUT SPACING ISSUE (Global Override) */
input,
textarea {
  word-spacing: normal !important;
  letter-spacing: normal !important;
  font-variant-ligatures: none !important;
  text-transform: none !important;
}

/* Force textarea to wrap correctly */
textarea {
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
}

/* Force single line input to respect spaces */
input[type="text"],
input[type="email"],
input[type="password"] {
  white-space: nowrap !important;
  font-feature-settings: "rlig" 0, "liga" 0 !important;
}