/* ===== STACK WRAPPER ===== */

.stack-wrapper {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  aspect-ratio: 3/4;
  overflow: hidden;
  /*border-radius: 1.2rem;*/
}

/* ===== IMAGES ===== */

.stack-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* Image animations */

.fade-in {
  animation: fadeSpin 1s ease forwards;
  animation-delay: .5s;
}

.fade-up {
  animation: fadeSpinReverse 1s ease forwards;
  animation-delay: .7s;
}

.zoom-in {
  animation: zoomIn 1s ease forwards;
  animation-delay: 1.1s;
}

/* ===== TEXT OVERLAY (BOTTOM) ===== */

.text-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 1rem 1.25rem 1.25rem;
  pointer-events: none;
  text-align: left;
}

/* Readable text with NO shadows/gradients:
   Use a crisp outline stroke (works in modern browsers). */

.hero-title, .hero-subtitle {
  opacity: 0;
  margin: 0;
  text-align: center;
}

/* If you prefer black text with white outline instead, swap the colors:
   color:#000; -webkit-text-stroke:2px #fff; */

.hero-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  animation: zoomText .85s ease forwards;
  animation-delay: 1.7s;
}

.hero-subtitle {
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-top: .35rem;
  animation: zoomText .85s ease forwards;
  animation-delay: 2.1s;
}

/* ===== KEYFRAMES ===== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomText {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeSpin {
  from {
    opacity: 0;
    transform: rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}

@keyframes fadeSpinReverse {
  from {
    opacity: 0;
    transform: rotate(360deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}