/* 🎨 Visual Effects Scaling Fixes - Prevents overlapping after scaling */

/* ========== Global Scaling Fixes ========== */
.token-price-card {
    /* Contain all visual effects within card bounds */
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    isolation: isolate; /* Create new stacking context */
}

/* Allow specific effects to overflow only for divine/angelic */
.token-price-card.rarity-card-divine,
.token-price-card.rarity-card-angelic {
    overflow: visible;
}

/* MAX BENEFIT cards need visible overflow for indicator */
.token-price-card.max-benefit {
    overflow: visible;
    margin-top: 30px; /* Space for MAX BENEFIT indicator */
}

/* ========== Card Glow Containment ========== */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    /* Prevent glow from extending beyond card */
    border-radius: inherit;
    overflow: hidden;
}

/* ========== Particle Effects Containment ========== */
.card-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    /* Contain particles within card */
    overflow: hidden;
    border-radius: inherit;
}

/* ========== Light Effects Proper Positioning ========== */
.light-ball,
.light-rainfall {
    position: absolute;
    pointer-events: none;
    /* Ensure light effects don't interfere with content */
    z-index: 2;
}

.light-rainfall {
    /* Position rainfall effect properly */
    top: -20px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* Only visible on hover */
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: visible;
}

.token-price-card:hover .light-rainfall {
    opacity: 1;
}

/* ========== Border and Outline Fixes ========== */
.token-price-card::before,
.token-price-card::after {
    /* Ensure pseudo-elements don't cause overlap */
    pointer-events: none;
    border-radius: inherit;
}

/* Fix for transcendent border animation */
.rarity-card-transcendent::before {
    /* Keep border effect contained */
    border-radius: inherit;
    overflow: hidden;
}

/* ========== Hover Transform Fixes ========== */
.token-price-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.token-price-card:hover {
    /* Controlled hover transform */
    transform: translateY(-8px) scale(1.02);
    /* Ensure proper stacking */
    z-index: 10;
}

/* ========== Badge Layer Management ========== */
.rarity-badge,
.discount-badge,
.max-benefit-indicator {
    /* Ensure badges stay above effects */
    position: relative;
    z-index: 20 !important;
}

/* ========== Animation Performance Optimization ========== */
@media (prefers-reduced-motion: reduce) {
    .card-glow,
    .card-particles,
    .light-ball,
    .light-rainfall {
        animation: none !important;
    }
    
    .token-price-card:hover {
        transform: translateY(-4px);
    }
}

/* ========== Mythic/Divine Special Effects ========== */
.rarity-card-mythic .card-glow,
.rarity-card-divine .card-glow {
    /* Extra containment for intense effects */
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

/* Rainbow effect containment */
.rarity-card-mythic::before,
.rarity-card-mythic::after {
    /* Prevent rainbow bleeding */
    mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

/* ========== Grid Layout Spacing ========== */
.tokens-grid {
    /* Ensure proper spacing between cards */
    gap: 40px;
    /* Prevent cards from touching when scaled */
    padding: 20px;
}

/* ========== Z-Index Layer Reference ========== */
/*
Layer Order (bottom to top):
0: Base card background
1: Card glow effects
2: Card particles
3: Light effects (balls, rainfall)
10: Card content
11: Discount badge
12: Rarity badge
15: MAX BENEFIT indicator
20: Hover state card
*/

/* ========== Debugging Helpers ========== */
.debug-effects .card-glow {
    outline: 2px dashed rgba(255, 0, 0, 0.5);
}

.debug-effects .card-particles {
    outline: 2px dashed rgba(0, 255, 0, 0.5);
}

.debug-effects .light-rainfall {
    outline: 2px dashed rgba(0, 0, 255, 0.5);
}