/* --- VORTEX STAGE --- */
.vortex-container {
    position: relative; 
    width: 300px; 
    height: 180px;
    perspective: 1000px; 
    transform: scale(1) rotateX(-15deg); 
    z-index: 15; 
    pointer-events: none;
    will-change: transform; 
}

.vortex-spinner {
    position: relative; 
    width: 100%; 
    height: 100%;
    transform-style: preserve-3d;
    animation: spin-vortex 30s linear infinite;
    will-change: transform;
}

@keyframes spin-vortex {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-360deg); }
}

.vortex-spinner:hover,
body.has-lightbox .vortex-spinner {
    animation-play-state: paused;
}

/* --- ITEM CONTAINER (VỎ NGOÀI) --- */
/* Chỉ chịu trách nhiệm định vị vị trí trong không gian 3D */
.vortex-item {
    position: absolute; 
    top: 0; left: 0;
    width: 100px; height: 60px;
    left: 50%; top: 50%;
    margin-left: -50px; margin-top: -30px;
    
    /* Tính toán góc xoay */
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(170px);
    
    /* KHÔNG CÓ CÁC THUỘC TÍNH VISUAL Ở ĐÂY ĐỂ TRÁNH REPAINT */
    pointer-events: auto;
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    
    /* Chứa gợn sóng */
}

/* --- ITEM INNER (LÕI TRONG - VISUAL) --- */
/* Chịu trách nhiệm hiển thị ảnh và hiệu ứng nhấp nhô GPU */
.vortex-inner {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    
    background-size: cover; 
    background-position: center;
    background-color: rgba(255,255,255,0.1);
    
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
    /* Animation: Dùng TranslateY thay vì Margin-top (GPU Accelerated) */
    animation: float-vortex 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.375s);
    
    transition: border-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    will-change: transform; /* Báo trước cho trình duyệt tối ưu */
}

/* Hiệu ứng nhấp nhô bằng GPU */
@keyframes float-vortex {
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(10px); } /* Chìm xuống 10px */
}

.vortex-item:hover .vortex-inner { 
    border-color: #fbbf24; 
    box-shadow: 0 0 20px #fbbf24;
}
.vortex-item:hover {
    z-index: 100;
}

/* --- GỢN SÓNG (Nằm ở vỏ ngoài để cố định mặt nước) --- */
.vortex-item::after {
    content: '';
    position: absolute;
    bottom: -15px; /* Cố định vị trí sóng so với trục quay */
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 80%;
    height: 15px;
    
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    will-change: transform, opacity;
}

.vortex-item.in-water::after {
    animation: local-ripple 1.5s infinite;
}

@keyframes local-ripple {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0.8; border-width: 2px; }
    100% { transform: translateX(-50%) scale(1.5); opacity: 0; border-width: 0px; }
}

/* Loader & Lightbox (Giữ nguyên) */
.loader-placeholder {
    position: absolute; inset: 0; border-radius: 6px;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: skeleton 1.5s infinite;
}
@keyframes skeleton { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.lightbox-layer {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 50;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
    flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox-active { opacity: 1; pointer-events: auto; }
.lightbox-img {
    max-width: 90%; max-height: 70vh; object-fit: contain;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lightbox-active .lightbox-img { transform: scale(1); }
.lightbox-info {
    text-align: center; margin-top: 20px; color: white;
    transform: translateY(20px); opacity: 0; transition: all 0.5s 0.2s;
}
.lightbox-active .lightbox-info { transform: translateY(0); opacity: 1; }