/*
 * Volumetric Effects
 * Hiệu ứng ánh sáng thể tích 3D cho các vật phẩm, cúp, phần thưởng.
 * 
 * Phiên bản kết hợp: Dùng quầng sáng hình thang (aura-beam-volumetric)
 * làm nền bao quanh lõi trụ sáng tiêu chuẩn (light-cylinder).
 */

.aura-beam-volumetric {
    position: absolute;
    bottom: 87.5px; /* Căn chỉnh với tâm của bệ đỡ (beam-base có bottom: 70px, height: 35px -> tâm là 87.5px) */
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: center;
}

/* Khối trụ ánh sáng tổng thể */
.aura-beam-volumetric .aura-cylinder {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: perspective(520px) rotateX(0deg);
    opacity: 0.98;
    overflow: visible;
}

/* Cắt hình thang mềm (Soft edges mask) */
.aura-beam-volumetric .aura-cylinder::before {
    content: '';
    position: absolute;
    inset: -20px -40px; 
    /* Thêm gradient để sáng rực ở chân và mờ dần lên trên */
    background: linear-gradient(to top, rgba(255,255,255,0.9) 0%, var(--beam-color) 15%, transparent 100%);
    -webkit-mask-image: 
        conic-gradient(from 0deg at 50% 150%, 
            black 0deg, 
            rgba(0,0,0,0.5) 12deg,
            transparent 22deg, 
            transparent 338deg, 
            rgba(0,0,0,0.5) 348deg,
            black 360deg),
        /* Bỏ transparent ở 0% để ánh sáng bắt đầu ngay từ mặt elip */
        linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.2) 70%, transparent 100%);
    mask-image: 
        conic-gradient(from 0deg at 50% 150%, 
            black 0deg, 
            rgba(0,0,0,0.5) 12deg,
            transparent 22deg, 
            transparent 338deg, 
            rgba(0,0,0,0.5) 348deg,
            black 360deg),
        linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.2) 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(25px);
    opacity: 1; /* Tăng opacity để quầng sáng hiện rõ hơn */
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Thân sáng loe rộng, mờ ảo */
.aura-beam-volumetric .aura-main {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* Chân sáng rực (trắng), lên trên chuyển dần sang màu beam, rồi mờ đi */
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, var(--beam-color) 25%, rgba(255,255,255,0.2) 60%, transparent 100%);
    -webkit-mask-image: 
        conic-gradient(from 0deg at 50% 150%, 
            black 0deg, 
            rgba(0,0,0,0.6) 10deg,
            transparent 18deg, 
            transparent 342deg, 
            rgba(0,0,0,0.6) 350deg,
            black 360deg),
        /* Ánh sáng ăn sát đáy (black 0%) */
        linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
    mask-image: 
        conic-gradient(from 0deg at 50% 150%, 
            black 0deg, 
            rgba(0,0,0,0.6) 10deg,
            transparent 18deg, 
            transparent 342deg, 
            rgba(0,0,0,0.6) 350deg,
            black 360deg),
        linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(15px);
    mix-blend-mode: plus-lighter; 
    opacity: 1; /* Tăng độ sáng để thấy rõ hơn */
}

/* Extracted from index.html */
.beam-base {
    position: absolute;
    bottom: calc(var(--vip-aura-bottom, 38%) - 14px);
    left: calc(50% - var(--vip-aura-base-w-half, 55px));
    width: calc(var(--vip-aura-base-w-half, 55px) * 2);
    height: 28px;
    border-radius: 50%;
    z-index: 3;
    mix-blend-mode: screen;
    animation: recordBeamFlicker 3s infinite alternate ease-in-out;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow:
        0 0 16px 3px var(--beam-color),
        inset 0 0 16px 3px var(--beam-color);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.95) 0%, var(--ellipse-glow) 40%, transparent 70%);
}

.vip-cup-aura .beam-base::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 20%, transparent 60%);
    filter: blur(2px);
}

.badge-vip-card .vip-aura-particles,
.record-cup-art-wrap .vip-aura-particles {
    position: absolute;
    z-index: 6;
    overflow: visible;
    pointer-events: none;
}

.badge-vip-card .vip-aura-particles {
    bottom: var(--vip-aura-bottom, 38%);
    left: calc(50% - var(--vip-aura-vol-w-half, 100px));
    width: calc(var(--vip-aura-vol-w-half, 100px) * 2);
    height: var(--vip-aura-vol-h, 220px);
}

