@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

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

:root {
    --iron-black: #080808;
    --grit-gray: #121212;
    --power-red: #D00000;
    --heavy-gray: #1a1a1a;
    --brushed-silver: #A0A0A0;
    --pure-white: #ffffff;
}

@layer base {
    body {
        @apply font-body antialiased text-brushed-silver bg-[#080808] selection:bg-red-600/30 selection:text-white;
        scroll-behavior: smooth;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-heading font-black tracking-tight leading-none uppercase text-white;
    }

    h1 {
        @apply text-7xl md:text-[10rem] mb-8 border-b-8 border-red-600 pb-4 inline-block;
    }

    h2 {
        @apply text-5xl md:text-8xl mb-6;
    }

    h3 {
        @apply text-4xl md:text-6xl mb-4;
    }

    h4 {
        @apply text-3xl md:text-4xl mb-3;
    }
}

@layer components {
    .font-heading {
        font-family: 'Oswald', sans-serif;
    }

    .font-body {
        font-family: 'Roboto Condensed', sans-serif;
    }

    .iron-btn {
        @apply relative inline-block bg-[#D00000] text-white px-10 py-4 font-heading font-black uppercase tracking-widest transition-all duration-300 hover:bg-white hover:text-black hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(208, 0, 0, 0.3)];
    }

    .iron-btn-outline {
        @apply relative inline-block border-4 border-white text-white px-10 py-4 font-heading font-black uppercase tracking-widest transition-all duration-300 hover:bg-white hover:text-black hover:scale-105 active:scale-95;
    }

    .iron-card {
        @apply bg-[#121212] border-l-4 border-transparent p-12 transition-all duration-500 hover:border-red-600 hover:bg-[#1a1a1a] shadow-xl;
    }

    .iron-grid-item {
        @apply bg-[#121212] p-8 border border-white/5 hover:border-red-600/50 transition-all duration-300;
    }

    .industrial-link {
        @apply text-white/50 font-heading font-bold uppercase tracking-widest text-sm hover:text-red-600 transition-all duration-300 relative py-2;
    }

    .text-power {
        @apply text-red-600 font-black uppercase;
    }

    .bg-heavy {
        @apply bg-[#121212];
    }
}

/* Custom Scrollbar - Macho Edition */
::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    @apply bg-black;
}

::-webkit-scrollbar-thumb {
    @apply bg-red-600 hover:bg-red-700 transition-all;
}

/* Macho Animations */
@keyframes vibration {
    0% {
        transform: translate(0);
    }

    10% {
        transform: translate(-1px, 1px);
    }

    20% {
        transform: translate(-1px, -1px);
    }

    30% {
        transform: translate(1px, 1px);
    }

    40% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(-1px, 1px);
    }

    60% {
        transform: translate(-1px, -1px);
    }

    70% {
        transform: translate(1px, 1px);
    }

    80% {
        transform: translate(1px, -1px);
    }

    90% {
        transform: translate(-1px, 1px);
    }

    100% {
        transform: translate(0);
    }
}

.animate-vibration:hover {
    animation: vibration 0.2s linear infinite;
}

@keyframes power-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.animate-power-pulse {
    animation: power-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}