/**
 * PT SHANGYANG TECHNOLOGY INDONESIA
 * Modular Background Stylesheet (background.css)
 * Easily customized & maintained separately from main styles
 */

:root {
  --bg-primary: #FAF8F6;
  --bg-secondary: #F3EFEA;
  --bg-card: #FFFFFF;
  --brand-burgundy: #5B1B3E;
  --brand-burgundy-dark: #3E1029;
  --brand-burgundy-light: #7E2656;
  --brand-champagne: #D6A87C;
  --brand-champagne-light: #F7EFE8;
  --brand-sand: #EFE9E2;
  --text-primary: #1C191B;
  --text-secondary: #575255;
  --text-muted: #8A8488;
  --border-subtle: rgba(91, 27, 62, 0.08);
  --border-card: rgba(0, 0, 0, 0.06);
}

/* Global Ambient Background Wrapper */
.ambient-bg-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background-color: var(--bg-primary);
}

/* Luxury Cosmetic Ambient Gradient Mesh */
.ambient-gradient-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 15%, rgba(91, 27, 62, 0.045) 0%, transparent 45%),
    radial-gradient(circle at 90% 25%, rgba(214, 168, 124, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(91, 27, 62, 0.035) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(214, 168, 124, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, #FAF8F6 0%, #F5F1EC 50%, #FAF8F6 100%);
}

/* Micro Grid Pattern for Engineering & Cleanroom Precision */
.ambient-precision-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(91, 27, 62, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91, 27, 62, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 80%);
}

/* Floating Aesthetic Cosmetic Glow Orbs */
.ambient-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: floatOrb 22s ease-in-out infinite alternate;
}

.ambient-glow-orb-1 {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(91, 27, 62, 0.08) 0%, rgba(214, 168, 124, 0.04) 70%, transparent 100%);
}

.ambient-glow-orb-2 {
  width: 520px;
  height: 520px;
  bottom: 5%;
  left: -150px;
  background: radial-gradient(circle, rgba(214, 168, 124, 0.08) 0%, rgba(91, 27, 62, 0.03) 70%, transparent 100%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, 40px) scale(1.08);
  }
  100% {
    transform: translate(-20px, 25px) scale(0.95);
  }
}

/* Dark Section Background Variation */
.bg-dark-cosmetic {
  background-color: #171114 !important;
  color: #FFFFFF !important;
  position: relative;
  overflow: hidden;
}

.bg-dark-cosmetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 20%, rgba(91, 27, 62, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(214, 168, 124, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* Subtle Champagne Tinted Sections */
.bg-warm-cosmetic {
  background-color: #F6F1EC;
  border-top: 1px solid rgba(91, 27, 62, 0.05);
  border-bottom: 1px solid rgba(91, 27, 62, 0.05);
}