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

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Regular.woff2') format('woff2'),
        url('/assets/font/GeistMono-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Bold.woff2') format('woff2'),
        url('/assets/font/GeistMono-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Light.woff2') format('woff2'),
        url('/assets/font/GeistMono-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Medium.woff2') format('woff2'),
        url('/assets/font/GeistMono-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-SemiBold.woff2') format('woff2'),
        url('/assets/font/GeistMono-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Thin.woff2') format('woff2'),
        url('/assets/font/GeistMono-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-UltraLight.woff2') format('woff2'),
        url('/assets/font/GeistMono-UltraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-Black.woff2') format('woff2'),
        url('/assets/font/GeistMono-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'GeistMono';
    src: url('/assets/font/GeistMono-UltraBlack.woff2') format('woff2'),
        url('/assets/font/GeistMono-UltraBlack.otf') format('opentype');
    font-weight: 950;
    font-style: normal;
}

/* Help me import Sentient font */
@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Regular.woff2') format('woff2'),
        url('/assets/font/Sentient-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Bold.woff2') format('woff2'),
        url('/assets/font/Sentient-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Light.woff2') format('woff2'),
        url('/assets/font/Sentient-Light.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Medium.woff2') format('woff2'),
        url('/assets/font/Sentient-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-SemiBold.woff2') format('woff2'),
        url('/assets/font/Sentient-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Thin.woff2') format('woff2'),
        url('/assets/font/Sentient-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-UltraLight.woff2') format('woff2'),
        url('/assets/font/Sentient-UltraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-Black.woff2') format('woff2'),
        url('/assets/font/Sentient-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Sentient';
    src: url('/assets/font/Sentient-UltraBlack.woff2') format('woff2'),
        url('/assets/font/Sentient-UltraBlack.otf') format('opentype');
    font-weight: 950;
    font-style: normal;
}




.Sentient {
    font-family: 'Sentient', sans-serif;
}

html {
    width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'GeistMono', monospace;
    width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

main {
    width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;

}

section {
    width: calc(100vw - 32px);
}

.header-mobile {
    background-color: #FEFAF0;
}

.menu-mobile {
    position: absolute;
    top: 80px;
    left: 0px;
    width: 100vw;
    background-color: #FEFAF0;
    height: auto;
    padding: 20px 0px 40px 0px;

}



.menu-mobile li {
    position: relative;
    margin-left: 0px !important;
}

.menu-mobile li:last-child {
    margin-top: 40px;
}

.menu-mobile a {
    display: inline-block;
    height: 60px;
    width: 100%;
    line-height: 60px;
    padding-left: 24px;
}

a {
    transition: all 120ms ease;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* 设置背景层的透明度 */
    z-index: 1;
    /* 确保背景层位于其他元素之上 */
    display: none;
    /* 初始状态下隐藏背景层 */
}

/* Keyframes for the letter animation */
@keyframes letterAnimation {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for the fade out animation */
@keyframes fadeoutAnimation {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Keyframes for the fade in animation, adjust if needed based on your original keyframes */
@keyframes fadeinAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Class applied to each letter for animation */
.letter {
    display: inline-block;
    opacity: 0;
    animation: letterAnimation 0.8s forwards;
}

.letter-remove {
    animation: fadeoutAnimation 0.5s forwards;
}

/* Class applied to new letters for animation */
.SentientAnimatedTextNew {
    font-size: 96px;
}

.SentientAnimatedText {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.SentientAnimatedTextNew {
    display: none;
    opacity: 0;
    transition: opacity 2s ease;
}

/* when screen size smaller than 640px */
@media (max-width: 640px) {

    .SentientAnimatedTextNew {
        font-size: 36px;
    }
}



/* Class to hide elements initially */
.hide {
    display: none;
}


/* #orange-pattern-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    pointer-events: none;
} */

#grey-pattern svg,
#orange-pattern svg {
    opacity: 0.5;
    /* blury */
    filter: blur(0.2px);
}