/**
 * BinaryEffect.css
 * Estilos opcionales para el componente BinaryEffect
 * Puedes incluir este archivo si prefieres tener los estilos separados
 * en lugar de que se generen dinámicamente
 */

/* Contenedor principal */
.binary-effect-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Streams de texto binario */
.binary-effect-stream {
    position: absolute;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    will-change: transform;
}

/* Animación horizontal */
.binary-effect-stream.horizontal {
    animation: binary-scroll-horizontal linear infinite;
}

/* Animación vertical */
.binary-effect-stream.vertical {
    animation: binary-scroll-vertical linear infinite;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* Animación diagonal */
.binary-effect-stream.diagonal {
    animation: binary-scroll-diagonal linear infinite;
}

/* Efecto de desvanecimiento en los bordes */
.binary-effect-stream.fade-edges {
    mask-image: linear-gradient(90deg, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%);
}

/* Título central */
.binary-effect-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    text-align: center;
    z-index: 10;
    pointer-events: none;
    font-family: 'Courier New', monospace;
}

/* Subtítulo con código binario */
.binary-effect-subtitle {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    font-family: monospace;
    font-size: 12px;
    opacity: 0.6;
    pointer-events: none;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Animaciones */
@keyframes binary-scroll-horizontal {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes binary-scroll-vertical {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(100%);
    }
}

@keyframes binary-scroll-diagonal {
    from {
        transform: translate(-100%, -100%);
    }
    to {
        transform: translate(100%, 100%);
    }
}

/* Variantes de estilo */
.binary-effect-container.style-matrix .binary-effect-stream {
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.binary-effect-container.style-red .binary-effect-stream {
    color: #ff0000;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.binary-effect-container.style-blue .binary-effect-stream {
    color: #00ccff;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

.binary-effect-container.style-minimal .binary-effect-stream {
    color: rgba(255, 255, 255, 0.3);
    text-shadow: none;
}

/* Estados de animación */
.binary-effect-stream.paused {
    animation-play-state: paused;
}

.binary-effect-stream.running {
    animation-play-state: running;
}

/* Responsive */
@media (max-width: 768px) {
    .binary-effect-title {
        font-size: 24px !important;
    }
    
    .binary-effect-subtitle {
        font-size: 10px;
    }
    
    .binary-effect-stream {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .binary-effect-title {
        font-size: 18px !important;
    }
    
    .binary-effect-subtitle {
        display: none;
    }
    
    .binary-effect-stream {
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }
}

/* Modo oscuro preferido del sistema */
@media (prefers-color-scheme: dark) {
    .binary-effect-container {
        background: rgba(0, 0, 0, 0.1);
    }
}

/* Modo claro preferido del sistema */
@media (prefers-color-scheme: light) {
    .binary-effect-container {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .binary-effect-stream {
        mix-blend-mode: difference;
    }
}

/* Animación reducida para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .binary-effect-stream {
        animation-duration: 60s !important;
    }
    
    .binary-effect-title {
        animation: none !important;
    }
}