/* Centering + entrance animation + hover shake */
body {
    background: #bfefff;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 177, 230, 0.55), transparent 45%),
        radial-gradient(circle at 80% 15%, rgba(79, 246, 255, 0.55), transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 200, 239, 0.45), transparent 45%),
        radial-gradient(circle at 30% 75%, rgba(79, 246, 255, 0.4), transparent 45%);
    margin: 0;
    min-height: 100vh;
}
.center-image-link {
  display: block;
  text-align: center;
  padding: 0;
  background: none;
}

.center-image-link .center-image {
  display: inline-block;
  max-width: 90vw;
  width: 420px;
  height: auto;
}

.scale-up-center {
  text-align: center;
  -webkit-animation: scale-up-center 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
          animation: scale-up-center 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  animation-delay: 2.2s;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

/* Hover shake: only enabled once the initial animation completes (JS adds `.ready`) */
.ready:hover {
  -webkit-animation: shake 0.6s ease-in-out;
          animation: shake 0.6s ease-in-out;
}

@-webkit-keyframes shake {
  0% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
  20% { -webkit-transform: translateX(-6px) scale(1); transform: translateX(-6px) scale(1); }
  40% { -webkit-transform: translateX(6px) scale(1); transform: translateX(6px) scale(1); }
  60% { -webkit-transform: translateX(-4px) scale(1); transform: translateX(-4px) scale(1); }
  80% { -webkit-transform: translateX(4px) scale(1); transform: translateX(4px) scale(1); }
 100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
}
@keyframes shake {
  0% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
  20% { -webkit-transform: translateX(-6px) scale(1); transform: translateX(-6px) scale(1); }
  40% { -webkit-transform: translateX(6px) scale(1); transform: translateX(6px) scale(1); }
  60% { -webkit-transform: translateX(-4px) scale(1); transform: translateX(-4px) scale(1); }
  80% { -webkit-transform: translateX(4px) scale(1); transform: translateX(4px) scale(1); }
 100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
}

/* small spacing for the image in the page */
.scale-up-center,
.center-image-link img.scale-up-center {
  margin: 40px auto;
}

.click-hint {
  text-align: center;
  font-family: "Onest", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(79, 246, 255, 0.9);
  opacity: 0;
  animation: hint-fade 0.6s ease forwards, hint-bounce 1.2s ease-in-out infinite;
  animation-delay: 3s, 3.6s;
}

@keyframes hint-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.splash {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 10;
    pointer-events: none;
    animation: splash-fade 2.2s ease-in-out forwards;
}

@keyframes splash-fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}