@import "tailwindcss";
@config "../../../tailwind.config.js";

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/google-fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/google-fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/google-fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../fonts/icons/material-symbols.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@layer components {
    body {
        background-color: #0A0A0A;
        color: #e5e2e1;
        font-family: 'Montserrat', sans-serif;
    }
    .bebas { font-family: 'Bebas Neue', cursive; }
    .desaturated-image {
        filter: grayscale(100%) contrast(120%);
        transition: filter 0.5s ease, transform 0.5s ease;
    }
    .desaturated-image:hover {
        filter: grayscale(0%) contrast(110%);
    }
    .metallic-glow {
        box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
        background: linear-gradient(45deg, #e9c176, #c5a059);
    }
    .glass-panel {
        background: rgba(19, 19, 19, 0.6);
        backdrop-filter: blur(20px);
    }
    .text-stroke-gold {
        -webkit-text-stroke: 1px rgba(233, 193, 118, 0.2);
        color: transparent;
    }
    .gold-gradient {
        background: linear-gradient(45deg, #e9c176, #c5a059);
    }
    .hero-gradient {
        background: linear-gradient(to right, #0A0A0A 15%, rgba(10, 10, 10, 0.4) 50%, transparent 100%);
    }
    .glass-overlay {
        background: linear-gradient(to top, #0A0A0A 0%, rgba(10, 10, 10, 0.8) 40%, transparent 100%);
    }
    .gold-glow:hover {
        box-shadow: 0 0 25px rgba(197, 160, 89, 0.2);
    }
    .text-stroke {
        -webkit-text-stroke: 1px rgba(233, 193, 118, 0.1);
        color: transparent
    }
    .bg-pattern {
        background-image: radial-gradient(#e9c1761a 1px, transparent 1px);
        background-size: 30px 30px;
    }
}