@import './common.css';

/* Animations */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes art-fade {
    0% { opacity: 1; }
    30% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes constellation-pulse {
    0% { opacity: 1; filter: brightness(1); }
    40% { opacity: 1; filter: brightness(4); }
    60% { opacity: 1; filter: brightness(4); }
    100% { opacity: 1; filter: brightness(1); }
}

/* Starfield Background */
body, html {
    background: linear-gradient(135deg,
        var(--color-bg-deep) 0%,
        var(--color-bg-purple) 40%,
        var(--color-bg-teal) 70%,
        var(--color-bg-deep) 100%);
    background-size: 400% 400%;
    animation: gradient 80s ease infinite;
}

/* Static star layer */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 50px 80px, rgba(255,255,255,0.68), transparent),
        radial-gradient(1px 1px at 140px 25px, rgba(255,255,255,0.53), transparent),
        radial-gradient(1px 1px at 80px 160px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 200px 115px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 25px 195px, rgba(255,255,255,0.68), transparent),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.53), transparent),
        radial-gradient(1px 1px at 180px 270px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 350px 200px, rgba(255,255,255,0.53), transparent),
        radial-gradient(1px 1px at 420px 150px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 260px 320px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 95px 40px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 380px 280px, rgba(255,255,255,0.53), transparent),
        radial-gradient(1px 1px at 220px 60px, rgba(255,255,255,0.38), transparent),
        radial-gradient(1.5px 1.5px at 460px 310px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 160px 340px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 330px 45px, rgba(255,255,255,0.53), transparent),
        radial-gradient(1px 1px at 70px 290px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 490px 170px, rgba(255,255,255,0.38), transparent),
        radial-gradient(1px 1px at 15px 120px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 440px 70px, rgba(255,255,255,0.45), transparent);
    background-size:
        200px 250px, 300px 280px, 250px 320px,
        350px 200px, 280px 350px,
        450px 250px, 280px 400px, 380px 320px,
        320px 380px, 420px 380px,
        260px 220px, 340px 350px, 180px 290px,
        400px 270px, 310px 400px,
        370px 230px, 240px 360px, 500px 300px,
        220px 310px, 460px 260px;
    pointer-events: none;
    z-index: 0;
}

/* Twinkling star layer */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 170px 50px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 100px 240px, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 240px 180px, rgba(255,255,255,0.68), transparent),
        radial-gradient(1.5px 1.5px at 40px 310px, rgba(255,255,255,0.75), transparent),
        radial-gradient(2px 2px at 320px 130px, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.5px 1.5px at 430px 90px, rgba(255,255,255,0.83), transparent),
        radial-gradient(2px 2px at 60px 170px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 290px 280px, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.5px 1.5px at 200px 350px, rgba(255,255,255,0.68), transparent),
        radial-gradient(2px 2px at 380px 220px, rgba(255,255,255,0.6), transparent);
    background-size:
        320px 270px, 400px 300px, 220px 380px,
        350px 380px, 280px 320px,
        370px 340px, 260px 290px, 310px 360px,
        440px 310px, 290px 400px;
    pointer-events: none;
    z-index: 0;
    animation: twinkle 4s ease-in-out infinite alternate;
}

/* Constellation layer */
.constellation-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        url('artifacts/constellation-sword.svg') no-repeat 78% 15% / 160px auto,
        url('artifacts/constellation-cup.svg') no-repeat 18% 55% / 160px auto,
        url('artifacts/constellation-coin.svg') no-repeat 82% 60% / 160px auto,
        url('artifacts/constellation-wand.svg') no-repeat 22% 12% / 160px auto;
    animation: twinkle 4s ease-in-out infinite alternate;
}

/* Card Fan Preview */
.card-fan {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 16px;
    filter: drop-shadow(0 0 20px rgba(212, 160, 64, 0.3))
            drop-shadow(0 0 50px rgba(212, 160, 64, 0.15));
}

.fan-card {
    width: 90px;
    aspect-ratio: 11 / 19;
    border-radius: var(--radius-sm-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    object-fit: cover;
    margin: 0 -18px;
}

.fan-card:nth-child(1) {
    transform: rotate(-20deg);
    z-index: 0;
}

.fan-card:nth-child(2) {
    transform: rotate(-10deg) translateY(-4px);
    z-index: 1;
}

.fan-card:nth-child(3) {
    transform: translateY(-8px);
    z-index: 2;
}

.fan-card:nth-child(4) {
    transform: rotate(10deg) translateY(-4px);
    z-index: 1;
}

.fan-card:nth-child(5) {
    transform: rotate(20deg);
    z-index: 0;
}

/* Content above starfield */
body > * {
    position: relative;
    z-index: 1;
}

/* Card Flip */
.card-flip {
    perspective: 800px;
    display: inline-block;
}

.card-face-back,
.card-face-front {
    backface-visibility: hidden;
    transition: transform 0.5s ease;
}

.card-face-back {
    transform: rotateY(0deg);
}

.card-face-front {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
}

.card-flip.flipped .card-face-back {
    transform: rotateY(-180deg);
}

.card-flip.flipped .card-face-front {
    transform: rotateY(0deg);
}

.card-flip.flipped.reversed .card-face-front {
    transform: rotateY(0deg) rotate(180deg);
}

.history-card.reversed img {
    transform: rotate(180deg);
}

.card-flip img {
    display: block;
    max-width: 100%;
    height: auto;
}

.spread-slot-frame .card-flip {
    position: absolute;
    inset: 0;
}

.spread-slot-frame .card-face-back,
.spread-slot-frame .card-face-front {
    width: 100%;
    height: 100%;
}

.art-switching .tarot-container {
    animation: art-fade 900ms ease-in-out;
}

.art-switching .constellation-layer {
    animation: constellation-pulse 900ms ease-in-out;
}

/* Shuffle Animation */
.flying-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    will-change: transform, opacity;
}

.shuffle-fan-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    body, html {
        animation: none;
    }

    body::after {
        animation: none;
    }

    .constellation-layer {
        animation: none;
    }

    .deck-image {
        transition: none;
    }

    .action-btn,
    .spread-btn {
        transition: none;
    }

    .history-card {
        transition: none;
    }

    .card-face-back,
    .card-face-front {
        transition: none;
    }

    .art-switching .tarot-container,
    .art-switching .constellation-layer {
        animation: none;
    }

    .flying-card,
    .shuffle-fan-card {
        transition: none !important;
    }
}

@media (max-width: 768px) {
    .fan-card {
        width: 65px;
        margin: 0 -14px;
    }

    .fan-card:nth-child(2) { transform: rotate(-10deg) translateY(-3px); }
    .fan-card:nth-child(3) { transform: translateY(-6px); }
    .fan-card:nth-child(4) { transform: rotate(10deg) translateY(-3px); }
}