/* style.css */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
  height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

.header-height {
  height: 80px;
}

.section-snap {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll-snap for desktop: enable smooth per-section snapping */
@media (min-width: 768px) {
  body {
    scroll-snap-type: y mandatory;
  }

  /* Sections to snap at their start */
  .section-snap,
  #hero-section {
    scroll-snap-align: start;
  }
}

/* Ensure interactive elements like maps don't trigger parent snapping */
.map-overscroll {
  -ms-touch-action: auto;
  touch-action: auto;
  overscroll-behavior: contain;
}

.hero-section {
  background-color: #A0836B;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Background layer with slow zoom animation */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image: url('/assets/img/tes_hero_cc.webp'); */
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  will-change: transform;
  z-index: 0;
  /* Gentle zoom-in/out loop */
  animation: hero-zoom 18s ease-in-out infinite alternate;
}

/* Ensure overlay children render above the pseudo background */
.hero-section>.absolute {
  z-index: 1;
}

@keyframes hero-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

.footer-height {
  height: 50px;
}