@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --dynamic-crimson: #9B001F;
    --dynamic-gold: #D4AF37;
    --dynamic-pearl: #F8F8F8;
    --dynamic-charcoal: #2D2D2D;
    --dynamic-accent: #FF3B3F;

    --primary: var(--dynamic-crimson);
    --secondary: var(--dynamic-charcoal);
    --bg-main: var(--dynamic-pearl);
    --text-main: #1A1A1A;
    --text-muted: #666666;

    --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-main);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: 'Syne', sans-serif;
}

.heading-dynamic {
    @apply font-extrabold tracking-tight;
}

.glass-dynamic {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-dynamic {
    @apply px-10 py-4 rounded-full font-bold uppercase tracking-wider transition-all duration-500 transform active:scale-95;
}

.btn-dynamic-primary {
    @apply btn-dynamic bg-gradient-to-r from-[#9B001F] to-[#FF3B3F] text-white hover:shadow-[0_10px_30px_rgba(155, 0, 31, 0.4)] hover:-translate-y-1;
}

.btn-dynamic-outline {
    @apply btn-dynamic border-2 border-[#9B001F] text-[#9B001F] hover:bg-[#9B001F] hover:text-white;
}

.dynamic-card {
    @apply bg-white rounded-[2rem] p-8 shadow-2xl transition-all duration-500 hover:-translate-y-3;
}

/* Fluid entrance animations */
@keyframes fluidReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fluid {
    animation: fluidReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.section-padding {
    @apply py-24 px-6 md:px-12 lg:px-24;
}