/* ============================================================
   PANJDHARA — Premium Luxury Organic Background System
   "Peaceful golden mustard field at sunrise"
   7 Layered CSS Background Architecture
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════ */

:root {
  /* Primary */
  --bg-cream: #f8e5ae;
  --bg-ivory: #ffffb7;
  --bg-beige: #fae4b8;
  --bg-warm-beige: #ffe2b2;

  /* Secondary Golds */
  --gold-mustard: #f8c00b;
  --gold-yellow: #F7C948;
  --gold-honey: #e1a91d;

  /* Accent Greens */
  --green-olive: #8B9D6E;
  --green-sage: #B6C8A0;
  --green-leaf: #6A8D5E;

  /* Earthy Browns (very subtle) */
  --brown-light: #C4A882;
  --brown-warm: #A68B5C;

  /* Glassmorphism */
  --glass-bg: rgba(255, 253, 247, 0.55);
  --glass-blur: blur(16px);
  --glass-border: rgba(233, 179, 8, 0.10);
  --glass-shadow: 0 8px 32px rgba(42, 31, 13, 0.06), 0 2px 8px rgba(42, 31, 13, 0.04);
  --glass-radius: 28px;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL BODY BACKGROUND — Soft Warm Yellow
   ════════════════════════════════════════════════════════════ */

body {
  background: #FFFFB8 !important;
}

/* ════════════════════════════════════════════════════════════
   LAYER 1 — Soft Cream to Warm Golden Gradient
   ════════════════════════════════════════════════════════════ */

body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(233, 179, 8, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(139, 157, 110, 0.08), transparent 50%),
    radial-gradient(ellipse 70% 40% at 0% 80%, rgba(247, 201, 72, 0.06), transparent 45%),
    linear-gradient(180deg,
      #ffef79 0%,
      #f1da95 15%,
      #ffe16b 30%,
      #ffcf61 50%,
      #ffe9b8 65%,
      #ffe06f 80%,
      #ffff3f 100%
    ) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ════════════════════════════════════════════════════════════
   LAYER 2 — Large Blurred Organic Blobs
   ════════════════════════════════════════════════════════════ */

.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
  will-change: transform;
}

.bg-blob--golden {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #E9B308, #F7C948);
  top: -15%;
  left: -10%;
  animation: bgBlobFloat 25s ease-in-out infinite alternate;
}

.bg-blob--cream {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #faecc3, #F5E6C8);
  bottom: -20%;
  right: -8%;
  animation: bgBlobFloat 30s ease-in-out infinite alternate-reverse;
}

.bg-blob--olive {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #8B9D6E, #B6C8A0);
  top: 40%;
  left: 60%;
  animation: bgBlobFloat 28s ease-in-out infinite alternate;
  opacity: 0.15;
}

.bg-blob--beige {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #EDD8B5, #C4A882);
  top: 60%;
  left: 10%;
  animation: bgBlobFloat 22s ease-in-out infinite alternate-reverse;
  opacity: 0.18;
}

/* ════════════════════════════════════════════════════════════
   LAYER 3 — Subtle Mustard Flowers
   ════════════════════════════════════════════════════════════ */

.bg-flowers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-flower {
  position: absolute;
  opacity: 0.04;
  will-change: transform;
  animation: bgFlowerDrift 35s ease-in-out infinite;
}

.bg-flower svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 12 flowers scattered across viewport */
.bg-flower:nth-child(1)  { left: 5%;  top: 8%;  width: 45px; animation-delay: 0s; }
.bg-flower:nth-child(2)  { left: 15%; top: 35%; width: 38px; animation-delay: 5s; }
.bg-flower:nth-child(3)  { left: 25%; top: 65%; width: 50px; animation-delay: 10s; }
.bg-flower:nth-child(4)  { left: 40%; top: 18%; width: 35px; animation-delay: 3s; }
.bg-flower:nth-child(5)  { left: 55%; top: 50%; width: 42px; animation-delay: 8s; }
.bg-flower:nth-child(6)  { left: 68%; top: 12%; width: 48px; animation-delay: 13s; }
.bg-flower:nth-child(7)  { left: 78%; top: 72%; width: 36px; animation-delay: 6s; }
.bg-flower:nth-child(8)  { left: 88%; top: 38%; width: 44px; animation-delay: 11s; }
.bg-flower:nth-child(9)  { left: 10%; top: 82%; width: 32px; animation-delay: 15s; }
.bg-flower:nth-child(10) { left: 48%; top: 78%; width: 40px; animation-delay: 7s; }
.bg-flower:nth-child(11) { left: 92%; top: 58%; width: 35px; animation-delay: 12s; }
.bg-flower:nth-child(12) { left: 35%; top: 90%; width: 38px; animation-delay: 9s; }

