/* Scroll reveal nhẹ: chỉ dùng opacity và transform để trình duyệt dựng bằng GPU. */
.js .section.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.js .scroll-motion {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity .68s cubic-bezier(.22,.72,.22,1),
        transform .72s cubic-bezier(.22,.72,.22,1);
    transition-delay: var(--motion-delay, 0ms);
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.js .scroll-motion.motion-from-left {
    transform: translate3d(-30px, 10px, 0);
}

.js .scroll-motion.motion-from-right {
    transform: translate3d(30px, 10px, 0);
}

.js .scroll-motion.motion-scale {
    transform: translate3d(0, 22px, 0) scale(.975);
}

.js .scroll-motion.is-scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.js .gallery-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.97);
    transition:
        opacity .62s cubic-bezier(.22,.72,.22,1),
        transform .68s cubic-bezier(.22,.72,.22,1),
        box-shadow .3s ease;
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.js .gallery-item.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

@keyframes mobile-heading-enter {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mobile-letter-drop {
    from { opacity: 0; transform: translate3d(0, -28px, 0) scale(.92); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mobile-letter-type {
    from { opacity: 0; transform: translate3d(12px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
    .js .scroll-motion {
        transform: translate3d(0, 19px, 0);
        transition-duration: .58s, .64s;
    }

    .js .scroll-motion.motion-from-left { transform: translate3d(-20px, 7px, 0); }
    .js .scroll-motion.motion-from-right { transform: translate3d(20px, 7px, 0); }
    .js .scroll-motion.motion-scale { transform: translate3d(0, 17px, 0) scale(.985); }
    .js .scroll-motion.is-scroll-visible { transform: translate3d(0, 0, 0) scale(1); }

    /* Các lớp blur cố định rất nặng khi đang cuộn trên điện thoại. */
    .glass-card,
    .family-card,
    .count-grid > div,
    .music-btn {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .ambient { animation: none !important; }
    .light-beams { display: none; }

    .animated-name-drop.is-playing .animated-name-char {
        animation-name: mobile-letter-drop !important;
        animation-duration: .56s !important;
        animation-timing-function: cubic-bezier(.22,.72,.22,1) !important;
    }

    .animated-name-type.is-playing .animated-name-char {
        animation-name: mobile-letter-type !important;
        animation-duration: .48s !important;
        animation-timing-function: cubic-bezier(.22,.72,.22,1) !important;
    }

    /* Giữ hiệu ứng chữ lúc xuất hiện, dừng các vòng lặp trên từng ký tự sau đó. */
    .animated-couple-name.is-complete,
    .animated-couple-name.is-complete .animated-name-char,
    .animated-couple-name.is-complete .name-ampersand {
        animation: none !important;
        transform: none;
        filter: none;
    }

    .animated-couple-name.is-complete .animated-name-char {
        opacity: 1;
        background-position: 50% 50%;
        will-change: auto;
    }

    .cinematic-text-heading {
        transform: translate3d(0, 22px, 0);
        filter: none;
    }

    .cinematic-text-heading.is-text-visible {
        animation: mobile-heading-enter .68s cubic-bezier(.22,.72,.22,1) forwards !important;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .scroll-motion,
    .js .gallery-item,
    .cinematic-text-heading {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}