@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-bridal-ivory { background-color: #FDFBF7; }
    .bg-bridal-champagne { background-color: #E8DCC4; }
    .bg-bridal-rose { background-color: #F3EAE8; }
    .bg-bridal-dark { background-color: #2C2C2C; }
    
    .text-bridal-champagne { color: #C5A880; }
    .text-bridal-dark { color: #2C2C2C; }
    .text-bridal-muted { color: #7A7A7A; }
    
    .border-bridal-champagne { border-color: #C5A880; }
    
    .font-cormorant { font-family: 'Cormorant Garamond', serif; }
    .font-jost { font-family: 'Jost', sans-serif; }
    
    .btn-bridal {
        @apply inline-flex items-center justify-center bg-[#2C2C2C] text-white font-jost text-xs uppercase tracking-[0.2em] py-4 px-10 hover:bg-[#C5A880] transition-colors duration-500;
    }
    
    .btn-bridal-outline {
        @apply inline-flex items-center justify-center border border-[#2C2C2C] text-[#2C2C2C] font-jost text-xs uppercase tracking-[0.2em] py-4 px-10 hover:bg-[#2C2C2C] hover:text-white transition-colors duration-500;
    }
    
    .nav-link {
        @apply text-[#2C2C2C] hover:text-[#C5A880] font-jost text-xs uppercase tracking-[0.15em] transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-2 left-1/2 w-0 h-[1px] bg-[#C5A880] transition-all duration-300 -translate-x-1/2;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#C5A880];
    }
}

/* Custom Animations for Elegance */
@keyframes slowFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slow-fade {
    animation: slowFade 1.5s ease-out forwards;
}

/* Image reveal effect */
.reveal-wrapper {
    position: relative;
    overflow: hidden;
}

.reveal-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #FDFBF7;
    transition: width 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-wrapper.aos-animate::after {
    width: 0;
}