/* ===== HERO PRESET CSS ===== */

/* Rainbow 1 - Sudah ada */
.hero-rainbow-1 {
    background: linear-gradient(135deg, #b084ff, #60a5fa, #2dd4bf, #f472b6, #c084fc);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowFlow 8s ease-in-out infinite alternate;
}
@keyframes rainbowFlow {
    from { background-position: 0% center; }
    to { background-position: 100% center; }
}

/* Rainbow 2 - Sudah ada */
.hero-rainbow-2 {
    background: linear-gradient(120deg, #ffe600, #ff8c00, #b3f140, #61b3ff, #ff4760);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 10s ease-in-out infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shadow 3D */
.hero-shadow-3d {
    text-shadow: 
        1px 1px 0 #d1d5db,
        2px 2px 0 #9ca3af,
        3px 3px 0 #6b7280,
        4px 4px 0 #4b5563,
        5px 5px 0 #374151,
        6px 6px 0 #1f2937,
        7px 7px 10px rgba(0,0,0,0.3);
}

/* Outline Stroke */
.hero-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #1f2937;
    text-shadow: 0 0 20px rgba(31, 41, 55, 0.1);
}

/* Glitch Effect */
.hero-glitch {
    position: relative;
    color: #ffffff;
    text-shadow: 
        2px 0 #ff0055,
        -2px 0 #00ffcc;
    animation: glitch 3s infinite;
}
@keyframes glitch {
    0% { transform: translate(0); }
    2% { transform: translate(-2px, 1px); }
    4% { transform: translate(2px, -1px); }
    6% { transform: translate(0); }
    20% { transform: translate(0); }
    22% { transform: translate(1px, -1px); }
    24% { transform: translate(-1px, 1px); }
    26% { transform: translate(0); }
    80% { transform: translate(0); }
    82% { transform: translate(-1px, 0); }
    84% { transform: translate(1px, 0); }
    86% { transform: translate(0); }
}

/* Neon Glow untuk Background Hitam */
.hero-neon {
    color: #ffffff;
    text-shadow: 
        0 0 5px #ffffff,
        0 0 10px #00e5ff,
        0 0 20px #00e5ff,
        0 0 40px #00e5ff,
        0 0 80px #00e5ff;
    animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from {
        text-shadow:
            0 0 5px #ffffff,
            0 0 10px #00e5ffb2,
            0 0 15px #6ef0ff9d,
            0 0 25px #cffaffa1;
    }
    to {
        text-shadow:
            0 0 5px #ffffffbd,
            0 0 15px #00e5ffa4,
            0 0 25px #c7f9ff9c,
    }
}

/* Alert - Sudah ada */
.hero-alert {
    animation: doubleBlink 5s infinite;
}
@keyframes doubleBlink {
    0%,100% { opacity: 1; }
    10% { opacity: 0; }
    20% { opacity: 1; }
    30% { opacity: 0; }
    40% { opacity: 1; }
    41%,100% { opacity: 1; }
}

/* ===== GRADIENT TEXT UTILITY ===== */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Pastikan gradient bekerja dengan baik */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-cyan-500 {
    --tw-gradient-from: #06b6d4;
    --tw-gradient-to: rgba(6,182,212,0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-600 {
    --tw-gradient-to: #2563eb;
}

.from-orange-400 {
    --tw-gradient-from: #fb923c;
    --tw-gradient-to: rgba(251,146,60,0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-red-600 {
    --tw-gradient-to: #dc2626;
}

.from-purple-500 {
    --tw-gradient-from: #a855f7;
    --tw-gradient-to: rgba(168,85,247,0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-pink-500 {
    --tw-gradient-to: #ec4899;
}