/* Reset Global para Problema de Rolagem Horizontal */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
}

/* Barra de Rolagem Personalizada */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050505; 
}
::-webkit-scrollbar-thumb {
    background: #0891b2; 
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #06b6d4; 
}

/* Animações */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}

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

/* Classes Base */
.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.2)
    );
    background-size: 100% 4px;
    animation: scanline 10s linear infinite;
    pointer-events: none;
}

/* Efeito de Texto Glitch */
.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%;
    background: #050505;
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 #d946ef;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 #06b6d4;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip: rect(20px, 9999px, 81px, 0); }
    20% { clip: rect(62px, 9999px, 12px, 0); }
    40% { clip: rect(15px, 9999px, 45px, 0); }
    60% { clip: rect(80px, 9999px, 5px, 0); }
    80% { clip: rect(35px, 9999px, 90px, 0); }
    100% { clip: rect(50px, 9999px, 30px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(60px, 9999px, 10px, 0); }
    20% { clip: rect(10px, 9999px, 80px, 0); }
    40% { clip: rect(90px, 9999px, 20px, 0); }
    60% { clip: rect(15px, 9999px, 70px, 0); }
    80% { clip: rect(55px, 9999px, 40px, 0); }
    100% { clip: rect(30px, 9999px, 60px, 0); }
}

/* Componentes */
.cyber-button-primary {
    @apply relative w-full px-8 py-4 bg-cyber-cyan/10 border border-cyber-cyan text-cyber-cyan font-bold font-orbitron tracking-widest uppercase transition-all duration-300;
}

.cyber-button-primary:hover {
    @apply bg-cyber-cyan text-black shadow-[0_0_20px_rgba(6,182,212,0.6)];
}

.cyber-button-secondary {
    @apply relative px-8 py-3 bg-transparent border border-white/20 text-white font-bold font-orbitron tracking-wider transition-all duration-300 hover:border-cyber-purple hover:text-cyber-purple hover:shadow-[0_0_15px_rgba(217,70,239,0.4)];
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Inputs do Formulário Cyberpunk */
.cyber-input {
    @apply w-full bg-cyber-black/50 border border-cyber-cyan/30 p-3 text-cyber-cyan font-mono outline-none transition-all duration-300 placeholder-gray-600;
}

.cyber-input:focus {
    @apply border-cyber-cyan shadow-[0_0_10px_rgba(6,182,212,0.3)] bg-cyber-dark;
}

.skill-card {
    @apply p-4 bg-cyber-dark border border-white/5 flex flex-col items-center justify-center text-center transition-all duration-300 hover:border-cyber-cyan hover:shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:-translate-y-1 rounded-sm;
}

/* Estilos de Tag Cyberpunk */
.tech-tag {
    @apply relative inline-flex items-center px-3 py-1 text-[10px] md:text-xs font-mono font-bold tracking-widest uppercase border transition-all duration-300 select-none cursor-default;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.tech-tag::before {
    content: '';
    @apply w-1.5 h-1.5 mr-2 bg-current shadow-[0_0_5px_currentColor] opacity-80;
}

.tech-tag-cyan {
    @apply border-cyber-cyan/30 text-cyber-cyan bg-cyber-cyan/5;
}
.tech-tag-cyan:hover {
    @apply border-cyber-cyan bg-cyber-cyan/10 shadow-[0_0_15px_rgba(6,182,212,0.4)] text-white;
}

.tech-tag-purple {
    @apply border-cyber-purple/30 text-cyber-purple bg-cyber-purple/5;
}
.tech-tag-purple:hover {
    @apply border-cyber-purple bg-cyber-purple/10 shadow-[0_0_15px_rgba(217,70,239,0.4)] text-white;
}

.cyber-link-btn {
    @apply inline-flex items-center px-4 py-2 border border-cyber-cyan text-cyber-cyan font-mono text-sm tracking-wider hover:bg-cyber-cyan hover:text-black transition-all duration-300 w-fit;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.cyber-link-btn:active, 
.cyber-link-btn:focus {
    outline: none;
}

/* Foco visível melhorado para navegação por teclado */
*:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 4px;
}

.achievement-badge {
    @apply flex items-center px-4 py-2 bg-cyber-dark border-l-2 border-cyber-acid text-sm font-rajdhani text-gray-300 hover:bg-white/5 transition-colors cursor-default;
}

.animate-blink {
    animation: blink 1s step-end infinite;
}

/* Acessibilidade: Preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .scanlines, .glitch-text::before, .glitch-text::after {
        display: none;
    }
}

/* Devicon */
@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css");