/* ==========================================================================
   Green Earth Nursery & Garden Developers — design tokens & signature motifs
   Palette: forest-950 #0F3319, forest-800 #17532B, forest-600 #2F8F4E,
            leaf-500 #7CB342, leaf-300 #C3E39B, cream-50 #F8FAF3,
            bark-700 #5D4536, ink #17241B
   Type: 'Fraunces' (display, organic wonky serif) + 'Manrope' (body/UI)
   ========================================================================== */

:root{
  --forest-950:#0F3319;
  --forest-800:#17532B;
  --forest-600:#2F8F4E;
  --forest-500:#3AA35E;
  --leaf-500:#7CB342;
  --leaf-400:#96C75A;
  --leaf-300:#C3E39B;
  --cream-50:#F8FAF3;
  --cream-100:#F1F5E8;
  --bark-700:#5D4536;
  --ink:#17241B;
  --gold:#D9A441;
}

*{scroll-behavior:smooth;}
html{scroll-padding-top:96px;}

body{
  background:var(--cream-50);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  overflow-x:hidden;
}

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

::selection{background:var(--leaf-300); color:var(--forest-950);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream-100);}
::-webkit-scrollbar-thumb{background:var(--forest-500); border-radius:8px;}

/* ---------------- Nav ---------------- */
.nav-link{position:relative; font-weight:600; letter-spacing:.01em;}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--leaf-500);
  transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--forest-800);}

/* ---------------- Organic blob shapes ---------------- */
.blob{
  border-radius:63% 37% 54% 46% / 42% 47% 53% 58%;
}
.blob-2{
  border-radius:41% 59% 37% 63% / 56% 42% 58% 44%;
}
@keyframes blobMorph{
  0%,100%{border-radius:63% 37% 54% 46% / 42% 47% 53% 58%;}
  50%{border-radius:37% 63% 46% 54% / 58% 53% 47% 42%;}
}
.blob-anim{animation:blobMorph 10s ease-in-out infinite;}

/* ---------------- Section divider (leaf wave) ---------------- */
.leaf-divider{display:block; width:100%; line-height:0;}

/* ---------------- Signature: growing vine ---------------- */
.vine-path{
  fill:none;
  stroke:var(--leaf-400);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.4s cubic-bezier(.35,.9,.25,1);
}
.vine-wrap.in-view .vine-path{stroke-dashoffset:0;}
.vine-leaf{
  opacity:0;
  transform:scale(.3);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.vine-wrap.in-view .vine-leaf{opacity:1; transform:scale(1);}
.vine-wrap.in-view .vine-leaf:nth-of-type(2){transition-delay:.5s;}
.vine-wrap.in-view .vine-leaf:nth-of-type(3){transition-delay:.9s;}
.vine-wrap.in-view .vine-leaf:nth-of-type(4){transition-delay:1.3s;}
.vine-wrap.in-view .vine-leaf:nth-of-type(5){transition-delay:1.7s;}
.vine-wrap.in-view .vine-leaf:nth-of-type(6){transition-delay:2.0s;}

/* ---------------- Tree-ring badges (growth rings) ---------------- */
.ring-badge{
  position:relative;
  width:132px; height:132px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.ring-badge svg{position:absolute; inset:0; width:100%; height:100%;}
.ring-badge .ring-num{position:relative; z-index:2;}
.ring-circle{
  fill:none; stroke-width:2;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  transition:stroke-dashoffset 1.6s ease;
}
.ring-badge.in-view .ring-circle{stroke-dashoffset:0;}

/* ---------------- Reveal on scroll ---------------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in-view{opacity:1; transform:translateY(0);object-fit: contain;}
.reveal-delay-1.in-view{transition-delay:.12s;}
.reveal-delay-2.in-view{transition-delay:.24s;}
.reveal-delay-3.in-view{transition-delay:.36s;}
.reveal-delay-4.in-view{transition-delay:.48s;}

/* ---------------- Cards ---------------- */
.service-card{
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .3s ease;
}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 40px -18px rgba(15,51,25,.35);
  border-color:var(--leaf-500);
}
.service-card .icon-wrap{transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .3s ease;}
.service-card:hover .icon-wrap{transform:rotate(-8deg) scale(1.08); background:var(--forest-800);}
.service-card:hover .icon-wrap svg{stroke:var(--cream-50);}

/* ---------------- Buttons ---------------- */
.btn-primary{
  background:#17532b;
  color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .3s ease;
  box-shadow:0 10px 24px -10px rgba(47,143,78,.55);
}
.btn-primary:hover{background:var(--forest-800); transform:translateY(-3px) scale(1.02);}
.btn-outline{
  border:2px solid var(--forest-600); color:var(--forest-800);
  transition:all .3s ease;
}
.btn-outline:hover{background:var(--forest-600); color:#fff; transform:translateY(-3px);}

/* ---------------- Floating action buttons ---------------- */
.fab-stack{position:fixed; right:18px; bottom:22px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.fab-social{
  display:flex; flex-direction:column; gap:10px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .35s ease, transform .35s ease;
  transform:translateY(8px);
}
.fab-social.open{max-height:260px; opacity:1; transform:translateY(0);}
.fab-btn{
  width:50px; height:50px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 20px -6px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fab-btn:hover{transform:scale(1.1) rotate(-4deg);}
.fab-main{
  width:60px; height:60px; border-radius:9999px; background:var(--forest-800); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(15,51,25,.55);
  animation:pulseRing 2.6s ease-in-out infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(23,83,43,.45), 0 10px 26px -6px rgba(15,51,25,.55);}
  70%{box-shadow:0 0 0 16px rgba(23,83,43,0), 0 10px 26px -6px rgba(15,51,25,.55);}
  100%{box-shadow:0 0 0 0 rgba(23,83,43,0), 0 10px 26px -6px rgba(15,51,25,.55);}
}
.fab-call{background:#1B5E2F;}
.fab-whatsapp{background:#25D366;}
.fab-fb{background:#1877F2;}
.fab-ig{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}

/* Leaf sway ambient */
@keyframes sway{
  0%,100%{transform:rotate(-3deg) translateY(0);}
  50%{transform:rotate(3deg) translateY(-6px);}
}
.leaf-sway{animation:sway 4.5s ease-in-out infinite; transform-origin:top center;}
.leaf-sway.d2{animation-delay:.6s;}
.leaf-sway.d3{animation-delay:1.2s;}

@keyframes float-y{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.float-y{animation:float-y 5s ease-in-out infinite;}

/* Hero canopy drift */
@keyframes drift{
  0%{transform:translateX(0);}
  50%{transform:translateX(-18px);}
  100%{transform:translateX(0);}
}
.drift{animation:drift 8s ease-in-out infinite;}

/* Marquee strip */
.marquee-track{display:flex; width:max-content; animation:marquee 26s linear infinite;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Gallery filter buttons */
.filter-btn{transition:all .3s ease;}
.filter-btn.active{background:var(--forest-800); color:#fff;}

/* Lightbox */
#lightbox{transition:opacity .3s ease;}

/* Testimonial dots */
.dot{transition:all .3s ease;}
.dot.active{width:26px; background:var(--forest-700, var(--forest-800));}

/* Input focus */
.field:focus{outline:none; border-color:var(--forest-600); box-shadow:0 0 0 4px rgba(47,143,78,.15);}

@media (max-width:768px){
  .ring-badge{width:100px; height:100px;}
}