/* public/css/main.css */

/* 自定义工具类（原@layer utilities内容） */
.content-auto {
    content-visibility: auto;
}

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

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

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

.transition-transform-opacity {
    transition-property: transform, opacity;
}

/* 动画相关样式（确保hero区域内容正常显示） */
#hero-title, #hero-subtitle, #hero-cta {
    opacity: 0;
    transform: translate-y(32px); /* 原translate-y-8（1rem=16px，8rem=128px？不，原代码是translate-y-8，即2rem=32px） */
    transition: all 0.7s ease;
}

/* 强制显示的备用样式（防止JS失效） */
@media (prefers-reduced-motion: no-preference) {
    #hero-title {
        animation: fadeInUp 0.7s 0.3s forwards;
    }
    #hero-subtitle {
        animation: fadeInUp 0.7s 0.6s forwards;
    }
    #hero-cta {
        animation: fadeInUp 0.7s 0.9s forwards;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translate-y(0);
    }
}

/* 其他共用样式 */
.reveal-element {
    opacity: 0;
    transform: translate-y(32px);
    transition: all 0.7s ease;
}

.reveal-element.opacity-100 {
    opacity: 1;
    transform: translate-y(0);
}