/* ==========================================
   Gamified Interactions & Click Effects
   ========================================== */

/* Click Pulse Animation */
@keyframes clickPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(139, 92, 246, 0);
    }

    50% {
        transform: scale(1.05);
        /* Subtle pop */
        color: var(--accent-cyan);
        text-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(139, 92, 246, 0);
    }
}

/* Card Click Animation (Bigger Pop) */
@keyframes cardClick {
    0% {
        transform: scale(1.02) perspective(1000px);
    }

    40% {
        transform: scale(0.98) perspective(1000px);
    }

    /* Anticipation */
    100% {
        transform: scale(1) perspective(1000px);
    }
}

/* Application Classes */
.interactive-click {
    animation: clickPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
    /* Required for transform */
    transform-origin: center;
}

/* Special case for cards to avoid conflict with tilt */
.portfolio-item.interactive-click,
.spec-image.interactive-click {
    animation: cardClick 0.4s ease-out;
}

/* Ripple for non-buttons */
.text-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    width: 20px;
    height: 20px;
    transform: scale(0);
    pointer-events: none;
    z-index: 9999;
}

@keyframes rippleExpand {
    to {
        transform: scale(8);
        opacity: 0;
    }
}

/* ==========================================
   Universal Text Interaction (Hover)
   ========================================== */

/* 1. Paragraphs & Lists - Subtle Brightening & Shift */
p,
li,
span.tag-item {
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

p:hover,
li:hover,
span.tag-item:hover {
    color: var(--text-main);
    /* Brighten to white */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    /* transform: translateX(2px);  Removed shift to avoid reflow jank, sticking to color/glow */
}

/* Ensure links always show pointer cursor */
p:hover:not(:has(a)),
li:hover:not(:has(a)),
span.tag-item:hover:not(a) {
    cursor: default;
    /* Show user it's interactive but not a link */
}

/* 2. Headings - Neon Glow */
h1,
h2,
h3,
h4,
h5,
h6 {
    transition: text-shadow 0.3s ease, letter-spacing 0.3s ease;
}

h1:hover,
h2:hover,
h3:hover,
h4:hover {
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.3), 0 0 30px rgba(139, 92, 246, 0.2);
    cursor: default;
}

/* 3. Small Text / Labels - Highlight */
.section-label,
.hero-subtitle,
.footer-bio {
    transition: color 0.3s ease;
}

.section-label:hover,
.hero-subtitle:hover {
    color: var(--accent-cyan);
}

/* 4. Links are already handled but lets boost them */
a:not(.btn):hover {
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* Glitch Effect Class */
.glitch-active {
    font-family: 'Courier New', Courier, monospace;
    /* Monospace for hacker feel */
    color: var(--accent-cyan) !important;
    text-shadow: 2px 0 var(--accent-pink), -2px 0 var(--accent-blue);
}