/* Estilos de fondo de fútbol - Degradado visible */
html body, body {
    background: linear-gradient(135deg, #e6e6e6 0%, #b0b0b0 100%) !important;
    position: relative !important;
    background-attachment: fixed !important;
    z-index: 0 !important;
    animation: fadeIn 1s ease-in-out;
}

/* Contenedor principal con animación */
.page-animation-container {
    animation: slideUp 0.8s ease-out;
    transform-origin: center bottom;
}

/* Animación de entrada */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animación de deslizamiento hacia arriba */
@keyframes slideUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animación para las líneas del campo */
@keyframes drawLines {
    0% {
        opacity: 0;
        background-size: 0% 0%;
    }
    100% {
        opacity: 0.3;
        background-size: 100% 100%;
    }
}

/* Animación para el césped */
@keyframes growGrass {
    0% {
        height: 0;
    }
    100% {
        height: 10px;
    }
}

/* Líneas de campo de fútbol */
html body:before, body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Línea central horizontal */
        linear-gradient(to right, transparent 48%, rgba(255,255,255,0.7) 48%, rgba(255,255,255,0.7) 52%, transparent 52%),
        /* Línea central vertical */
        linear-gradient(to bottom, transparent 48%, rgba(255,255,255,0.7) 48%, rgba(255,255,255,0.7) 52%, transparent 52%),
        /* Círculo central */
        radial-gradient(circle at center, transparent 20%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.7) 21%, transparent 21%),
        /* Área grande izquierda */
        linear-gradient(to right, transparent 10%, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0.7) 11%, transparent 11%),
        linear-gradient(to right, transparent 30%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.7) 31%, transparent 31%),
        /* Área grande derecha */
        linear-gradient(to right, transparent 70%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.7) 71%, transparent 71%),
        linear-gradient(to right, transparent 90%, rgba(255,255,255,0.7) 90%, rgba(255,255,255,0.7) 91%, transparent 91%);
    background-size: 100% 100%;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    animation: drawLines 1.5s ease-in-out;
}

/* Borde inferior verde - césped */
html body:after, body:after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(
        90deg,
        #4CAF50,
        #4CAF50 20px,
        #388E3C 20px,
        #388E3C 40px
    );
    z-index: 9999;
    animation: growGrass 0.8s ease-out 0.5s both;
}

/* Animaciones para elementos dentro de la página */
.hero {
    animation: fadeIn 1.2s ease-in-out 0.3s both;
}

.tournament-selection {
    animation: fadeIn 1.2s ease-in-out 0.6s both;
}

.category-selection {
    animation: fadeIn 1.2s ease-in-out 0.9s both;
}

/* Animación para los botones */
.btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}