@layer utilities {

    html,
    body,
    * {
        font-family: PingFangSC, PingFang SC;
    }

    #children, #school ,#advise,#teenager,#psy,#cultural,#consultant,#headset,#doll,#assessment{
        scroll-margin-top: 4rem; 
    }
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #F472B6;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        z-index: 50;
    }

    .partner-card {
        transition: all 0.3s ease;
    }

    .partner-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    #mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-origin: top;
        opacity: 0;
        transition: max-height 0.5s ease, opacity 0.3s ease;
    }

    #mobile-menu.open {
        max-height: 500px;
        /* 足够容纳所有菜单项的高度 */
        opacity: 1;
    }

    #mobile-menu a {
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #mobile-menu.open a {
        transform: translateY(0);
        opacity: 1;
    }

    #mobile-menu.open a:nth-child(1) {
        transition-delay: 0.1s;
    }

    #mobile-menu.open a:nth-child(2) {
        transition-delay: 0.2s;
    }

    #mobile-menu.open a:nth-child(3) {
        transition-delay: 0.3s;
    }

    #mobile-menu.open a:nth-child(4) {
        transition-delay: 0.4s;
    }

    #mobile-menu.open a:nth-child(5) {
        transition-delay: 0.5s;
    }

    #mobile-menu.open a:nth-child(6) {
        transition-delay: 0.6s;
    }

    .writing-vertical {
        writing-mode: vertical-rl;
        letter-spacing: 0.5px;
        line-height: 1.2;
    }

    @keyframes slideIn {
        0% {
            transform: translateY(-50%) translateX(120%);
            opacity: 0;
        }

        100% {
            transform: translateY(-50%) translateX(0);
            opacity: 1;
        }
    }

    .animate-slide-in {
        animation: slideIn 1s ease-out forwards;
    }

    @keyframes hoverBounce {

        0%,
        100% {
            transform: translateY(-50%) scale(1.05);
        }

        50% {
            transform: translateY(-55%) scale(1.05);
        }
    }

    #global-consult-btn:hover {
        animation: hoverBounce 0.8s ease-in-out infinite;
        box-shadow: 0 0 12px rgba(50, 150, 250, 0.3);
    }

    /* 合作伙伴滚动相关样式 */
    .partners-container {
        overflow: hidden;
        position: relative;
    }

    .partners-track {
        display: flex;
        width: max-content;
        animation: scrollPartners 30s linear infinite;
    }

    .partner-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 2rem;
        min-width: 120px;
    }

    .partner-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 0.5rem;
        background-color: #ebf8ff;
        color: #3296fa;
    }

    @keyframes scrollPartners {
        0% {
            transform: translateX(0);
        }

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

    /* 悬停暂停动画 */
    .partners-container:hover .partners-track {
        animation-play-state: paused;
    }

    /* 渐变遮罩，让滚动更自然 */
    .partners-container::before,
    .partners-container::after {
        content: '';
        position: absolute;
        top: 0;
        width: 60px;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    .partners-container::before {
        left: 0;
        background: linear-gradient(to right, white, transparent);
    }

    .partners-container::after {
        right: 0;
        background: linear-gradient(to left, white, transparent);
    }

    /* 隐藏所有浏览器的滚动条 */
    .overflow-x-hidden::-webkit-scrollbar {
        display: none;
    }

    .overflow-x-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 自动滚动动画：匀速、无限循环 */
    @keyframes autoScroll {
        0% {
            transform: translateX(0);
        }

        100% {
            /* 滚动距离 = 单个卡片组宽度（根据实际卡片数量和间距计算，此处适配当前5张卡片） */
            transform: translateX(calc(-200px * 5 - 8px * 4));
        }
    }

    /* 适配中等屏幕（md）的滚动距离 */
    @media (min-width: 768px) {
        @keyframes autoScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-240px * 5 - 8px * 4));
            }
        }
    }

    /* 动画应用：15秒完成一轮，匀速，无限循环 */
    .animate-auto-scroll {
        animation: autoScroll 15s linear infinite;
    }

    /* 鼠标悬浮时暂停滚动（提升交互体验） */
    .relative:hover .animate-auto-scroll {
        animation-play-state: paused;
    }

    /* 首页波浪动画 */
    @keyframes waveAnimation1 {
        0% {
            d: path("M0,120 C200,80 400,110 600,70 C800,30 1000,90 1200,50 L1200,120 Z");
        }

        50% {
            d: path("M0,120 C200,140 400,50 600,110 C800,170 1000,30 1200,90 L1200,120 Z");
        }

        100% {
            d: path("M0,120 C200,80 400,110 600,70 C800,30 1000,90 1200,50 L1200,120 Z");
        }
    }

    @keyframes waveAnimation2 {
        0% {
            d: path("M0,120 C300,90 500,120 700,80 C900,40 1100,100 1200,60 L1200,120 Z");
        }

        50% {
            d: path("M0,120 C300,50 500,160 700,40 C900, -20 1100,140 1200,20 L1200,120 Z");
        }

        100% {
            d: path("M0,120 C300,90 500,120 700,80 C900,40 1100,100 1200,60 L1200,120 Z");
        }
    }

    .wave-1 {
        animation: waveAnimation1 12s ease-in-out infinite;
    }

    .wave-2 {
        animation: waveAnimation2 16s ease-in-out infinite;
        animation-delay: 1s;
    }
}

/* html,
body {
  --header-height: 3rem;
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;
} */