/* ===========================================================================
   Hover ember effect for a game card (particles.js)
   Sparks rise inside the card only while the pointer is over it.
   Opt-in per card via the `game-card-embers` class (see games.php).
   ===========================================================================*/

.game-card-embers {
    position: relative;
}

/* Full-card overlay that hosts the particles canvas. Never intercepts clicks,
   so the card's links keep working. Hidden until the card is hovered. */
.embers-card-fx {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.game-card-embers.is-emitting .embers-card-fx {
    opacity: 1;
}

.embers-card-fx > div {
    width: 100%;
    height: 100%;
}

.embers-card-fx canvas {
    display: block;
}

/* --- Decorative radial mandala behind the card content ------------------- */
/* Centered in the card, below the text (z-index:-1), fading in with the same
   hover state as the sparks. Slowly rotates for a subtle living ornament. */
.game-card-embers {
    overflow: hidden;   /* keep the artwork inside the card box */
}

.embers-card-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(155%, 560px);
    aspect-ratio: 1 / 1;
    z-index: -1;
    pointer-events: none;
    background: url("radial.png") center / contain no-repeat;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: opacity .45s ease;
    will-change: transform, opacity;
}

.game-card-embers.is-emitting .embers-card-radial {
    opacity: .5;
    animation: embers-radial-spin 60s linear infinite;
}

@keyframes embers-radial-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .embers-card-fx { transition: none; }
    .embers-card-radial { transition: none; }
    .game-card-embers.is-emitting .embers-card-radial { animation: none; }
}