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

@layer utilities {
    .glass-header {
        @apply bg-white/80 backdrop-blur-lg border-b border-[#2b343d]/5 shadow-sm;
    }

    .shiny-btn {
        @apply relative overflow-hidden bg-brand-800 text-white rounded-xl px-8 py-4 font-semibold shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-0.5;
    }
    .shiny-btn::before {
        content: '';
        @apply absolute top-0 left-[-100%] w-[50%] h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] transition-all duration-700;
    }
    .shiny-btn:hover::before {
        @apply left-[200%];
    }

    /* Spotlight Card Effect */
    .spotlight-card {
        @apply relative rounded-3xl bg-white/60 backdrop-blur-sm border border-[#2b343d]/10 p-8 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-[#2b343d]/20;
    }
    .spotlight-card::before {
        content: "";
        @apply absolute inset-0 opacity-0 transition-opacity duration-500 pointer-events-none -z-10;
        background-image: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 230, 163, 0.1), transparent 40%);
    }
    .spotlight-card:hover::before {
        @apply opacity-100;
    }

    .mesh-bg {
        background-color: #fefce8;
        background-image:
            radial-gradient(at 40% 20%, hsla(54,90%,75%,0.15) 0px, transparent 50%),
            radial-gradient(at 80% 0%, hsla(54,85%,70%,0.1) 0px, transparent 50%);
    }
}

@keyframes textShine {
    to { background-position: 200% center; }
}

/* Remove blue highlight on touch devices */
@layer base {
    * {
        -webkit-tap-highlight-color: transparent;
    }
}