/* --- Styles for the Full-Screen Loader Container --- */
.route-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    opacity: 1; 
}

/* --- THE AWESOME TRANSITION --- */
.route-loader.fade-out-exit {
    opacity: 0; 
}
@keyframes heart-pulse {
    0% {
        transform: scale(0.8) rotate(-45deg);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1) rotate(-45deg);
        opacity: 0.9;
    }

    100% {
        transform: scale(0.8) rotate(-45deg);
        opacity: 0.5;
    }
}

/* --- Styles for the Main Container --- */
main {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* --- Pseudo-element Heart 1 (Top Left) --- */
main::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50px;
    width: 20px;
    height: 20px;
    background-color: #ffd04a;
    transform: rotate(-45deg);
    animation: heart-pulse 2s infinite ease-in-out;
    filter: blur(0.5px);
    z-index: 10;
}

/* Add the two half-circles that make the heart top */
main::before::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #ffd04a;
    left: -10px;
    top: 0;
}

main::before::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #ffd04a;
    left: 0;
    top: -10px;
}

/* --- Pseudo-element Heart 2 (Bottom Right) --- */
main::after {
    content: '';
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 15px;
    height: 15px;
    background-color: #f2b620;
    transform: rotate(-45deg);
    animation: heart-pulse 2.5s infinite reverse ease-in-out;
    filter: blur(0.5px);
    z-index: 10;
}

main::after::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #e0a010;
    left: -7.5px;
    top: 0;
}

main::after::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #f5b81c;
    left: 0;
    top: -7.5px;
}

.heart-loader {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    overflow: visible;
}

/* --- Nested Selectors --- */

.heart-loader__group {
    transform-origin: 0 90px;
    animation: group-anim 7s 0.1s forwards;
}

.heart-loader__square {
    stroke: #FAEBD7;
    stroke-dasharray: 240, 240;
    stroke-dashoffset: 240;
    animation: square-anim 7s 0.1s forwards;
}

.heart-loader__circle {
    stroke: #FAEBD7;
    stroke-dasharray: 188.522, 188.522;
    stroke-dashoffset: 188.522;
    transform-origin: 60px 30px;
}

.heart-loader__circle.m--left {
    animation: left-circle-anim 7s 0.1s forwards;
}

.heart-loader__circle.m--right {
    animation: right-circle-anim 7s 0.1s forwards;
}

.heart-loader__heartPath {
    stroke: #b07800;
    fill: transparent;
    stroke-dasharray: 308.522, 308.522;
    stroke-dashoffset: 308.522;
    animation: heart-anim 7s 0.1s forwards;
}

/* --- Keyframes --- */

@keyframes square-anim {
    12% {
        stroke-dashoffset: 0;
    }

    43% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    85% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes left-circle-anim {
    12% {
        stroke-dashoffset: 188.522;
    }

    31% {
        stroke-dashoffset: 0;
        transform: translateY(0);
    }

    41% {
        stroke-dashoffset: 0;
        transform: translateY(-30px);
    }

    43% {
        stroke-dashoffset: 0;
        transform: translateY(-30px);
        opacity: 1;
    }

    85% {
        stroke-dashoffset: 0;
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        transform: translateY(-30px);
        opacity: 0;
    }
}

@keyframes right-circle-anim {
    12% {
        stroke-dashoffset: 188.522;
    }

    31% {
        stroke-dashoffset: 0;
        transform: translateX(0);
    }

    41% {
        stroke-dashoffset: 0;
        transform: translateX(30px);
    }

    43% {
        stroke-dashoffset: 0;
        transform: translateX(30px);
        opacity: 1;
    }

    85% {
        stroke-dashoffset: 0;
        transform: translateX(30px);
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        transform: translateX(30px);
        opacity: 0;
    }
}

@keyframes group-anim {
    43% {
        transform: rotate(0);
    }

    54% {
        transform: rotate(-45deg);
    }

    90% {
        transform: rotate(-45deg);
        opacity: 1;
    }

    97% {
        transform: rotate(-45deg);
        /* 🚨 THE FIX: Change opacity from 0 to 1 */
        opacity: 1;
    }

    100% {
        transform: rotate(-45deg);
        /* 🚨 THE FIX: Change opacity from 0 to 1 */
        opacity: 1;
    }
}

@keyframes heart-anim {
    55% {
        stroke-dashoffset: 308.522;
        fill: transparent;
    }

    70% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    87% {
        stroke-dashoffset: 0;
        fill: #b07800;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #b07800;
    }
}

/* --- Other Styles --- */

.other {
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    width: 100%;
    text-align: right;
}

.other__link {
    font-size: 1.3rem;
    margin: 0 1rem;
}

@media screen and (max-width: 658px) {
    .heart-loader {
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        width: 200px;
        height: 200px;
        overflow: visible;
    }
}