/* Structure de base pour les effets */
.card {
    position: relative;
    width: 100%;
    padding-bottom: 145%;
    transform-style: preserve-3d;
    border-radius: 15px;
    overflow: hidden;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.card img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    padding: 10px;
    border-radius: 0 0 15px 15px;
    z-index: 4;
    backdrop-filter: blur(3px);
}

/* Effet Holographique */
.holographic {
    position: relative;
    animation: holo 3s linear infinite;
}

.holographic img {
    filter: brightness(1.2) contrast(1.1);
}

.holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255,0,0,0.2) 0%,
        rgba(0,255,0,0.2) 25%,
        rgba(0,0,255,0.2) 50%,
        rgba(255,0,255,0.2) 75%,
        rgba(255,255,0,0.2) 100%
    );
    opacity: 1;
    z-index: 1;
    animation: holo 3s linear infinite;
}

.holographic::after {
    content: '';
    background: linear-gradient(
        125deg,
        rgba(255,0,0,0.2) 0%,
        rgba(0,255,0,0.2) 25%,
        rgba(0,0,255,0.2) 50%,
        rgba(255,0,255,0.2) 75%,
        rgba(255,255,0,0.2) 100%
    );
    opacity: 0.6;
    z-index: 2;
    animation: holo 3s linear infinite;
}

/* Effet Doré */
.golden {
    position: relative;
}

.golden img {
    filter: brightness(1.1) sepia(0.3) saturate(1.5);
}

.golden::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        /* Gradient doré de base */
        linear-gradient(
            45deg,
            rgba(255,215,0,0.2) 0%,
            rgba(255,248,220,0.3) 50%,
            rgba(255,215,0,0.2) 100%
        ),
        /* Set 1 de paillettes brillantes */
        radial-gradient(circle at 30% 40%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 45% 70%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 60% 30%, rgba(255,255,220,0.8) 0%, transparent 1%),
        radial-gradient(circle at 75% 60%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 25% 50%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 88% 33%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 12% 88%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 92% 92%, rgba(255,255,220,0.8) 0%, transparent 1%),
        /* Set 2 de paillettes brillantes */
        radial-gradient(circle at 10% 20%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 85% 75%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 40% 15%, rgba(255,255,220,0.8) 0%, transparent 1%),
        radial-gradient(circle at 90% 45%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 15% 65%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 5% 42%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 82% 18%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 22% 76%, rgba(255,255,220,0.8) 0%, transparent 1%),
        /* Set 3 de paillettes brillantes */
        radial-gradient(circle at 55% 85%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 70% 25%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 20% 55%, rgba(255,255,220,0.8) 0%, transparent 1%),
        radial-gradient(circle at 80% 80%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 35% 35%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 95% 63%, rgba(255,223,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 8% 95%, rgba(255,215,0,0.8) 0%, transparent 1%),
        radial-gradient(circle at 67% 5%, rgba(255,255,220,0.8) 0%, transparent 1%),
        /* Paillettes moyennes */
        radial-gradient(circle at 20% 30%, rgba(255,223,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 40% 60%, rgba(255,215,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 70% 40%, rgba(255,248,220,0.6) 0%, transparent 2%),
        radial-gradient(circle at 55% 25%, rgba(255,223,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 85% 55%, rgba(255,215,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 15% 45%, rgba(255,223,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 75% 95%, rgba(255,215,0,0.6) 0%, transparent 2%),
        radial-gradient(circle at 95% 15%, rgba(255,248,220,0.6) 0%, transparent 2%),
        /* Petites paillettes */
        radial-gradient(circle at 35% 25%, rgba(255,223,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 65% 75%, rgba(255,215,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 50% 50%, rgba(255,248,220,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 80% 25%, rgba(255,223,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 15% 85%, rgba(255,215,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 45% 95%, rgba(255,223,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 92% 88%, rgba(255,215,0,0.4) 0%, transparent 1.5%),
        radial-gradient(circle at 7% 65%, rgba(255,248,220,0.4) 0%, transparent 1.5%);
    background-size: 
        100% 100%,
        /* Tailles paillettes brillantes Set 1 */
        30px 30px, 25px 25px, 35px 35px, 28px 28px, 32px 32px, 27px 27px, 33px 33px, 29px 29px,
        /* Tailles paillettes brillantes Set 2 */
        30px 30px, 25px 25px, 35px 35px, 28px 28px, 32px 32px, 27px 27px, 33px 33px, 29px 29px,
        /* Tailles paillettes brillantes Set 3 */
        30px 30px, 25px 25px, 35px 35px, 28px 28px, 32px 32px, 27px 27px, 33px 33px, 29px 29px,
        /* Tailles paillettes moyennes */
        50px 50px, 45px 45px, 55px 55px, 48px 48px, 52px 52px, 47px 47px, 53px 53px, 49px 49px,
        /* Tailles petites paillettes */
        40px 40px, 35px 35px, 45px 45px, 38px 38px, 42px 42px, 37px 37px, 43px 43px, 39px 39px;
    opacity: 0.7;
    z-index: 1;
    mix-blend-mode: color-dodge;
    animation: goldenSparkle 3s ease infinite;
}

.golden::after {
    content: '';
    background: linear-gradient(
        45deg,
        rgba(255,215,0,0.2) 0%,
        rgba(255,248,220,0.3) 50%,
        rgba(255,215,0,0.2) 100%
    );
    opacity: 0.5;
    z-index: 2;
    animation: goldenSparkle 3s ease infinite;
}

/* Effet Cosmos */
.cosmos {
    position: relative;
}

.cosmos img {
    filter: brightness(1.2) contrast(1.2);
}

.cosmos::before {
    content: '';
    position: absolute;
    inset: -1px;
    background-image: url('holo.png');
    background-size: 120% 120%;
    mix-blend-mode: color-dodge;
    opacity: 0.8;
    z-index: 2;
    transform: translateZ(1px);
    filter: brightness(1.5) contrast(1.3) saturate(1.5);
}

.cosmos::after {
    content: '';
    background: linear-gradient(
        125deg,
        rgba(148,0,211,0.3) 0%,
        rgba(75,0,130,0.3) 25%,
        rgba(0,0,128,0.3) 50%,
        rgba(138,43,226,0.3) 75%,
        rgba(148,0,211,0.3) 100%
    );
    opacity: 0.7;
    z-index: 2;
    animation: cosmos 8s linear infinite;
}

/* Animations */
@keyframes holo {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes goldenSparkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes cosmos {
    0% { 
        filter: hue-rotate(0deg) brightness(1);
        transform: scale(1);
    }
    50% {
        filter: hue-rotate(180deg) brightness(1.2);
        transform: scale(1.05);
    }
    100% { 
        filter: hue-rotate(360deg) brightness(1);
        transform: scale(1);
    }
}