/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
   font-size: 18px; /* Up from default 16px = 12.5% increase */
}

body {
  font-family: 'Poppins', sans-serif;
  color: #000000;
  background: #dbf3ff;
  line-height: 1.6;
  overflow-x: hidden;
}

h2 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  line-height: 1.3;
   font-weight: 600;
}

p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

strong {
  font-weight: 700;
  color: #faf453;
}

.yellow-highlight {
  display: inline;
  background: linear-gradient(transparent 62%, #faf453 62%);
  padding: 0 0.08em;
}

.emphasis {
  font-weight: 800;
  font-size: 3rem;
}

.subtitle {
  font-size: 1rem;
  opacity: 0.8;
}

/* ===== SECTIONS ===== */
.step {
  min-height: 150vh;
  position: relative;
}

.content-centered {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}

/* ===== BLUE INTRO OVERLAY ===== */
.blue-overlay {
  position: fixed;
  inset: 0;                /* top/right/bottom/left: 0 */
  background: #91d8fa;     /* bright blue */
  pointer-events: none;    /* don't block scrolling or clicking */
  z-index: 1;              /* below plastic overlay & content (which are higher) */
  opacity: 1;
  transition: opacity 0.2s linear;
}


/* ===== PLASTIC OVERLAY (scrolls away) ===== */
.plastic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.plastic-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 110vw;
  height: 110vh;
  object-fit: cover;
  object-position: bottom right;
  transform: translateY(-0px); 
  opacity: 0.95;
}

.plastic-headline {
  position: absolute;
  top: 20%;              /* adjust up/down as you like */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 11;           /* above the bag image (overlay is z=10) */
width: 100%;
  padding: 0 2rem;
}

.plastic-headline h1 {
  font-family:'Poppins', sans-serif;
  font-weight: 700;
    font-size: clamp(2.4rem, 5vw + 1rem, 4rem);
  line-height: 1.1;
  color: #000000;        /* or #ffffff if you want it lighter */
    margin-left: auto;
  margin-right: auto;
}


/* ===== INTRO SECTION (STEPS 0-1) ===== */
.intro-wrapper {
  position: relative;
  min-height: 200vh;
}

.intro-text-sticky {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.intro-step {
  min-height: 100vh;
}

.scroll-cue {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'League Spartan','Poppins', sans-serif;
  text-align: center;
  z-index: 20;
  animation: bounce 2s ease-in-out infinite;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scroll-cue .arrow {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.scroll-cue p {
  font-size: 1.8rem;
  font-weight: 500;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(15px); }
}

/* ===== STEP 2: PRODUCTION ===== */
.production-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 4%;
  min-height: 120vh;
}

.production-section .content-wrapper-wide {
  display: flex !important;  /* Force flex */
  gap: 2rem;
  width: 100%;
  max-width: 1600px;
  align-items: center;
}

.production-section .chart-container {
  flex: 2 !important;  /* 2/3 width */
  height: 75vh;
  min-height: 550px;
  background: transparent;
  border-radius: 8px;
  padding: 1rem;
}

.production-section .text-content {
  flex: 1 !important;  /* 1/3 width */
}

/* Chart styling */
.chart-container .x-axis path,
.chart-container .y-axis path,
.chart-container .x-axis line,
.chart-container .y-axis line {
  stroke: #333;
  stroke-width: 1px; /* Thinner - was default 2px */
}


/* ===== HEAP SECTION (STEPS 3-7) ===== */
.heap-wrapper {
  position: relative;
  min-height: 750vh;
}

.heap-sticky {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 100vh;
  max-height: 120vh;
  width: calc(1220vh * 0.0874);
  display: flex;
  align-items: flex-end;
  overflow: visible;
  z-index: 3;
  margin: 0;
  padding: 0;
}

.plastic-heap {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  margin: 0;
  padding: 0;
}

.heap-step {
  position: relative;
  min-height: 150vh;
  padding-left: 60%;
  padding-right: 4%;
  padding-top: 20vh;
 }

.text-container-right {
  max-width: 100%;
  padding: 10vh 0.5rem;
  z-index: 2;
  position: relative;
}

.comparison-visual {
  width: auto;
  height: 50vh;  /* 1/4 of ~100vh heap height */
  margin: 2rem 0;
}


.comparison-visual img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.silhouette-container {
  position: absolute;
  top: 0;
  left: 60%;  /* Start where text starts - CHANGED */
  width: 35%;  /* Take up right side space - CHANGED */
  height: 400vh;  /* 2 × 150vh for steps 3-4 */
  pointer-events: none;
  z-index: 1;
}

.person-silhouette-scroll {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 1;
}

.person-silhouette-scroll img {
  position: absolute;
  bottom: 0;
  left: 0;  /* Align with text left edge */
  height: 75vh;  /* Bigger! */
  width: auto;
  object-fit: contain;
  z-index: 1;
}

.detail-list li {
  margin-bottom: 1rem;
  font-size: 1.1rem;  /* Changed from 1rem to match paragraph size */
}

/* ===== ALLUVIAL SECTION (STEPS 8-12) ===== */
.alluvial-wrapper {
  position: relative;
  min-height: 1220vh;
  margin-top: -5px;
  padding-top: 0;
}

.alluvial-container-left {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(1220vh * 0.0874);
  height: 1220vh;
  overflow: visible;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.alluvial-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: top left;
}

/* Sticky percentage numbers container */
.percentages-sticky {
  position: sticky;
  top: 33vh;
  left: 0;
  width: 60%;
  height: 100px;
  z-index: 5;
  pointer-events: none;
}

.percentage-number {
  position: absolute;
  top: 0;
  font-size: 2.8rem;
  font-weight: 670;
  font-family:  'Poppins', sans-serif;
  color: #000000;
  opacity: 0;
    /* Stronger shadow on all sides */
  text-shadow: 
    -2px -2px 4px rgba(255, 255, 255, 0.9),
    2px -2px 4px rgba(255, 255, 255, 0.9),
    -2px 2px 4px rgba(255, 255, 255, 0.9),
    2px 2px 4px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.8);
}

