/* ===================== BASE ===================== */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #16a34a; border-radius: 4px; }
.dark body { background: #111827; color: #e5e7eb; }
.dark ::-webkit-scrollbar-track { background: #1f2937; }

/* ===================== LOADER — SEED TO TREE ===================== */
#loader {
  position: fixed; inset: 0; background: #14532d; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s, visibility 0.6s;
}
#loader.hidden { opacity: 0; visibility: hidden; }

.loader-container { text-align: center; }

.loader-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700; color: #86efac;
  letter-spacing: 0.2em; margin-top: 18px;
  opacity: 0; animation: text-appear 0.4s 1.1s forwards;
}
.loader-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem; font-weight: 400; color: #bbf7d0;
  letter-spacing: 0.5em; margin-top: 4px;
  opacity: 0; animation: text-appear 0.4s 1.3s forwards;
}

/* Ground line draws in */
.ground-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw-ground 0.5s 0.1s ease-out forwards;
}
@keyframes draw-ground {
  to { stroke-dashoffset: 0; }
}

/* Whole plant grows up from the ground */
.grow-plant {
  transform-origin: 100px 140px;
  transform: scaleY(0);
  animation: grow-up 0.9s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes grow-up {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Stem draws first */
.plant-stem {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: draw-stem 0.5s 0.4s ease-out forwards;
}
@keyframes draw-stem {
  to { stroke-dashoffset: 0; }
}

/* Leaves unfold */
.plant-leaf-left {
  transform-origin: 22px 56px;
  transform: scale(0);
  animation: unfold 0.5s 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.plant-leaf-right {
  transform-origin: 22px 50px;
  transform: scale(0);
  animation: unfold 0.5s 0.95s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.plant-sprout {
  opacity: 0;
  animation: fade-in 0.4s 1.1s forwards;
}
@keyframes unfold {
  to { transform: scale(1); }
}
@keyframes fade-in { to { opacity: 1; } }
@keyframes text-appear { to { opacity: 1; } }

/* ===================== NAVBAR ===================== */
#navbar { background: transparent; }
#navbar.scrolled {
  background: rgba(20, 83, 45, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}

/* ===================== PARTICLES ===================== */
.particle {
  position: absolute; width: 6px; height: 6px;
  background: rgba(245, 158, 11, 0.4); border-radius: 50%;
  left: var(--x); bottom: -10px;
  animation: float-up var(--duration) var(--delay) infinite ease-out;
}
@keyframes float-up {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 0.3; }
  100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

/* ===================== ANIMATIONS ===================== */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

/* ===================== SCROLL REVEAL ===================== */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed {
  opacity: 1; transform: translate(0, 0);
}

/* ===================== PARALLAX ===================== */
.parallax-bg { transition: transform 0.1s linear; }

/* ===================== PRODUCT FILTER ===================== */
.filter-btn { background: white; color: #374151; border: 2px solid #e5e7eb; }
.dark .filter-btn { background: #374151; color: #d1d5db; border-color: #4b5563; }
.filter-btn:hover { border-color: #16a34a; color: #16a34a; }
.filter-btn.active {
  background: #16a34a; color: white; border-color: #16a34a;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
}
.product-card { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.product-card.hidden-card { opacity: 0; transform: scale(0.8); position: absolute; pointer-events: none; }

/* ===================== FAQ ===================== */
.faq-item { transition: all 0.3s ease; }
.faq-item.active { border-color: #16a34a; background: #f0fdf4; }
.dark .faq-item.active { background: rgba(22, 163, 74, 0.1); }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-content.show { max-height: 300px; }

/* ===================== MISC ===================== */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1); }
.cursor-glow {
  position: fixed; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
}
@media (max-width: 768px) { .cursor-glow { display: none; } }
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.modal-open { overflow: hidden; }