/* ========== 1. FONT-FACE DEFINITIONS ========== */
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('fonts/AzeretMono-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

@layer base {
    html {
        scroll-behavior: smooth;
        background-color: #0a0a0a;
        color: #f0f0f0;
    }
    body {
        font-family: 'Azeret Mono', monospace;
        background-color: #0a0a0a;
        color: #f0f0f0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }
    ::selection {
        background-color: #D4AF37;
        color: #0a0a0a;
    }
}

@layer utilities {
    .clip-path-organic {
        clip-path: polygon(2% 2%, 98% 0%, 100% 98%, 0% 100%);
    }
}

/* Custom Micro-animations */
.link-underline {
    position: relative;
}
.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; width: 0; height: 1px;
    background: currentColor;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.link-underline:hover::after {
    width: 100%;
}

.magnetic-btn::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 1px;
    background: #D4AF37;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.magnetic-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.hover-trigger:hover .arrow-icon-hover {
    transform: translate(10px, -10px);
}

.feature-overlay {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(20px);
}

.card-drawer {
    transform: translateY(calc(100% - 80px));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .card-drawer {
    transform: translateY(0);
}
.group:hover .feature-overlay {
    transform: translateY(0);
}
.feature-bg {
    filter: grayscale(100%) opacity(0.2);
    transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .feature-bg {
    filter: grayscale(0%) opacity(0.6);
    transform: scale(1.05);
}