/* Project: Jhilan Al Farisi Portfolio (Revised)
  Function: Animations, Sidebar Transitions, & WA Pulse
  Tech: CSS3 Keyframes
*/

:root {
    --neon-cyan: #00f3ff;
    --neon-magenta: #ff00ff;
}

/* --- Glitch Effect (SEO Friendly) --- */
.glitch {
    position: relative;
    color: white;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-magenta);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-cyan);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    20% { clip: rect(62px, 9999px, 42px, 0); }
    40% { clip: rect(16px, 9999px, 78px, 0); }
    60% { clip: rect(87px, 9999px, 12px, 0); }
    80% { clip: rect(53px, 9999px, 61px, 0); }
    100% { clip: rect(24px, 9999px, 98px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(67px, 9999px, 34px, 0); }
    20% { clip: rect(12px, 9999px, 89px, 0); }
    40% { clip: rect(54px, 9999px, 21px, 0); }
    60% { clip: rect(92px, 9999px, 5px, 0); }
    80% { clip: rect(33px, 9999px, 76px, 0); }
    100% { clip: rect(11px, 9999px, 44px, 0); }
}

/* --- Mobile Sidebar Navigation --- */
#sidebar.show {
    transform: translateX(0);
}

/* --- Project Cards Hover --- */
.project-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-8px);
    box-shadow: 0 10px 30px -10px rgba(0, 243, 255, 0.2);
}

/* --- Filter Buttons Active State --- */
.filter-btn.active {
    position: relative;
}

.filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* --- WhatsApp Pulse Animation --- */
.wa-pulse {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --- Utilities --- */
input:focus, textarea:focus {
    border-bottom-color: var(--neon-cyan) !important;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}