/* ============================================
   EASY CUSTOMIZATION - CHANGE ONLY THIS SECTION
   ============================================ */

:root {
  /* Brand Colors - change these 2 colors only */
  --color-primary: #3CC15A;       /* Logo leaf/word green for highlights */
  --color-secondary: #1F1F26;     /* Logo dark charcoal tone */

  /* Background Images - these 2 will AUTO-SLIDE on the main panel */
  --bg-image-1: url('images/bg-1.jpg'); /* Slide 1 */
  --bg-image-2: url('images/bg-2.jpg'); /* Slide 2 */

  /* Logo - replace with your logo image URL or leave as text */
  --logo-url: url('images/logo-2.png'); /* Set a URL here to show an image logo */
  --logo-text: 'Indi Word Crop Care';   /* Shown if no logo image is set */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-secondary);
}

/* Background Slider */
.bg-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.bg-slide.active { opacity: 1; }
.bg-slide-1 { background-image: var(--bg-image-1); }
.bg-slide-2 { background-image: var(--bg-image-2); }

/* Slide indicator dots */
.slide-dots { display:flex; gap:6px; }
.slide-dot {
  width:6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,.35);
  transition: background .4s, transform .4s;
  cursor: pointer;
}
.slide-dot.active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* Right panel - static second image */
.bg-right {
  background-image: var(--bg-image-2);
  background-size: cover;
  background-position: center;
}

/* Accent color helpers */
.accent-bg   { background-color: var(--color-primary); }
.accent-text { color: var(--color-primary); }
.accent-border { border-color: var(--color-primary); }

/* Logo */
.logo-wrap {
  width: clamp(120px, 22vw, 240px);
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

/* Gear animation */
@keyframes spin-slow  { to { transform: rotate(360deg);  } }
@keyframes spin-rev   { to { transform: rotate(-360deg); } }
@keyframes float-up   {
  0%,100% { transform: translateY(0);   opacity:.15; }
  50%     { transform: translateY(-18px); opacity:.35; }
}
@keyframes fade-slide {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0);    }
}
@keyframes bar-grow {
  from { width: 0%; }
  to   { width: 68%; }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.7); }
}

.gear-1 { animation: spin-slow  12s linear infinite; }
.gear-2 { animation: spin-rev    8s linear infinite; }
.float  { animation: float-up    5s ease-in-out infinite; }

.fade-1 { animation: fade-slide .7s ease both; }
.fade-2 { animation: fade-slide .7s .15s ease both; }
.fade-3 { animation: fade-slide .7s .30s ease both; }
.fade-4 { animation: fade-slide .7s .45s ease both; }
.fade-5 { animation: fade-slide .7s .60s ease both; }

.progress-bar { animation: bar-grow 2s 1s ease both; }

.dot-1 { animation: pulse-dot 1.4s .0s ease-in-out infinite; }
.dot-2 { animation: pulse-dot 1.4s .2s ease-in-out infinite; }
.dot-3 { animation: pulse-dot 1.4s .4s ease-in-out infinite; }

/* Glass card */
.glass {
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.13);
}

/* Noise grain overlay */
.grain::after {
  content:'';
  position:fixed;inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:50;opacity:.35;
}

@media (max-width:768px){
  .bg-right { display:none; }
  body { overflow-y:auto; }
}