/* --- Estilos para el Anillo de Boda Flotante --- */

.floating-ring {
    /* Posicionamiento y capa superior */
    position: fixed;
    bottom: 25px; 
    right: 25px; 
    z-index: 2000; 
    cursor: pointer;
    
    /* Dimensiones y base */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    /* Fondo para contrastar */
    background-color: rgba(13, 26, 38, 0.9); /* #0d1a26 con transparencia */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    
    /* Contenedor del ícono */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

#ring-container {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Borde interior que actúa como "Anillo" */
    border: 2px solid #b0c4de; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b0c4de; 
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Estado de Reproducción */
.is-playing #ring-container {
    border-color: #a87f5d; /* Dorado sutil al reproducir */
    color: #a87f5d;
    animation: rotate 8s linear infinite; /* Animación de giro sutil */
}

/* Animación de giro para simular un disco o una joya */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Efecto al pasar el mouse */
.floating-ring:hover {
    transform: scale(1.05);
}