/* LAYOUT HELPER CLASSES */
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* SCROLL CONTAINER */
.scroll-container {
  height: 100vh;
  overflow-y: hidden;
  /* scroll-snap-type: y mandatory; - Disabled for JS smooth scrolling */
  background: transparent;
  scroll-behavior: smooth;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.scroll-container.revealed {
  opacity: 1;
  pointer-events: auto;
}

.snap-section {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
  background-size: cover;
  background-position: center;
}

.card {
  width: 100%;
  max-width: 800px;
  background-color: var(--card-bg-color);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.content-wrapper {
  padding: 40px;
  text-align: center;
}

/* Hero card slide-up animation simulating coming out of the envelope */
.scroll-container #hero .card {
  opacity: 0;
  transform: translateY(30vh);
}

.scroll-container.revealed #hero .card {
  animation: hero-card-reveal 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  /* slight delay to match envelope sliding down */
  animation-delay: 0.2s;
}

@keyframes hero-card-reveal {
  0% {
    opacity: 0;
    transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}