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

@layer base {
    html {
        scroll-behavior: smooth;
        font-size: 90%;
    }

    body {
        @apply bg-slate-50 text-slate-800 font-sans;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-header;
    }
}

@layer components {

    /* The Glass-Nav */
    .glass-nav {
        @apply fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-200;
    }

    /* Blueprint Grid Background */
    .bg-blueprint-grid {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    /* CAD-Wireframe Card Effect */
    .card-wireframe {
        @apply border border-slate-200 transition-all duration-300;
    }

    .card-wireframe:hover {
        @apply border-sky-500 shadow-lg ring-1 ring-sky-500/20;
    }

    /* Banner Animations */
    @keyframes slideBg {
        0% {
            transform: scale(1.1) translateX(0);
        }

        100% {
            transform: scale(1.1) translateX(-2%);
        }
    }

    @keyframes textSlideLeft {
        0% {
            transform: translateX(-50px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .carousel-slide img {
        transition: transform 10s ease-out;
    }

    .carousel-slide.active img {
        animation: slideBg 10s linear infinite alternate;
    }

    .carousel-slide .animate-text {
        opacity: 0;
        transition: all 0.8s ease-out;
    }

    .carousel-slide.active .animate-text {
        animation: textSlideLeft 1s ease-out forwards;
    }

    /* Stagger transitions for text elements */
    .carousel-slide.active .animate-text-1 {
        animation-delay: 0.2s;
    }

    .carousel-slide.active .animate-text-2 {
        animation-delay: 0.4s;
    }

    .carousel-slide.active .animate-text-3 {
        animation-delay: 0.6s;
    }

    /* Floating Animation for Images */
    @keyframes float {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-15px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
}