.record-cup-art-wrap .vip-aura-particles {
    bottom: 121px;
    left: calc(50% - 120px);
    width: 240px;
    height: 245px;
}

.badge-vip-card .vip-aura-particles i,
.record-cup-art-wrap .vip-aura-particles i {
    position: absolute;
    left: var(--px);
    bottom: 0;
    width: var(--ps);
    height: var(--ps);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px 1px #ffffff, 0 0 12px 3px var(--beam-color, rgba(255,196,74,0.8)), 0 0 24px 6px var(--ellipse-glow, rgba(255,192,66,0.8));
    opacity: 0;
    mix-blend-mode: screen;
    animation: recordCupParticleRise var(--pd) ease-in-out infinite;
    animation-delay: var(--delay);
}

.vip-cup-aura .aura-beam-volumetric {
    position: absolute;
    bottom: var(--vip-aura-bottom, 38%);
    left: calc(50% - var(--vip-aura-vol-w-half, 100px));
    width: calc(var(--vip-aura-vol-w-half, 100px) * 2);
    height: var(--vip-aura-vol-h, 220px);
    transform: none;
    z-index: 1;
    opacity: 1;
    mix-blend-mode: screen;
    filter: brightness(3.0) contrast(1.8) saturate(1.8);
}

.aura-cylinder {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aura-main {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--beam-color, rgba(255, 196, 74, 0.58)) 0%, transparent 90%);
}

.record-highlight-particles {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 45%;
    width: min(82%, 340px);
    height: min(92%, 410px);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    overflow: visible;
    pointer-events: none;
}

.record-highlight-particles i {
    position: absolute;
    left: var(--px);
    bottom: calc(2% + 70px);
    width: var(--ps);
    height: var(--ps);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 12px var(--beam-color, rgba(255, 218, 112, 0.8)), 0 0 24px var(--ellipse-glow, rgba(238, 148, 48, 0.8));
    opacity: 0;
    mix-blend-mode: screen;
    animation: recordCupParticleRise var(--pd) ease-in-out infinite;
    animation-delay: var(--delay);
}

/* ==========================================================
   TIER 2: DARO GUARDIAN TEMPLE (Protective Aura)
   ========================================================== */
.daro-guardian-aura {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 180%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    mix-blend-mode: screen;
}

.daro-guardian-aura .aura-cylinder {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(to top, rgba(255, 205, 82, 0.4) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at bottom, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at bottom, black 0%, transparent 70%);
}

.daro-guardian-aura .shield-ring {
    position: absolute;
    bottom: 12%;
    left: 10%;
    width: 80%;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 205, 82, 0.3);
    box-shadow: 0 0 12px rgba(255, 205, 82, 0.5), inset 0 0 12px rgba(255, 205, 82, 0.5);
    transform: perspective(300px) rotateX(75deg);
    animation: daroShieldRotate 8s linear infinite;
}

.daro-guardian-node:hover .daro-guardian-aura,
.daro-guardian-node.is-active .daro-guardian-aura {
    opacity: 0.95;
    filter: brightness(1.2);
}

@keyframes daroShieldRotate {
    0% { transform: perspective(300px) rotateX(75deg) rotateZ(0deg); }
    100% { transform: perspective(300px) rotateX(75deg) rotateZ(360deg); }
}

/* ==========================================================
   TIER 3: MUSEUM VAULT (Badge Collection Glow)
   ========================================================== */
.badge-pedestal-card .badge-pedestal-spotlight {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 218, 112, 0.3) 0%, rgba(255, 218, 112, 0.05) 40%, transparent 70%);
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    mix-blend-mode: screen;
}

.badge-pedestal-card.is-earned .badge-pedestal-spotlight {
    opacity: 0.8;
}

.badge-pedestal-card:hover .badge-pedestal-spotlight {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
    background: radial-gradient(ellipse at center, rgba(255, 218, 112, 0.5) 0%, rgba(255, 218, 112, 0.15) 50%, transparent 80%);
}

.badge-pedestal-card.is-locked .badge-pedestal-spotlight {
    background: radial-gradient(ellipse at center, rgba(100, 100, 100, 0.15) 0%, transparent 60%);
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .daro-guardian-aura .shield-ring {
        animation: none;
    }
    .badge-pedestal-card .badge-pedestal-spotlight {
        transition: none;
    }
}