/* =====================================================
   Buzz Clips — Reusable Shape Utility Classes
   =====================================================
   Add these classes to any element that has
   overflow:hidden (or add overflow:hidden yourself).
   Works on divs, imgs, sections, cards, etc.

   Concave (inward curve) shapes — responsive %:
     .clip-concave-3     Top + bottom curve inward 3%
     .clip-concave-5     Top + bottom curve inward 5%
     .clip-concave-7     Top + bottom curve inward 7%

   Border-radius shapes:
     .clip-arch          Dome top, flat bottom
     .clip-arch-soft     Dome top, slightly rounded bottom
     .clip-arch-bottom   Flat top, dome bottom
     .clip-pill          Full pill (left + right arches)
     .clip-circle        Perfect circle
     .clip-rounded-*     Standard rounded corners (sm → 3xl)

   Clip-path shapes (no overflow:hidden needed):
     .clip-diamond       Diamond / rhombus
     .clip-hexagon       Regular hexagon
     .clip-triangle-up   Upward triangle
     .clip-chevron-r     Chevron pointing right
     .clip-slant-r       Parallelogram slanting right
     .clip-slant-l       Parallelogram slanting left

   Usage:
     <div class="clip-arch overflow-hidden">
       <img src="..." class="w-100 h-100 object-fit-cover">
     </div>
   ===================================================== */

/* ── Concave top + bottom (sides stay straight) ───────
   Points approximate a sine curve so the edge looks
   smooth. Fully percentage-based → responsive.

   Math: at each x step θ∈{0°,30°,60°,90°,120°,150°,180°}
         y_offset = depth × sin(θ)
         sin values ≈ 0, 0.50, 0.87, 1.00, 0.87, 0.50, 0
   ─────────────────────────────────────────────────── */

/* 3% inward curve */
.clip-concave-3 {
  clip-path: polygon(
    0%     0%,
    16.7%  1.5%,  33.3%  2.6%,  50%    3%,    66.7%  2.6%,  83.3%  1.5%,
    100%   0%,
    100%   100%,
    83.3%  98.5%, 66.7%  97.4%, 50%    97%,   33.3%  97.4%, 16.7%  98.5%,
    0%     100%
  );
}

/* 5% inward curve */
.clip-concave-5 {
  clip-path: polygon(
    0%     0%,
    16.7%  2.5%,  33.3%  4.3%,  50%    5%,    66.7%  4.3%,  83.3%  2.5%,
    100%   0%,
    100%   100%,
    83.3%  97.5%, 66.7%  95.7%, 50%    95%,   33.3%  95.7%, 16.7%  97.5%,
    0%     100%
  );
}

/* 7% inward curve */
.clip-concave-7 {
  clip-path: polygon(
    0%     0%,
    16.7%  3.5%,  33.3%  6.1%,  50%    7%,    66.7%  6.1%,  83.3%  3.5%,
    100%   0%,
    100%   100%,
    83.3%  96.5%, 66.7%  93.9%, 50%    93%,   33.3%  93.9%, 16.7%  96.5%,
    0%     100%
  );
}

/* ── Arch / Tombstone ──────────────────────────────── */

/* Perfect dome top, flat straight bottom */
.clip-arch {
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  overflow: hidden;
}

/* Dome top, softly rounded bottom corners */
.clip-arch-soft {
  border-radius: 50% 50% 1.25rem 1.25rem / 30% 30% 1.25rem 1.25rem;
  overflow: hidden;
}

/* Flat top, dome curving up from the bottom */
.clip-arch-bottom {
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
  overflow: hidden;
}

/* ── Pill & Circle ─────────────────────────────────── */

.clip-pill {
  border-radius: 9999px;
  overflow: hidden;
}

.clip-circle {
  border-radius: 50%;
  overflow: hidden;
}

/* ── Standard Rounded Corners ──────────────────────── */

.clip-rounded-sm  { border-radius: 0.375rem; overflow: hidden; }
.clip-rounded     { border-radius: 0.75rem;  overflow: hidden; }
.clip-rounded-lg  { border-radius: 1.25rem;  overflow: hidden; }
.clip-rounded-xl  { border-radius: 2rem;     overflow: hidden; }
.clip-rounded-2xl { border-radius: 2.5rem;   overflow: hidden; }
.clip-rounded-3xl { border-radius: 3.5rem;   overflow: hidden; }

/* ── Clip-path Shapes ──────────────────────────────── */

/* Diamond / rhombus */
.clip-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Regular hexagon */
.clip-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Upward-pointing triangle */
.clip-triangle-up {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Chevron pointing right */
.clip-chevron-r {
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%);
}

/* Parallelogram slanting right */
.clip-slant-r {
  clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
}

/* Parallelogram slanting left */
.clip-slant-l {
  clip-path: polygon(0% 0%, 88% 0%, 100% 100%, 12% 100%);
}