/* 
   SPOTLIGHT EFFECT LOGIC
   Adds a high-tech tracking glow to elements
*/

.trainer-item, .hero-card, .terminal-inner {
    /* Initialize vars */
    --x: -50%;
    --y: -50%;
    
    position: relative;
    /* Base background is handled by theme, but we ensure overflow hidden */
    overflow: hidden;
    
    /* Ensure z-index is correct for overlay */
    z-index: 1;
}

/* 1. THE SPOTLIGHT BORDER */
.trainer-item::before, .hero-card::before, .terminal-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit; /* Inherit from parent */
    padding: 1.5px;
    
    /* The magic gradient: mostly transparent, but glows at cursor position */
    background: radial-gradient(
        800px circle at var(--x) var(--y),
        rgba(255, 255, 255, 0.6),
        transparent 40%
    );
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}

/* 2. THE INNER SPOTLIGHT GLOW */
.trainer-item::after, .hero-card::after, .terminal-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    
    /* Soft background glow following cursor */
    background: radial-gradient(
        600px circle at var(--x) var(--y),
        rgba(255, 255, 255, 0.04),
        transparent 40%
    );
    z-index: 1; /* Behind content but above background */
    pointer-events: none;
}

/* 3. COLORED AMBIENT AURA (Static) */
/* Each card gets a specific color via inline style or class, mapped to --shadow-color */
.trainer-item {
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transition: transform 0.2s, box-shadow 0.2s;
}

.trainer-item:hover, .hero-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 10px 40px -10px rgba(0,0,0,0.8),
        0 0 30px -5px var(--glow-color, rgba(255,255,255,0.1)); /* The colored aura */
    z-index: 10;
}

/* Icon Animation Override */
.trainer-item:hover .trainer-icon-box {
    transform: scale(1.15) rotate(0deg);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px var(--glow-color, rgba(255,255,255,0.2));
}