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

@font-face {
    font-family: 'Smiley Sans';
    src: url('./SmileySans-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --background: #000000;
    --foreground: #ffffff;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    overflow-x: hidden;
    font-family: 'Smiley Sans', ui-sans-serif, system-ui, sans-serif;
}

/* 统一字体平滑 */
body {
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
}

/* 玻璃拟态卡片背景遮罩特效 */
.unicorn-mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12%, black 88%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12%, black 88%, rgba(0, 0, 0, 0) 100%);
}

/* 玻璃拟态面板 */
.glass-panel {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* 机械按钮特效 */
.btn-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.btn-wrapper .btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    width: 100%;
    height: 100%;
}

.btn-wrapper:hover .btn {
    background-color: #ffffff;
    color: #000;
    transform: scale(1.02);
}

.btn-wrapper:active .btn {
    transform: scale(0.98);
}

/* 按钮四周的线条动画 */
.btn-wrapper .line {
    position: absolute;
    transition: all .3s ease-in-out;
    background-color: rgba(255, 255, 255, 0.5);
}

.btn-wrapper:hover .line {
    background-color: #fff;
}

.btn-wrapper .line.horizontal {
    height: 1px;
    width: 100%;
}

.btn-wrapper .line.vertical {
    width: 1px;
    height: 100%;
}

.btn-wrapper .line.top {
    top: -4px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.btn-wrapper:hover .line.top {
    transform: scaleX(1);
    transition-delay: 0.1s;
}

.btn-wrapper .line.bottom {
    bottom: -4px;
    right: 0;
    transform: scaleX(0);
    transform-origin: right;
}

.btn-wrapper:hover .line.bottom {
    transform: scaleX(1);
    transition-delay: 0.1s;
}

.btn-wrapper .line.left {
    left: -4px;
    bottom: 0;
    transform: scaleY(0);
    transform-origin: bottom;
}

.btn-wrapper:hover .line.left {
    transform: scaleY(1);
    transition-delay: 0.3s;
}

.btn-wrapper .line.right {
    right: -4px;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
}

.btn-wrapper:hover .line.right {
    transform: scaleY(1);
    transition-delay: 0.3s;
}

/* 按钮四角的光点 */
.btn-wrapper .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s;
}

.btn-wrapper:hover .dot {
    opacity: 1;
}

.btn-wrapper:hover .dot.tl {
    top: -2px;
    left: -2px;
    transition-delay: 0.4s;
}

.btn-wrapper:hover .dot.tr {
    top: -2px;
    right: -2px;
    transition-delay: 0.2s;
}

.btn-wrapper:hover .dot.bl {
    bottom: -2px;
    left: -2px;
    transition-delay: 0.2s;
}

.btn-wrapper:hover .dot.br {
    bottom: -2px;
    right: -2px;
    transition-delay: 0.4s;
}

/* 悬浮芯片动画 */
@keyframes float-chip-1 {

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

    50% {
        transform: translate(-8px, -12px)
    }
}

@keyframes float-chip-2 {

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

    50% {
        transform: translate(10px, 8px)
    }
}

@keyframes float-chip-3 {

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

    50% {
        transform: translate(-12px, 5px)
    }
}

.float-chip-1 {
    animation: float-chip-1 4s ease-in-out infinite;
}

.float-chip-2 {
    animation: float-chip-2 5s ease-in-out infinite;
}

.float-chip-3 {
    animation: float-chip-3 4.5s ease-in-out infinite;
}