/* ===== Hero Text Layer & Entrance Animation =====
   安全策略：
   - 基础状态 opacity:1，文字始终可见
   - 动画仅做入场效果，用 backwards 填充（延迟期间隐藏，结束后回归基础状态）
   - 即使 CSS 动画在某些浏览器失败，文字也不会被卡住 */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(56px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-kenburns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}

/* 关键布局兜底：不依赖 Tailwind CDN */
#hero-slides .hero-item {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
#hero-slides .hero-item > img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 6.5s ease-out;
}
#hero-slides .hero-item.active > img {
    animation: hero-kenburns 6.5s ease-out forwards;
}
#hero-slides .hero-item .hero-text-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    color: #fff;
}
#hero-slides .hero-item .anim-eyebrow,
#hero-slides .hero-item .anim-title,
#hero-slides .hero-item .anim-sub,
#hero-slides .hero-item .anim-btn {
    opacity: 1;
    will-change: opacity, transform;
}
#hero-slides .hero-item.active .anim-eyebrow {
    animation: hero-fade-up 1s cubic-bezier(.22,.61,.36,1) .1s backwards;
}
#hero-slides .hero-item.active .anim-title {
    animation: hero-fade-up 1s cubic-bezier(.22,.61,.36,1) .3s backwards;
}
#hero-slides .hero-item.active .anim-sub {
    animation: hero-fade-up 1s cubic-bezier(.22,.61,.36,1) .5s backwards;
}
#hero-slides .hero-item.active .anim-btn {
    animation: hero-fade-up 1s cubic-bezier(.22,.61,.36,1) .7s backwards;
}
#hero-slides .anim-title {
    text-shadow: 0 2px 20px rgba(10, 37, 64, 0.5);
}
#hero-slides .anim-sub {
    text-shadow: 0 1px 12px rgba(10, 37, 64, 0.5);
}