/**
 * King Addons - Holographic Card Pro Widget Styles
 * Premium features styling: Sparkles, Rainbow Shift
 */

/* Sparkle canvas overlay */
.king-addons-holo-card__sparkle {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.king-addons-holo-card__sparkle--hover-only {
    opacity: 0;
}



/* Rainbow shift animation for holographic film */
@keyframes king-addons-holo-rainbow-shift {
    0% {
        filter: saturate(var(--rainbow-saturation, 1.6)) contrast(var(--rainbow-contrast, 1.12)) brightness(1.05) hue-rotate(0deg);
    }
    100% {
        filter: saturate(var(--rainbow-saturation, 1.6)) contrast(var(--rainbow-contrast, 1.12)) brightness(1.05) hue-rotate(360deg);
    }
}

.king-addons-holo-card--rainbow .king-addons-holo-card__film {
    will-change: filter;
}

/* Enhanced film for rainbow mode */
.king-addons-holo-card--rainbow .king-addons-holo-card__film {
    background:
        radial-gradient(900px 700px at var(--mx) var(--my),
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.00) 60%),
        /* Cover the entire card surface (not only around the pointer) */
        conic-gradient(from 180deg at 50% 50%,
            rgba(255, 0, 120, 0.40),
            rgba(0, 200, 255, 0.40),
            rgba(0, 255, 160, 0.36),
            rgba(255, 220, 0, 0.34),
            rgba(255, 100, 0, 0.36),
            rgba(180, 0, 255, 0.40),
            rgba(255, 0, 120, 0.40));
    mix-blend-mode: overlay;
    opacity: calc(0.22 + var(--p) * 0.8);
}

/* Auto-sway active state - card should show active styling during sway */
.king-addons-holo-card-stage[data-auto-sway="true"] .king-addons-holo-card {
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
}

/* Reduced motion: disable Pro animations */
@media (prefers-reduced-motion: reduce) {
    .king-addons-holo-card-stage[data-respect-reduced-motion="true"] .king-addons-holo-card__sparkle {
        display: none;
    }
    
    .king-addons-holo-card-stage[data-respect-reduced-motion="true"] .king-addons-holo-card--rainbow .king-addons-holo-card__film {
        animation: none !important;
    }
}

/* Additional sparkle glow effect */
.king-addons-holo-card__sparkle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.08) 0%,
        transparent 50%
    );
    opacity: var(--p, 0);
    pointer-events: none;
}

/* Smooth transitions for all Pro effects */
.king-addons-holo-card--rainbow {
    will-change: transform, box-shadow;
}