Glassmorphism_CAPTCHA_Component_Forest_Green

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-green-100 via-green-50 to-emerald-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-900 p-4 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white/20 dark:bg-gray-800/30 backdrop-blur-lg rounded-2xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden p-6 sm:p-8">
    <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/20 to-green-600/20 dark:from-gray-700/20 dark:to-gray-900/20 rounded-2xl animate-pulse-slow"></div>
    <div class="relative z-10 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-900 dark:text-green-200 text-center flex items-center justify-center gap-2">
        <svg class="w-8 h-8 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.944 12c0 2.879 1.136 5.513 2.944 7.465S9.123 21.052 12 21.052c2.879 0 5.513-1.136 7.465-2.944S21.052 14.879 21.052 12A12.01 12.01 0 0018.06 7.004z"></path></svg>
        Security Check
      </h2>
      <p class="text-lg text-green-800 dark:text-green-300 text-center">
        Please verify you are not a robot.
      </p>

      <!-- Example: Image CAPTCHA -->
      <div class="bg-white/40 dark:bg-gray-700/40 border border-t-white border-l-white dark:border-t-gray-600 dark:border-l-gray-600 border-b-white/50 border-r-white/50 dark:border-b-gray-600/50 dark:border-r-gray-600/50 rounded-lg p-4 shadow-inner space-y-4">
        <p class="text-green-900 dark:text-green-100 text-center font-medium">Select all squares with a <span class="font-bold text-emerald-700 dark:text-emerald-400">forklift</span>:</p>
        <div class="grid grid-cols-3 gap-2">
          <button class="captcha-grid-item group" aria-label="Image 1">
            <img src="https://picsum.photos/id/1084/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 2">
            <img src="https://picsum.photos/id/400/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 3">
            <img src="https://picsum.photos/id/35/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 4">
            <img src="https://picsum.photos/id/29/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 5">
            <img src="https://picsum.photos/id/1060/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 6">
            <img src="https://picsum.photos/id/426/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 7">
            <img src="https://picsum.photos/id/194/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 8">
            <img src="https://picsum.photos/id/145/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 9">
            <img src="https://picsum.photos/id/175/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
        </div>
      </div>

      <div class="flex items-center justify-between gap-4">
        <button class="inline-flex items-center justify-center p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-green-800 dark:text-green-300 hover:text-emerald-700 dark:hover:text-emerald-200 transition-colors border border-white/60 dark:border-gray-600/60 shadow-md" aria-label="Refresh CAPTCHA">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.127.818 4.044 2.146 5.5M16 4v5h.582m-15.356 2A8.001 8.001 0 0120 12c0-2.127-.818-4.044-2.146-5.5"></path></svg>
        </button>
        <button class="flex-1 py-3 px-6 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white/20 dark:focus:ring-offset-gray-800/20">
          Verify
        </button>
      </div>

      <p class="text-sm text-center text-green-700 dark:text-green-400 opacity-80">
        Protected by Industrial CAPTCHA™
      </p>
    </div>
  </div>
</div>

<style>
  /* Animation for the background blob */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.05); opacity: 0.3; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
  }

  /* CAPTCHA grid item styles */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* For square aspect ratio */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
  }

  .captcha-grid-item:hover {
    border-color: rgba(5, 150, 105, 0.6); /* emerald-600 with transparency */
    transform: scale(1.02);
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 150, 105, 0.4); /* emerald-600 with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(5, 150, 105, 0.7); /* More opaque when selected */
  }

  .captcha-grid-item.selected {
    border-color: #059669; /* Solid emerald-600 when selected */
  }

  /* Dark mode adjustments for border colors */
  .dark .captcha-grid-item {
    background-color: rgba(55, 65, 81, 0.6); /* gray-700/60 */
  }

  .dark .captcha-grid-item:hover {
    border-color: rgba(16, 185, 129, 0.6); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected {
    border-color: #10B981; /* Solid emerald-500 dark mode */
  }
  .dark .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.4); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.7); /* More opaque when selected */
  }
</style>