/* ---------------------------------------------------
   1. MẶT NẠ CỐ ĐỊNH (Responsive)
   --------------------------------------------------- */
.splus-bg {
    -webkit-mask-image: linear-gradient(to bottom, green 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, green 30%, transparent 100%);
}
.zay-bg {
    -webkit-mask-image: linear-gradient(to top, green 30%, transparent 100%);
    mask-image: linear-gradient(to top, green 30%, transparent 100%);
}
@media (min-width: 768px) {
    .splus-bg {
        -webkit-mask-image: linear-gradient(to right, green 30%, transparent 100%);
        mask-image: linear-gradient(to right, green 30%, transparent 100%);
    }
    .zay-bg {
        -webkit-mask-image: linear-gradient(to left, green 30%, transparent 100%);
        mask-image: linear-gradient(to left, green 30%, transparent 100%);
    }
}

/* ---------------------------------------------------
   2. LOGIC HÌNH ẢNH
   --------------------------------------------------- */
.bg-layer {
    opacity: 0.8;
    filter: brightness(0.8);
    transition: opacity 0.6s ease, filter 0.6s ease;
}
#view-landing:has(#split-splus:hover) .splus-bg,
#view-landing:has(#split-zay:hover) .zay-bg {
    opacity: 1; filter: brightness(1);
}
#view-landing:has(#split-splus:hover) .zay-bg,
#view-landing:has(#split-zay:hover) .splus-bg {
    opacity: 0.35; 
    filter: sepia(0.6) hue-rotate(80deg) saturate(1.5) brightness(0.6);
}

/* ---------------------------------------------------
   3. LOGIC CHỮ & BUTTON (SOLID KHI HOVER PANEL)
   --------------------------------------------------- */
.split-hitbox {
    width: 100%; height: 50%;
    opacity: 0.5; transition: opacity 0.5s ease;
}
@media (min-width: 768px) {
    .split-hitbox { width: 50%; height: 100%; }
}
#view-landing:has(#split-splus:hover) #split-splus,
#view-landing:has(#split-zay:hover) #split-zay {
    opacity: 1; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.4));
}
#view-landing:has(#split-splus:hover) #split-splus .cta-button,
#view-landing:has(#split-zay:hover) #split-zay .cta-button {
    background-color: white; color: black;
    border-color: white; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------
   4. STYLE KHUNG SLOGAN (HÌNH RUY BĂNG 2D)
   --------------------------------------------------- */
.slogan-ribbon {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
    transition: all 0.5s ease;
}
#view-landing:has(#split-splus:hover) #split-splus .slogan-ribbon,
#view-landing:has(#split-zay:hover) #split-zay .slogan-ribbon {
    background-color: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

/* ---------------------------------------------------
   5. ANIMATION FADE (CHUYỂN TRANG MƯỢT MÀ, TĨNH TẠI)
   --------------------------------------------------- */
/* Dùng chung cho các phần tử cần hiện dần */
.fade-in {
    opacity: 0;
    animation: simpleFade 0.8s ease-in-out forwards;
}

/* Thêm độ trễ nhẹ cho chữ để tạo cảm giác chữ cũ tan đi, chữ mới hiện lên */
.delay-100 {
    animation-delay: 0.1s;
}

@keyframes simpleFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}