/* --- MODERN VARIABLES & RESET --- */
:root {
    --bg-dark: #09090b;
    --bg-card: rgba(24, 24, 27, 0.6);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.08);
    --primary: #8b5cf6;
    --primary-glow: rgba(139, 92, 246, 0.5);
    --accent: #06b6d4;
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --font-main: 'Outfit', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.15), transparent 25%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-main);
    min-height: 100vh;
    padding-bottom: 40px;
    overflow-x: hidden;
}

/* Scrollbar Modern */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* --- HEADER --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 40px;
    position: relative;
}

.brand {
    display: flex;
    flex-direction: column;
}

h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.developer-badge {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.developer-badge span {
    color: var(--accent);
    font-weight: 700;
    background: rgba(6, 182, 212, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* --- MAIN LAYOUT GRID --- */
.app-grid {
    display: grid;
    grid-template-columns: 320px 1fr 380px; /* Desktop Layout */
    gap: 24px;
    align-items: start;
}

/* GLASS CARD UTILITY */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- LEFT: EDITOR CONTROLS --- */
.control-group { margin-bottom: 24px; }

.control-label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Modern Input */
.input-wrapper { position: relative; }

#textInput {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-glass);
    color: white;
    padding: 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: 0.3s;
}

#textInput:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.char-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Modern Color Picker */
.color-pickers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.color-wrapper {
    position: relative;
    height: 45px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-glass);
    cursor: pointer;
}

input[type="color"] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}

.color-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.6rem;
    text-align: center;
    padding: 4px;
    pointer-events: none;
}

/* Modern Sliders */
.slider-wrapper {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: var(--radius-md);
}

.slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

