/* Animações Customizadas */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.5;
    }
}

@keyframes fog {
    0% {
        transform: translateX(-10%) translateY(0) scale(1);
        opacity: 0.1;
    }

    50% {
        transform: translateX(10%) translateY(-5%) scale(1.1);
        opacity: 0.2;
    }

    100% {
        transform: translateX(-10%) translateY(0) scale(1);
        opacity: 0.1;
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-flicker {
    animation: flicker 4s linear infinite;
}

/* Efeito de ruído/vignette no fundo */
.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Cartas de Tarot (Classes Inseridas) */
.tarot-card {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.tarot-card.selected {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.4);
}

.tarot-card.selected .tarot-card-inner {
    border-color: rgba(217, 119, 6, 0.8);
}

.tarot-card.flipped .tarot-card-inner {
    transform: rotateY(180deg);
}

.tarot-card-inner {
    position: relative;
    width: 6rem;
    height: 10rem;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border: 1px solid #262626;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .tarot-card-inner {
        width: 8rem;
        height: 13rem;
    }
}

.tarot-card-front,
.tarot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    background-color: #171717;
    overflow: hidden;
}

.tarot-card-front {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #262626 0%, #171717 100%);
}

.tarot-card-front::after {
    content: "Arcano";
    font-family: 'Cinzel', serif;
    color: #a3a3a3;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

.tarot-card-back {
    background-image: url('../img/costas.jpg');
    background-size: cover;
    background-position: center;
}

.tarot-card-back::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid #525252;
    border-radius: 4px;
}