/* --- BASE STYLES --- */
body {
  background-color: #050505;
  margin: 0;
  overflow-x: hidden;
}

.cinematic-scroll {
  position: relative;
  width: 100%;
  padding-top: 30vh;   /* Initial space so text starts mid-screen */
  padding-bottom: 50px; /* As requested */
}

.scroll-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.scroll-line {
  scroll-margin-top: 150px; 
}

/* --- THE TEXT LINES --- */
.scroll-line {
  font-family: sans-serif; /* Replace with your font */
  font-size: clamp(30px, 5vw, 65px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 15vh; /* Spacing between blocks */
  text-transform: uppercase;
  will-change: transform, opacity;
}

/* SUBTEXT STYLING */
.noted {
  display: block;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  margin-top: 15px;
  color: #aaaaaa;
  line-height: 1.6;
}

.noted b {
  color: #fff;
}

/* --- THE GRADIENT FADE OVERLAYS --- */
.cinematic-scroll::before,
.cinematic-scroll::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 10vh;
  z-index: 10;
  pointer-events: none;
}

/* Top Fade */
.cinematic-scroll::before {
  top: 0;
  background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 100%);
}

/* Bottom Fade */
.cinematic-scroll::after {
  bottom: 0;
  background: linear-gradient(to top, #050505 0%, rgba(5,5,5,0) 100%);
}


.scroll-line {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.project-anchor{
position:absolute;
top:-120px;
left:0;
width:1px;
height:1px;
pointer-events:none;
}