/**
 * FUCIT Text Effects Utilities
 * Reusable text effects that work with the theme system
 * Apply these classes to any element to add visual effects
 *
 * Usage: <h1 class="fx-glitch">My Title</h1>
 */

/* ============================================
   GLOW EFFECTS
   ============================================ */

.fx-glow-soft {
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
}

.fx-glow-medium {
    color: var(--color-primary);
    text-shadow:
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary);
}

.fx-glow-strong {
    color: var(--color-primary);
    text-shadow:
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        0 0 30px var(--color-primary),
        0 0 40px var(--color-primary);
}

/* ============================================
   ANIMATED EFFECTS
   ============================================ */

/* Pulsing Glow */
.fx-pulse {
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--color-primary);
    animation: fx-pulse-anim 2s ease-in-out infinite;
}

@keyframes fx-pulse-anim {
    0%, 100% { opacity: 1; text-shadow: 0 0 20px var(--color-primary); }
    50% { opacity: 0.7; text-shadow: 0 0 40px var(--color-primary); }
}

/* RGB Glitch Effect */
.fx-glitch {
    position: relative;
    color: var(--color-primary);
    display: inline-block;
}

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

.fx-glitch::before {
    color: #ffffff;
    animation: fx-glitch-anim-1 2s infinite;
    clip-path: inset(0);
}

.fx-glitch::after {
    color: #ffffff;
    animation: fx-glitch-anim-2 2.5s infinite;
    clip-path: inset(0);
}

@keyframes fx-glitch-anim-1 {
    0%, 90% {
        clip-path: inset(0);
        transform: translate(0);
    }
    91% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-3px, 2px);
    }
    93% {
        clip-path: inset(50% 0 20% 0);
        transform: translate(3px, -2px);
    }
    95% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-2px, 1px);
    }
    97% {
        clip-path: inset(0);
        transform: translate(0);
    }
}

@keyframes fx-glitch-anim-2 {
    0%, 85% {
        clip-path: inset(0);
        transform: translate(0);
    }
    86% {
        clip-path: inset(80% 0 10% 0);
        transform: translate(3px, -2px);
    }
    88% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-3px, 2px);
    }
    90% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(2px, -1px);
    }
    92% {
        clip-path: inset(0);
        transform: translate(0);
    }
}

/* Scanline CRT Effect */
.fx-scanline {
    position: relative;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
}

.fx-scanline::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 48%,
        rgba(0, 0, 0, 0.8) 48%,
        rgba(0, 0, 0, 0.8) 52%,
        transparent 52%,
        transparent 100%
    );
    background-size: 100% 8px;
    animation: fx-scanline-anim 3s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes fx-scanline-anim {
    0% { background-position: 0 0; }
    100% { background-position: 0 200px; }
}

/* Data Corruption */
.fx-corrupt {
    position: relative;
    display: inline-block;
}

.fx-corrupt .char {
    display: inline-block;
    animation: fx-corrupt-anim 0.1s infinite;
}

.fx-corrupt .char:nth-child(2) { animation-delay: 0.05s; }
.fx-corrupt .char:nth-child(3) { animation-delay: 0.1s; }
.fx-corrupt .char:nth-child(4) { animation-delay: 0.15s; }
.fx-corrupt .char:nth-child(5) { animation-delay: 0.2s; }
.fx-corrupt .char:nth-child(6) { animation-delay: 0.25s; }
.fx-corrupt .char:nth-child(7) { animation-delay: 0.3s; }
.fx-corrupt .char:nth-child(8) { animation-delay: 0.35s; }
.fx-corrupt .char:nth-child(9) { animation-delay: 0.4s; }
.fx-corrupt .char:nth-child(10) { animation-delay: 0.45s; }

@keyframes fx-corrupt-anim {
    0%, 90% { transform: translate(0, 0); color: var(--color-text-primary); }
    92% { transform: translate(-1px, 1px); color: var(--color-primary); }
    94% { transform: translate(1px, -1px); color: var(--color-text-primary); }
    96% { transform: translate(-1px, -1px); color: var(--color-primary); }
    98% { transform: translate(1px, 1px); color: var(--color-text-primary); }
}

/* Theme Gradient */
.fx-gradient {
    background: linear-gradient(
        45deg,
        var(--color-primary-dim),
        var(--color-primary),
        #ffffff,
        var(--color-primary),
        var(--color-primary-dim)
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fx-gradient-anim 3s ease infinite;
}

@keyframes fx-gradient-anim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Typewriter Effect */
.fx-typewriter {
    color: var(--color-primary);
    border-right: 3px solid var(--color-border-accent);
    white-space: nowrap;
    overflow: hidden;
    animation:
        fx-typing 4s steps(30) infinite,
        fx-blink-border 0.75s step-end infinite;
}

@keyframes fx-typing {
    0%, 100% { width: 0; }
    50%, 90% { width: 100%; }
}

@keyframes fx-blink-border {
    50% { border-color: transparent; }
}

/* Cursor Blink (for terminal-style text) */
.fx-cursor::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1em;
    background: var(--color-primary);
    animation: fx-blink 1s infinite;
    vertical-align: text-bottom;
    margin-left: 4px;
}

@keyframes fx-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ============================================
   HELPER CLASSES
   ============================================ */

/* For glitch/scanline effects that need data-text attribute */
.fx-needs-data-text {
    /* Add data-text attribute via JS or template: data-text="Your Text" */
}

/* Disable animations (for accessibility) */
@media (prefers-reduced-motion: reduce) {
    .fx-pulse,
    .fx-glitch,
    .fx-glitch::before,
    .fx-glitch::after,
    .fx-scanline::before,
    .fx-corrupt .char,
    .fx-gradient,
    .fx-typewriter,
    .fx-cursor::after {
        animation: none !important;
    }
}

/* ============================================
   COMBINATION CLASSES
   ============================================ */

/* Glow + Pulse */
.fx-glow-pulse {
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--color-primary);
    animation: fx-pulse-anim 2s ease-in-out infinite;
}

/* Primary color + shadow (no animation) */
.fx-static-glow {
    color: var(--color-primary);
    text-shadow: 0 0 15px var(--color-primary);
}