/* Use CSS custom property for viewport height */
:root {
  --vh: 1vh;
}

.container{
  width: 100vw;
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  background: linear-gradient(to bottom right, #24857B, #32BCAD);
  position: relative;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

html, body {
  height: 100vh;
  margin: 0;
  /* height: 100%; */
  margin: 0;  
  overflow-x: hidden;
  /* Prevent zoom on input focus for iOS */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overscroll-behavior-x: none; /* Disables browser-level back/forward gestures */
}

.centerImage {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.centerImage img{
  height: 152px;
  width: 200px;
}

.bottomImage {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  height: auto;
  transition: all 0.3s ease;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

/* Mobile responsive styles */
@media (max-width: 480px) {
  .container {
    /* Ensure smooth transitions on mobile */
    will-change: opacity, visibility;
  }
  
  .centerImage {
    top: 45%;
    transition: all 0.3s ease;
  }
  
  .centerImage img{
    height: 128px;
    width: 168px;
  }
  
  .bottomImage {
    width: 100vw;
    height: auto;
    bottom: 0;
    transition: all 0.3s ease;
  }
}

/* Handle keyboard open/close transitions */
@media (max-height: 500px) {
  .container {
    /* Adjust for very small viewport heights (keyboard open) */
    height: calc(var(--vh, 1vh) * 100);
  }
  
  .centerImage {
    top: 40%;
  }
  
  .centerImage img {
    height: 100px;
    width: 132px;
  }
  
  .bottomImage {
    opacity: 0.7;
  }
}

/* Ensure smooth transitions for all interactive elements */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection during transitions */
.container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}