/* Base Polygon Styling for Text and Layout */
.polygon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px; /* Increased size for better text fit */
    height: 240px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative;
    padding: 20px; /* Add padding to keep text from edges */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                clip-path 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.polygon .project-title {
    position: relative;
    z-index: 2; /* Ensure text is above the background */
    font-size: 1.1rem;
    /* REMOVED the conflicting filter property */
}

.polygon:hover {
    z-index: 10; /* Bring hovered polygon to the front */
    transform: scale(1.2); /* Increased scale for a more dramatic effect */
}

/* --- Unique Spiky Polygon Shapes & Hover Effects --- */

/* Polygon 1: Supernova - WIDER */
.polygon1 {
    background-color: #FF4742; /* Fiery Red */
    clip-path: polygon(50% 0%, 61% 15%, 75% 5%, 80% 20%, 95% 25%, 90% 40%, 105% 50%, 90% 60%, 95% 75%, 80% 80%, 75% 95%, 61% 85%, 50% 100%, 39% 85%, 25% 95%, 20% 80%, 5% 75%, 10% 60%, -5% 50%, 10% 40%, 5% 25%, 20% 20%, 25% 5%, 39% 15%);
}
.polygon1:hover {
    clip-path: polygon(50% -10%, 65% 18%, 80% -5%, 85% 22%, 105% 28%, 95% 45%, 115% 50%, 95% 55%, 105% 72%, 85% 78%, 80% 105%, 65% 82%, 50% 110%, 35% 82%, 20% 105%, 15% 78%, -5% 72%, 5% 55%, -15% 50%, 5% 45%, -5% 28%, 15% 22%, 20% -5%, 35% 18%);
}

/* Polygon 2: Thorn Bush - WIDER */
.polygon2 {
    background-color: #24A148; /* Forest Green */
    clip-path: polygon(30% 0%, 50% 15%, 70% 0%, 85% 20%, 80% 30%, 105% 40%, 85% 55%, 95% 75%, 70% 80%, 50% 100%, 30% 80%, 5% 75%, 15% 55%, -5% 40%, 20% 30%, 15% 20%);
}
.polygon2:hover {
    clip-path: polygon(25% -10%, 50% 20%, 75% -10%, 95% 25%, 85% 35%, 115% 45%, 90% 60%, 105% 80%, 75% 90%, 50% 110%, 25% 90%, -5% 80%, 10% 60%, -15% 45%, 15% 35%, 5% 25%);
}

/* Polygon 3: Ice Crystal - WIDER */
.polygon3 {
    background-color: #0F62FE; /* Electric Blue */
    clip-path: polygon(50% 0%, 55% 10%, 70% 5%, 65% 20%, 80% 15%, 80% 35%, 100% 40%, 85% 50%, 95% 65%, 70% 70%, 75% 90%, 50% 80%, 25% 90%, 30% 70%, 5% 65%, 15% 50%, 0% 40%, 20% 35%, 20% 15%, 35% 20%, 30% 5%);
}
.polygon3:hover {
    clip-path: polygon(50% -15%, 55% 15%, 75% -8%, 70% 25%, 90% 10%, 85% 40%, 110% 45%, 90% 50%, 105% 70%, 75% 75%, 85% 100%, 50% 85%, 15% 100%, 25% 75%, -5% 70%, 10% 50%, -10% 45%, 15% 40%, 10% 10%, 30% 25%, 25% -8%);
}

/* Polygon 4: Gold Splinter - WIDER */
.polygon4 {
    background-color: #ff4800; /* Golden Yellow */
    clip-path: polygon(40% 0, 50% 10%, 60% 0, 80% 20%, 75% 30%, 95% 35%, 85% 50%, 105% 60%, 90% 75%, 70% 90%, 50% 85%, 30% 90%, 10% 75%, -5% 60%, 15% 50%, 5% 35%, 25% 30%, 20% 20%);
}
.polygon4:hover {
    clip-path: polygon(35% -10%, 50% 15%, 65% -10%, 90% 25%, 80% 35%, 105% 40%, 90% 50%, 115% 65%, 95% 80%, 75% 100%, 50% 90%, 25% 100%, 5% 80%, -15% 65%, 10% 50%, -5% 40%, 20% 35%, 10% 25%);
}

