/* ================================================
   BODEGA FC HERO TEXT - ENGAGING EFFECTS
   ================================================ */

/* Clean, sophisticated hero text with glitch effect */
.hero-center h1 {
    color: #FFFFFF;
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 20px 0;
    /* Entrance animation, then glitch effect */
    animation:
        fadeInUp 1.2s ease-out,
        glitch 8s linear 1.5s infinite;
}

/* Red/cyan glitch layers */
.hero-center h1::before,
.hero-center h1::after {
    content: 'BODEGA FC';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    opacity: 0;
    pointer-events: none;
}

.hero-center h1::before {
    color: #ff00ff;
    animation: glitchBefore 8s steps(2, end) 1.5s infinite;
    z-index: -1;
    text-shadow: 2px 0 #ff00ff;
}

.hero-center h1::after {
    color: #00ffff;
    animation: glitchAfter 8s steps(2, end) 1.6s infinite;
    z-index: -2;
    text-shadow: -2px 0 #00ffff;
}

/* Elegant fade-in and slide-up on page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main text glitch movement - erratic and rapid */
@keyframes glitch {
    0%, 100% {
        transform: translate(0, 0);
    }
    5% {
        transform: translate(-3px, 2px);
    }
    7% {
        transform: translate(0, 0);
    }
    12% {
        transform: translate(4px, -1px);
    }
    14% {
        transform: translate(-2px, 1px);
    }
    16% {
        transform: translate(0, 0);
    }
    /* Long pause - normal state */
    20%, 70% {
        transform: translate(0, 0);
    }
    /* Second burst - rapid fire */
    75% {
        transform: translate(-4px, 1px);
    }
    77% {
        transform: translate(3px, -2px);
    }
    79% {
        transform: translate(-2px, 1px);
    }
    81% {
        transform: translate(0, 0);
    }
    85% {
        transform: translate(2px, -1px);
    }
    87%, 100% {
        transform: translate(0, 0);
    }
}

/* Red/magenta layer glitch - rapid flicker */
@keyframes glitchBefore {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
        clip-path: inset(0 0 0 0);
    }
    5% {
        transform: translate(-4px, 0);
        opacity: 0.8;
        clip-path: inset(40% 0 30% 0);
    }
    6% {
        opacity: 0;
    }
    12% {
        transform: translate(-5px, 0);
        opacity: 0.9;
        clip-path: inset(10% 0 60% 0);
    }
    13% {
        opacity: 0;
    }
    16% {
        transform: translate(-3px, 0);
        opacity: 0.7;
        clip-path: inset(70% 0 10% 0);
    }
    17%, 70% {
        opacity: 0;
    }
    /* Second burst */
    75% {
        transform: translate(-5px, 0);
        opacity: 0.85;
        clip-path: inset(20% 0 50% 0);
    }
    76% {
        opacity: 0;
    }
    79% {
        transform: translate(-4px, 0);
        opacity: 0.8;
        clip-path: inset(50% 0 20% 0);
    }
    80%, 100% {
        opacity: 0;
    }
}

/* Cyan layer glitch - rapid flicker with different timing */
@keyframes glitchAfter {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
        clip-path: inset(0 0 0 0);
    }
    6% {
        transform: translate(4px, 0);
        opacity: 0.75;
        clip-path: inset(30% 0 40% 0);
    }
    7% {
        opacity: 0;
    }
    14% {
        transform: translate(5px, 0);
        opacity: 0.85;
        clip-path: inset(60% 0 15% 0);
    }
    15% {
        opacity: 0;
    }
    17% {
        transform: translate(3px, 0);
        opacity: 0.65;
        clip-path: inset(5% 0 70% 0);
    }
    18%, 70% {
        opacity: 0;
    }
    /* Second burst - slightly offset timing */
    77% {
        transform: translate(5px, 0);
        opacity: 0.8;
        clip-path: inset(45% 0 25% 0);
    }
    78% {
        opacity: 0;
    }
    81% {
        transform: translate(4px, 0);
        opacity: 0.75;
        clip-path: inset(15% 0 55% 0);
    }
    82%, 100% {
        opacity: 0;
    }
}

/* Enhanced hero line with animation */
.hero-line {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #D4622F, transparent);
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1.5s ease-out 0.5s both;
}

.hero-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmer 3s ease-in-out infinite 1.5s;
}

@keyframes shimmer {
    0%, 100% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
        width: 100px;
    }
}

/* Animated hero location */
.hero-location {
    animation: fadeInUp 1.5s ease-out 0.3s both;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #D4622F;
    text-transform: uppercase;
    margin: 15px 0;
    position: relative;
}

.hero-location::before,
.hero-location::after {
    content: '◆';
    color: rgba(212, 98, 47, 0.5);
    margin: 0 15px;
    font-size: 0.8em;
    animation: pulse 2s ease-in-out infinite;
}

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

/* Animated tagline */
.hero-tagline {
    animation: fadeInUp 1.8s ease-out 0.6s both;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-center h1 {
        font-size: clamp(2.5rem, 15vw, 4rem);
        letter-spacing: 0.1em;
        padding: 15px 0;
    }

    .hero-location {
        font-size: clamp(1rem, 4vw, 1.3rem);
        letter-spacing: 0.2em;
    }

    .hero-tagline {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem);
        padding: 0 20px;
    }

    .hero-line {
        width: 80px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-center h1,
    .hero-line,
    .hero-location,
    .hero-tagline {
        animation: none !important;
    }

    .hero-line::before {
        animation: none !important;
    }
}

/* Alternative: Glitch effect (commented out - can be enabled)
.hero-center h1.glitch {
    position: relative;
}

.hero-center h1.glitch::before {
    content: 'BODEGA FC';
    position: absolute;
    top: 0;
    left: -2px;
    width: 100%;
    height: 100%;
    background: #D4622F;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    animation: glitch1 2s infinite;
}

.hero-center h1.glitch::after {
    content: 'BODEGA FC';
    position: absolute;
    top: 0;
    left: 2px;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    animation: glitch2 2s infinite;
}

@keyframes glitch1 {
    0%, 100% {
        left: -2px;
    }
    25% {
        left: 2px;
    }
    50% {
        left: -1px;
    }
    75% {
        left: 1px;
    }
}

@keyframes glitch2 {
    0%, 100% {
        left: 2px;
    }
    25% {
        left: -2px;
    }
    50% {
        left: 1px;
    }
    75% {
        left: -1px;
    }
}
*/