/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/


/* Bật View Transitions */
@view-transition {
    navigation: auto;
}


::view-transition-old(root) {
    animation: 600ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-out;
}
::view-transition-new(root) {
    animation: 600ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-in;
}

@keyframes vt-slide-out {
    to { transform: translateX(-30px); opacity: 0; }
}
@keyframes vt-slide-in {
    from { transform: translateX(30px); opacity: 0; }
}


/* =========================================
   HIỆU ỨNG TRƯỢT TRANG (LÙI) - KHI BẤM BACK
   ========================================= */
html.is-back ::view-transition-old(root) {
    animation: 600ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-out-back;
}
html.is-back ::view-transition-new(root) {
    animation: 600ms cubic-bezier(0.22, 1, 0.36, 1) both vt-slide-in-back;
}


/* =========================================
   4. SHARED ELEMENT
   ========================================= */
::view-transition-group(project-hero) {
    z-index: 9999; /* Đảm bảo ảnh luôn nổi lên trên cùng */
    animation-duration: 600ms; /* Khớp với thời gian trượt trang */
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chống méo tỉ lệ khung hình khi ảnh bay từ hình vuông sang hình chữ nhật */
::view-transition-old(project-hero),
::view-transition-new(project-hero) {
    height: 100%;
    object-fit: cover;
}

/* =========================================
   5. ACCESSIBILITY (TRỢ NĂNG)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}