/* Badges */
[data-badge-tooltip]::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -55%);
    border-bottom: 15px solid #8b5cf6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.badge-tooltip-right[data-badge-tooltip] {
    top: unset;
    left: 3.5rem;
}

.badge-tooltip-right[data-badge-tooltip]::before {
    top: 50%;
    left: 0;
    transform: translate(-50%, -55%) rotate(270deg);
}

.badge-tooltip-left[data-badge-tooltip] {
    top: unset;
    right: 3.5rem;
}

.badge-tooltip-left[data-badge-tooltip]::before {
    top: 50%;
    left: 100%;
    transform: translate(-50%, -55%) rotate(90deg);
}

.page-dashboard-deck {
    overflow-x: hidden;
}

/* .page-dashboard-deck::-webkit-scrollbar {
  width: 10px;
}
.page-dashboard-deck::-webkit-scrollbar-track-piece {
  background: #fff;
  border-left: 1px solid #e1e3e7;
}
.page-dashboard-deck::-webkit-scrollbar-thumb {
  background: #7c3aed
} */

/* Influencer Cards */
[data-deck-container] [data-deck] {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

[data-deck-container] [data-deck].visible {
  opacity: 1;
  transform: translateX(0);
}

[data-deck-container] [data-deck]:not(.visible) {
  opacity: 0;
  transform: translateX(100px);
}

[influencer-card] {
    perspective: 1000px;
}

/* [data-stack="0"] [influencer-card]:hover [influencer-card-inner] { */
[data-stack="0"] [influencer-card] [data-rotate-card]:checked + [influencer-card-inner],
[data-stack="1"] [influencer-card] [data-rotate-card]:checked + [influencer-card-inner] {
    transform: rotateY(-180deg);
    z-index: 50;
}

/* [data-stack="0"] [influencer-card]:hover [influencer-card-inner] [influencer-card-front] { */
[data-stack="0"] [influencer-card] [data-rotate-card]:checked + [influencer-card-inner] [influencer-card-front],
[data-stack="1"] [influencer-card] [data-rotate-card]:checked + [influencer-card-inner] [influencer-card-front] {
    pointer-events: none;
}

[influencer-card-inner] {
    transform-style: preserve-3d;
}

[influencer-card-front], [influencer-card-back] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

[influencer-card-back] {
    transform: rotateY(-180deg);
}

.custom-text-shadow {
    text-shadow: 1px 2px 15px #000;
}

/* Influencer Cards Tier Backgrounds */
[data-tier-background], [data-tier-background="1"]{
    background: rgb(167 139 250);
}

[data-tier-background="2"]{
    background-image: url(https://lit.africa/assets/images/deck-cards/bg_silver.png);
    background-color: transparent !important;
}

[data-tier-background="3"]{
    background-image: url(https://lit.africa/assets/images/deck-cards/bg_gold.png);
    background-color: transparent !important;
}

[data-tier-background="4"]{
    background-image: url(https://lit.africa/assets/images/deck-cards/bg_diamond.png);
    background-color: transparent !important;
}

[data-tier-background="5"]{
    background-image: url(https://lit.africa/assets/images/deck-cards/bg_holo.png);
    background-color: transparent !important;
    background-size: 130% 130%;
    background-position: center;
    position: relative;
    overflow: hidden;
    animation: 
        holographicMove 20s ease-in-out infinite,
        holographicShift 3s ease-in-out infinite alternate,
        holographicPulse 5s ease-in-out infinite;
}

/* More visible movement animation */
@keyframes holographicMove {
    0%, 100% {
        background-position: 30% 30%;
    }
    25% {
        background-position: 70% 30%;
    }
    50% {
        background-position: 70% 70%;
    }
    75% {
        background-position: 30% 70%;
    }
}

/* More pronounced color shifting for holographic effect */
@keyframes holographicShift {
    0% {
        filter: hue-rotate(-10deg) saturate(1.2) brightness(1);
    }
    50% {
        filter: hue-rotate(15deg) saturate(1.4) brightness(1.15);
    }
    100% {
        filter: hue-rotate(-5deg) saturate(1.1) brightness(0.95);
    }
}

/* Add subtle pulsing effect */
@keyframes holographicPulse {
    0%, 100% {
        background-size: 130% 130%;
        opacity: 0.95;
    }
    50% {
        background-size: 140% 140%;
        opacity: 1;
    }
}

/* Add smoother shimmer overlay with softer edges */
[data-tier-background="5"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        45deg, 
        transparent 0%, 
        transparent 35%,
        rgba(255,255,255,0.05) 45%, 
        rgba(147,51,234,0.08) 50%,
        rgba(255,255,255,0.05) 55%,
        transparent 65%,
        transparent 100%
    );
    animation: smoothShimmer 5s infinite;
    z-index: 1;
    filter: blur(1px);
}

@keyframes smoothShimmer {
    0% {
        left: -200%;
        opacity: 0;
    }
    15% {
        opacity: 0.6;
    }
    85% {
        opacity: 0.6;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.bgGradientAnimation {
    background: linear-gradient(45deg, #8b5cf6, #158eca);
    color: #fff;
    animation: bgGradientMove 5s ease-in-out infinite;
}

@keyframes bgGradientMove {
    0% {
        filter: hue-rotate(0deg);
    }

    25% {
        filter: hue-rotate(35deg);
    }

    50% {
        filter: hue-rotate(70deg);
    }

    75% {
        filter: hue-rotate(35deg);
    }

    100% {
        filter: hue-rotate(0deg);
    }
}

[data-stack-hidden-item] {
    display: none;
}