/**
 * at-amber Glitch Effect - CSS Component
 * Version: 1.0
 * Author: AMPLtools Team
 * Date: 2025-12-04
 *
 * Modular cyberpunk-style glitch effect for text elements.
 * Configurable via CSS variables and data attributes.
 *
 * DEPENDENCY: Requires at-amber-glitch.js for text switching and glitch triggering
 * Location: /SoTN/js_functions/at-amber/at-amber-glitch.js
 *
 * Usage:
 * <span class="glitch-text" data-text="JuliΛ">JuliΛ</span>
 *
 * Customization via data attributes (set in JS):
 * - data-glitch-primary: Main text color
 * - data-glitch-layer1: First glitch layer color
 * - data-glitch-layer2: Second glitch layer color
 */

/* Base glitch container */
.glitch-container {
    position: relative;
    display: inline-block;
}

/* Main glitch text element */
.glitch-text {
    position: relative;
    display: inline-block;
    z-index: 1;
    /* Default colors - can be overridden via CSS variables */
    color: var(--glitch-primary, #46BAD0);
}

/* Glitch pseudo-elements for RGB split effect */
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
}

/* First glitch layer (left offset, default hot pink) */
.glitch-text::before {
    color: var(--glitch-layer-1, #ff0040);
    text-shadow: 2px 0 var(--glitch-layer-1, #ff0040);
}

/* Second glitch layer (right offset, default neon green) */
.glitch-text::after {
    color: var(--glitch-layer-2, #00ff80);
    text-shadow: -2px 0 var(--glitch-layer-2, #00ff80);
}

/* Note: Constant glitch animations removed - glitch only appears during .intense-glitch bursts */

/* Subtle flicker animation on main text */
.glitch-text {
    animation: flicker 4s infinite;
}

@keyframes flicker {
    0%, 98% { opacity: 1; }
    99% { opacity: 0.8; }
    99.5% { opacity: 1; }
    99.8% { opacity: 0.9; }
    100% { opacity: 1; }
}

/* Intense glitch effect (triggered by JavaScript) */
.intense-glitch .glitch-text::before,
.intense-glitch .glitch-text::after {
    opacity: 1 !important;
}

.intense-glitch .glitch-text::before {
    animation: intense-glitch-1 0.3s infinite linear !important;
}

.intense-glitch .glitch-text::after {
    animation: intense-glitch-2 0.3s infinite linear !important;
}

.intense-glitch .glitch-text {
    animation: intense-flicker 0.15s infinite !important;
}

/* Intense glitch keyframes - Layer 1 */
@keyframes intense-glitch-1 {
    0% { clip: rect(10px, 9999px, 30px, 0); transform: translateX(1px); }
    20% { clip: rect(50px, 9999px, 80px, 0); transform: translateX(-1px); }
    40% { clip: rect(20px, 9999px, 40px, 0); transform: translateX(0.5px); }
    60% { clip: rect(70px, 9999px, 90px, 0); transform: translateX(-0.5px); }
    80% { clip: rect(35px, 9999px, 65px, 0); transform: translateX(1px); }
    100% { clip: rect(15px, 9999px, 45px, 0); transform: translateX(-1px); }
}

/* Intense glitch keyframes - Layer 2 */
@keyframes intense-glitch-2 {
    0% { clip: rect(25px, 9999px, 55px, 0); transform: translateX(-0.5px); }
    20% { clip: rect(65px, 9999px, 95px, 0); transform: translateX(0.5px); }
    40% { clip: rect(5px, 9999px, 35px, 0); transform: translateX(-1px); }
    60% { clip: rect(45px, 9999px, 75px, 0); transform: translateX(1px); }
    80% { clip: rect(30px, 9999px, 60px, 0); transform: translateX(-0.5px); }
    100% { clip: rect(55px, 9999px, 85px, 0); transform: translateX(0.5px); }
}

/* Intense flicker */
@keyframes intense-flicker {
    0%, 40%, 80% { opacity: 1; }
    20%, 60%, 100% { opacity: 0.85; }
}