/* =====================================================
   SPARKD ACHIEVEMENT EFFECTS
   ===================================================== */


/* =====================================================
   LOCKED CARDS
   ===================================================== */

.achievement.locked {

    filter: grayscale(1);

    opacity: 0.55;

    transition:
        filter 0.6s ease,
        opacity 0.6s ease,
        transform 0.4s ease,
        box-shadow 0.6s ease;

}


.achievement.locked .achievementIcon img {

    filter:
        grayscale(1)
        brightness(0.45);

    transition:
        filter 0.8s ease,
        transform 0.8s ease;

}


/* =====================================================
   UNLOCKED CARDS
   ===================================================== */

.achievement.unlocked {

    filter: none;

    opacity: 1;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 15px rgba(255, 140, 0, 0.45),
        0 0 35px rgba(255, 100, 0, 0.25);

    border-color:
        rgba(255, 140, 0, 0.8);

    transition:
        filter 0.6s ease,
        opacity 0.6s ease,
        transform 0.4s ease,
        box-shadow 0.6s ease;

}


.achievement.unlocked .achievementIcon img {

    filter: none;

    transform:
        scale(1.05);

    transition:
        filter 0.8s ease,
        transform 0.8s ease;

}


/* =====================================================
   UNLOCKED HOVER
   ===================================================== */

.achievement.unlocked:hover {

    transform:
        translateY(-8px)
        scale(1.02);

    box-shadow:
        0 0 20px rgba(255, 140, 0, 0.65),
        0 0 45px rgba(255, 100, 0, 0.35);

}


/* =====================================================
   UNLOCKED TITLE
   ===================================================== */

.achievement.unlocked span {

    text-shadow:
        0 0 8px rgba(255, 140, 0, 0.7),
        0 0 18px rgba(255, 100, 0, 0.4);

}


/* =====================================================
   UNLOCKED ICON PULSE
   ===================================================== */

@keyframes sparkdAchievementPulse {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

    100% {

        transform:
            scale(1);

    }

}


.achievement.unlocked .achievementIcon {

    animation:
        sparkdAchievementPulse
        2.5s ease-in-out infinite;

}


/* =====================================================
   SPARKD OG
   ===================================================== */

.achievement.unlocked[data-achievement="sparkd-og"] {

    box-shadow:
        0 0 20px rgba(255, 60, 20, 0.7),
        0 0 50px rgba(255, 80, 20, 0.45);

}


.achievement.unlocked[data-achievement="sparkd-og"]
.achievementIcon img {

    transform:
        scale(1.08);

}


/* =====================================================
   FULL SCREEN ACHIEVEMENT POPUP
   ===================================================== */

#sparkdAchievementPopup {

    position: fixed;

    inset: 0;

    z-index: 999999;

    pointer-events: none;

}


/* =====================================================
   DARK OVERLAY
   ===================================================== */

.sparkdAchievementOverlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}


/* =====================================================
   VISIBLE POPUP
   ===================================================== */

#sparkdAchievementPopup.sparkd-achievement-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

/* =====================================================
   VISIBLE ACHIEVEMENT OVERLAY
   ===================================================== */

#sparkdAchievementPopup.sparkd-achievement-visible
.sparkdAchievementOverlay {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

/* =====================================================
   MODAL
   ===================================================== */

.sparkdAchievementModal {

    position: relative;

    width:
        min(520px, 92vw);

    max-height:
        92vh;

    overflow-y: auto;

    padding:
        35px 25px 30px;

    text-align: center;

    border-radius: 28px;

    background:
        rgba(15, 15, 20, 0.96);

    border:
        2px solid
        rgba(255, 140, 0, 0.75);

    box-shadow:

        0 0 25px
        rgba(255, 160, 0, 0.7),

        0 0 70px
        rgba(255, 90, 0, 0.5),

        0 0 130px
        rgba(255, 60, 0, 0.25);

    transform:
        scale(0.35);

    opacity: 0;

}


/* =====================================================
   POPUP ENTRANCE
   ===================================================== */

#sparkdAchievementPopup.sparkd-achievement-visible
.sparkdAchievementModal {

    animation:
        sparkdAchievementEntrance
        0.8s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        forwards;

}


@keyframes sparkdAchievementEntrance {

    0% {

        transform:
            scale(0.25)
            rotate(-4deg);

        opacity: 0;

    }

    55% {

        transform:
            scale(1.08)
            rotate(1deg);

        opacity: 1;

    }

    75% {

        transform:
            scale(0.96)
            rotate(0deg);

    }

    100% {

        transform:
            scale(1)
            rotate(0deg);

        opacity: 1;

    }

}


/* =====================================================
   POPUP TITLE
   ===================================================== */

.sparkdAchievementTitle {

    font-size:
        clamp(22px, 5vw, 34px);

    font-weight:
        900;

    letter-spacing:
        1px;

    margin-bottom:
        15px;

    text-shadow:

        0 0 10px
        rgba(255, 180, 0, 0.9),

        0 0 25px
        rgba(255, 100, 0, 0.6);

}


/* =====================================================
   LARGE ARTWORK
   ===================================================== */

.sparkdAchievementArtwork {

    width:
        min(390px, 80vw);

    height:
        min(390px, 55vh);

    margin:
        0 auto 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.sparkdAchievementArtwork img {

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    filter:

        drop-shadow(
            0 0 12px
            rgba(255, 180, 0, 0.9)
        )

        drop-shadow(
            0 0 35px
            rgba(255, 80, 0, 0.7)
        );

    animation:
        sparkdAchievementArtworkPulse
        2s
        ease-in-out
        infinite;

}


@keyframes sparkdAchievementArtworkPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.07);

    }

}


/* =====================================================
   ACHIEVEMENT NAME
   ===================================================== */

.sparkdAchievementName {

    font-size:
        clamp(25px, 6vw, 40px);

    font-weight:
        900;

    letter-spacing:
        2px;

    margin-top:
        5px;

    text-shadow:

        0 0 10px
        rgba(255, 170, 0, 0.9),

        0 0 25px
        rgba(255, 90, 0, 0.6);

}


/* =====================================================
   REQUIREMENT
   ===================================================== */

.sparkdAchievementRequirement {

    margin-top:
        8px;

    font-size:
        15px;

    opacity:
        0.7;

}


/* =====================================================
   CLOSE BUTTON
   ===================================================== */

.sparkdAchievementClose {

    margin-top:
        25px;

    padding:
        12px 35px;

    border:
        1px solid
        rgba(255, 160, 0, 0.8);

    border-radius:
        999px;

    background:
        rgba(255, 110, 0, 0.15);

    color:
        white;

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        1px;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.sparkdAchievementClose:hover {

    transform:
        scale(1.05);

    background:
        rgba(255, 110, 0, 0.3);

    box-shadow:

        0 0 15px
        rgba(255, 140, 0, 0.6);

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .sparkdAchievementModal {

        padding:
            25px 15px 20px;

        border-radius:
            20px;

    }


    .sparkdAchievementArtwork {

        height:
            45vh;

    }


    .sparkdAchievementTitle {

        font-size:
            22px;

    }

}