/* Tuỳ chỉnh bổ sung ngoài Tailwind */
html { scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Rich text (StreamField / prose) */
.prose img { border-radius: 1rem; }
.prose h2, .prose h3 { font-family: 'Noto Serif', serif; }

/* Header khi cuộn */
#site-header { transition: background-color .3s ease, padding .3s ease; }
#site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* Sao đánh giá đã chọn */
.star.active, .star.selected { color: #e2a72c; }

/* ---------------------------------------------------------------- */
/* HIỆU ỨNG ĐỘNG                                                     */
/* ---------------------------------------------------------------- */

/* Trôi lên khi cuộn vào màn hình */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* Hero: ảnh nền zoom chậm (Ken Burns) */
@keyframes kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.14); }
}
.hero-zoom { animation: kenburns 20s ease-out forwards; }

/* Hero: chữ hiện dần theo thứ tự */
@keyframes heroUp {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}
.hero-anim > * { opacity: 0; animation: heroUp .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: .15s; }
.hero-anim > *:nth-child(2) { animation-delay: .35s; }
.hero-anim > *:nth-child(3) { animation-delay: .55s; }
.hero-anim > *:nth-child(4) { animation-delay: .70s; }
.hero-anim > *:nth-child(5) { animation-delay: .85s; }

/* Nổi nhẹ liên tục (logo hero) */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.floaty { animation: floaty 4.5s ease-in-out infinite; }

/* Gạch chân vàng "vẽ" ra khi section hiện */
.reveal .grow-line, .reveal.grow-line { transition: width .8s ease .2s; }

/* Nút bấm: nhấn nhẹ khi rê chuột */
.btn-anim { transition: transform .2s ease, box-shadow .2s ease; }
.btn-anim:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }

/* Ảnh trong card: phóng nhẹ khi rê (bổ trợ cho group-hover) */
.zoom-img { transition: transform .6s ease; }
.group:hover .zoom-img { transform: scale(1.06); }

/* Tôn trọng người tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    .reveal, .hero-anim > *, .hero-zoom, .floaty, .btn-anim, .zoom-img {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}