/**
 * Shape System — Clip-Path Presets
 *
 * Section shapes (section-shape-*) and image shapes (clip-*).
 * All clip-path values use percentages for responsive scaling.
 */

/* ==========================================================================
   Section Shapes — clip-path on <section> elements
   ========================================================================== */

.section-shape-diagonal-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.section-shape-diagonal-top {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.section-shape-diagonal-both {
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

.section-shape-arrow-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.section-shape-arrow-top {
    clip-path: polygon(50% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
}

.section-shape-curve-bottom {
    clip-path: ellipse(75% 100% at 50% 0%);
}

.section-shape-rounded-bottom {
    clip-path: inset(0 0 0 0 round 0 0 3rem 3rem);
}

.section-shape-rounded-top {
    clip-path: inset(0 0 0 0 round 3rem 3rem 0 0);
}

.section-shape-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Mobile: flatten aggressive diagonals */
@media (max-width: 767px) {
    .section-shape-diagonal-bottom {
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    .section-shape-diagonal-top {
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }

    .section-shape-diagonal-both {
        clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    }

    .section-shape-arrow-bottom {
        clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
    }

    .section-shape-arrow-top {
        clip-path: polygon(50% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
    }

    .section-shape-curve-bottom {
        clip-path: ellipse(90% 100% at 50% 0%);
    }
}

/* ==========================================================================
   Image Shapes — clip-path on image wrappers
   ========================================================================== */

.clip-circle {
    clip-path: circle(50%);
}

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

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

.clip-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.clip-shield {
    clip-path: polygon(50% 0%, 100% 10%, 100% 60%, 50% 100%, 0% 60%, 0% 10%);
}

.clip-arch {
    clip-path: inset(0 0 0 0 round 50% 50% 0 0);
}

.clip-parallelogram {
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.clip-rounded-square {
    clip-path: inset(0 round 20%);
}

/* Blob shapes — organic path-based clips */
.clip-rounded-blob {
    clip-path: polygon(40.0% 10.0%, 47.3% 8.1%, 55.6% 8.8%, 64.3% 11.9%, 72.8% 16.9%, 80.7% 23.5%, 87.4% 31.5%, 92.4% 40.4%, 95.1% 50.1%, 95.0% 60.0%, 92.1% 69.3%, 87.1% 77.0%, 80.4% 83.3%, 72.4% 88.1%, 63.7% 91.5%, 54.6% 93.3%, 45.7% 93.7%, 37.3% 92.6%, 30.0% 90.0%, 23.7% 86.0%, 18.3% 80.6%, 13.7% 74.1%, 10.1% 66.6%, 7.6% 58.2%, 6.3% 49.3%, 6.2% 39.8%, 7.4% 30.0%, 10.0% 20.0%, 13.7% 15.7%, 17.8% 12.7%, 22.2% 10.7%, 26.6% 9.7%, 30.8% 9.2%, 34.4% 9.3%, 37.4% 9.5%, 39.3% 9.8%, 40.0% 10.0%);
}

.clip-blob-1 {
    clip-path: polygon(42.0% 2.0%, 50.4% 1.2%, 58.8% 1.9%, 67.0% 4.1%, 74.7% 7.7%, 81.6% 12.6%, 87.7% 18.5%, 92.6% 25.5%, 96.1% 33.4%, 98.0% 42.0%, 98.4% 50.9%, 97.7% 59.6%, 95.8% 67.9%, 92.8% 75.6%, 88.7% 82.5%, 83.6% 88.4%, 77.4% 93.3%, 70.2% 96.9%, 62.0% 99.0%, 53.3% 99.6%, 44.6% 98.9%, 36.3% 96.9%, 28.3% 93.6%, 21.1% 89.1%, 14.7% 83.4%, 9.5% 76.7%, 5.5% 68.8%, 3.0% 60.0%, 2.2% 51.1%, 3.0% 42.4%, 5.3% 34.1%, 9.0% 26.3%, 13.8% 19.4%, 19.7% 13.3%, 26.4% 8.2%, 33.9% 4.4%, 42.0% 2.0%);
}

.clip-blob-2 {
    clip-path: polygon(50.0% 3.0%, 59.0% 3.7%, 67.2% 5.7%, 74.6% 9.0%, 81.1% 13.4%, 86.6% 18.9%, 91.0% 25.4%, 94.3% 32.8%, 96.3% 41.0%, 97.0% 50.0%, 96.5% 57.4%, 95.2% 64.8%, 92.8% 72.0%, 89.4% 78.7%, 84.9% 84.6%, 79.2% 89.7%, 72.4% 93.6%, 64.3% 96.1%, 55.0% 97.0%, 46.6% 96.4%, 38.4% 94.8%, 30.4% 92.1%, 23.0% 88.4%, 16.5% 83.6%, 10.9% 77.9%, 6.7% 71.2%, 4.0% 63.6%, 3.0% 55.0%, 3.7% 46.1%, 5.7% 37.5%, 9.0% 29.5%, 13.4% 22.2%, 18.9% 15.8%, 25.4% 10.5%, 32.8% 6.5%, 41.0% 3.9%, 50.0% 3.0%);
}

.clip-blob-3 {
    clip-path: polygon(45.0% 5.0%, 53.3% 4.2%, 61.4% 5.2%, 69.0% 7.7%, 76.0% 11.7%, 82.0% 16.9%, 87.0% 23.3%, 90.6% 30.7%, 92.7% 39.0%, 93.0% 48.0%, 91.8% 57.0%, 89.6% 65.2%, 86.5% 72.7%, 82.5% 79.3%, 77.6% 85.0%, 71.8% 89.6%, 65.3% 93.2%, 58.0% 95.7%, 50.0% 97.0%, 41.9% 96.8%, 34.3% 95.1%, 27.3% 91.9%, 21.1% 87.4%, 15.9% 81.8%, 11.7% 75.1%, 8.7% 67.5%, 7.1% 59.1%, 7.0% 50.0%, 8.0% 41.2%, 9.7% 33.6%, 12.2% 27.0%, 15.4% 21.4%, 19.5% 16.6%, 24.5% 12.7%, 30.4% 9.5%, 37.2% 6.9%, 45.0% 5.0%);
}

/* ==========================================================================
   Clip Shadow Helpers — drop-shadow for clipped elements
   ========================================================================== */

.clip-shadow-sm {
    filter: drop-shadow(0 1px 2px color-mix(in oklch, var(--color-neutral) 10%, transparent));
}

.clip-shadow-md {
    filter: drop-shadow(0 4px 6px color-mix(in oklch, var(--color-neutral) 10%, transparent));
}

.clip-shadow-lg {
    filter: drop-shadow(0 10px 15px color-mix(in oklch, var(--color-neutral) 10%, transparent));
}

[data-theme*="-dark"] .clip-shadow-sm,
[data-theme*="-dark"].clip-shadow-sm {
    filter: drop-shadow(0 1px 2px color-mix(in oklch, var(--color-neutral) 30%, transparent));
}

[data-theme*="-dark"] .clip-shadow-md,
[data-theme*="-dark"].clip-shadow-md {
    filter: drop-shadow(0 4px 6px color-mix(in oklch, var(--color-neutral) 30%, transparent));
}

[data-theme*="-dark"] .clip-shadow-lg,
[data-theme*="-dark"].clip-shadow-lg {
    filter: drop-shadow(0 10px 15px color-mix(in oklch, var(--color-neutral) 30%, transparent));
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

@media print {
    [class*="section-shape-"],
    [class*="clip-"] {
        clip-path: none !important;
    }
}