/* Initial horizontal positions */
#percent-22 { left: 5%; }
#percent-50 { left: 32%; }
#percent-19 { left: 62%; }
#percent-9 { left: 74%; }

/* When percentage is visible */
.percentage-number.visible {
  opacity: 1;
}

/* When percentage animates to final position */
.percentage-number.animating {
  transition: left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.alluvial-step {
  position: relative;
  min-height: 250vh;
  padding-right: 4%;
  padding-top: 20vh;
}

/* Progressive leftward movement of text */
#step-8 {
  padding-left: 60%;
}

#step-9 {
  padding-left: 60%;
}

#step-10 {
  padding-left: 57%;
}

#step-11 {
  padding-left: 52%;
}

#step-12 {
  padding-left: 28%;
}

/* ===== STEP 13: OCEAN TRANSITION ===== */
.ocean-transition-section {
  min-height: 120vh;
  margin-top: -170vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom,
    #dbf3ff 0%,
    #8ec8e0 25%,
    #4a9cc0 50%,
    #003c64 100%
  );
  position: relative;
}

.ocean-transition-section .content-centered {
  color: white;
  position: relative;
  z-index: 2;
}

/* ===== STEP 14: FULL OCEAN ===== */
.ocean-section {
  min-height: 150vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #003c64;
  position: relative;
}

.particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Add this after .particles-canvas */
.floating-objects-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0.5;  /* Between background (0) and particles (1) */
}

.ocean-section .content-centered {
  position: relative;
  z-index: 2;
  color: white;
}

/* ===== STEPS 15-17: FINAL SECTIONS ===== */
.projection-section,
.solution-section
 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Debris container */
.debris-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0; /* Behind everything */
}

.solution-section .content-centered,
.transition-section .content-centered,
.final-cta .content-centered {
  position: relative;
  z-index: 2; /* Above debris */
}
/* Add halo to letters on.solution-section styles */
.solution-section .content-centered h2,
.solution-section .content-centered p {

    
    text-shadow: 

    /* Middle ring - medium spread */
    -2px -2px 6px rgba(255, 255, 255, 0.95),
    2px -2px 6px rgba(255, 255, 255, 0.95),
    -2px 2px 6px rgba(255, 255, 255, 0.95),
    2px 2px 6px rgba(255, 255, 255, 0.95),
    /* Outer ring - wider glow */
    -3px -3px 10px rgba(255, 255, 255, 0.9),
    3px -3px 10px rgba(255, 255, 255, 0.9),
    -3px 3px 10px rgba(255, 255, 255, 0.9),
    3px 3px 10px rgba(255, 255, 255, 0.9),
    /* Extra wide glow */
    0 0 12px rgba(255, 255, 255, 0.85),
    0 0 15px rgba(255, 255, 255, 0.8);
}

.transition-section .content-centered,
.final-cta .content-centered {
  color: white;
}

.transition-section {
  min-height: 180vh; /* Enough time for transition */
  display: flex;
  align-items: center;
  justify-content: center;
}

.final-cta {
  min-height: 70vh;      
  margin-top: -30vh;     /* slightly gentler pull-up */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    background: #000;
  color: #fff;
}



.final-content {
  text-align: center;  
  max-width: 1000px;
  padding: 4rem 2rem;
}


