/* Efeito holográfico interativo, adaptado para a estrutura do Figurinhas123. */
.foil-interactive {
    --foil-rotate-x: 0deg;
    --foil-rotate-y: 0deg;
    --foil-pointer-x: 50%;
    --foil-pointer-y: 50%;
    --foil-distance: 0;
    --foil-shadow-x: 0px;
    position: relative;
    transform: perspective(900px) rotateX(var(--foil-rotate-x)) rotateY(var(--foil-rotate-y));
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
    will-change: transform;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.foil-interactive.is-foil-active {
    transition-duration: 70ms;
    filter: drop-shadow(var(--foil-shadow-x) 16px 18px rgba(0, 0, 0, .42));
}

/* Mantém frente e verso em camadas próprias durante a virada. */
.flip-card-inner {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}

.flip-card-front,
.flip-card-back {
    inset: 0;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}

.flip-card-front {
    transform: rotateY(0deg) translateZ(.2px) !important;
}

.flip-card-back {
    transform: rotateY(180deg) translateZ(.2px) !important;
}

.flip-card-container.is-flipping .foil-card-surface::before,
.flip-card-container.is-flipping .foil-card-surface::after,
.flip-card-container.flipped .flip-card-front::before,
.flip-card-container.flipped .flip-card-front::after {
    opacity: 0 !important;
    transition: opacity 100ms ease !important;
}

.flip-card-container.is-flipping {
    filter: none !important;
}

.foil-card-surface {
    --foil-layer-opacity: .14;
    --foil-glare-opacity: .05;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(.01px);
}

.foil-card-surface.effect-shine,
.foil-card-surface.effect-prism,
.foil-card-surface.effect-rainbow {
    filter: saturate(1.02) contrast(1.01);
}

.foil-card-surface.effect-shine::before,
.foil-card-surface.effect-prism::before,
.foil-card-surface.effect-rainbow::before,
.foil-card-surface.effect-shine::after,
.foil-card-surface.effect-prism::after,
.foil-card-surface.effect-rainbow::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    left: 0;
    border-radius: inherit;
    pointer-events: none;
}

.foil-card-surface.effect-shine::before,
.foil-card-surface.effect-prism::before,
.foil-card-surface.effect-rainbow::before {
    z-index: 14;
    opacity: var(--foil-layer-opacity);
    background-position: var(--foil-pointer-x) var(--foil-pointer-y), center;
    background-size: 180% 180%, 100% 100%;
    mix-blend-mode: color-dodge;
    transition: opacity 180ms ease, background-position 80ms linear;
}

.foil-card-surface.effect-shine::before {
    background-image:
        radial-gradient(circle at var(--foil-pointer-x) var(--foil-pointer-y), rgba(255,255,255,.78) 0 5%, rgba(195,225,255,.2) 18%, transparent 46%),
        repeating-linear-gradient(110deg,
            rgba(190,140,255,.28) 0 5%,
            rgba(100,175,255,.24) 8%,
            rgba(105,235,190,.2) 14%,
            rgba(255,225,120,.22) 20%,
            rgba(255,145,155,.24) 27%,
            rgba(190,140,255,.28) 34%);
    background-size: 160% 160%, 380% 380%;
    background-blend-mode: screen, overlay;
}

.foil-card-surface.effect-prism::before {
    background-image:
        radial-gradient(circle at var(--foil-pointer-x) var(--foil-pointer-y), rgba(255,255,255,.7) 0 4%, transparent 34%),
        repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.14) 14px, transparent 15px 27px),
        conic-gradient(from 225deg at var(--foil-pointer-x) var(--foil-pointer-y),
            rgba(255,105,125,.48), rgba(255,215,100,.42), rgba(110,230,185,.38),
            rgba(100,175,255,.46), rgba(190,125,235,.44), rgba(255,105,125,.48));
    background-size: 155% 155%, 100% 100%, 165% 165%;
    background-blend-mode: screen, soft-light, color;
    mix-blend-mode: color-dodge;
}

.foil-card-surface.effect-rainbow::before {
    background-image:
        radial-gradient(circle at var(--foil-pointer-x) var(--foil-pointer-y), rgba(255,255,255,.62) 0 4%, transparent 38%),
        repeating-linear-gradient(-30deg,
            rgba(150,55,65,.55) 0 8%, rgba(155,125,65,.5) 13%, rgba(65,135,90,.46) 20%,
            rgba(65,135,145,.48) 27%, rgba(75,95,155,.5) 34%, rgba(125,75,145,.52) 41%, rgba(150,55,65,.55) 49%);
    background-size: 165% 165%, 390% 390%;
    background-blend-mode: screen, soft-light;
    mix-blend-mode: soft-light;
}

.foil-card-surface.effect-shine::after,
.foil-card-surface.effect-prism::after,
.foil-card-surface.effect-rainbow::after {
    z-index: 15;
    opacity: var(--foil-glare-opacity);
    background:
        radial-gradient(circle at var(--foil-pointer-x) var(--foil-pointer-y), rgba(255,255,255,.82) 0 3%, rgba(255,255,255,.16) 16%, transparent 44%),
        linear-gradient(105deg, transparent 36%, rgba(255,255,255,.26) 49%, transparent 62%);
    mix-blend-mode: soft-light;
    transition: opacity 160ms ease, background-position 80ms linear;
}

.foil-card-surface > img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(.05px);
}

.foil-card-surface .quantity-badge {
    z-index: 30;
}

@media (prefers-reduced-motion: reduce) {
    .foil-interactive,
    .foil-interactive.is-foil-active {
        transform: none !important;
        transition: none;
    }

    .foil-card-surface::before,
    .foil-card-surface::after {
        animation: none !important;
        transition: none !important;
    }
}