/* style.css */
body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
}

iframe {
    position: absolute;
    height: 100%;
    border: none;
}

#cityImageContainer img.icon {
    position: absolute;
    cursor: pointer;
}

#dragImage {
    position: fixed;
    top: 0;
    right: 0;
    opacity: 1;
    transition: opacity 3s ease-out; /* Fade out over 3 seconds */
    z-index: 1000; /* Ensure it's above most other content */
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: opacity 0.3s;
    z-index: 1001;
    /* Ensure it's above the iframe */
}

@keyframes slideUp {
    from {
        bottom: -100%;
        /* Start from below the screen */
    }

    to {
        bottom: 0;
        /* End at the bottom edge of the screen */
    }
}

@keyframes slideDown {
    from {
        bottom: 0;
    }

    to {
        bottom: -100%;
    }
}

.dynamic-iframe {
    animation: slideUp 0.3s ease-out forwards;
    /* Adjust duration and easing to your liking */
}

/* Keyframes */
@keyframes wiggle {

    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%,
    100% {
        transform: rotateZ(0);
    }
}

/* Apply the wiggle animation to the city-icon */
.city-icon {
    animation: wiggle 3.8s ease infinite;
}

.city-icon-enlarge {
    animation: zoom-in-zoom-out 3s ease infinite;
}

.city-icon-float {
    animation: float 3s ease infinite;
}

.city-icon-spin {
    animation: spin 3s ease infinite;
}

@keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-40px);
    }
    100% {
      transform: translatey(0px);
    }
}
  
@keyframes spin {
      from {
          transform:rotate(0deg);
      }
      to {
          transform:rotate(360deg);
      }
}

@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }

@keyframes shine {
    60% {
        top: -30%;
        left: -30%;
    }

    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
    }
}

@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); } 
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
 } 

.city-icon-container {
    position: absolute;
    overflow: hidden;
}

.city-icon-container-no-shine {
    position: absolute;
    overflow: show;
}

.city-icon-container::after {

    animation: shine 3.8s ease-in-out alternate infinite;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    transform: rotate(30deg);
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 255, 255, 0.8) 90%,
            rgba(255, 255, 255, 0.0) 100%);
}

#city-icon-container1:after {
    animation-delay: .1s;
}

#city-icon-container5:after {
    animation-delay: .4s;
}

#city-icon-container8:after {
    animation-delay: .7s;
}

#city-icon-container2:after {
    animation-delay: 1.0s;
}

#city-icon-container12:after {
    animation-delay: 1.3s;
}

#city-icon-container6:after {
    animation-delay: 1.6s;
}

#city-icon-container9:after {
    animation-delay: 1.9s;
}

#city-icon-container3:after {
    animation-delay: 2.2s;
}

#city-icon-container10:after {
    animation-delay: 2.5s;
}

#city-icon-container4:after {
    animation-delay: 2.8s;
}

#city-icon-container7:after {
    animation-delay: 3.1s;
}

#city-icon-container11:after {
    animation-delay: 3.6s;
}

#city-icon-container13:after {
    animation-delay: 3.8s;
}

#city-icon-container14:after {
    animation-delay: 4.0s;
}

#city-icon-container15:after {
    animation-delay: 4.2s;
}

#city-icon-container16:after {
    animation-delay: 4.4s;
}