/* Glowy Card Effect Styles */
.glowy-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    transform-style: preserve-3d;
    will-change: transform;
    transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
}

/* Optional: Add these classes for different color schemes */
.glowy-card.glowy-blue {
    --glow-color-1: #00d4ff;
    --glow-color-2: #0099cc;
}

.glowy-card.glowy-purple {
    --glow-color-1: #c77dff;
    --glow-color-2: #7209b7;
}

.glowy-card.glowy-green {
    --glow-color-1: #47B379;
    --glow-color-2: #63faa9;
}

.glowy-card.glowy-pink {
    --glow-color-1: #ff006e;
    --glow-color-2: #ff4c9f;
}

.glowy-card.glowy-orange {
    --glow-color-1: #ff9a00;
    --glow-color-2: #ff6d00;
}

.glowy-card.glowy-cream {
    --glow-color-1: #ffeaa7;
    --glow-color-2: #fdcb6e;
}

/* Default color scheme */
.glowy-card {
    --glow-color-1: #00d4ff;
    --glow-color-2: #7209b7;
}

/* The glowing gradient that follows the mouse */
.glowy-card::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle,
            var(--glow-color-1) 0%,
            var(--glow-color-2) 40%,
            transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
}

/* Show glow on hover */
.glowy-card:hover::before {
    opacity: 0.7;
}

/* Border glow effect */
.glowy-card::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg,
            var(--glow-color-1),
            var(--glow-color-2),
            var(--glow-color-1));
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(20px);
}

.glowy-card:hover::after {
    opacity: 0.6;
}

/* Ensure images and content fill the container properly */
.glowy-card>img,
.glowy-card>picture>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* If you want the glow on top of images, use this wrapper class */
.glowy-card.glow-overlay>* {
    position: relative;
    z-index: 0;
}

.glowy-card.glow-overlay::before {
    z-index: 2;
}

/* 3D tilt effect on hover - adds translateZ for depth */
.glowy-card:hover {
    transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)) translateZ(10px);
    box-shadow:
        0 10px 40px rgba(0, 212, 255, 0.15),
        0 0 80px rgba(114, 9, 183, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Light theme adjustments */
.glowy-card.light-theme {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.glowy-card.light-theme:hover {
    box-shadow:
        0 10px 40px rgba(0, 212, 255, 0.25),
        0 0 80px rgba(114, 9, 183, 0.15);
}

/* Touch devices - show glowy effects but disable 3D tilt */
@media (hover: none) {
    .glowy-card::before,
    .glowy-card::after {
        display: block !important;
    }

    .glowy-card {
        transform: none;
        z-index: auto;
    }

    .glowy-card:active {
        transform: scale(0.98) !important;
        box-shadow:
            0 8px 30px rgba(0, 212, 255, 0.2),
            0 4px 20px rgba(114, 9, 183, 0.15) !important;
    }

    .glowy-card:active::before {
        opacity: 0.5 !important;
    }

    .glowy-card:active::after {
        opacity: 0.4 !important;
    }
}

/* Small screen adjustments but keep glowy effects */
@media (max-width: 768px) {
    .glowy-card {
        isolation: isolate !important;
        z-index: auto;
    }

    .glowy-card:hover::before {
        opacity: 0.5;
    }

    .glowy-card:hover::after {
        opacity: 0.4;
    }

    .glowy-card:hover {
        transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)) translateZ(5px) !important;
        box-shadow:
            0 8px 30px rgba(0, 212, 255, 0.2),
            0 4px 20px rgba(114, 9, 183, 0.15) !important;
    }
}

/* Helper class for cards with background images */
.glowy-card.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Make sure WordPress block images work properly */
.glowy-card .wp-block-image {
    margin: 0;
    line-height: 0;
}

.glowy-card .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}