html,
body {
    scroll-behavior: smooth;
}

main {
    scroll-padding-top: 80px;
    /* navbar height: prevent snap from hiding content behind navbar */
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #000;
    color: #fff;
}

.animate-zoom {
    animation: zoomEffect 20s infinite alternate;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* New Animations */
@keyframes scan {

    0%,
    100% {
        top: 15%;
        opacity: 0.5;
    }

    50% {
        top: 85%;
        opacity: 1;
    }
}

.animate-scan {
    animation: scan 2.5s ease-in-out infinite;
}

@keyframes danmu {
    from {
        transform: translateX(100vw);
    }

    to {
        transform: translateX(-100%);
    }
}

.animate-danmu {
    animation: danmu 15s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

@keyframes arMove {
    0% {
        transform: scale(1.1) translate(0, 0);
    }

    50% {
        transform: scale(1.15) translate(-10px, -5px);
    }

    100% {
        transform: scale(1.1) translate(5px, 5px);
    }
}

/* Perspective and Floating Animations */
.perspective-1000 {
    perspective: 1000px;
}

.rotate-y-12 {
    transform: rotateY(12deg);
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.animate-float-slow {
    animation: float-slow 4s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out infinite;
}

/* Marquee Animations */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.animate-marquee {
    animation: marquee 40s linear infinite;
    /* Ensure width is enough for two sets of images */
    min-width: 200%;
}

.animate-marquee-reverse {
    animation: marquee-reverse 40s linear infinite;
    min-width: 200%;
}

/* ==========================================================================
   Precision Target Focus Highlight Styles (首页亮点详情高亮与滚动定位)
   ========================================================================== */

/* 当板块通过锚点 ID 被激活定位时 */
:target {
    scroll-margin-top: 120px !important; /* 避开顶部悬浮导航栏 */
    animation: target-focus-glow 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    z-index: 30;
}

/* 蓝紫霓虹呼吸渐变发光动画 */
@keyframes target-focus-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
        border-color: rgba(255, 255, 255, 0.05);
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 45px 12px rgba(99, 102, 241, 0.4), 0 0 20px 2px rgba(168, 85, 247, 0.25);
        border-color: rgba(168, 85, 247, 0.6) !important;
        transform: scale(1.025);
    }
    40% {
        box-shadow: 0 0 35px 8px rgba(99, 102, 241, 0.3), 0 0 15px 1px rgba(168, 85, 247, 0.15);
        border-color: rgba(99, 102, 241, 0.5) !important;
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
        border-color: rgba(255, 255, 255, 0.05);
        transform: scale(1);
    }
}