html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-snap-type: y mandatory; /* Enable vertical snapping */
  overflow-y: auto; /* Allow vertical scrolling */
  scroll-behavior: smooth; /* Enable smooth scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Project Container Styles */
.project-container {
  height: 100vh; /* Full height for snapping */
  width: 100%;
  background-color: black;
  position: relative; /* For layering title and images */
  scroll-snap-align: end; /* Snap at the start of each section */
  scroll-snap-stop: always; /* Ensure snapping works */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Avoid extra content spilling */
  z-index: 2;
  box-shadow: 0px 0px 50px grey; /* Subtle shadow effect */
}

.coverimage {
  z-index: -1;
  width: 100vw;
  height: 100vh;
  opacity: 0.9;
  object-fit: cover; /* Ensure the image fits the section */
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 2%,
    rgba(128, 128, 128, 1) 50%
  ); /* Light grey to dark grey gradient */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 2%,
    rgba(128, 128, 128, 1) 50%
  ); /* For Safari */
}

/* Title Styling */
.title {
  display: block;
  position: fixed;
  bottom: 2rem;
  left: 1.1vw;
  z-index: 3;
  color: white;
  font-size: 2.4rem;
  line-height: 130%;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-out; /* Smooth fade-in and movement */
  font-weight: 400;
  font-variation-settings: "slnt" 0, "wdth" 00, "wght" 530, "INKT" 00;
}

/* Title Animations */
@keyframes moveTitleIn {
  from {
    transform: translateY(2rem); /* Start from a lower position */
    opacity: 0;
  }
  to {
    transform: translateY(0); /* End at the final position */
    opacity: 1;
  }
}

@keyframes moveTitleOut {
  from {
    transform: translateY(0); /* Start at the final position */
    opacity: 1;
  }
  to {
    transform: translateY(2rem); /* Move out of view */
    opacity: 0;
  }
}

.project-container.in-view .title {
  animation: moveTitleIn 0.4s ease-out forwards; /* Fade-in animation */
}

.project-container.out-of-view .title {
  animation: moveTitleOut 0.2s ease-in forwards;
}

/* End Section */
#end {
  height: auto;
  width: 100%;
  color: black;
  background-color: #d1cdca;
  position: relative;
  padding-bottom: 6rem;
  z-index: 2;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  animation: slideIn 0.6s ease-out forwards; /* Faster animation */
}

.about {
  padding-top: 4rem;
  padding-bottom: 8rem;
  margin: auto;
  width: 77%;
  max-width: 77rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#concepts {
  padding-top: 5rem;
  width: 100%;
  height: auto;
  position: relative;
  scroll-snap-align: none;
  scroll-snap-stop: always;
}

.about p,
.about a {
  font-size: 1.2rem;
  opacity: 1;
  color: black;
}

.about a:hover {
  text-decoration: underline;
  transition: 1s;
}

/* Imprint Section */
.imprint {
  scroll-snap-align: none;
  scroll-snap-stop: none;
}

strong,
b {
  font-weight: 400;
  font-variation-settings: "slnt" 0, "wdth" 00, "wght" 530, "INKT" 00;
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-container {
    height: 100vh;
  }

  .title {
    position: fixed;
    font-size: 1.5rem;
    width: 85%;
    left: 1rem;
    bottom: 2.5rem;
  }

  .subtitle {
    font-size: 1.2rem;
    top: 0.5rem;
    letter-spacing: -0.03rem;
  }

  .about p,
  .about a {
    font-size: 1rem;
  }

  .about {
    padding-top: 4rem;
    padding-bottom: 6rem;
    margin-left: 4vw;
    width: 92%;
    max-width: 92vw;
  }

  #end {
    padding-bottom: 1vh;
  }
}