/* ================== scroll-popup.css ================== */

/* 0) FORCE ALL SCROLLING THROUGH .scroll-container */
html, body {
  height: 100%;
  overflow: hidden;
}

.scroll-container {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}

/* 1) MAKE EACH SECTION FIT THE VIEWPORT */
.scroll-container section {
  /* allow padding but ensure at least full viewport height */
  height: auto !important;
  min-height: 100vh !important;
  /* snap at start of each section */
  scroll-snap-align: start;
}

/* 2) DYNAMIC SECTION POPUPS (unchanged) */
@keyframes popup-fade {
  0%   { opacity: 0; transform: translate(-50%, -20px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 20px); }
}

section:target::before {
  content: attr(id);
  text-transform: capitalize;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  backdrop-filter: blur(5px);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  z-index: 2000;
  animation: popup-fade 2s ease forwards;
  pointer-events: none;
}

/* 3) NESTED SCROLL‑SNAP STOP (projects carousel, etc.) */
.projects-container {
  scroll-snap-stop: always;
}

/* 4) SMOOTHER SNAP BEHAVIOR */
html, body, .scroll-container, .projects-container {
  scroll-behavior: smooth;
}

/* 5) HIDE POPUP ON VERY SMALL SCREENS */
@media (max-width: 480px) {
  section:target::before {
    display: none;
  }
}
@media (max-width: 768px) {
  /* 1) Kill any container padding */
  #projects > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Make the horizontal scroller fill the full viewport width */
  #projects .projects-container {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;  /* center it in viewport */
    padding: 0 !important;
    overflow-x: auto !important;
  }

  /* 3) Force each card to fill that 100vw scroller */
  #projects .project-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ─── Section‐name notification ─── */

.popup-notification {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  backdrop-filter: blur(5px);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
}

.popup-notification.show {
  animation: popup-fade 2s ease forwards;
}
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1.2s ease;
}
.fade-section.in-view {
  opacity: 1;
  transform: translateY(0);
}