@import "tailwindcss";

@layer base {
    h1 {
        font-family: "VT323";
    }

    body {
        font-family: "Roboto Mono" serif;
        background-color: #030712;
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
            radial-gradient(#3c3c3c 1px, transparent 0);
        background-size: 20px 20px;
        color: white;
    }


}

@layer components {
    .card {
        @apply basis-full lg:basis-[calc(33.333%-1rem)] border border-gray-700 p-4 bg-zinc-800/25 backdrop-blur-3xl rounded-sm hover:border-zinc-500/50 hover:scale-110 transition;
    }

    /* Reusable project card styles used in HTML via the `project-card` class */
    .project-card {
        @apply w-full max-w-sm bg-gray-900/80 backdrop-blur-xl border border-gray-300/10 rounded-md p-5 transition-transform transform hover:-translate-y-1 hover:border-white/10;
        /* smoother transform and will-change for performant animation */
        will-change: transform;
        transition-property: transform, box-shadow, border-color;
        transition-duration: 220ms;
        transition-timing-function: cubic-bezier(.2,.8,.2,1);
    }

    /* stronger hover/active effects */
    .project-card:hover{
        @apply scale-105 shadow-2xl ring-1 ring-white/5;
    }

    /* subtle entrance animation for cards */
    @keyframes card-enter {
        from { opacity: 0; transform: translateY(10px) scale(.995); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .project-card { animation: card-enter .36s ease both; }

    /* Featured modifier for the large card */
    .project-card--featured {
        @apply w-full bg-gray-900/90 md:border-l-4 md:border-l-gray-700/40 p-6 rounded-md;
        box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    }
    

    /* Reusable SVG/icon styles */
    .svg-icon {
        @apply w-20 h-20;
    }

    .svg-progress {
        /* color applied via currentColor on the path */
        @apply text-gray-300 transition-all duration-300 ease-out;
    }

    /* Reusable nav link and label */
    .nav-link {
        @apply flex items-center gap-2 text-gray-300 px-3 py-2 rounded-full transition-colors duration-200 ease-out hover:bg-gray-700/60 focus:outline-none focus:ring-2 focus:ring-gray-500/30;
    }

    .nav-label {
        /* base for the hidden-to-revealed label; keep group-hover reveal in HTML */
        @apply overflow-hidden max-w-0 transition-all duration-200 ease-out opacity-0 whitespace-nowrap text-sm;
    }

    /* Reusable icon button (used in hero/footer) */
    .icon-btn {
        @apply inline-flex items-center justify-center p-2 rounded-full bg-gray-800/20 text-gray-300 hover:bg-gray-700/50 hover:text-white transition-colors duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-gray-500/30;
    }

    /* Reusable chip/tag styles */
    .chip {
        @apply inline-flex items-center gap-2 px-2 py-1 rounded text-xs bg-gray-800/30 text-gray-300;
    }

    .chip--hover {
        @apply hover:bg-gray-700/60 hover:text-white transition-colors duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-gray-500/30;
    }

    .card .cover {
        @apply w-fit mb-4 rounded-sm h-50;
    }
}