/**
 * SP Post Grid - Corner Animations
 * 
 * This file contains styles for the fancy corner animations
 * that appear when hovering over post items.
 */

/* Container for the corner animations within post thumbnails */
.sp-post-grid-corner-container {
    position: absolute;
    height: 300px;
    pointer-events: none;
    z-index: 2;
}

/* Make the thumbnail position relative to hold the corners */
.sp-post-grid-thumbnail {
    position: relative;
}

/* Base styles for all corners */
.sp-corner {
    position: absolute;
    z-index: 10;
}

/* Initially hidden corners */
.sp-corner-top-left,
.sp-corner-bottom-right {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Top left curve - default hidden */
.sp-corner-top-left {
    top: -1px;
    left: -1px;
    color: black;
}

/* Bottom right curve - default hidden */
.sp-corner-bottom-right {
    bottom: -1px;
    right: -1px;
    color: black;
}

/* Hover animations for the post item */
.sp-post-grid-item:hover .sp-corner-top-right {
    animation: move-top-right 0.5s forwards;
}

.sp-post-grid-item:hover .sp-corner-bottom-left {
    animation: move-bottom-left 0.5s forwards;
}

/* Fade in the other corners on hover */
.sp-post-grid-item:hover .sp-corner-top-left,
.sp-post-grid-item:hover .sp-corner-bottom-right {
    opacity: 1;
}

@keyframes move-top-right {
    0% {
        width: 15px;
        height: 15px;
        top: 7.5%;
        right: 5.4%;
        fill: rgb(255, 255, 255, 0.8);
    }

    100% {
        width: 45px;
        height: 45px;
        top: -4%;
        right: -2.5%;
        fill: #E6F301;
    }
}

@keyframes move-top-right-reverse {
    0% {
        width: 45px;
        height: 45px;
        top: -4%;
        right: -2.5%;
        fill: #E6F301;
    }

    100% {
        width: 15px;
        height: 15px;
        top: 7.5%;
        right: 5.4%;
        fill: rgb(255, 255, 255, 0.8);
    }
}

@keyframes move-bottom-left {
    0% {
        width: 15px;
        height: 15px;
        bottom: 91%;
        left: 93%;
        fill: rgb(255, 255, 255, 0.8);
    }

    70% {
        bottom: -6%;
        left: -6%;
    }

    100% {
        width: 45px;
        height: 45px;
        bottom: -4%;
        left: -2.5%;
        fill: #E6F301;
    }
}

@keyframes move-bottom-left-reverse {
    0% {
        top: auto;
        right: auto;
        width: 45px;
        height: 45px;
        bottom: -4%;
        left: -2.5%;
        fill: #E6F301;
    }

    70% {
        bottom: 92.5%;
        left: 94.5%;
    }

    100% {
        width: 15px;
        height: 15px;
        bottom: 91%;
        left: 93%;
        fill: rgb(255, 255, 255, 0.8);
    }
}

.sp-post-grid-item:not(:hover) .sp-corner-top-right {
    animation: move-top-right-reverse 0.5s forwards;
}

.sp-post-grid-item:not(:hover) .sp-corner-bottom-left {
    animation: move-bottom-left-reverse 0.5s forwards;
}

@media (max-width: 768px) {
    .sp-corner-top-left,
    .sp-corner-bottom-right {
        opacity: 1;
    }

    .sp-corner-top-right {
        top: -4%;
        right: -2.5%;
        width: 45px;
        height: 45px;
        fill: #E6F301;
        animation: none;
    }

    /* Bottom left angle - default state */
    .sp-corner-bottom-left {
        width: 45px;
        height: 45px;
        bottom: -4%;
        left: -2.5%;
        fill: #E6F301;
        animation: none;
    }

    .elementor-post__card:not(:hover) .sp-corner-top-right {
        animation: none;
    }

    .elementor-post__card:not(:hover) .sp-corner-bottom-left {
        animation: none;
    }
}