input[type="range"] {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    cursor: pointer;
    transition: transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* --- CENTER: PREVIEW AREA --- */
.preview-wrapper {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-canvas {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a2e;
    background-image: 
        linear-gradient(45deg, #151525 25%, transparent 25%), 
        linear-gradient(-45deg, #151525 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #151525 75%), 
        linear-gradient(-45deg, transparent 75%, #151525 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: var(--radius-lg);
    border: 2px dashed rgba(255,255,255,0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

#textPreview {
    font-size: 4rem;
    font-weight: 800;
    text-align: center;
    padding: 40px;
    word-break: break-word;
    line-height: 1.2;
    z-index: 2;
}

.action-bar {
    display: flex;
    gap: 12px;
}

.btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-family: var(--font-main);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
}

.btn-glass {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: white;
}

.btn-glass:hover {
    background: rgba(255,255,255,0.1);
}

/* --- RIGHT: EFFECTS LIBRARY --- */
.effects-panel {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.category-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 10px;
    /* Hide scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.category-scroll::-webkit-scrollbar { display: none; }

.tab-btn {
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.3s;
}

.tab-btn.active {
    background: var(--text-main);
    color: var(--bg-dark);
    font-weight: 600;
}

.effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding-right: 5px;
    flex: 1;
}

.effect-card {
    background: rgba(30, 30, 40, 0.4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.effect-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(5px);
}

.effect-card.active {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
}

.effect-info {
    display: flex;
    flex-direction: column;
}

.effect-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.effect-category { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

.effect-colors { display: flex; gap: 4px; }
.color-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- NOTIFICATION --- */
.notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(16, 185, 129, 0.9);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    font-weight: 500;
}

.notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .effects-panel { height: 400px; }
    .preview-wrapper { position: static; order: -1; } /* Preview di atas */
    .glass-panel:first-child { order: 2; } /* Controls di tengah */
    .effects-panel { order: 3; } /* Effects di bawah */
    
    h1 { font-size: 2rem; }
}

@media (max-width: 768px) {
    .container { padding: 15px; }
    header { flex-direction: column; gap: 10px; align-items: flex-start; }
    
    .preview-canvas { min-height: 250px; }
    #textPreview { font-size: 2.5rem; padding: 20px; }
    
    .color-pickers { grid-template-columns: repeat(3, 1fr); }
    
    .action-bar { flex-direction: column; }
    
    .effects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Grid 2 kolom di mobile untuk efek */
    }
    
    .effect-card { flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; }
    .effect-colors { margin-top: auto; }
}

/* =================================================================
   EFFECTS STYLES (120+ EFFECTS)
================================================================= */

/* NEON EFFECTS */
.neon-red { color: #fff; text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000; animation: neon-flicker 1.5s infinite alternate; }
.neon-blue { color: #fff; text-shadow: 0 0 5px #0066ff, 0 0 10px #0066ff, 0 0 20px #0066ff, 0 0 40px #0066ff; animation: neon-flicker 2s infinite alternate; }
.neon-green { color: #fff; text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00; animation: neon-pulse 1s infinite; }
.neon-pink { color: #fff; text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff; animation: neon-flicker 1.8s infinite alternate; }
.neon-rainbow { background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #0099ff, #6600ff, #ff00ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 153, 0, 0.7), 0 0 30px rgba(255, 255, 0, 0.7); animation: rainbow-neon 3s linear infinite; }
.neon-cyan { color: #fff; text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff; }
.neon-yellow { color: #fff; text-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 40px #ffff00; }
.neon-orange { color: #fff; text-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900, 0 0 20px #ff9900, 0 0 40px #ff9900; }
.neon-purple { color: #fff; text-shadow: 0 0 5px #9900ff, 0 0 10px #9900ff, 0 0 20px #9900ff, 0 0 40px #9900ff; }
.neon-white { color: #fff; text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffffff; }
.neon-gold { color: #fff; text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 40px #ffd700; }
.neon-silver { color: #fff; text-shadow: 0 0 5px #c0c0c0, 0 0 10px #c0c0c0, 0 0 20px #c0c0c0, 0 0 40px #c0c0c0; }
.neon-aqua { color: #fff; text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 40px #00ffcc; }
.neon-coral { color: #fff; text-shadow: 0 0 5px #ff7f50, 0 0 10px #ff7f50, 0 0 20px #ff7f50, 0 0 40px #ff7f50; }
.neon-lime { color: #fff; text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00; }

@keyframes neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; } 20%, 24%, 55% { text-shadow: none; } }
@keyframes neon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes rainbow-neon { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* 3D EFFECTS */
.effect-3d-blue { color: #4a90e2; text-shadow: 1px 1px 0 #357ae8, 2px 2px 0 #357ae8, 3px 3px 0 #357ae8, 4px 4px 0 #357ae8, 5px 5px 0 #357ae8, 6px 6px 0 #357ae8, 7px 7px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-red { color: #e74c3c; text-shadow: 1px 1px 0 #c0392b, 2px 2px 0 #c0392b, 3px 3px 0 #c0392b, 4px 4px 0 #c0392b, 5px 5px 0 #c0392b, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-green { color: #2ecc71; text-shadow: 1px 1px 0 #27ae60, 2px 2px 0 #27ae60, 3px 3px 0 #27ae60, 4px 4px 0 #27ae60, 5px 5px 0 #27ae60, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-purple { color: #9b59b6; text-shadow: 1px 1px 0 #8e44ad, 2px 2px 0 #8e44ad, 3px 3px 0 #8e44ad, 4px 4px 0 #8e44ad, 5px 5px 0 #8e44ad, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-gold { color: #f1c40f; text-shadow: 1px 1px 0 #f39c12, 2px 2px 0 #f39c12, 3px 3px 0 #f39c12, 4px 4px 0 #f39c12, 5px 5px 0 #f39c12, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-silver { color: #bdc3c7; text-shadow: 1px 1px 0 #95a5a6, 2px 2px 0 #95a5a6, 3px 3px 0 #95a5a6, 4px 4px 0 #95a5a6, 5px 5px 0 #95a5a6, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-pink { color: #e84393; text-shadow: 1px 1px 0 #d63031, 2px 2px 0 #d63031, 3px 3px 0 #d63031, 4px 4px 0 #d63031, 5px 5px 0 #d63031, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-orange { color: #e67e22; text-shadow: 1px 1px 0 #d35400, 2px 2px 0 #d35400, 3px 3px 0 #d35400, 4px 4px 0 #d35400, 5px 5px 0 #d35400, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-teal { color: #1abc9c; text-shadow: 1px 1px 0 #16a085, 2px 2px 0 #16a085, 3px 3px 0 #16a085, 4px 4px 0 #16a085, 5px 5px 0 #16a085, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-navy { color: #34495e; text-shadow: 1px 1px 0 #2c3e50, 2px 2px 0 #2c3e50, 3px 3px 0 #2c3e50, 4px 4px 0 #2c3e50, 5px 5px 0 #2c3e50, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-maroon { color: #c0392b; text-shadow: 1px 1px 0 #922b21, 2px 2px 0 #922b21, 3px 3px 0 #922b21, 4px 4px 0 #922b21, 5px 5px 0 #922b21, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-rainbow { color: #ff0000; text-shadow: 1px 1px 0 #ff9900, 2px 2px 0 #ffff00, 3px 3px 0 #00ff00, 4px 4px 0 #0099ff, 5px 5px 0 #6600ff, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-cyan { color: #00cec9; text-shadow: 1px 1px 0 #00b894, 2px 2px 0 #00b894, 3px 3px 0 #00b894, 4px 4px 0 #00b894, 5px 5px 0 #00b894, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-lavender { color: #a29bfe; text-shadow: 1px 1px 0 #6c5ce7, 2px 2px 0 #6c5ce7, 3px 3px 0 #6c5ce7, 4px 4px 0 #6c5ce7, 5px 5px 0 #6c5ce7, 6px 6px 10px rgba(0, 0, 0, 0.6); }
.effect-3d-emerald { color: #2ecc71; text-shadow: 1px 1px 0 #27ae60, 2px 2px 0 #27ae60, 3px 3px 0 #27ae60, 4px 4px 0 #27ae60, 5px 5px 0 #27ae60, 6px 6px 10px rgba(0, 0, 0, 0.6); }

/* GLITCH EFFECTS */
.glitch-red { position: relative; animation: glitch-skew 1s infinite linear alternate-reverse; color: #ff0000; }
.glitch-red::before, .glitch-red::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-red::before { animation: glitch-anim 5s infinite linear alternate-reverse; color: #00ffff; z-index: -1; }
.glitch-red::after { animation: glitch-anim2 3s infinite linear alternate-reverse; color: #ffff00; z-index: -2; }

.glitch-blue { position: relative; animation: glitch-skew 0.8s infinite linear alternate-reverse; color: #0066ff; }
.glitch-blue::before, .glitch-blue::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-blue::before { animation: glitch-anim 4s infinite linear alternate-reverse; color: #ff00ff; z-index: -1; }
.glitch-blue::after { animation: glitch-anim2 2.5s infinite linear alternate-reverse; color: #00ff00; z-index: -2; }

.glitch-green { position: relative; animation: glitch-skew 1.2s infinite linear alternate-reverse; color: #00ff00; }
.glitch-green::before, .glitch-green::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-green::before { animation: glitch-anim 3s infinite linear alternate-reverse; color: #ff00ff; z-index: -1; }
.glitch-green::after { animation: glitch-anim2 4s infinite linear alternate-reverse; color: #ffff00; z-index: -2; }

.glitch-rainbow { position: relative; animation: glitch-skew 1s infinite linear alternate-reverse; color: #ffffff; }
.glitch-rainbow::before, .glitch-rainbow::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-rainbow::before { animation: glitch-anim 5s infinite linear alternate-reverse; color: #ff0000; z-index: -1; }
.glitch-rainbow::after { animation: glitch-anim2 3s infinite linear alternate-reverse; color: #0000ff; z-index: -2; }

.glitch-purple, .glitch-yellow, .glitch-cyan, .glitch-magenta, .glitch-orange, .glitch-white {
     position: relative; animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch-purple { color: #9900ff; } .glitch-purple::before { content: attr(data-text); position: absolute; animation: glitch-anim 2s infinite; color: #00ffff; z-index: -1; }
.glitch-yellow { color: #ffff00; } .glitch-yellow::before { content: attr(data-text); position: absolute; animation: glitch-anim 2s infinite; color: #ff00ff; z-index: -1; }
.glitch-cyan { color: #00ffff; } .glitch-cyan::before { content: attr(data-text); position: absolute; animation: glitch-anim 2s infinite; color: #ff00ff; z-index: -1; }

@keyframes glitch-anim { 0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 5% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); } 10% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 15% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 20% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 25% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 30% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 35% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 40% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 45% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 50% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 55% { clip-path: polygon(0 0%, 100% 0%, 100% 0%, 0 0%); } 60% { clip-path: polygon(0 19%, 100% 19%, 100% 20%, 0 20%); } 65% { clip-path: polygon(0 89%, 100% 89%, 100% 90%, 0 90%); } 70% { clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%); } 75% { clip-path: polygon(0 95%, 100% 95%, 100% 95%, 0 95%); } 80% { clip-path: polygon(0 76%, 100% 76%, 100% 77%, 0 77%); } 85% { clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%); } 90% { clip-path: polygon(0 84%, 100% 84%, 100% 84%, 0 84%); } 95% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } 100% { clip-path: polygon(0 62%, 100% 62%, 100% 62%, 0 62%); } }
@keyframes glitch-anim2 { 0% { clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); } 10% { clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); } 20% { clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); } 30% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); } 40% { clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%); } 50% { clip-path: polygon(0 65%, 100% 65%, 100% 65%, 0 65%); } 60% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 70% { clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); } 80% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); } 90% { clip-path: polygon(0 55%, 100% 55%, 100% 55%, 0 55%); } 100% { clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); } }
@keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(2deg); } 40% { transform: skew(-1deg); } 60% { transform: skew(1deg); } 80% { transform: skew(-2deg); } 100% { transform: skew(0deg); } }

/* GRADIENT EFFECTS */
.gradient-sunset { background: linear-gradient(45deg, #ff6b6b, #ffa726, #ffee58); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-ocean { background: linear-gradient(45deg, #2193b0, #6dd5ed); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-forest { background: linear-gradient(45deg, #56ab2f, #a8e063); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-lavender { background: linear-gradient(45deg, #8a2387, #e94057, #f27121); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-galaxy { background: linear-gradient(45deg, #0f0c29, #302b63, #24243e); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-sunrise { background: linear-gradient(45deg, #ff7e5f, #feb47b); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-aurora { background: linear-gradient(45deg, #00c9ff, #92fe9d); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-peach { background: linear-gradient(45deg, #ffecd2, #fcb69f); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-plum { background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-mango { background: linear-gradient(45deg, #f093fb, #f5576c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-lime { background: linear-gradient(45deg, #a8ff78, #78ffd6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-berry { background: linear-gradient(45deg, #fad0c4, #ffd1ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-sky { background: linear-gradient(45deg, #a1c4fd, #c2e9fb); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-cotton { background: linear-gradient(45deg, #ff9a9e, #fad0c4); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.gradient-metal { background: linear-gradient(45deg, #d4d4d4, #a8a8a8); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }

/* SHADOW EFFECTS */
.shadow-long { color: #333; text-shadow: 5px 5px 0 #ff6b6b, 10px 10px 0 #ffa726, 15px 15px 0 #ffee58; }
.shadow-multicolor { color: #fff; text-shadow: 2px 2px 0 #ff0000, 4px 4px 0 #ff9900, 6px 6px 0 #ffff00, 8px 8px 0 #00ff00, 10px 10px 0 #0099ff; }
.shadow-soft { color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25); }
.shadow-hard { color: #fff; text-shadow: 6px 6px 0px #000000; }
.shadow-double { color: #fff; text-shadow: 4px 4px 0px #ff0000, 8px 8px 0px #0000ff; }
.shadow-glow { color: #fff; text-shadow: 0 0 10px #00ffff; }
.shadow-neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff; }
.shadow-fire { color: #fff; text-shadow: 0 -5px 10px #ff5500; }
.shadow-ice { color: #fff; text-shadow: 0 0 10px #00ccff; }
.shadow-gold { color: #fff; text-shadow: 0 0 10px #ffd700; }

/* OUTLINE EFFECTS */
.outline-black { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 10px rgba(0,0,0,0.5); }
.outline-glow { color: white; text-shadow: -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000, 0 0 20px #ff0000; }

/* METAL EFFECTS */
.metal-chrome { background: linear-gradient(45deg, #777 0%, #ccc 25%, #fff 50%, #ccc 75%, #777 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.metal-gold { background: linear-gradient(45deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 15px rgba(255,215,0,0.5); }

/* ANIMATED EFFECTS */
.animated-bounce { animation: bounce 2s infinite; color: #ff6b6b; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} }
.animated-wave { animation: wave 3s infinite; color: #4cd964; }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
.animated-pulse { animation: pulse 1.5s infinite; color: #5ac8fa; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.animated-float { animation: float 3s ease-in-out infinite; color: #ff9500; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }
.animated-shake { animation: shake 0.5s infinite; color: #ff3b30; }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
.animated-spin { animation: spin 2s infinite linear; color: #5856d6; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.animated-typewriter { overflow: hidden; border-right: .15em solid orange; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; color: #ffffff; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }
.animated-fade { animation: fade 2s infinite alternate; color: #007aff; }
@keyframes fade { 0% { opacity: 0.2; } 100% { opacity: 1; } }
.animated-slide { animation: slide 2s infinite alternate; color: #34c759; }
@keyframes slide { 0% { transform: translateX(-20px); } 100% { transform: translateX(20px); } }
.animated-zoom { animation: zoom 2s infinite alternate; color: #ff2d55; }
@keyframes zoom { 0% { transform: scale(0.8); } 100% { transform: scale(1.2); } }
.animated-blink { animation: blink 1s infinite; color: #ffcc00; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.animated-rain { position: relative; color: #5ac8fa; } .animated-rain::before { content: '|||'; position: absolute; top: -20px; animation: rain 1s infinite linear; opacity: 0; }
@keyframes rain { 0% { top: -20px; opacity: 0; } 50% { opacity: 1; } 100% { top: 20px; opacity: 0; } }
.animated-snow { color: #ffffff; text-shadow: 0 0 5px #fff; animation: snow 3s infinite linear; }
@keyframes snow { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } }
.animated-fireworks { color: transparent; background: radial-gradient(circle, #ff0000 20%, #ffff00 40%, #00ff00 60%, #0000ff 80%); -webkit-background-clip: text; background-clip: text; animation: fireworks 2s infinite; }
@keyframes fireworks { 0% { background-size: 100%; } 50% { background-size: 200%; } 100% { background-size: 100%; } }
.animated-confetti { background: linear-gradient(90deg, #ff6b6b, #4cd964, #5ac8fa, #ff9500, #5856d6); -webkit-background-clip: text; background-clip: text; color: transparent; animation: confetti 1s infinite linear; }
@keyframes confetti { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.animated-heartbeat { animation: heartbeat 1.5s infinite; color: #ff3b30; }
@keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
.animated-swirl { animation: swirl 3s infinite linear; color: #af52de; }
@keyframes swirl { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.5); } 100% { transform: rotate(360deg) scale(1); } }
.animated-jelly { animation: jelly 2s infinite; color: #ff2d55; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.25, 0.75); } 50% { transform: scale(0.75, 1.25); } 75% { transform: scale(1.15, 0.85); } }
.animated-elastic { animation: elastic 2s infinite; color: #32d74b; }
@keyframes elastic { 0% { transform: scaleX(1); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } }
.animated-flip { animation: flip 2s infinite; color: #007aff; }
@keyframes flip { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(360deg); } }
.animated-roll { animation: roll 2s infinite; color: #ff9500; }
@keyframes roll { 0% { transform: translateX(-100%) rotate(-360deg); } 100% { transform: translateX(100%) rotate(360deg); } }
.animated-tumble { animation: tumble 2s infinite; color: #ff3b30; }
@keyframes tumble { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
.animated-wobble { animation: wobble 2s infinite; color: #5856d6; }
@keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } }
.animated-swing { animation: swing 2s infinite; color: #34c759; display: inline-block; transform-origin: top center; }
@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.animated-rubber { animation: rubber 1s infinite; color: #ffcc00; }
@keyframes rubber { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }
.animated-lightning { animation: lightning 2s infinite; color: #5ac8fa; }
@keyframes lightning { 0%, 100% { opacity: 1; } 10% { opacity: 0.5; } 20% { opacity: 1; } 30% { opacity: 0.5; } 40% { opacity: 1; } }
.animated-sparkle { color: #ffffff; text-shadow: 0 0 10px #ffffff; animation: sparkle 1s infinite alternate; }
@keyframes sparkle { 0% { text-shadow: 0 0 10px #ffffff; } 100% { text-shadow: 0 0 20px #ffffff, 0 0 30px #ffff00; } }
.animated-twinkle { color: #ffd700; animation: twinkle 3s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.animated-glow { color: #00ffff; animation: glow 2s infinite alternate; }
@keyframes glow { 0% { text-shadow: 0 0 10px #00ffff; } 100% { text-shadow: 0 0 30px #00ffff, 0 0 50px #0000ff; } }

/* OTHER EFFECTS */
.effect-fire { color: transparent; background: linear-gradient(0deg, #ff0 0%, #f80 20%, #f00 40%, #800 60%, #400 80%, #000 100%); -webkit-background-clip: text; background-clip: text; animation: fire-flicker 0.3s infinite alternate; }
@keyframes fire-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.9; } }
.effect-ice { color: #b3e5fc; text-shadow: 0 0 5px #b3e5fc, 0 0 10px #b3e5fc, 0 0 20px #29b6f6, 0 0 30px #29b6f6, 0 0 40px #01579b; background: linear-gradient(45deg, #e1f5fe 25%, #b3e5fc 50%, #81d4fa 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stroke-double { color: white; -webkit-text-stroke: 3px black; text-shadow: 5px 5px 0 black, 10px 10px 5px rgba(0,0,0,0.3); }
.effect-comic { color: white; text-shadow: 2px 2px 0 #000, 4px 4px 0 #000, 6px 6px 0 #000; background: #ff6b6b; padding: 10px 20px; border-radius: 15px; display: inline-block; transform: rotate(-2deg); }
.effect-retro { color: #ff00ff; text-shadow: 3px 3px 0 #00ffff, 6px 6px 0 #000; background: #000; padding: 5px 15px; font-family: 'Courier New', monospace; }
.effect-magic { background: linear-gradient(45deg, #ff0000, #ff9900, #ffff00, #00ff00, #0099ff, #6600ff, #ff00ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: magic-spin 5s linear infinite; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
@keyframes magic-spin { 0% { filter: hue-rotate(0deg) blur(0px); } 50% { filter: hue-rotate(180deg) blur(2px); } 100% { filter: hue-rotate(360deg) blur(0px); } }
.effect-hologram { color: rgba(0, 255, 255, 0.7); text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); animation: hologram-flicker 2s infinite alternate; }
@keyframes hologram-flicker { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.6; } }
.effect-stencil { color: transparent; -webkit-text-stroke: 2px white; background: linear-gradient(45deg, #333, #000); text-shadow: 5px 5px 10px rgba(0,0,0,0.5); }
.effect-glass { background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3); backdrop-filter: blur(5px); }
.effect-vintage { color: #8b4513; text-shadow: 2px 2px 0 #d2b48c, 4px 4px 0 #8b4513; background: #f5deb3; padding: 8px 16px; border: 2px dashed #8b4513; display: inline-block; }
.effect-futuristic { color: #00ffff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #0099ff; font-family: 'Arial Black', sans-serif; letter-spacing: 3px; background: linear-gradient(45deg, #000, #222); padding: 10px 20px; }
.effect-grunge { color: #8b0000; text-shadow: 3px 3px 0 #000, 6px 6px 0 #333; background: #a9a9a9; padding: 5px 15px; transform: rotate(1deg); border: 3px solid #8b0000; display: inline-block; }
.effect-cute { color: #ff69b4; text-shadow: 2px 2px 0 #ffb6c1, 4px 4px 0 #ff69b4; background: linear-gradient(45deg, #ffb6c1, #ff69b4); -webkit-background-clip: text; background-clip: text; color: transparent; animation: cute-bounce 1s infinite alternate; }
@keyframes cute-bounce { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.effect-space { background: url('https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80'); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 20px rgba(255,255,255,0.5); font-weight: 900; }
.effect-water { color: rgba(0, 150, 255, 0.8); text-shadow: 0 0 10px rgba(0, 150, 255, 0.5), 0 0 20px rgba(0, 150, 255, 0.3), 0 0 30px rgba(0, 150, 255, 0.2); animation: water-wave 3s infinite linear; }
@keyframes water-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.effect-lava { background: linear-gradient(45deg, #ff0000 0%, #ff5500 25%, #ffaa00 50%, #ff5500 75%, #ff0000 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: lava-flow 2s infinite alternate; }
@keyframes lava-flow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.effect-neon-sign { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00ff, 0 0 35px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 75px #ff00ff; background: #000; padding: 15px 30px; border: 5px solid #ff00ff; display: inline-block; font-family: 'Arial Black', sans-serif; }
.effect-chrome-2 { background: linear-gradient(45deg, #ff0000 0%, #ff9900 20%, #ffff00 40%, #00ff00 60%, #0099ff 80%, #6600ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrome-rotate 3s linear infinite; }
@keyframes chrome-rotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.effect-graffiti { color: #fff; text-shadow: 3px 3px 0 #000, 6px 6px 0 #ff0000; background: #333; padding: 10px 20px; transform: rotate(-3deg); border: 5px solid #ff0000; display: inline-block; font-family: 'Impact', sans-serif; }
.effect-psychedelic { background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); -webkit-background-clip: text; background-clip: text; color: transparent; animation: psychedelic-spin 2s linear infinite; text-shadow: 0 0 20px rgba(255,255,255,0.7); }
@keyframes psychedelic-spin { 0% { filter: hue-rotate(0deg) blur(0px); transform: skew(0deg); } 50% { filter: hue-rotate(180deg) blur(1px); transform: skew(5deg); } 100% { filter: hue-rotate(360deg) blur(0px); transform: skew(0deg); } }
.effect-concrete { color: #ccc; text-shadow: 2px 2px 0 #666, 4px 4px 0 #444, 6px 6px 0 #222; background: #888; padding: 8px 16px; border: 3px solid #555; display: inline-block; }
.effect-diamond { background: linear-gradient(45deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.8) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3), 0 0 30px rgba(0,150,255,0.2); }
.effect-smoke { color: rgba(255,255,255,0.1); text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.3), 0 0 60px rgba(255,255,255,0.2); animation: smoke-drift 5s infinite linear; }
@keyframes smoke-drift { 0% { transform: translateX(0) translateY(0); opacity: 0.8; } 50% { transform: translateX(10px) translateY(-5px); opacity: 0.5; } 100% { transform: translateX(0) translateY(0); opacity: 0.8; } }