@import "tailwindcss";

@source "../public/**/*.php";
@source "../templates/**/*.twig";

@theme {
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --color-agro-50: #f2f8ed;
  --color-agro-100: #dfefd6;
  --color-agro-600: #0f6b2f;
  --color-agro-700: #075425;
  --color-agro-800: #00451f;
  --color-agro-900: #003517;
  --color-harvest: #f7cf22;
  --color-ink: #080b0a;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 0 20%, rgba(15, 107, 47, 0.08), transparent 22rem),
    linear-gradient(180deg, #ffffff 0%, #f8fbf5 46%, #ffffff 100%);
}

.leaf-watermark {
  /* background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68)),
    url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 220 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.24' stroke='%230f6b2f' stroke-width='1'%3E%3Cpath d='M22 172c60-18 96-58 108-120 29 39 20 95-18 127-25 21-56 25-90-7Z'/%3E%3Cpath d='M54 159c29-26 54-60 76-107'/%3E%3Cpath d='M72 140c-15-1-31-7-48-17'/%3E%3Cpath d='M94 112c-19-1-37-8-53-20'/%3E%3Cpath d='M113 80c-16 2-31-2-47-12'/%3E%3C/g%3E%3C/svg%3E"); */
  background-repeat: no-repeat;
  background-position: left 4rem top 10rem;
}

.metric-panel {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 767px) {
  .metric-panel {
    clip-path: none;
  }
}

/* ── Scroll-reveal animations ── */
.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-2rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-right {
  opacity: 0;
  transform: translateX(2rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 90ms;  opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; opacity: 1; transform: none; }

/* Hero entrance */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}

.hero-animate > * {
  animation: hero-fade-up 0.7s ease both;
}
.hero-animate > *:nth-child(1) { animation-delay: 0.1s; }
.hero-animate > *:nth-child(2) { animation-delay: 0.25s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.4s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.55s; }

/* Hero image slide-in */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(3rem); }
  to   { opacity: 1; transform: none; }
}

.hero-img-animate {
  animation: slide-in-right 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Stat counter pulse */
@keyframes count-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}

.stat-reveal {
  opacity: 0;
}

.stat-reveal.is-visible {
  animation: count-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.stat-reveal.is-visible:nth-child(1) { animation-delay: 0ms; }
.stat-reveal.is-visible:nth-child(2) { animation-delay: 120ms; }
.stat-reveal.is-visible:nth-child(3) { animation-delay: 240ms; }