/* TCG Scanner - Custom Styles */

/* Hiệu ứng Holographic Gradient Text */
.text-holo {
    background: linear-gradient(to right, #FFCB05, #FF9900, #00ffcc, #FFCB05);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: holo-shine 4s linear infinite;
}

/* Hiệu ứng viền phát sáng cho nút */
.btn-glow {
    position: relative;
}
.btn-glow::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #FFCB05, #ff0000, #3B4CCA, #00ffcc);
    z-index: -1;
    border-radius: 9999px;
    background-size: 400%;
    animation: holo-shine 20s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

/* 3D Card Hover Effect */
.card-3d {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}
.card-3d:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
    box-shadow: -15px 15px 30px -5px rgba(255, 203, 5, 0.3);
    border-color: #FFCB05;
}

/* Scan Viewfinder Corners */
.viewfinder {
    position: relative;
}
.viewfinder::before, .viewfinder::after,
.viewfinder .vf-inner::before, .viewfinder .vf-inner::after {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border-color: #00ffcc;
    border-style: solid;
}
.viewfinder::before { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 8px; }
.viewfinder::after { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 8px; }
.viewfinder .vf-inner::before { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 8px; }
.viewfinder .vf-inner::after { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 8px; }

body {
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(59, 76, 202, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255, 203, 5, 0.1) 0%, transparent 50%);
}

/* Language dropdown: show on hover (desktop) or when .open (click) */
#langSwitcher .absolute {
    transition: opacity 0.2s, visibility 0.2s;
}
#langSwitcher.group:hover .absolute,
#langSwitcher.open .absolute {
    opacity: 1;
    visibility: visible;
}
@media (hover: none) {
    #langSwitcher .absolute {
        opacity: 0;
        visibility: hidden;
    }
    #langSwitcher.open .absolute {
        opacity: 1;
        visibility: visible;
    }
}