/* ===================================
   cell.green – Ultimate Eco CSS (November 2025)
   Fully responsive • Zero syntax errors • Ready to launch
   =================================== */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ────────────────────────────────
   1. Tailwind Config – Eco Colours
   ──────────────────────────────── */
@layer base {
  :root {
    --eco-dark: 0 51 0;
    --eco-green: 0 77 0;
    --eco-lime: 165 216 103;
    --eco-leaf: 34 139 34;
    --eco-earth: 139 115 85;
    --eco-sky: 232 244 232;
  }
}

/* ────────────────────────────────
   2. Quick Eco Utilities
   ──────────────────────────────── */
@layer utilities {
  .bg-eco        { background-color: rgb(var(--eco-green)); }
  .bg-eco-dark   { background-color: rgb(var(--eco-dark)); }
  .bg-eco-lime   { background-color: rgb(var(--eco-lime)); }
  .text-eco      { color: rgb(var(--eco-green)); }
  .text-lime     { color: rgb(var(--eco-lime)); }
  .border-eco    { border-color: rgb(var(--eco-green)); }
}

/* ────────────────────────────────
   3. Components
   ──────────────────────────────── */
@layer components {
  /* Hero / CTA Button */
  .btn-eco {
    @apply relative overflow-hidden inline-flex items-center justify-center
           font-bold text-white bg-eco hover:bg-[#228B22]
           px-8 py-4 rounded-full shadow-lg hover:shadow-2xl
           border-2 border-transparent hover:border-lime
           transition-all duration-300 text-base sm:text-lg;
  }
  .btn-eco::before {
    content: "♻";
    @apply absolute left-4 opacity-0 -translate-x-8 transition-all duration-400;
  }
  .btn-eco:hover::before {
    @apply opacity-100 translate-x-0;
  }

  /* Product Card */
  .card-eco {
    @apply relative overflow-hidden rounded-2xl border-2 border-dashed border-eco/30
           bg-white/95 backdrop-blur-sm shadow-md hover:shadow-2xl
           transition-all duration-500 w-full;
  }
  .card-eco::before {
    content: "🌿";
    @apply absolute -top-4 -right-4 text-6xl opacity-10 rotate-12;
  }

  /* Carbon Neutral Badge */
  .badge-carbon {
    @apply inline-flex items-center gap-2 bg-lime/20 text-eco-dark
           px-4 py-2 rounded-full text-sm font-medium border border-lime/50;
  }

  /* Animated Vine Heading */
  .heading-eco {
    @apply relative inline-block font-bold text-eco-dark text-3xl sm:text-4xl md:text-5xl;
  }
  .heading-eco::after {
    content: "";
    @apply absolute left-0 -bottom-2 h-2 bg-gradient-to-r from-transparent via-lime to-transparent rounded-full;
    width: 0;
    animation: growVine 2.8s infinite alternate ease-in-out;
  }
}

/* ────────────────────────────────
   4. Footer Magic
   ──────────────────────────────── */
.footer-wave {
  @apply relative overflow-hidden;
  background: linear-gradient(180deg, #003300 0%, #001a00 100%);
}
.footer-wave::before {
  content: "";
  @apply absolute inset-x-0 top-0 h-32;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(165,216,103,0.08) 40px,
    rgba(165,216,103,0.08) 80px
  );
  animation: forestWind 40s linear infinite;
}

/* Footer Floating Particles */
.footer-particles {
  @apply absolute inset-0 overflow-hidden pointer-events-none;
}
.footer-particle {
  @apply absolute text-xl opacity-0;
  animation: floatUp 18s infinite linear;
}
.footer-particle:nth-child(1)  { left: 10%; animation-delay: 0s; }
.footer-particle:nth-child(2)  { left: 30%; animation-delay: 5s; }
.footer-particle:nth-child(3)  { left: 50%; animation-delay: 10s; }
.footer-particle:nth-child(4)  { left: 70%; animation-delay: 3s; }
.footer-particle:nth-child(5)  { left: 90%; animation-delay: 8s; }

/* Footer Links Glow */
footer a {
  @apply relative transition-all duration-300;
}
footer a::after {
  content: "";
  @apply absolute w-0 h-0.5 -bottom-1 left-1/2 -translate-x-1/2 bg-lime rounded-full transition-all duration-400;
}
footer a:hover::after {
  @apply w-full;
}
footer a:hover {
  @apply text-lime;
  text-shadow: 0 0 12px rgba(165,216,103,0.5);
}

/* Bitzen Pulse */
footer a[href*="bitzen"] {
  animation: gentlePulse 6s infinite ease-in-out;
}

/* ────────────────────────────────
   5. Animations
   ──────────────────────────────── */
@keyframes growVine {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes forestWind {
  from { transform: translateX(0); }
  to   { transform: translateX(-80px); }
}
@keyframes floatUp {
  0%   { transform: translateY(150px) rotate(0deg); opacity: 0; }
  15%  { opacity: 0.2; }
  85%  { opacity: 0.05; }
  100% { transform: translateY(-200px) rotate(360deg); opacity: 0; }
}
@keyframes gentlePulse {
  0%,100% { opacity: 0.9; }
  50%    { opacity: 1; text-shadow: 0 0 10px rgba(165,216,103,0.4); }
}

/* ────────────────────────────────
   6. Whole-Page Leaves (mobile-optimised)
   ──────────────────────────────── */
.leaf-float {
  @apply fixed text-4xl opacity-10 pointer-events-none z-20;
  animation: float 20s infinite linear;
}
@media (min-width: 640px) {
  .leaf-float { @apply text-5xl opacity-12; }
}
@keyframes float {
  0%   { transform: translateY(100vh) rotate(0deg); }
  100% { transform: translateY(-120px) rotate(360deg); }
}

/* ────────────────────────────────
   7. Reduced Motion Respect
   ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}