/* Global Scroll Reveal — premiumReveal engine */
html { scroll-behavior: smooth; }

@keyframes premiumReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reveal-hidden {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
    will-change: opacity, transform;
}

.reveal-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: premiumReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: auto;
}

.reveal-delay-1 { animation-delay: 100ms !important; }
.reveal-delay-2 { animation-delay: 200ms !important; }
.reveal-delay-3 { animation-delay: 300ms !important; }

/* Legacy compat — reveal-on-load / reveal-on-scroll / reveal-grid-item */
.reveal-on-load,
.reveal-on-scroll,
.reveal-grid-item {
    opacity: 1;
    transform: none;
}

html.reveal-animate .reveal-on-load:not(.is-visible),
html.reveal-animate .reveal-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--reveal-delay, 0) * 0.1s);
}

html.reveal-animate .reveal-grid-item:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
    will-change: opacity, transform;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-load.is-visible,
.reveal-on-scroll.is-visible,
.reveal-grid-item.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Hero showcase dùng position:absolute — không transform container */
.hero-right.reveal-on-load,
.hero-right.reveal-on-scroll {
    transform: none !important;
}

html.reveal-animate .hero-right.reveal-on-load:not(.is-visible),
html.reveal-animate .hero-right.reveal-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: none !important;
}

html.reveal-animate .hero-right.reveal-on-load.is-visible,
html.reveal-animate .hero-right.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-hidden,
    html.reveal-animate .reveal-on-load,
    html.reveal-animate .reveal-on-scroll,
    html.reveal-animate .reveal-grid-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .reveal-active {
        animation: none !important;
    }
}