@import url("common.css");
@import url("animation.css");

@font-face {
    font-family: 'PlaywriteCU';
    src: URL('./../assets/fonts/PlaywriteCU-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'DancingScript';
    src: URL('./../assets/fonts/DancingScript-Medium.ttf') format('truetype');
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

svg {
    transition: background-color 350ms ease;
}

svg>path {
    transition: color 350ms ease;
}

.font-esthetic {
    font-family: Sacramento, cursive !important;
}

.font-arabic {
    font-family: 'Noto Naskh Arabic', serif !important;
}
.font-playwrite-cu {
    font-family: PlaywriteCU, serif !important;
}
.font-dancingscript {
    font-family: DancingScript, serif !important;
}

.img-crop {
    width: 15rem;
    height: 15rem;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.img-crop>img {
    display: inline;
    margin: 0 auto;
    height: auto;
    width: 100%;
}

.btn-music {
    position: fixed;
    bottom: 9vh !important;
    right: 2vh !important;
    z-index: 1055 !important;
}

.btn-theme {
    position: fixed;
    bottom: 15vh !important;
    right: 2vh !important;
    z-index: 1055 !important;
}

.loading-page {
    position: fixed;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    z-index: 1056 !important;
}

.loading-page_background_color {
    background-color: #f93f7e !important;
}

.mouse-animation {
    padding: 0.25rem 0.625rem;
    height: 2rem;
    border-radius: 1.4rem;
    opacity: 0.75;
    box-sizing: content-box;
}

.dark-section {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}

footer {
    margin-top: -0.5rem;
    padding-bottom: 4rem;
}

.color-theme-white {
    color: white;
}

.color-theme-black {
    color: black;
}

.bg-cover-home {
    position: absolute;
    opacity: 0.2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -80%);
    height: 100%;
    width: 100vw;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, black, black, black, black, black, transparent);
}

/* Style for all icons */
.icon {
    position: absolute;
    width: 150px; /* Adjust size */
    height: 225px; /* Adjust size */
}

.flower-icon {
    position: absolute;
    width: 40px; /* Adjust size */
    height: 60px; /* Adjust size */
}

/* Keyframes for the balloon animation from bottom to top */
@keyframes moveUp {
    0% {
        transform: translateY(100vh); /* Start below the screen */
    }
    100% {
        transform: translateY(-100vh); /* End above the screen */
    }
}

/* Animated balloon positions and timing */
.animated-balloon-1 {
    left: 15%;
    animation: moveUp 8s linear infinite; /* 8s animation loop */
}

.animated-balloon-2 {
    left: 40%;
    animation: moveUp 10s linear infinite; /* 10s animation loop */
}

.animated-balloon-3 {
    left: 70%;
    animation: moveUp 6s linear infinite; /* 6s animation loop */
}

/* Animated flower icon positions and different timing for a natural effect */
.animated-flower-1 {
    left: 10%;
    animation: moveUp 7s linear infinite; /* 7s animation loop */
}

.animated-flower-2 {
    left: 30%;
    animation: moveUp 9s linear infinite; /* 9s animation loop */
}

.animated-flower-3 {
    left: 60%;
    animation: moveUp 6s linear infinite; /* 6s animation loop */
}

.animated-flower-4 {
    left: 70%;
    animation: moveUp 8s linear infinite; /* 6s animation loop */
}

.animated-flower-5 {
    left: 40%;
    animation: moveUp 10s linear infinite; /* 10s animation loop */
}

.font-color_white {
    color: #fff !important;
}

.cupid-container {
    position: absolute;
    left: 5%;
    top: 20%;
    transform: translateY(-50%);
}

/* Cupid image styling */
.cupid {
    width: 150px; /* Adjust size */
    animation: cupidMove 3s ease-in-out infinite; /* Simple animation to move Cupid */
}

/* Heart arrow styling */
.heart-arrow {
    position: absolute;
    left: 15%;
    top: 15%;
    transform: translateY(-50%);
}

/* Heart target styling */
.heart-target {
    position: absolute;
    left: 91%; /* Start from the right */
    top: 15%;
    transform: translateY(-50%);
}

/* Heart image styling */
.heart {
    width: 120px; /* Adjust size */
    animation: heartMove 3s ease-in-out infinite;
}

/* Heart arrow flying animation */
.arrow {
    width: 70px; /* Adjust size */
}

/* Keyframe to move cupid slightly before shooting */
@keyframes cupidMove {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
    }
    50% {
        transform: translateY(-50%) translateX(-10px); /* Cupid moves slightly */
    }
}

@keyframes heartMove {
    0%, 100% {
        transform: translateX(-50%) translateX(0);
    }
    50% {
        transform: translateX(-50%) translateY(-20px); /* Cupid moves slightly */
    }
}

/* Keyframe to shoot the heart arrow */
@keyframes shootArrow {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate(60vw, 0); /* Stop near the heart target */
    }
}

/* Media query for larger screens (for example, screens wider than 1024px) */
@media only screen and (min-width: 1024px) {
    /* Change the arrow's final position for larger screens */
    @keyframes shootArrow {
        0% {
            transform: translate(0, 0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        100% {
            transform: translate(75vw, 0); /* Adjust stop point for large screens */
        }
    }
}

@media only screen and (max-width: 768px) {
    .heart-target {
        left: 80%;
    }
}