.reuse-logo {
  width: 100%;
  height: auto;
   margin: 2rem auto;
  max-width: 300px;
  display: block;      /* ADD THIS */
  min-width: 100px;    /* ADD THIS - ensure minimum size */
}

/* Existing styles - update to work with left alignment */


.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 3rem;
  background: #91d8fa;
  color: black;
  text-decoration: none;
  border-radius: 50px;
   font-family: 'League Spartan','Poppins', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.cta-button:hover {
  transform: translateY(-2px);
}

/* ===== Data source footer (last screen only) ===== */
.data-source {
  font-size: 0.75rem;         /* small */
  text-align: center;
   color: rgba(255,255,255,0.55); 
  width: 100%;                /* avoid drifting */
  margin-top: 3rem;
  padding-bottom: 2rem;       /* space above bottom edge */
  line-height: 1.3;
  display: block;
}


.data-source a {
  color: inherit;
   text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.data-source a:hover {
  opacity: 0.8;
  color: white;
  border-bottom-color: rgba(0,0,0,0.2);
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
 .production-section .content-wrapper-wide {  /* ADD .production-section prefix */
    flex-direction: row !important; /* Explicitly keep row */
  }
  
  .heap-sticky {
    width: calc(500vh * 0.07 + 5vw);
    height: 60vh;
    min-height: 60vh;
    max-height: 80vh;
  }
  
  .alluvial-container-left {
    width: calc(500vh * 0.07 + 5vw) !important;  /* Match heap - override the 60vw */
    position: relative;
    height: auto;
  }
  
  .percentages-sticky {
    width: calc(500vh * 0.07 + 5vw) !important;
    z-index: 10;
  }
  
  .heap-step,
  .alluvial-step {
    padding-left: 4%;
  }




}



/* ===== RESPONSIVE ===== */

/* ===== TABLET LANDSCAPE (769px - 1024px) - DESKTOP-LIKE ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Keep production chart horizontal */
  .production-section .content-wrapper-wide {
    flex-direction: row !important;
  }
  
  /* Heap - TALLER pile */
  .heap-wrapper {
    min-height: 750vh;
  }
  
  .heap-sticky {
    width: calc(900vh * 0.0874) !important; /* IMPORTANT to override earlier rule */
    height: auto !important;
    min-height: 100vh !important;
    max-height: 120vh !important;
    position: sticky;
    top: 0;
    display: flex;
    align-items: flex-end;
  }
  
  .heap-step {
    min-height: 150vh;
    padding-left: 55% !important; /* Override earlier 4% */
    padding-right: 4%;
    padding-top: 20vh;
  }
  
  .text-container-right {
    padding: 10vh 0.5rem;
  }
  
  /* Alluvial - PROPORTIONAL TO HEAP */
  .alluvial-wrapper {
    min-height: 900vh;
  }
  
  .alluvial-container-left {
    width: calc(900vh * 0.0874) !important; /* Match heap width - IMPORTANT to override */
    height: 900vh !important; /* Match wrapper height */
    position: absolute !important; /* Override position: relative */
    top: 0;
    left: 0;
  }
  
  .alluvial-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top left;
  }
  
  .alluvial-step {
    min-height: 180vh; /* 900vh ÷ 5 steps */
    padding-right: 4%;
    padding-top: 20vh;
  }
  
  /* Text positioning - override earlier 4% */
  #step-8 { padding-left: 55% !important; }
  #step-9 { padding-left: 55% !important; }
  #step-10 { padding-left: 52% !important; }
  #step-11 { padding-left: 48% !important; }
  #step-12 { padding-left: 25% !important; }
  
  /* Percentage numbers - MATCH ALLUVIAL WIDTH */
  .percentages-sticky {
    top: 33vh;
    width: calc(900vh * 0.0874) !important; /* Match alluvial - IMPORTANT to override */
    z-index: 10;
  }
  
  .percentage-number {
    font-size: 2.3rem;
  }
  
  /* Initial positions - SPREAD WIDER across full alluvial width */
  #percent-22 { left: 5%; top: 0; }      /* Moved left from 8% */
  #percent-50 { left: 36%; top: 0; }     /* Kept same */
  #percent-19 { left: 67%; top: 0; }     /* Moved right from 65% */
  #percent-9 { left: 84%; top: 0; }      /* Moved right from 78% */
}


/* ===== MOBILE FIXES ===== */

