/* ===================================================================
   ANIMACIONES Y ESTILOS PARA LOGO DE LA BARBERÍA
   ===================================================================
   Efecto 3D con drop-shadow múltiple + perspective.
   El logo PNG debe tener fondo transparente para mejor resultado.
================================================================== */

/* Entrada suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flotación 3D — sube y baja manteniendo la perspectiva */
@keyframes logo-float-3d {
    0%, 100% {
        transform: perspective(900px) rotateX(10deg) rotateY(-8deg) translateY(0px) scale(1);
        filter:
            drop-shadow(2px 2px 0 rgba(0,0,0,.95))
            drop-shadow(4px 4px 0 rgba(0,0,0,.80))
            drop-shadow(6px 6px 0 rgba(0,0,0,.60))
            drop-shadow(8px 8px 0 rgba(0,0,0,.35))
            drop-shadow(0 24px 32px rgba(0,0,0,.55))
            drop-shadow(0  0  18px rgba(234,179,8,.15));
    }
    50% {
        transform: perspective(900px) rotateX(10deg) rotateY(-8deg) translateY(-14px) scale(1.02);
        filter:
            drop-shadow(2px 2px 0 rgba(0,0,0,.95))
            drop-shadow(4px 4px 0 rgba(0,0,0,.75))
            drop-shadow(6px 6px 0 rgba(0,0,0,.50))
            drop-shadow(8px 8px 0 rgba(0,0,0,.30))
            drop-shadow(0 36px 40px rgba(0,0,0,.40))
            drop-shadow(0  0  28px rgba(234,179,8,.25));
    }
}

/* Glow dorado al hacer hover */
@keyframes logo-hover-glow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(234,179,8,.5)) drop-shadow(0 0 30px rgba(234,179,8,.25)); }
    50%       { filter: drop-shadow(0 0 22px rgba(234,179,8,.75)) drop-shadow(0 0 45px rgba(234,179,8,.35)); }
}

/* ===== LOGO CENTRADO EN LANDING (3D grande) ===== */
.logo-centrado-3d {
    max-height: 22vh;
    width: auto;
    max-width: min(200px, 55vw);
    display: block;
    margin: 0 auto;
    animation: logo-float-3d 4s ease-in-out infinite;
    cursor: pointer;
    transition: animation 0.3s ease;
}

.logo-centrado-3d:hover {
    animation: logo-hover-glow 1.5s ease-in-out infinite;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1.07) !important;
}

/* ===== LOGO ESTÁNDAR (para usar en otros lugares) ===== */
.logo-barberia {
    max-width: 200px;
    max-height: 80px;
    height: auto;
    width: auto;
    display: block;
    animation: fadeIn 0.6s ease-in;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-barberia:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
    cursor: pointer;
}

/* ===== LOGO EN NAVBAR ===== */
.navbar-logo {
    max-height: 55px;
    height: auto;
    width: auto;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.navbar-logo:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

@media (max-width: 640px) {
    .navbar-logo { max-height: 65px; }
}

/* ===== LOGO CENTRADO LEGACY (sin 3D) ===== */
.logo-centrado {
    max-width: 250px;
    margin: 0 auto;
    display: block;
    animation: fadeIn 1s ease-in;
}

/* ===== BRAND CONTAINER ===== */
.brand-container {
    display: flex;
    align-items: center;
    gap: 15px;
    animation: fadeIn 0.8s ease-in;
    text-decoration: none;
    transition: all 0.3s ease;
}
.brand-container .logo-barberia { animation: none; }

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    animation: fadeIn 1s ease-in;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .logo-barberia { max-width: 180px; max-height: 70px; }
    .brand-name { font-size: 1.2rem; }
    /* logo-centrado-3d: max-height handles responsive */
}
@media (max-width: 480px) {
    .logo-barberia { max-width: 150px; max-height: 60px; }
    /* logo-centrado-3d: max-height handles responsive */
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
    .logo-barberia, .navbar-logo, .logo-centrado,
    .logo-centrado-3d, .brand-container, .brand-name {
        animation: none !important;
        transform: none !important;
    }
}

/* ===== MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
    .brand-name { color: #f0f0f0; }
    .logo-barberia:hover, .navbar-logo:hover {
        filter: drop-shadow(0 4px 8px rgba(255,255,255,.15));
    }
}