/**
 * Holo Cards - Holographic Trading Card Component
 *
 * A reusable card component with holographic/gaming aesthetic.
 * Use for: team members, profiles, products, collectibles.
 *
 * Location: static/css/core/holo-cards.css
 *
 * CSS Techniques used:
 * - CSS Transforms for 3D tilt
 * - Gradients for rainbow holographic effect
 * - mix-blend-mode: color-dodge for shine
 * - CSS custom properties for dynamic effects
 * - @keyframes for animations
 *
 * Rarity variants: --common, --rare, --epic, --legendary
 *
 * Inspired by: https://poke-holo.simey.me/
 */

/* =============================================================================
    CSS Custom Properties
   ============================================================================= */

:root {
    /* Card dimensions */
    --card-width: 280px;
    --card-height: 450px;
    --card-radius: 18px;

    /* Rarity colors */
    --rarity-common: #58a6ff;
    --rarity-rare: #1db954;
    --rarity-epic: #a855f7;
    --rarity-legendary: #fbbf24;
}

/* =============================================================================
    Card Grid
   ============================================================================= */

.holo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 3rem;
    padding: 2rem 0;
    perspective: 1500px;
}

/* =============================================================================
    Card Container - 3D Transform Container
   ============================================================================= */

.holo-card {
    --mx: 50%;
    --my: 50%;
    --rx: 0deg;
    --ry: 0deg;
    --glow: rgba(88, 166, 255, 0.3);

    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    margin: 0 auto;
    transform-style: preserve-3d;
    cursor: pointer;

    /* Smooth 3D transform */
    transform:
        perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.15s ease-out;
}

.holo-card:hover {
    --rx: 5deg;
    --ry: 5deg;
}

/* =============================================================================
    Card Inner - The actual card face
   ============================================================================= */

.holo-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg,
            var(--ffm-dark-alt) 0%,
            var(--ffm-dark) 50%,
            var(--ffm-dark-alt) 100%);
    border-radius: var(--card-radius);
    overflow: hidden;

    /* Border glow */
    box-shadow:
        0 0 0 3px var(--glow),
        0 20px 50px -10px rgba(0, 0, 0, 0.5),
        0 0 30px -5px var(--glow);

    transition: box-shadow 0.3s ease;
}

.holo-card:hover .holo-card__inner {
    box-shadow:
        0 0 0 3px var(--glow),
        0 30px 60px -10px rgba(0, 0, 0, 0.6),
        0 0 50px 0px var(--glow);
}

/* =============================================================================
    Holographic Gradient Overlay
   ============================================================================= */

.holo-card__holo {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease;

    /* Rainbow gradient that follows mouse */
    background: linear-gradient(115deg,
            transparent 0%,
            transparent 25%,
            rgba(255, 0, 0, 0.15) 30%,
            rgba(255, 154, 0, 0.15) 35%,
            rgba(208, 222, 33, 0.15) 40%,
            rgba(79, 220, 74, 0.15) 45%,
            rgba(63, 218, 216, 0.15) 50%,
            rgba(47, 201, 226, 0.15) 55%,
            rgba(28, 127, 238, 0.15) 60%,
            rgba(95, 21, 242, 0.15) 65%,
            rgba(186, 12, 248, 0.15) 70%,
            transparent 75%,
            transparent 100%);
    background-size: 250% 250%;
    background-position: var(--mx) var(--my);
}

.holo-card:hover .holo-card__holo {
    opacity: 1;
    animation: holoShift 4s ease infinite;
}

@keyframes holoShift {

    0%,
    100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }

    25% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 100% 50%;
        filter: hue-rotate(90deg);
    }

    75% {
        background-position: 50% 100%;
    }
}

/* =============================================================================
    Glare / Shine Effect
   ============================================================================= */

.holo-card__glare {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Radial glare that follows perspective */
    background: radial-gradient(ellipse at var(--mx) var(--my),
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.15) 30%,
            transparent 60%);
}

.holo-card:hover .holo-card__glare {
    opacity: 1;
}

/* =============================================================================
    Sparkle Effect (CSS-only sparkles)
   ============================================================================= */

.holo-card__sparkle {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Multiple sparkle dots */
    background-image:
        radial-gradient(circle at 15% 25%, white 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 15%, white 1px, transparent 1px),
        radial-gradient(circle at 45% 65%, white 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 55%, white 1px, transparent 1px),
        radial-gradient(circle at 25% 85%, white 1px, transparent 1px),
        radial-gradient(circle at 90% 80%, white 1.5px, transparent 1.5px),
        radial-gradient(circle at 10% 60%, white 1px, transparent 1px),
        radial-gradient(circle at 60% 35%, white 1px, transparent 1px);
}

.holo-card:hover .holo-card__sparkle {
    opacity: 0.8;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.9;
    }
}

/* =============================================================================
    Card Content - Media

    __media: Flexible container for visual content.
    Supports: <img>, <video>, <svg>, or placeholder content.
   ============================================================================= */

