/* =====================================
   RAKSHA BANDHAN ANIMATION
===================================== */

#rakhi-animation {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #fff0f5,
        #ffd6e7,
        #fff8e1,
        #ffe0f0
    );

    animation: rakhiScreenIn 0.8s ease-out;
}

.rakhi-content {
    position: relative;
    z-index: 10;

    text-align: center;
    padding: 30px;

    animation: rakhiContentIn 1.2s ease-out;
}


/* RAKHI */

.rakhi-circle {
    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    font-size: 100px;

    background: rgba(255,255,255,0.5);

    box-shadow:
        0 10px 40px rgba(255, 105, 180, 0.3);

    animation:
        rakhiAppear 1.2s ease-out,
        rakhiRotate 6s linear infinite;
}


/* TEXT */

.rakhi-content h1 {
    margin: 0;

    font-size: clamp(38px, 6vw, 70px);

    font-weight: 800;

    color: #b30059;

    text-shadow:
        0 3px 10px rgba(179,0,89,0.2);

    animation: rakhiText 1.5s ease-out;
}

.rakhi-content p {
    margin-top: 15px;

    font-size: clamp(18px, 3vw, 26px);

    color: #6b2140;

    font-weight: 600;
}

.rakhi-circle {
    width: 180px;
    height: 180px;
    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    animation: rakhiRotate 5s linear infinite;
}

.rakhi-circle img {
    width: 140px;
    height: 140px;
    object-fit: contain;

    animation: rakhiZoom 2s ease-in-out infinite;
}

@keyframes rakhiRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rakhiZoom {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}


/* SPARKLES */

.rakhi-sparkles::before,
.rakhi-sparkles::after {

    content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";

    position: absolute;

    width: 100%;

    font-size: 30px;

    letter-spacing: 50px;

    color: rgba(255, 105, 180, 0.7);

    animation: rakhiSparkle 5s linear infinite;
}

.rakhi-sparkles::after {

    font-size: 20px;

    animation-duration: 7s;

    animation-direction: reverse;
}


/* FLOWERS */

.rakhi-flowers {

    position: absolute;

    z-index: 2;

    font-size: 50px;

    animation: flowerFloat 5s ease-in-out infinite;
}

.flower-1 {
    top: 10%;
    left: 10%;
}

.flower-2 {
    top: 20%;
    right: 12%;
}

.flower-3 {
    bottom: 15%;
    left: 15%;
}

.flower-4 {
    bottom: 10%;
    right: 10%;
}


/* ANIMATIONS */

@keyframes rakhiScreenIn {

    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes rakhiContentIn {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes rakhiAppear {

    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes rakhiRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes rakhiText {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes rakhiSparkle {

    from {
        transform: translateY(100vh);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        transform: translateY(-100vh);
        opacity: 0;
    }
}


@keyframes flowerFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }
}


/* FADE OUT */

#rakhi-animation.hide {

    animation: rakhiFadeOut 1s ease forwards;

    pointer-events: none;
}


@keyframes rakhiFadeOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: scale(1.08);
        visibility: hidden;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .rakhi-circle {
        width: 130px;
        height: 130px;

        font-size: 75px;
    }

    .rakhi-content h1 {
        font-size: 38px;
    }

    .rakhi-content p {
        font-size: 17px;
    }

    .rakhi-flowers {
        font-size: 35px;
    }
}