/* =====================================================
   HACK & GLITCH ANIMATIONS
   ===================================================== */

/* Floating hack elements dispersos por toda la hero section */
.hack-text {
    position: absolute;
    font-size: 0.6rem;
    color: rgba(0, 255, 255, 0.5);
    letter-spacing: 1px;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    z-index: 5;
}

.hack-text.dim {
    color: rgba(136, 136, 136, 0.35);
}

.hack-text.warn {
    color: rgba(230, 51, 51, 0.45);
}

.flicker-fast {
    animation: flicker 1.5s infinite;
}

.flicker-slow {
    animation: flicker 4s infinite;
}

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.4;
    }
}

/* Posiciones dispersas por todo el frame */
.ht-top-left {
    top: 20px;
    left: 80px;
}

.ht-top-right {
    top: 30px;
    right: 100px;
}

.ht-mid-left {
    top: 45%;
    left: 25px;
    transform: rotate(-90deg);
}

.ht-mid-right {
    top: 50%;
    right: 30px;
    transform: rotate(90deg);
}

.ht-bottom-left {
    bottom: 40px;
    left: 120px;
}

.ht-bottom-right {
    bottom: 30px;
    right: 80px;
}

.ht-center-top {
    top: 35%;
    left: 52%;
}

.ht-center-low {
    bottom: 25%;
    left: 48%;
}

/* Specific positions for Key Art area */
.ht-keyart-top {
    top: -25px;
    left: 0;
}

.ht-keyart-top-right {
    top: -15px;
    right: 0;
}

.ht-keyart-bottom {
    bottom: -30px;
    left: 0;
}

.ht-keyart-bottom-right {
    bottom: -20px;
    right: 0;
}