/* Polygon 5: Amethyst - WIDER */
.polygon5 {
    background-color: #A42CD6; /* Rich Purple */
    clip-path: polygon(50% 0, 65% 5%, 70% 20%, 85% 15%, 90% 30%, 105% 40%, 95% 55%, 105% 70%, 80% 85%, 65% 90%, 50% 100%, 35% 90%, 20% 85%, -5% 70%, 5% 55%, -5% 40%, 10% 30%, 15% 15%, 30% 20%, 35% 5%);
}
.polygon5:hover {
    clip-path: polygon(50% -12%, 70% 8%, 75% 25%, 95% 18%, 100% 35%, 115% 45%, 100% 60%, 115% 70%, 85% 95%, 70% 100%, 50% 112%, 30% 100%, 15% 95%, -15% 70%, 0% 60%, -15% 45%, 10% 35%, 5% 18%, 25% 25%, 30% 8%);
}

/* Polygon 6: Sea Anemone - WIDER */
.polygon6 {
    background-color: #00B8D4; /* Bright Cyan */
    clip-path: polygon(50% 0, 52% 12%, 65% 10%, 60% 25%, 75% 28%, 75% 40%, 90% 50%, 75% 60%, 75% 72%, 60% 75%, 65% 90%, 52% 88%, 50% 100%, 48% 88%, 35% 90%, 40% 75%, 25% 72%, 25% 60%, 10% 50%, 25% 40%, 25% 28%, 40% 25%, 35% 10%, 48% 12%);
}
.polygon6:hover {
    clip-path: polygon(50% -10%, 52% 15%, 70% 5%, 60% 28%, 80% 32%, 80% 45%, 100% 50%, 80% 55%, 80% 78%, 60% 78%, 70% 95%, 52% 90%, 50% 110%, 48% 90%, 30% 95%, 40% 78%, 20% 78%, 20% 55%, 0% 50%, 20% 45%, 20% 32%, 40% 28%, 30% 5%, 48% 15%);
}

/* Polygon 7: Sunstone - WIDER */
.polygon7 {
    background-color: #FF8C00; /* Vibrant Orange */
    clip-path: polygon(50% 0, 60% 8%, 75% 5%, 80% 15%, 95% 20%, 92% 35%, 105% 50%, 92% 65%, 95% 80%, 80% 85%, 75% 95%, 60% 92%, 50% 100%, 40% 92%, 25% 95%, 20% 85%, 5% 80%, 8% 65%, -5% 50%, 8% 35%, 5% 20%, 20% 15%, 25% 5%, 40% 8%);
}
.polygon7:hover {
    clip-path: polygon(50% -10%, 65% 12%, 80% 0%, 85% 18%, 105% 25%, 97% 40%, 115% 50%, 97% 60%, 105% 75%, 85% 82%, 80% 100%, 65% 98%, 50% 110%, 35% 98%, 20% 100%, 15% 82%, -5% 75%, 3% 60%, -15% 50%, 3% 40%, -5% 25%, 15% 18%, 20% 0%, 35% 12%);
}

/* Polygon 8: Bloodstone - WIDER */
.polygon8 {
    background-color: #B71C1C; /* Dark Crimson */
    clip-path: polygon(25% 0, 50% 20%, 75% 0, 90% 15%, 85% 30%, 105% 45%, 85% 60%, 95% 80%, 75% 90%, 50% 75%, 25% 90%, 5% 80%, 15% 60%, -5% 45%, 15% 30%, 10% 15%);
}
.polygon8:hover {
    clip-path: polygon(20% -10%, 50% 25%, 80% -10%, 100% 20%, 90% 35%, 115% 50%, 90% 65%, 105% 85%, 80% 100%, 50% 80%, 20% 100%, -5% 85%, 10% 65%, -15% 50%, 10% 35%, 0% 20%);
}

/* Polygon 9: Obsidian Shard - WIDER */
.polygon9 {
    background-color: #495057; /* Slate Gray */
    clip-path: polygon(30% 0, 50% 10%, 70% 0, 85% 10%, 85% 25%, 100% 30%, 90% 45%, 105% 55%, 85% 70%, 75% 90%, 50% 80%, 25% 90%, 15% 70%, -5% 55%, 10% 45%, 0% 30%, 15% 25%, 15% 10%);
}
.polygon9:hover {
    clip-path: polygon(28% -10%, 50% 15%, 72% -10%, 90% 15%, 90% 30%, 110% 35%, 95% 50%, 115% 60%, 90% 75%, 80% 100%, 50% 85%, 20% 100%, 10% 75%, -15% 60%, 5% 50%, -10% 35%, 10% 30%, 10% 15%);
}

@media (max-width: 768px) {
    .polygon {
        height: 120px;
        width: 120px;
    }

    .polygon .project-title {
        font-size: 0.8rem;
    }
}