/* =============================================================
   public/assets/css/custom.css
   Estilos personalizados complementarios (Tailwind + extras)
   ============================================================= */

/* ── Tipografías y animaciones base ── */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Transición de secciones ── */
#invitation-main {
    transition: opacity 0.7s ease-in-out;
}

#cover-screen {
    transition: opacity 0.7s ease-in-out;
}

/* ── Scrollbar personalizada (pantallas no móviles) ── */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #1a1a1a; }
    ::-webkit-scrollbar-thumb { background: #C9A96E; border-radius: 3px; }
}

/* ── Ornamento separador dorado ── */
.gold-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #C9A96E;
}
.gold-divider::before,
.gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #C9A96E;
    opacity: 0.4;
}

/* ── Player de música flotante ── */
#music-player {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#music-player:hover {
    transform: translateY(-2px);
}

/* ── Inputs de archivo estilizados ── */
input[type="file"]::file-selector-button {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* ── Animación de entrada para secciones ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ── Placeholder para imágenes de galería vacías ── */
.gallery-placeholder {
    background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A96E;
    opacity: 0.4;
}

/* ── Responsividad del reproductor de música ── */
@media (max-width: 640px) {
    #music-player {
        bottom: 1rem;
        right: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

/* ── Evitar selección de texto en botones decorativos ── */
button, a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ── Focus visible accesible ── */
:focus-visible {
    outline: 2px solid #C9A96E;
    outline-offset: 2px;
}