/* Glitch Effect for Titles */
.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.8;
}

.glitch-text::before {
    color: var(--color-primary);
    z-index: -1;
    animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch-text::after {
    color: var(--color-accent);
    z-index: -2;
    animation: glitch-anim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

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

/* Typing / Typewriter effect */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--color-primary);
    white-space: pre-wrap;
    margin: 0 auto;
    letter-spacing: 0.1em;
    animation: typing-blink 0.75s step-end infinite;
}

@keyframes typing-blink {
    from, to { border-color: transparent }
    50% { border-color: var(--color-primary); }
}

/* Horizontal Scan Scan Wipe */
.scan-wipe {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
    z-index: 10001;
    animation: scan-vertical 2s linear infinite;
}

@keyframes scan-vertical {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(200vh); }
}

/* Pulse for buttons and interactive items */
.pulse-glow {
    animation: pulse-primary 2s infinite;
}

@keyframes pulse-primary {
    0% { box-shadow: 0 0 0px rgba(0, 212, 255, 0); }
    50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.6); }
    100% { box-shadow: 0 0 0px rgba(0, 212, 255, 0); }
}

/* SVG Line Drawing for Stage Cards */
.path-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease forwards;
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

/* Horizontal transition */
.page-transition {
    animation: page-fade-in 0.5s ease-out;
}

@keyframes page-fade-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}