/* === AUDIO CONTROLS === */
.audio-controls {
    position: fixed;
    top: 85px; /* under "La Villa Mahana" */
    left: calc(50vw - 512px + 20px); /* align with title's left edge */
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.audio-controls.visible { opacity: 1; }

.audio-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.7;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-btn:hover { opacity: 1; }

.volume-icon {
    width: 24px;
    height: 24px;
    fill: #666;
    transform-origin: center;
    animation: subtle-float 2s ease-in-out infinite;
}

.volume-wave-1 { transform-origin: center; }

@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* When audio is playing, make it pulse a bit more */
.audio-btn.playing .volume-icon {
    animation: volume-pulse 1s ease-in-out infinite;
}

@keyframes volume-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.splash-location.moving {
    position: fixed;
    top: 85px; /* Keep it centered below the title */
    left: calc(50vw - 512px + 20px); /* Align with title's left edge */
    transform: translate(0, 0);
    font-size: 1rem;
    text-align: center; /* Center alignment */
    margin: 0;
    z-index: 1001;
    width: auto;
    max-width: none;
    opacity: 1 !important; /* Force visibility */
}

/* Style for credits inside slider */
.slider-container .credits {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: rgba(102,102,102,0.7);
    font-size: 10px;
    text-align: right;
    cursor: pointer;
    transition: var(--transition);
}

.slider-container .credits:hover {
    color: #666;
}