/* ════════════════════════════════════════════════════════════
   LAYER 4 — Floating Mustard Seeds
   ════════════════════════════════════════════════════════════ */

.bg-seeds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-seed {
  position: absolute;
  width: 8px;
  height: 6px;
  background: radial-gradient(ellipse at 40% 40%, #8B6914, #5C4510);
  border-radius: 50%;
  opacity: 0.06;
  will-change: transform;
  animation: bgSeedFloat 20s ease-in-out infinite;
}

.bg-seed:nth-child(1)  { left: 3%;  top: 15%; animation-delay: 0s; }
.bg-seed:nth-child(2)  { left: 12%; top: 50%; animation-delay: 2.5s; }
.bg-seed:nth-child(3)  { left: 22%; top: 30%; animation-delay: 5s; }
.bg-seed:nth-child(4)  { left: 35%; top: 70%; animation-delay: 1.5s; }
.bg-seed:nth-child(5)  { left: 48%; top: 22%; animation-delay: 4s; }
.bg-seed:nth-child(6)  { left: 58%; top: 80%; animation-delay: 6.5s; }
.bg-seed:nth-child(7)  { left: 70%; top: 15%; animation-delay: 3s; }
.bg-seed:nth-child(8)  { left: 80%; top: 55%; animation-delay: 7s; }
.bg-seed:nth-child(9)  { left: 90%; top: 35%; animation-delay: 2s; }
.bg-seed:nth-child(10) { left: 45%; top: 5%;  animation-delay: 5.5s; }
.bg-seed:nth-child(11) { left: 5%;  top: 92%; animation-delay: 8s; }
.bg-seed:nth-child(12) { left: 95%; top: 75%; animation-delay: 4.5s; }
.bg-seed:nth-child(13) { left: 18%; top: 88%; animation-delay: 6s; }
.bg-seed:nth-child(14) { left: 75%; top: 42%; animation-delay: 3.5s; }
.bg-seed:nth-child(15) { left: 60%; top: 62%; animation-delay: 7.5s; }

/* ════════════════════════════════════════════════════════════
   LAYER 5 — Soft Light Rays (Diagonal)
   ════════════════════════════════════════════════════════════ */

.bg-light-rays {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-ray {
  position: absolute;
  top: -20%;
  width: 3px;
  height: 140%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(233, 179, 8, 0.04) 25%,
    rgba(247, 201, 72, 0.06) 50%,
    rgba(233, 179, 8, 0.04) 75%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: bgRayShift 15s ease-in-out infinite;
  will-change: transform, opacity;
}

.bg-ray:nth-child(1) { left: 8%;  animation-delay: 0s;  height: 120%; }
.bg-ray:nth-child(2) { left: 22%; animation-delay: 3s;  height: 130%; }
.bg-ray:nth-child(3) { left: 38%; animation-delay: 6s;  height: 110%; }
.bg-ray:nth-child(4) { left: 55%; animation-delay: 9s;  height: 140%; }
.bg-ray:nth-child(5) { left: 68%; animation-delay: 2s;  height: 125%; }
.bg-ray:nth-child(6) { left: 82%; animation-delay: 5s;  height: 115%; }
.bg-ray:nth-child(7) { left: 92%; animation-delay: 8s;  height: 135%; }

/* ════════════════════════════════════════════════════════════
   LAYER 6 — Organic Wave Pattern Dividers
   ════════════════════════════════════════════════════════════ */

.bg-wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-wave-divider--top {
  top: -2px;
}

.bg-wave-divider--bottom {
  bottom: -2px;
  transform: rotate(180deg);
}

.bg-wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ════════════════════════════════════════════════════════════
   LAYER 7 — Botanical Leaf Illustrations
   ════════════════════════════════════════════════════════════ */

.bg-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-leaf {
  position: absolute;
  opacity: 0.03;
  animation: bgLeafSway 30s ease-in-out infinite;
  will-change: transform;
}

.bg-leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bg-leaf:nth-child(1) { left: 2%;  top: 10%; width: 55px; animation-delay: 0s; }
.bg-leaf:nth-child(2) { left: 85%; top: 20%; width: 48px; animation-delay: 6s; }
.bg-leaf:nth-child(3) { left: 6%;  top: 55%; width: 42px; animation-delay: 12s; }
.bg-leaf:nth-child(4) { left: 90%; top: 65%; width: 50px; animation-delay: 18s; }
.bg-leaf:nth-child(5) { left: 45%; top: 8%;  width: 38px; animation-delay: 24s; }
.bg-leaf:nth-child(6) { left: 50%; top: 85%; width: 45px; animation-delay: 8s; }

/* ════════════════════════════════════════════════════════════
   GOLDEN PARTICLES / POLLEN
   ════════════════════════════════════════════════════════════ */

.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #E9B308, #F7C948);
  border-radius: 50%;
  opacity: 0.08;
  animation: bgParticleDrift 18s ease-in-out infinite;
  will-change: transform;
}

.bg-particle:nth-child(1)  { left: 8%;  top: 20%; animation-delay: 0s; }
.bg-particle:nth-child(2)  { left: 20%; top: 55%; animation-delay: 3s; }
.bg-particle:nth-child(3)  { left: 32%; top: 12%; animation-delay: 6s; }
.bg-particle:nth-child(4)  { left: 45%; top: 72%; animation-delay: 1.5s; }
.bg-particle:nth-child(5)  { left: 58%; top: 28%; animation-delay: 4.5s; }
.bg-particle:nth-child(6)  { left: 72%; top: 65%; animation-delay: 7.5s; }
.bg-particle:nth-child(7)  { left: 85%; top: 15%; animation-delay: 2.5s; }
.bg-particle:nth-child(8)  { left: 95%; top: 48%; animation-delay: 5.5s; }
.bg-particle:nth-child(9)  { left: 15%; top: 82%; animation-delay: 8.5s; }
.bg-particle:nth-child(10) { left: 65%; top: 42%; animation-delay: 3.8s; }
.bg-particle:nth-child(11) { left: 40%; top: 90%; animation-delay: 6.8s; }
.bg-particle:nth-child(12) { left: 50%; top: 45%; animation-delay: 9s; }
.bg-particle:nth-child(13) { left: 28%; top: 38%; animation-delay: 2s; }
.bg-particle:nth-child(14) { left: 78%; top: 80%; animation-delay: 5.2s; }
.bg-particle:nth-child(15) { left: 88%; top: 32%; animation-delay: 7.2s; }

/* ════════════════════════════════════════════════════════════
   GLASSMORPHISM — Section Styles
   ════════════════════════════════════════════════════════════ */

/* Global section glass base (applied via JS to all sections) */
.glass-section {
  position: relative;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
  margin: 2rem 0.75rem;
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

.glass-section:hover {
  background: rgba(255, 253, 247, 0.7) !important;
  box-shadow: 0 12px 48px rgba(42, 31, 13, 0.1), 0 4px 12px rgba(42, 31, 13, 0.06);
}

/* Thin gradient border overlay for glass sections */
.glass-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(
    135deg,
    rgba(233, 179, 8, 0.12),
    rgba(247, 201, 72, 0.06),
    rgba(139, 157, 110, 0.06),
    transparent 70%
  ) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Glass card component (for any inner card element) */
.glass-card-bg {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(233, 179, 8, 0.08);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(42, 31, 13, 0.04);
}

/* ════════════════════════════════════════════════════════════
   CURSOR GLOW — Golden Light Following Mouse
   ════════════════════════════════════════════════════════════ */

.bg-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(233, 179, 8, 0.04),
    rgba(247, 201, 72, 0.02),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* ════════════════════════════════════════════════════════════
   HERO SECTION — Soft Gradient Overlay Transition
   ════════════════════════════════════════════════════════════ */

.hero-gradient-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    /* rgba(251, 225, 145, 0.4) 40%, */
    /* rgba(253, 229, 155, 0.7) 70%, */
    /* #fcdc7e 100% */
  );
  pointer-events: none;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES
   ════════════════════════════════════════════════════════════ */

@keyframes bgBlobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -50px) scale(1.1); }
  66%  { transform: translate(-30px, 30px) scale(0.92); }
  100% { transform: translate(20px, -40px) scale(1.05); }
}

