@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html { scroll-behavior: smooth; }

    ::selection {
        background-color: #fbcfe8;
        color: #500724;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #ec4899, #a855f7);
        border-radius: 10px;
    }

    body {
        overflow-x: hidden;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-gradient-to-r from-brand-500 to-brand-600
               text-white font-bold rounded-full transition-all duration-300 shadow-lg shadow-brand-500/25
               hover:shadow-xl hover:shadow-brand-500/35 hover:-translate-y-0.5 active:scale-[0.97]
               relative overflow-hidden;
    }
    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    .btn-primary:hover::before { left: 100%; }

    .btn-outline {
        @apply inline-flex items-center justify-center gap-2 px-8 py-3.5 border-2 border-brand-300 text-brand-600
               font-bold rounded-full hover:bg-brand-500 hover:text-white hover:border-brand-500
               transition-all duration-300 hover:-translate-y-0.5;
    }

    .btn-gold {
        @apply inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-gradient-to-r from-rosegold-500 to-rosegold-400
               text-white font-bold rounded-full hover:from-rosegold-600 hover:to-rosegold-500 transition-all duration-300
               shadow-lg shadow-rosegold-500/25 hover:shadow-xl hover:shadow-rosegold-500/30 hover:-translate-y-0.5;
    }

    .btn-lavender {
        @apply inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-gradient-to-r from-lavender-500 to-brand-500
               text-white font-bold rounded-full hover:from-lavender-600 hover:to-brand-600 transition-all duration-300
               shadow-lg shadow-lavender-500/20 hover:shadow-xl hover:-translate-y-0.5;
    }

    .card-glass {
        @apply bg-white/80 backdrop-blur-sm border border-white/50 rounded-2xl shadow-sm;
    }

    .card-hover {
        @apply bg-white rounded-3xl border border-brand-100/60 shadow-sm
               hover:shadow-2xl hover:shadow-brand-500/10 hover:-translate-y-1
               transition-all duration-500 overflow-hidden relative;
    }
    .card-hover::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ec4899, #a855f7, #ec4899);
        transform: scaleX(0);
        transition: transform 0.5s;
    }
    .card-hover:hover::before { transform: scaleX(1); }

    .section-heading {
        @apply text-3xl md:text-5xl font-display font-bold text-brand-950 leading-tight;
    }

    .section-subheading {
        @apply text-lg text-brand-400 mt-3 max-w-2xl mx-auto leading-relaxed;
    }

    .section-divider {
        @apply w-20 h-1 bg-gradient-to-r from-brand-400 via-lavender-400 to-brand-400 rounded-full mx-auto mt-5;
    }

    .input-luxury {
        @apply w-full border border-brand-200 bg-white rounded-xl px-4 py-3.5 text-brand-900 placeholder-brand-300
               focus:ring-2 focus:ring-brand-400 focus:border-brand-400 transition-all duration-200
               hover:border-brand-300;
    }

    .badge-status {
        @apply px-3 py-1 rounded-full text-xs font-bold tracking-wide uppercase;
    }

    .sparkle {
        position: absolute;
        width: 4px; height: 4px;
        border-radius: 50%;
        background: white;
        animation: sparkle 3s ease-in-out infinite;
    }
}

@layer utilities {
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-500 via-lavender-500 to-brand-400;
    }

    .text-gradient-gold {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-rosegold-400 via-rosegold-500 to-rosegold-600;
    }

    .animate-in {
        animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }

    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 25s linear infinite;
}