/* Custom Styles for Vintage Blade Barber Shop */

html {
    scroll-behavior: smooth;
}

/* Hero Background - Imagem com tema barbearia vintage */
.vintage-overlay {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&q=80&w=2070');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito parallax suave */
}

/* Animations - Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Transition Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-600 { transition-delay: 600ms; }

/* Navbar scroll effect - Película com Blur e Opacidade Progressiva */
#navbar {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-scrolled {
    background-color: rgba(10, 10, 10, 0.7); /* Película com opacidade */
    backdrop-filter: blur(20px) saturate(160%); /* Efeito de vidro (blur) */
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(217, 119, 6, 0.2); /* Linha de separação refinada */
    box-shadow: 0 10px 40px -15px rgba(0,0,0,0.9); /* Sombra para profundidade */
}

/* Refinamento dos Service Cards - Animação mais suave e premium */
.service-card {
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    border-color: rgba(217, 119, 6, 0.4);
    transform: translateY(-12px);
    background-color: rgba(20, 20, 20, 0.7);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 
                0 0 20px -5px rgba(217, 119, 6, 0.15);
}

/* Ícones nos cards - Movimento sutil */
.service-icon {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card:hover .service-icon {
    transform: scale(1.15) rotate(5deg);
    background-color: #d97706 !important;
    color: #000 !important;
}

.service-card:hover .service-icon svg {
    color: #000 !important;
}

/* Social Links Footer */
.social-link {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #a3a3a3;
}

.social-link:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #000;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px -5px rgba(217, 119, 6, 0.3);
}

/* Logo Box Animation */
.logo-box {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.4s ease;
}

.logo-box:hover {
    transform: rotate(45deg) scale(1.1);
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.4);
}

/* CTA Button refinement */
.cta-button {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -10px rgba(217, 119, 6, 0.5);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .vintage-overlay {
        background-attachment: scroll;
    }
    .nav-scrolled {
        backdrop-filter: blur(10px);
    }
}