@keyframes bgFlowerDrift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.04;
  }
  25% {
    transform: translate(20px, -15px) rotate(6deg);
    opacity: 0.06;
  }
  50% {
    transform: translate(-12px, -30px) rotate(-4deg);
    opacity: 0.03;
  }
  75% {
    transform: translate(22px, -10px) rotate(5deg);
    opacity: 0.05;
  }
}

@keyframes bgSeedFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.06;
  }
  25% {
    transform: translate(15px, -12px) rotate(90deg);
    opacity: 0.09;
  }
  50% {
    transform: translate(-10px, -28px) rotate(180deg);
    opacity: 0.04;
  }
  75% {
    transform: translate(18px, -15px) rotate(270deg);
    opacity: 0.07;
  }
}

@keyframes bgRayShift {
  0%, 100% {
    transform: skewX(-18deg) translateX(-30px);
    opacity: 0;
  }
  25% {
    opacity: 0.04;
  }
  50% {
    transform: skewX(-18deg) translateX(30px);
    opacity: 0.06;
  }
  75% {
    opacity: 0.03;
  }
}

@keyframes bgLeafSway {
  0%, 100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
  25% {
    transform: rotate(10deg) translateY(-8px) scale(1.02);
  }
  50% {
    transform: rotate(-5deg) translateY(-18px) scale(0.98);
  }
  75% {
    transform: rotate(8deg) translateY(-6px) scale(1.01);
  }
}

