/* ZENDOKUS CUSTOM STYLES - NO BUILD VERSION */

/* =============================================================================
   BASE STYLES
   ============================================================================= */

:root {
  --lb-surface: #FFFAF0;
  --lb-divider: #EAD9A3;
  --lb-header-tint-rgb: 253, 240, 197;
  --lb-close-bg: #F7E9BD;
  --lb-accent: #B45309;
  --lb-label: #52525B;
  --lb-select-border: #E4C46A;
  --lb-select-bg: #FFFDF7;
  --lb-select-text: #3F3F46;
  --lb-spinner-track: #F0DFAC;
  --lb-row-current-bg: #F8EECC;
  --lb-row-current-shadow-rgb: 180, 83, 9;
  --lb-row-default-bg: #FFFDF7;
}

body { 
    margin: 0;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1410 50%, #0f0a08 100%);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth Scrolling */
html { 
    scroll-behavior: smooth; 
}

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

/* Squircle border radius */
.squircle { 
    border-radius: 2.5rem; 
}

.squircle-lg { 
    border-radius: 4rem; 
}

/* Font family utilities */
.font-epilogue {
  font-family: 'Epilogue', sans-serif;
}

.font-unbounded {
  font-family: 'Unbounded', sans-serif;
}

.font-fraunces {
  font-family: 'Fraunces', serif;
}

.font-manrope {
  font-family: 'Manrope', sans-serif;
}

/* =============================================================================
   DYNAMIC MESH BACKGROUNDS
   ============================================================================= */

.mesh-base {
    background: 
        radial-gradient(circle at 20% 30%, rgba(180, 130, 70, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(120, 75, 30, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(39, 39, 42, 0.8) 0%, transparent 70%),
        linear-gradient(135deg, #0f0a08 0%, #1a1410 50%, #0a0a0f 100%);
    transition: all 1s ease-in-out;
    animation: meshFloat 20s ease-in-out infinite;
}

.mesh-midnight { 
    background: 
        radial-gradient(circle at 15% 25%, rgba(180, 130, 70, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(120, 75, 30, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #09090b 0%, #1a1208 50%, #0d0a08 100%);
    animation: meshFloat 20s ease-in-out infinite;
}

.mesh-cyber { 
    background: 
        radial-gradient(circle at 50% 30%, rgba(8, 145, 178, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.12) 0%, transparent 55%),
        linear-gradient(135deg, #000000 0%, #0a1419 50%, #000000 100%);
    animation: meshFloat 25s ease-in-out infinite;
}

.mesh-sakura { 
    background: 
        radial-gradient(circle at 25% 25%, #fecdd3 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, #fbcfe8 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #fce7f3 0%, transparent 60%),
        linear-gradient(135deg, #fff1f2 0%, #fce7f3 50%, #fdf2f8 100%);
    animation: meshFloat 22s ease-in-out infinite;
}

.mesh-clay { 
    background: 
        radial-gradient(circle at 30% 40%, #fcd34d 0%, transparent 55%),
        radial-gradient(circle at 70% 60%, #fbbf24 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, #f59e0b 0%, transparent 45%),
        linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fde68a 100%);
    animation: meshFloat 18s ease-in-out infinite;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

@keyframes meshFloat {
    0%, 100% { 
        background-position: 0% 50%, 100% 50%, 50% 50%, 0% 0%; 
    }
    50% { 
        background-position: 100% 50%, 0% 50%, 50% 50%, 100% 100%; 
    }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in-from-bottom-4 {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-from-bottom-8 {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-from-left-4 {
  from {
    transform: translateX(-1rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation classes */
.animate-in {
  animation-fill-mode: both;
}

.fade-in {
  animation-name: fade-in;
}

.slide-in-from-bottom-4 {
  animation-name: slide-in-from-bottom-4;
}

.slide-in-from-bottom-8 {
  animation-name: slide-in-from-bottom-8;
}

.slide-in-from-left-4 {
  animation-name: slide-in-from-left-4;
}

.zoom-in {
  animation-name: zoom-in;
}

.duration-300 {
  animation-duration: 300ms;
}

.duration-500 {
  animation-duration: 500ms;
}

.duration-700 {
  animation-duration: 700ms;
}

/* Responsive text sizing fixes */
@media (max-width: 640px) {
  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

/* Additional utility classes */
.scale-98 {
  transform: scale(0.98);
}

.scale-95 {
  transform: scale(0.95);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button {
  transition-duration: 150ms;
}

/* Backdrop blur support fallback */
@supports not (backdrop-filter: blur(1px)) {
  .backdrop-blur-3xl {
    background-color: rgba(255, 255, 255, 0.85);
  }
  
  .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.9);
  }
  
  .backdrop-blur-xl {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/* =============================================================================
   CUSTOM COMPONENTS
   ============================================================================= */

/* Image Placeholder Styling */
.img-placeholder {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(20px);
    border: 1px dashed rgba(255,255,255,0.2);
}

/* Page Transition Overlay */
#transition-overlay {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

#transition-overlay.active {
    clip-path: circle(150% at 50% 50%);
}

/* Custom shadows for theme-specific styles */
.shadow-glass-edge {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 8px 32px rgba(0, 0, 0, 0.15);
}

.shadow-neon-glow {
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(6, 182, 212, 0.3);
}

.shadow-clay-inset {
  box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.7), inset -4px -4px 8px rgba(0, 0, 0, 0.08);
}

.shadow-clay-active {
  box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}