/* Header fijo con efecto glitch original */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 1000;
}

body.home .header {
    justify-content: center;
}

a.glitch-link {
    text-decoration: none;
}

a.glitch-link:hover {
    text-decoration: none;
}

h1.glitch {
    color: white;
    font-family: sans-serif;
    font-weight: 800;
    position: relative;
    font-size: 30px;
    padding: 30px;
}

h1.glitch::before, h1.glitch::after {
    padding: 30px;
    color: white;
    content: "0xbara";
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
    top: 0;
}

h1.glitch::before {
    left: 3px;
    text-shadow: -2px 0 red;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate;
}

h1.glitch::after {
    left: -3px;
    text-shadow: -2px 0 blue;
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate;
}

/* Animaciones con valores aleatorios como en el CodePen original */
@keyframes glitch-animation-1 {
    0% { clip: rect(42px, 350px, 44px, 30px); }
    5% { clip: rect(12px, 350px, 59px, 30px); }
    10% { clip: rect(48px, 350px, 29px, 30px); }
    15% { clip: rect(42px, 350px, 73px, 30px); }
    20% { clip: rect(63px, 350px, 27px, 30px); }
    25% { clip: rect(34px, 350px, 55px, 30px); }
    30% { clip: rect(86px, 350px, 73px, 30px); }
    35% { clip: rect(20px, 350px, 20px, 30px); }
    40% { clip: rect(26px, 350px, 60px, 30px); }
    45% { clip: rect(25px, 350px, 42px, 30px); }
    50% { clip: rect(16px, 350px, 40px, 30px); }
    55% { clip: rect(68px, 350px, 36px, 30px); }
    60% { clip: rect(61px, 350px, 52px, 30px); }
    65% { clip: rect(47px, 350px, 97px, 30px); }
    70% { clip: rect(13px, 350px, 33px, 30px); }
    75% { clip: rect(71px, 350px, 39px, 30px); }
    80% { clip: rect(99px, 350px, 63px, 30px); }
    85% { clip: rect(54px, 350px, 26px, 30px); }
    90% { clip: rect(85px, 350px, 43px, 30px); }
    95% { clip: rect(37px, 350px, 69px, 30px); }
    100% { clip: rect(91px, 350px, 25px, 30px); }
}

@keyframes glitch-animation-2 {
    0% { clip: rect(65px, 350px, 119px, 30px); }
    5% { clip: rect(74px, 350px, 26px, 30px); }
    10% { clip: rect(104px, 350px, 135px, 30px); }
    15% { clip: rect(21px, 350px, 30px, 30px); }
    20% { clip: rect(30px, 350px, 81px, 30px); }
    25% { clip: rect(134px, 350px, 40px, 30px); }
    30% { clip: rect(82px, 350px, 135px, 30px); }
    35% { clip: rect(29px, 350px, 95px, 30px); }
    40% { clip: rect(96px, 350px, 61px, 30px); }
    45% { clip: rect(27px, 350px, 38px, 30px); }
    50% { clip: rect(73px, 350px, 91px, 30px); }
    55% { clip: rect(53px, 350px, 84px, 30px); }
    60% { clip: rect(45px, 350px, 96px, 30px); }
    65% { clip: rect(14px, 350px, 77px, 30px); }
    70% { clip: rect(89px, 350px, 134px, 30px); }
    75% { clip: rect(78px, 350px, 103px, 30px); }
    80% { clip: rect(64px, 350px, 120px, 30px); }
    85% { clip: rect(16px, 350px, 99px, 30px); }
    90% { clip: rect(52px, 350px, 45px, 30px); }
    95% { clip: rect(147px, 350px, 88px, 30px); }
    100% { clip: rect(33px, 350px, 149px, 30px); }
}

/* Ajuste para que el contenido no se superponga con el header */
body.with-header {
    padding-top: 80px;
}

/* Para páginas internas que no usan el flexbox de styles.css */
body.with-header:not(.home) {
    height: auto;
    display: block;
    padding: 80px 20px 20px;
}

/* Para el index que mantiene el centrado */
body.with-header.home {
    min-height: 100vh;
}