@keyframes bgParticleDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.08;
  }
  25% {
    transform: translate(15px, -20px) scale(1.3);
    opacity: 0.14;
  }
  50% {
    transform: translate(-10px, -38px) scale(0.7);
    opacity: 0.05;
  }
  75% {
    transform: translate(18px, -12px) scale(1.15);
    opacity: 0.1;
  }
}

@keyframes bgGoldenGlow {
  0%, 100% {
    opacity: 0.03;
    transform: scale(1);
  }
  50% {
    opacity: 0.07;
    transform: scale(1.05);
  }
}

@keyframes bgSparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 0.08;
    transform: scale(1) rotate(180deg);
  }
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .bg-blob,
  .bg-flower,
  .bg-seed,
  .bg-ray,
  .bg-leaf,
  .bg-particle {
    animation: none !important;
  }

  .bg-cursor-glow {
    display: none !important;
  }

  .bg-blob {
    opacity: 0.12;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768px–1024px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .bg-blob--golden { width: 400px; height: 400px; }
  .bg-blob--cream  { width: 350px; height: 350px; }
  .bg-blob--olive  { width: 280px; height: 280px; }
  .bg-blob--beige  { width: 250px; height: 250px; }

  .bg-flower:nth-child(n+7) { display: none; }
  .bg-seed:nth-child(n+10)  { display: none; }
  .bg-leaf:nth-child(n+5)   { display: none; }
  .bg-particle:nth-child(n+10) { display: none; }
  .bg-ray:nth-child(n+5)    { display: none; }

  .glass-section {
    margin: 1.5rem 0.5rem;
    border-radius: 24px;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .bg-blob { filter: blur(70px); }
  .bg-blob--golden { width: 300px; height: 300px; }
  .bg-blob--cream  { width: 250px; height: 250px; }
  .bg-blob--olive  { display: none; }
  .bg-blob--beige  { width: 200px; height: 200px; }

  .bg-flower { display: none; }
  .bg-flower:nth-child(-n+4) { display: block; opacity: 0.025; }

  .bg-seed:nth-child(n+6)  { display: none; }
  .bg-seed { opacity: 0.035; }

  .bg-leaf  { display: none; }
  .bg-leaf:nth-child(-n+2) { display: block; opacity: 0.02; }

  .bg-particle:nth-child(n+8) { display: none; }
  .bg-particle { opacity: 0.05; }

  .bg-ray:nth-child(n+4) { display: none; }

  .glass-section {
    margin: 1rem 0;
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.7) !important;
  }

  .bg-cursor-glow {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (<480px)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .bg-blob--golden { width: 220px; height: 220px; }
  .bg-blob--cream  { width: 180px; height: 180px; }
  .bg-blob--beige  { width: 150px; height: 150px; }

  .bg-flower { display: none !important; }
  .bg-seed:nth-child(n+4)  { display: none; }
  .bg-particle:nth-child(n+5) { display: none; }
  .bg-ray:nth-child(n+3) { display: none; }

  .glass-section {
    border-radius: 16px;
    margin: 0.75rem 0;
  }
}