/* ============================================
   HOLOGRAPHIC EFFECTS - Based on simeydotme/pokemon-cards-css
   https://github.com/simeydotme/pokemon-cards-css
   ============================================ */

:root {
    --mx: 50%;
    --my: 50%;
    --s: 1;
    --o: 0;
    --tx: 0px;
    --ty: 0px;
    --rx: 0deg;
    --ry: 0deg;
    --pos: 50% 50%;
    --posx: 50%;
    --posy: 50%;
    --hyp: 0;
    --pointer-x: 50%;
    --pointer-y: 50%;
    --card-opacity: 0;
}

.dcard-modal-image-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1200px;
    overflow: visible;
}

.dcard-modal-image-container.has-holo {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1200px;
    overflow: visible;
}

.dcard-modal-image-container.has-holo .card {
    --radius: 4.55% / 3.5%;
    z-index: calc(var(--s) * 100);
    transform: translate3d(0, 0, 0.1px);
    will-change: transform, visibility;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.dcard-modal-image-container.has-holo .card__translater,
.dcard-modal-image-container.has-holo .card__rotator {
    display: grid;
    perspective: 1200px;
    transform-origin: center;
    will-change: transform;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dcard-modal-image-container.has-holo .card__translater {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
    will-change: transform;
    overflow: visible;
}

.dcard-modal-image-container.has-holo .card__rotator {
    --glow: #69d1e9;
    transform: rotateY(var(--rx)) rotateX(var(--ry));
    transform-style: preserve-3d;
    box-shadow: 0px 10px 20px -5px black;
    border-radius: var(--radius);
    outline: none;
    transition: box-shadow 0.4s ease, outline 0.2s ease, transform 0.1s ease;
    will-change: transform, box-shadow;
    overflow: hidden;
    backface-visibility: visible;
}

/* Reset transition when leaving to smooth out return */
.dcard-modal-image-container.has-holo:not(.interacting) .card__rotator {
    transition: box-shadow 0.4s ease, outline 0.2s ease, transform 0.5s ease;
}

.dcard-modal-image-container.has-holo .card__rotator * {
    width: 100%;
    display: grid;
    grid-area: 1/1;
    border-radius: var(--radius);
    image-rendering: optimizeQuality;
    transform-style: preserve-3d;
    overflow: visible;
}

.dcard-modal-image-container.has-holo .card__front {
    opacity: 1;
    transition: opacity 0.2s ease-out;
    backface-visibility: visible;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: transparent;
    overflow: visible;
    z-index: 1;
}

.dcard-modal-image-container.has-holo .card__shine {
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
    --space: 5%;
    --angle: 133deg;
    --imgsize: 500px;
    --red: #f80e7b;
    --yel: #eedf10;
    --gre: #21e985;
    --blu: #0dbde9;
    --vio: #c929f1;

    display: grid;
    overflow: visible;
    z-index: 3;
    transform: translateZ(1px);
    background: transparent;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.5s ease, background-position 0.1s ease;
}

.dcard-modal-image-container.has-holo.interacting .card__shine {
    opacity: 1;
}

.dcard-modal-image-container.has-holo .card[data-rarity="common"] .card__shine,
.dcard-modal-image-container.has-holo.interacting .card[data-rarity="common"] .card__shine {
    opacity: 0 !important;
    display: none !important;
}

.dcard-modal-image-container.has-holo .card__shine:after,
.dcard-modal-image-container.has-holo .card__shine:before {
    content: "";
    grid-area: 1/1;
    transform: translateZ(1px);
    border-radius: var(--radius);
}

/* 
   COMMON / UNCOMMON - Glare Only
   Glare only shows on hover/interaction
*/
.dcard-modal-image-container.has-holo .card[data-rarity="common"] .card__glare {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dcard-modal-image-container.has-holo.interacting .card[data-rarity="common"] .card__glare {
    opacity: 0.7;
}

/* Global Glare Style */
.dcard-modal-image-container.has-holo .card__glare {
    transform: translateZ(1.4px);
    background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.6) 10%,
            rgba(255, 255, 255, 0.45) 20%,
            rgba(0, 0, 0, 0.35) 90%);
    opacity: var(--card-opacity);
    mix-blend-mode: overlay;
    pointer-events: none;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: var(--radius);
    z-index: 4;
    will-change: opacity;
}

/* 
   V - Pokemon V Effect
*/
.dcard-modal-image-container.has-holo .card[data-rarity*="rare holo v"] .card__shine,
.dcard-modal-image-container.has-holo .card[data-rarity*="rare holo v"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 500px;

    background-image: var(--grain),
        repeating-linear-gradient(0deg,
            rgb(255, 119, 115) calc(var(--space) * 1),
            rgba(255, 237, 95, 1) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgba(120, 148, 255, 1) calc(var(--space) * 5),
            rgb(216, 117, 255) calc(var(--space) * 6),
            rgb(255, 119, 115) calc(var(--space) * 7)),
        repeating-linear-gradient(var(--angle),
            #0e152e 0%,
            hsl(180, 10%, 60%) 3.8%,
            hsl(180, 29%, 66%) 4.5%,
            hsl(180, 10%, 60%) 5.2%,
            #0e152e 10%,
            #0e152e 12%),
        radial-gradient(farthest-corner circle at var(--mx) var(--my),
            rgba(0, 0, 0, 0.1) 12%,
            rgba(0, 0, 0, 0.15) 20%,
            rgba(0, 0, 0, 0.25) 120%);

    background-blend-mode: screen, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300%, 200%;
    background-position: center, 0% var(--posy),
        calc(50% + (var(--posx) - 50%) * 0.5) var(--posy),
        calc(50% + (var(--posx) - 50%) * 0.5) var(--posy);

    filter: brightness(0.8) contrast(2.95) saturate(0.5);
}

.dcard-modal-image-container.has-holo .card[data-rarity="rare holo v"] .card__shine:after {
    content: "";
    background-position: center, 0% var(--posy),
        calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
    background-size: var(--imgsize), 200% 400%, 195%, 200%;
    filter: brightness(1) contrast(2.5) saturate(1.75);
    mix-blend-mode: soft-light;
}

/* 
   RAINBOW SECRET - Rainbow Rare Effect
*/
.dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine,
.dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine:after {
    --space: 7%;
    --angle: -20deg;
    --angle2: 130deg;
    --imgsize: 540px 700px;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(var(--angle),
            rgb(253, 71, 65) calc(var(--space) * 1),
            rgb(255, 243, 151) calc(var(--space) * 2),
            rgba(168, 255, 95, 1) calc(var(--space) * 3),
            rgba(131, 255, 247, 1) calc(var(--space) * 4),
            rgb(75, 198, 255) calc(var(--space) * 5),
            rgb(255, 73, 246) calc(var(--space) * 6),
            rgb(255, 56, 49) calc(var(--space) * 7)),
        repeating-linear-gradient(var(--angle2),
            rgba(89, 46, 80, 0.5) 0%,
            hsl(118, 43%, 76%) 2.5%,
            rgb(223, 96, 202) 5%,
            hsl(180, 57%, 56%) 7.5%,
            rgba(14, 21, 46, 0.5) 10%,
            rgba(14, 21, 46, 0.5) 15%),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp");

    background-size: 50% 50%, 500% 500%, 1000% 1000%, var(--imgsize);
    background-position: center, 0% calc(var(--posy) * 1.5),
        var(--posx) var(--posy), center;
    background-blend-mode: color-burn, soft-light, normal;

    filter: brightness(calc((var(--hyp) * 0.3) + 0.75)) contrast(2.2) saturate(1.3);
}

.dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine:after {
    content: "";
    background-position: center, 0% calc(var(--posy) * -1),
        calc(var(--posx) * -1) calc(var(--posy) * -1), center;
    mix-blend-mode: exclusion;
}

/* 
   LIMITED RED - Special Effect (Effect 4)
   Based on rainbow but tinted red
*/
.dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine,
.dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine:after {
    --space: 6%;
    --angle: -18deg;
    --angle2: 125deg;
    --imgsize: 540px 700px;

    background-image: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/rainbow2.jpg"),
        repeating-linear-gradient(var(--angle),
            rgb(255, 90, 90) calc(var(--space) * 1),
            rgb(255, 140, 140) calc(var(--space) * 2),
            rgb(255, 200, 200) calc(var(--space) * 3),
            rgb(255, 110, 110) calc(var(--space) * 4),
            rgb(200, 40, 40) calc(var(--space) * 5),
            rgb(255, 150, 150) calc(var(--space) * 6),
            rgb(255, 70, 70) calc(var(--space) * 7)),
        repeating-linear-gradient(var(--angle2),
            rgba(90, 0, 0, 0.45) 0%,
            rgba(255, 140, 140, 0.8) 3%,
            rgba(255, 200, 200, 0.7) 6%,
            rgba(90, 0, 0, 0.45) 10%,
            rgba(90, 0, 0, 0.45) 15%),
        url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion2.webp");

    background-size: 50% 50%, 500% 500%, 1000% 1000%, var(--imgsize);
    background-position: center, 0% calc(var(--posy) * 1.4),
        var(--posx) var(--posy), center;
    background-blend-mode: color-burn, soft-light, normal;

    filter: brightness(calc((var(--hyp) * 0.25) + 0.78)) contrast(2.2) saturate(1.25);
}

.dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine:after {
    content: "";
    background-position: center, 0% calc(var(--posy) * -1.1),
        calc(var(--posx) * -1) calc(var(--posy) * -1), center;
    mix-blend-mode: screen;
}

/* ===========================================
   MOBILE: Use simple glare effect for ALL cards
   Complex effects don't render well on iOS WebKit
   =========================================== */

@media (hover: none) and (pointer: coarse) {

    /* Disable complex shine effects on mobile - use glare only */
    .dcard-modal-image-container.has-holo .card[data-rarity*="rare holo v"] .card__shine,
    .dcard-modal-image-container.has-holo .card[data-rarity*="rare holo v"] .card__shine:after,
    .dcard-modal-image-container.has-holo .card[data-rarity*="rare holo v"] .card__shine:before,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine:after,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare rainbow"] .card__shine:before,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine:after,
    .dcard-modal-image-container.has-holo .card[data-rarity^="rare limited"] .card__shine:before {
        display: none !important;
        opacity: 0 !important;
    }

    /* Ensure glare works for all cards on mobile */
    .dcard-modal-image-container.has-holo .card__glare {
        opacity: var(--card-opacity);
        background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
                rgba(255, 255, 255, 0.5) 10%,
                rgba(255, 255, 255, 0.35) 20%,
                rgba(0, 0, 0, 0.2) 90%);
        mix-blend-mode: overlay;
    }

    .dcard-modal-image-container.has-holo.interacting .card__glare {
        opacity: 0.8;
    }
}