@media (max-width: 768px) {
  /* GENERAL */

 :root {
    --mobile-image-width: calc(400vh * 0.0874);
  }

  body {
    overflow-x: hidden;
  }
  
  .step {
    min-height: 120vh;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  p {
    font-size: 0.95rem;
  }
  
.emphasis {
  font-weight: 800;
  font-size: 2.5rem;
}
 
  /* Intro */
  .intro-text-sticky p {
    font-size: 1rem;
  }
  
  .intro-text-sticky p:last-child {
    font-size: 1.2rem;
  }
  
  .plastic-image {
    width: 150vw;
    height: 150vh;
    transform: scale(0.8)     /* zoom out */
    translateY(15vh) translateX(42vw); 

  }

  .scroll-cue .arrow {
  font-size: 2rem;
}

.scroll-cue p {
  font-size: 1.4rem;
 }
  
  /* Production */
  .production-section {
    padding: 4rem 2%;
  }
  
  .production-section .content-wrapper-wide {
    gap: 1rem;
    flex-direction: column !important;  /* Must use same specific selector */
  }
  
  .production-section .text-content {
    padding: 2rem;
  }
  
  .production-section .chart-container {
    height: 50vh;
    min-height: 400px;
    width: 100% !important;  /* Override flex */
    flex: none !important;  /* Disable flex on mobile */
  }
  
  .chart-container .x-axis text,
  .chart-container .y-axis text {
    font-size: 0.8rem !important;
  }

    /* Target chart title (direct child of svg) */
  .chart-container svg > text:first-of-type {
    font-size: 1rem !important; /* Smaller title on mobile */
  }
  
  /* HEAP SECTION - Different bottom approach */
  .heap-wrapper {
    min-height: 600vh;
  }
  
  .heap-sticky {
    width: var(--mobile-image-width);  /* Match alluvial */
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  
  .plastic-heap {
    width: 100%;  /* Fill container width */
    height: auto;  /* Natural height */
    object-fit: contain;  /* Back to contain - scale properly */
    object-position: bottom left;
    margin-top: auto;
    flex-shrink: 0;
 
  }
    .silhouette-container {
    left: 45%;
    width: 50%;
    height: 310vh;  /* INCREASED: extends into step 5 on mobile */
    z-index: 1;  /* BELOW text */
  }
  
  .person-silhouette-scroll {
    height: 100vh;
  }
  
  .person-silhouette-scroll img {
    bottom: 0;
    left: 0;
    height: 30vh !important; /* REDUCED from 35vh, add !important */
    width: auto !important; /* Make sure width is auto */
    max-height: 30vh; /* backup */
  }

.comparison-visual {
  width: auto;
  height: 30vh; }

  /* HEAP TEXT */
  .heap-step {
    min-height: 120vh;
    padding-left: 45%;
    padding-right: 2%;
    padding-top: 10vh;
  }
  
  .text-container-right {
    width: 100%;
    padding: 5vh 0.5rem 5vh 0.5rem;
     z-index: 2;
     position: relative;
  }
  
 
  /* ALLUVIAL SECTION - MATCH HEAP WIDTH EXACTLY */
  .alluvial-wrapper {
    min-height: var(--alluvial-height);
    margin-top: -5px;
  }
  
  .alluvial-container-left {
    width: var(--mobile-image-width);  /* Same calculation */
    height: 400vh;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .alluvial-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
  }
  
  
  .percentages-sticky {
    width: calc(500vh * 0.07 + 5vw) !important;
    top: 15vh; /* CHANGED from 33vh - moves UP by 10vh */
    z-index: 10;
  }
  
  .percentage-number {
    font-size: 1.5rem;
    z-index: 10;
      }
  
  #percent-22 { left: 1%; }
  #percent-50 { left: 32%; }
  #percent-19 { left: 61%; }
  #percent-9 { left: 78%; }
  
  .alluvial-step {
    padding-right: 0%;
    padding-top: 0vh;
    min-height: 80vh;
    position: relative;
    z-index: 5;
  }
  
  #step-8 {
    padding-left: 60%;
    display: flex;
    align-items: center;
  }
  
    #step-8 .text-container-right {
    margin-top: -35vh; /* Pull text up */
      }


  #step-9 {
        padding-left: 55%;
  }
  
  #step-10 {
        padding-left: 52%;
  }
  
  #step-11 {
        padding-left: 40%;
  }
  
  #step-12 {
        padding-left: 23%;
  }
#step-9 .text-container-right,
#step-10 .text-container-right,
 #step-11 .text-container-right,
  #step-12 .text-container-right {
  margin-top: 3vh;
}


.ocean-transition-section {
    margin-top: -50vh; 
}

    .solution-section {
    min-height: 100vh;
  }
  
  
  .projection-section {
    min-height: 100vh;  
    margin-top: -5vh; 
      }
  
  /* .transition-section {
       margin-top: -40vh; 
      } */
  
      

  .reuse-logo {
    max-width: 150px;
  }
}