/* ===================================
   SKEDAR_ // GLITCH EFFECTS
   Efeitos de glitch funcionais
   =================================== */

/* ---- GLITCH TEXT EFFECT ---- */

.glitch-text {
    position: relative;
    display: inline-block;
}

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

.glitch-text.glitching::before {
    opacity: 0.95;
    color: var(--accent-cyan);
    animation: glitchShift1 0.075s steps(2) infinite;
    clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%);
}

.glitch-text.glitching::after {
    opacity: 0.95;
    color: var(--accent-magenta);
    animation: glitchShift2 0.065s steps(2) infinite;
    clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%);
}

.glitch-text.glitching,
.glitch-label.glitching {
    animation: systemFault 0.28s steps(2) 1;
    color: var(--text-primary);
    text-shadow:
        -3px 0 var(--accent-magenta),
        3px 0 var(--accent-cyan),
        0 0 14px var(--accent-cyan-glow);
}

@keyframes systemFault {
    0%, 100% { transform: translate(0); filter: none; clip-path: inset(0); }
    10% { transform: translate(-5px, 2px) skewX(-8deg); filter: contrast(2.2) saturate(2); clip-path: inset(9% 0 72% 0); }
    28% { transform: translate(6px, -2px) skewX(7deg); filter: hue-rotate(95deg) brightness(1.7); clip-path: inset(48% 0 26% 0); }
    46% { transform: translate(-3px, -1px); filter: invert(1) contrast(2); clip-path: inset(76% 0 4% 0); }
    65% { transform: translate(4px, 2px); filter: hue-rotate(-120deg) brightness(2); clip-path: inset(31% 0 49% 0); }
    82% { transform: translate(-1px); filter: none; clip-path: inset(0); }
}

@keyframes glitchShift1 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}

@keyframes glitchShift2 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(2px, -1px); }
    40% { transform: translate(-2px, 1px); }
    60% { transform: translate(1px, -2px); }
    80% { transform: translate(-1px, 2px); }
    100% { transform: translate(0, 0); }
}

/* ---- GLITCH CARD EFFECT ---- */

.project-card.glitching {
    animation: cardGlitch 0.22s steps(2) 2, errorPulse 0.44s steps(2) 1;
    box-shadow:
        -5px 0 0 rgba(255, 0, 85, 0.55),
        5px 0 0 rgba(0, 243, 255, 0.55),
        0 0 28px var(--accent-magenta-dim);
}

@keyframes cardGlitch {
    0% { transform: translate(0, 0); filter: none; }
    25% { transform: translate(-3px, 2px); filter: hue-rotate(90deg); }
    50% { transform: translate(3px, -2px); filter: hue-rotate(-90deg); }
    75% { transform: translate(-2px, -1px); filter: brightness(1.5); }
    100% { transform: translate(0, 0); filter: none; }
}

@keyframes errorPulse {
    0%, 100% { filter: none; clip-path: inset(0); }
    20% { filter: contrast(1.8) hue-rotate(80deg); clip-path: inset(12% 0 58% 0); }
    45% { filter: brightness(1.8) saturate(2); clip-path: inset(61% 0 14% 0); }
    70% { filter: invert(0.15) contrast(1.6); clip-path: inset(34% 0 39% 0); }
}

/* ---- SCANLINE EFFECT ---- */

.scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: var(--z-tooltip);
    animation: scanlineMove 10s linear infinite;
}

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* ---- DATA STREAM BACKGROUND ---- */

.data-stream {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-base);
    opacity: 0.1;
}

.stream-line {
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--text-size-xs);
    color: var(--accent-cyan-dim);
    white-space: nowrap;
    animation: streamMove linear infinite;
}

@keyframes streamMove {
    from { transform: translateY(-100%); }
    to { transform: translateY(100vh); }
}

/* ---- CRT FLICKER ---- */

.crt-flicker {
    animation: crtFlicker 4s linear infinite;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 1; }
    97% { opacity: 1; }
    98% { opacity: 0.95; }
    99% { opacity: 1; }
}

/* ---- HOLO BORDER ---- */

.holo-border {
    position: relative;
}

.holo-border::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        transparent 40%,
        var(--accent-cyan) 50%,
        transparent 60%
    );
    background-size: 200% 200%;
    animation: holoBorderMove 3s linear infinite;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: -1;
}

.holo-border:hover::after {
    opacity: 1;
}

@keyframes holoBorderMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* ---- TYPE WRITER ---- */

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--accent-cyan);
    white-space: nowrap;
    animation:
        typewriter 2s steps(40) forwards,
        cursorBlink 0.7s step-end infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes cursorBlink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--accent-cyan); }
}

