/* General Reset */
body {
    margin: 0;
    font-family:Arial, sans-serif, Netflix Sans;
    background-color: #141414;
    color: #fff;
    height: 100vh; /* Asegura que el fondo cubra toda la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 20) 0%, rgba(20, 20, 20, 1) 10%) no-repeat;
}



/* Profile Screen */
#profile-screen {
    text-align: center;
}

.profiles {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.profile {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile img {
    width: 180px;
    height: 180px;
    border-radius: 3%; /* Cuadrado con esquinas redondeadas */
    object-fit: cover;
    border: 3px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.profile:hover img {
    transform: scale(1.1); /* Aumenta el tamaño al pasar el ratón */
    border-color: #B40306; /* Borde rojo */
    box-shadow: 0 8px 15px rgba(101, 0, 0, 0.5); /* Sombra */
}

.profile p {
    margin-top: 10px;
    font-size: 1rem;
}


/* Animation Container */
.intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #141414;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
@keyframes logo-animation {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 2;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(3.5);
    }
}

/* Animación específica para el texto "Meme" */
@keyframes meme-color-animation {
    0%, 80% {
        color: #ffffff; /* Mantiene el color original */
    }
    100% {
        color: #B40306; /* Cambia a rojo antes del final */
    }
}

.logo {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 3px;
    opacity: 0;
    transform: perspective(300px) rotateX(15deg) scale(0.8);
    animation: logo-animation 3s ease-out forwards;
    display: inline-block;
    white-space: nowrap; /* evita saltos de línea */
}

.logo span {
    display: inline-block;
    margin: 0; /* elimina márgenes entre spans */
}

.logo .first-word {
    color: #B40306;
    animation: first-color-animation 3s ease-out forwards;
}

.logo .second-word {
    color: #ffffff;
    animation: second-color-animation 3s ease-out forwards;
}

.logo .third-word {
    color: #B40306;
    animation: third-color-animation 3s ease-out forwards;
}



/* Hidden Profiles Initially */
.hidden {
    display: none;
}


/* Estilo para la sección de redes sociales */
.social-icons {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 1000;
}

.social-icons a {
    display: inline-block;
    text-decoration: none;
}

.social-icons img {
    width: 32px; /* Tamaño del ícono */
    height: 32px;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: grayscale(100%); /* Efecto inicial */
}

.social-icons img:hover {
    transform: scale(1.2); /* Efecto de zoom */
    opacity: 1;
    filter: grayscale(0%); /* Mostrar colores en hover */
}


.profile p {
    color: #888; /* Color gris inicial */
    transition: color 0.3s ease-in-out; /* Transición suave */
}

.profile:hover p {
    color: #fff; /* Cambia a blanco cuando pasas el cursor */
}



/* Pantalla de carga al estilo Netflix */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #141414; /* Fondo oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Contenedor del logo y el círculo */
.loading-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logo del perfil seleccionado */
.loading-logo {
    width: 50px; /* Tamaño deseado */
    height: 50px;
    border-radius: 4px;
    object-fit: cover;  /* Mantiene la proporción de la imagen */
    z-index: 2; /* Encima del círculo */
}
/* Animación de círculo rojo giratorio */
.nfLoader {
    position: absolute;
    width: 130px;
    height: 130px;
}

.nfLoader:after {
    content: "";
    background-image: url(https://assets.nflxext.com/en_us/pages/wiplayer/site-spinner.png); /* Imagen del círculo */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    width: inherit;
    height: inherit;
    animation: nfLoader-spin 1.8s linear infinite;
}

/* Animación de rotación */
@keyframes nfLoader-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Ocultar pantalla de carga por defecto */
.hidden {
    display: none;
}


.bottom-center-image {
    position: fixed;        /* Fija la posición respecto a la ventana */
    bottom: -10 0px;          /* Distancia desde el fondo */
    left: 0%;            /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajuste preciso del centrado */
    z-index: 1000;        /* Asegura que esté sobre otros elementos */
    text-align: center;   /* Centra la imagen dentro del contenedor */
}

#bottom-image {
    width: 200px;         /* Ancho inicial - ajustable */
    height: auto;         /* Mantiene proporciones */
    max-width: 100%;      /* Evita que se desborde en pantallas pequeñas */
    object-fit: contain;  /* Mantiene la proporción de la imagen */
    opacity: 0.9;         /* Opacidad inicial - ajustable */
    transition: all 0.3s ease; /* Suaviza los cambios */
}

/* Opcional: efecto hover */
#bottom-image:hover {
    opacity: 1;           /* Aumenta opacidad al pasar el mouse */
    transform: scale(1.05); /* Ligeramente más grande */
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    #bottom-image {
        width: 150px;     /* Tamaño reducido en móviles */
        bottom: 10px;     /* Menos espacio en móviles */
    }
}