Features Hover Reveal

<section class="ws-features ws-hover-reveal bg-[var(--ws-features-bg)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <h2 class="mb-12 text-center text-3xl font-bold text-[var(--ws-features-text)]">What We Do</h2>

    <div class="divide-y divide-[var(--ws-features-border)] border-y border-[var(--ws-features-border)]">
      <!-- Row 1 -->
      <div class="group relative flex items-center justify-between px-5 py-6 transition-colors hover:bg-[var(--ws-features-card-bg)]">
        <div class="flex items-center gap-4">
          <span class="text-sm font-mono text-[var(--ws-features-text-muted)]">01</span>
          <h3 class="text-xl font-semibold text-[var(--ws-features-text)] transition-colors group-hover:text-blue-600">Brand Strategy</h3>
        </div>
        <div class="flex items-center gap-6">
          <p class="max-w-xs text-sm text-[var(--ws-features-text-soft)] opacity-0 transition-opacity group-hover:opacity-100">Crafting distinctive brand identities that resonate with your audience and drive growth.</p>
          <div class="h-16 w-24 overflow-hidden rounded-lg">
            <div class="h-full w-full bg-gradient-to-br from-blue-200 to-indigo-300 opacity-0 transition-all duration-500 [clip-path:inset(0_50%_0_50%)] group-hover:opacity-100 group-hover:[clip-path:inset(0_0_0_0)] dark:from-blue-800 dark:to-indigo-700"></div>
          </div>
          <svg class="h-5 w-5 -translate-x-2 text-[var(--ws-features-border)] opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </div>

      <!-- Row 2 -->
      <div class="group relative flex items-center justify-between px-5 py-6 transition-colors hover:bg-[var(--ws-features-card-bg)]">
        <div class="flex items-center gap-4">
          <span class="text-sm font-mono text-[var(--ws-features-text-muted)]">02</span>
          <h3 class="text-xl font-semibold text-[var(--ws-features-text)] transition-colors group-hover:text-emerald-600">Digital Design</h3>
        </div>
        <div class="flex items-center gap-6">
          <p class="max-w-xs text-sm text-[var(--ws-features-text-soft)] opacity-0 transition-opacity group-hover:opacity-100">Pixel-perfect interfaces that combine aesthetics with usability for every screen size.</p>
          <div class="h-16 w-24 overflow-hidden rounded-lg">
            <div class="h-full w-full bg-gradient-to-br from-emerald-200 to-teal-300 opacity-0 transition-all duration-500 [clip-path:inset(0_50%_0_50%)] group-hover:opacity-100 group-hover:[clip-path:inset(0_0_0_0)] dark:from-emerald-800 dark:to-teal-700"></div>
          </div>
          <svg class="h-5 w-5 -translate-x-2 text-[var(--ws-features-border)] opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </div>

      <!-- Row 3 -->
      <div class="group relative flex items-center justify-between px-5 py-6 transition-colors hover:bg-[var(--ws-features-card-bg)]">
        <div class="flex items-center gap-4">
          <span class="text-sm font-mono text-[var(--ws-features-text-muted)]">03</span>
          <h3 class="text-xl font-semibold text-[var(--ws-features-text)] transition-colors group-hover:text-amber-600">Development</h3>
        </div>
        <div class="flex items-center gap-6">
          <p class="max-w-xs text-sm text-[var(--ws-features-text-soft)] opacity-0 transition-opacity group-hover:opacity-100">Scalable, performant code that brings designs to life with modern web technologies.</p>
          <div class="h-16 w-24 overflow-hidden rounded-lg">
            <div class="h-full w-full bg-gradient-to-br from-amber-200 to-orange-300 opacity-0 transition-all duration-500 [clip-path:inset(0_50%_0_50%)] group-hover:opacity-100 group-hover:[clip-path:inset(0_0_0_0)] dark:from-amber-800 dark:to-orange-700"></div>
          </div>
          <svg class="h-5 w-5 -translate-x-2 text-[var(--ws-features-border)] opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </div>

      <!-- Row 4 -->
      <div class="group relative flex items-center justify-between px-5 py-6 transition-colors hover:bg-[var(--ws-features-card-bg)]">
        <div class="flex items-center gap-4">
          <span class="text-sm font-mono text-[var(--ws-features-text-muted)]">04</span>
          <h3 class="text-xl font-semibold text-[var(--ws-features-text)] transition-colors group-hover:text-purple-600">Analytics</h3>
        </div>
        <div class="flex items-center gap-6">
          <p class="max-w-xs text-sm text-[var(--ws-features-text-soft)] opacity-0 transition-opacity group-hover:opacity-100">Data-driven insights that inform decisions and optimize performance across channels.</p>
          <div class="h-16 w-24 overflow-hidden rounded-lg">
            <div class="h-full w-full bg-gradient-to-br from-purple-200 to-fuchsia-300 opacity-0 transition-all duration-500 [clip-path:inset(0_50%_0_50%)] group-hover:opacity-100 group-hover:[clip-path:inset(0_0_0_0)] dark:from-purple-800 dark:to-fuchsia-700"></div>
          </div>
          <svg class="h-5 w-5 -translate-x-2 text-[var(--ws-features-border)] opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </div>
      </div>
    </div>
  </div>
</section>