.holo-card__media {
    position: relative;
    width: 100%;
    height: 45%;
    overflow: hidden;
}

.holo-card__media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, var(--ffm-dark) 0%, transparent 100%);
    pointer-events: none;
}

.holo-card__media img,
.holo-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.holo-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ffm-dark-alt), var(--ffm-dark));
    font-size: 5rem;
    color: var(--ffm-gray-dark);
}

/* =============================================================================
    Card Body Section
   ============================================================================= */

.holo-card__body {
    position: relative;
    padding: 1rem 1.25rem;
    z-index: 5;
}

.holo-card__title {
    font-family: var(--ffm-font-display);
    font-size: 1.6rem;
    color: var(--ffm-white);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.holo-card__subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.holo-card__tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--ffm-gray);
    margin-bottom: 0.75rem;
}

/* =============================================================================
    Stats Grid
   ============================================================================= */

.holo-card__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.holo-card__stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.2rem 0;
}

.holo-card__stat-label {
    color: var(--ffm-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

.holo-card__stat-value {
    font-family: var(--ffm-font-display);
    font-size: 1.1rem;
    color: var(--ffm-white);
}

/* =============================================================================
    Overall Rating Badge
   ============================================================================= */

.holo-card__rating {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ffm-font-display);
    font-size: 1.6rem;
    color: var(--ffm-dark);
    z-index: 5;
    box-shadow: 0 4px 15px var(--glow);
}

/* =============================================================================
    Rarity Badge
   ============================================================================= */

.holo-card__rarity {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border-radius: 4px;
    z-index: 5;
}

/* =============================================================================
    Caption (hover reveal)

    __caption: Flexible footer for contextual text.
    Use for: quotes, mottos, descriptions, CTAs.
   ============================================================================= */

.holo-card__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(13, 17, 23, 0.98) 0%, transparent 100%);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ffm-gray);
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 6;
}

.holo-card:hover .holo-card__caption {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
    Rarity Variants
   ============================================================================= */

/* Common - Blue */
.holo-card--common {
    --glow: rgba(88, 166, 255, 0.35);
}

.holo-card--common .holo-card__subtitle {
    color: var(--rarity-common);
}

.holo-card--common .holo-card__rating {
    background: linear-gradient(135deg, #58a6ff, #388bfd);
}

.holo-card--common .holo-card__rarity {
    background: var(--rarity-common);
    color: white;
}

/* Rare - Green */
.holo-card--rare {
    --glow: rgba(29, 185, 84, 0.4);
}

.holo-card--rare .holo-card__subtitle {
    color: var(--rarity-rare);
}

.holo-card--rare .holo-card__rating {
    background: linear-gradient(135deg, #1db954, #1ed760);
}

.holo-card--rare .holo-card__rarity {
    background: var(--rarity-rare);
    color: var(--ffm-dark);
}

.holo-card--rare .holo-card__holo {
    opacity: 0.2;
}

.holo-card--rare:hover .holo-card__holo {
    opacity: 1;
}

/* Epic - Purple */
.holo-card--epic {
    --glow: rgba(168, 85, 247, 0.45);
}

.holo-card--epic .holo-card__subtitle {
    color: var(--rarity-epic);
}

.holo-card--epic .holo-card__rating {
    background: linear-gradient(135deg, #a855f7, #ec4899);
}

.holo-card--epic .holo-card__rarity {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: white;
}

.holo-card--epic .holo-card__holo {
    opacity: 0.35;
}

.holo-card--epic:hover .holo-card__holo {
    opacity: 1;
}

/* Legendary - Gold with extra effects */
.holo-card--legendary {
    --glow: rgba(251, 191, 36, 0.5);
}

.holo-card--legendary .holo-card__inner {
    border: 3px solid transparent;
    background:
        linear-gradient(var(--ffm-dark-alt), var(--ffm-dark)) padding-box,
        linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24) border-box;
}

.holo-card--legendary .holo-card__subtitle {
    color: var(--rarity-legendary);
}

.holo-card--legendary .holo-card__rating {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.holo-card--legendary .holo-card__rarity {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: var(--ffm-dark);
    animation: legendaryPulse 2s ease-in-out infinite;
}

.holo-card--legendary .holo-card__holo {
    opacity: 0.5;
    animation: holoShift 3s ease infinite;
}

.holo-card--legendary:hover .holo-card__holo {
    opacity: 1;
}

@keyframes legendaryPulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.4);
    }
}

/* =============================================================================
    Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .holo-grid {
        gap: 2rem;
        padding: 1rem 0;
    }

    .holo-card {
        --card-width: 260px;
        --card-height: 370px;
    }

    .holo-card__title {
        font-size: 1.4rem;
    }

    .holo-card__rating {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }
}

/* =============================================================================
    Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .holo-card,
    .holo-card__holo,
    .holo-card__glare,
    .holo-card__sparkle,
    .holo-card__caption,
    .holo-card--legendary .holo-card__rarity {
        transition: none;
        animation: none;
    }
}