/* ---- GLITCH TRIGGER (UTILITY) ---- */

.glitch-trigger {
    cursor: pointer;
    position: relative;
}

.glitch-trigger:active {
    animation: microGlitch 0.1s;
}

@keyframes microGlitch {
    0% { transform: translate(0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}

/* ---- REDUCED MOTION ---- */

@media (prefers-reduced-motion: reduce) {
    .glitch-text.glitching::before,
    .glitch-text.glitching::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .glitch-text.glitching {
        animation: none !important;
        text-shadow: none !important;
    }

    .project-card.glitching {
        animation: none !important;
        box-shadow: none !important;
    }

    .scanline-overlay {
        animation: none !important;
    }

    .stream-line {
        animation: none !important;
    }

    .crt-flicker {
        animation: none !important;
    }

    .holo-border::after {
        animation: none !important;
    }

    .typewriter {
        animation: none !important;
        width: 100% !important;
        border-right: none !important;
    }

    .nav-link.glitching,
    .logo-container.glitching,
    .glitch-label.glitching {
        animation: none !important;
        text-shadow: none !important;
    }

    .logo-cursor {
        animation: none !important;
        opacity: 1 !important;
    }

    .system-glyph .system-glyph-lines,
    .system-glyph-lines {
        animation: none !important;
    }

    .system-glyph {
        animation: none !important;
    }

    .system-glyph.glitching .system-glyph-lines {
        animation: none !important;
    }
}

/* ---- NAV LINK GLITCH ---- */

.nav-link.glitching {
    animation: navGlitch 0.2s steps(2) 2, systemFault 0.28s steps(2) 1;
    color: var(--accent-cyan);
}

@keyframes navGlitch {
    0%, 100% { transform: translate(0, 0); filter: none; }
    25% { transform: translate(-2px, 1px); filter: hue-rotate(90deg) brightness(1.5); }
    75% { transform: translate(2px, -1px); filter: hue-rotate(-90deg) brightness(1.2); }
}

/* ---- LOGO CONTAINER GLITCH ---- */

.logo-container.glitching {
    animation: logoGlitch 0.2s steps(3) 2, systemFault 0.28s steps(2) 1;
}

@keyframes logoGlitch {
    0%, 100% { transform: translate(0, 0); filter: none; }
    20% { transform: translate(-3px, 1px); filter: hue-rotate(90deg) brightness(2); }
    40% { transform: translate(3px, -1px); filter: hue-rotate(-90deg); }
    60% { transform: translate(-1px, 2px); filter: brightness(1.5) contrast(1.5); }
    80% { transform: translate(1px, -2px); filter: none; }
}

/* ---- LOGO CURSOR BLINK ---- */

.logo-cursor {
    display: inline-block;
    color: var(--accent-cyan);
    animation: logoCursorBlink 1s step-end infinite;
}

@keyframes logoCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---- SYSTEM GLYPH ---- */

.system-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-2, 8px);
    animation: glyphFloat 2.5s ease-in-out infinite alternate;
    perspective: 200px;
}

.system-glyph-lines {
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.15;
    color: var(--accent-cyan-dim);
    text-shadow: 0 0 4px var(--accent-cyan-glow);
    white-space: pre;
    animation: glyphSpin 4s linear infinite;
    transform-style: preserve-3d;
}

@keyframes glyphSpin {
    0%   { transform: rotateY(0deg) scaleX(1); opacity: 0.8; }
    25%  { transform: rotateY(90deg) scaleX(0.1); opacity: 0.3; }
    50%  { transform: rotateY(180deg) scaleX(1); opacity: 0.8; }
    75%  { transform: rotateY(270deg) scaleX(0.1); opacity: 0.3; }
    100% { transform: rotateY(360deg) scaleX(1); opacity: 0.8; }
}

@keyframes glyphFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-2px); }
}

.system-glyph.glitching .system-glyph-lines {
    animation: glyphGlitch 0.18s steps(3) 2, errorPulse 0.36s steps(2) 1;
    color: var(--accent-cyan);
}

@keyframes glyphGlitch {
    0%, 100% { transform: translate(0, 0) rotateY(0deg); filter: none; }
    25% { transform: translate(-2px, 1px) rotateY(30deg); filter: hue-rotate(90deg); }
    50% { transform: translate(2px, -1px) rotateY(-30deg); filter: hue-rotate(-90deg) brightness(2); }
    75% { transform: translate(-1px, 2px) rotateY(15deg); filter: none; }
}

/* ---- PRINT STYLES ---- */

@media print {
    .scanline-overlay,
    .data-stream,
    .hud-bar {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}