@font-face {
    font-family: 'CyGrotesk Key';
    src: url('../fonts/CyGroteskKey-Regular.woff2') format('woff2'),
        url('../fonts/CyGroteskKey-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CyGrotesk Key';
    src: url('../fonts/CyGroteskKey-Medium.woff2') format('woff2'),
        url('../fonts/CyGroteskKey-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CyGrotesk Key';
    src: url('../fonts/CyGroteskKey-Bold.woff2') format('woff2'),
        url('../fonts/CyGroteskKey-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #ffffff;
    color: #000000;
}

.hero-gradient {
    background: radial-gradient(ellipse 120% 80% at 50% 20%, rgba(0, 0, 0, 0.5) 0%, rgba(18, 10, 143, 1) 40%, rgba(0, 8, 224, 0.7) 60%, #ffffff 95%);
}

.hero-overlay {
    background: radial-gradient(ellipse 120% 80% at 50% 20%, #000000 0%, #1d2595 40%, #3a3aed 60%, transparent 95%);
    mix-blend-mode: soft-light;
}

/* UX Motion Utilities */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.is-revealed {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}