/* --- Custom Base Styles --- */
.brand-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

html {
    scroll-behavior: smooth;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* --- Scroll-Triggered Animation Styles --- */
.animated-element {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up {
    transform: translateY(30px);
}

.fade-in {
    transform: scale(0.95);
}

.fade-left {
    transform: translateX(-30px);
}

.fade-right {
    transform: translateX(30px);
}

.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Delay Utilities for Staggered Animations --- */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --- Subtle Lift on Hover for Cards --- */
.card-hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.card-hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- Portfolio Item Filtering Animation --- */
.portfolio-item {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.portfolio-item.hidden-item {
    transform: scale(0.9);
    opacity: 0;
    display: none;
}

/* --- Pricing Modal Animation Keyframes & Styles --- */
@keyframes fadeInBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(60px) scale(0.95);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

/* --- Animate modal background --- */
#pricingModal.show {
    animation: fadeInBg 0.4s ease forwards;
}

/* --- Animate pricing box --- */
#pricingModal.show .pricing-box {
    animation: slideUp 0.5s ease-out forwards;
}

/* --- Hover effects on pricing cards --- */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(168, 85, 247, 0.4); /* soft purple glow */
}