/* ==========================================
   LAYOUT
   ========================================== */

.scrolly-container {
  position: relative;
  display: flex;
  min-height: 300vh;
  gap: 1rem;
}

.sticky-visual {
  position: sticky;
  top: 10vh;
  width: 50%;
  height: 80vh;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.scroll-steps {
  width: 50%;
  padding-bottom: 50vh;
}

.step {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.step.is-active {
  opacity: 1;
}


/* ==========================================
   IMAGE
   ========================================== */

   .image-wrapper {
    position: relative;
    width: 100%;
    transition: transform 0.6s ease;
}

#graphic1 {
  display: block;
  width: 100%;
  height: auto;
}

/* Position 1 */
  .image-wrapper.move-up {
    transform: translateY(-25%);
  }
  
  /* Position 2 */
  .image-wrapper.move-up-more {
    transform: translateY(-55%);
  }

/* ==========================================
   SVG HIGHLIGHT OVERLAY
   ========================================== */

.highlight-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.highlight-overlay rect {
    fill: rgba(255, 71, 87, 0.1);
    stroke: #ff4757;
    stroke-width: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }


/* ==========================================
   ACTIVE HIGHLIGHTS
   ========================================== */

[data-active-step="step-highlight-top-left"] #hl-assessment {
  opacity: 1;
}

[data-active-step="step-highlight-top1"] #hl-testlet-scores {
  opacity: 1;
}

[data-active-step="step-highlight-middle"] #hl-best-scores {
  opacity: 1;
}

[data-active-step="step-highlight-bottom"] #hl-diagnostic {
  opacity: 1;
}

[data-active-step="step-highlight-bottom2"] #hl-reporting {
  opacity: 1;
}

[data-active-step="step-none"] rect {
  opacity: 0;
}


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

/* Large tablets / small laptops - Inspect > Device Toolbar: iPad Pro*/
@media (max-width: 1200px) {

  /* Position 1 */
  .image-wrapper.move-up {
    transform: translateY(-15%);
  }
  
  /* Position 2 */
  .image-wrapper.move-up-more {
    transform: translateY(-20%);
  }

    .step {
      min-height: 60vh;
    }
  
    .scroll-steps {
      padding-bottom: 10vh;
    }
  
    #scoreReporting {
      min-height: 60vh;
    }
  }


/* Tablets - Inspect > Device Toolbar: SurfacePro 7 */
@media (max-width: 992px) {

  /* Keep side-by-side layout */
  .scrolly-container {
    flex-direction: row;
  }

  .sticky-visual {
    width: 45%;
    height: 70vh;
    top: 5vh;
    flex-shrink: 0;
  }

  .scroll-steps {
    width: 55%;
    padding-bottom: 10vh;
  }

  .image-wrapper.move-up,
  .image-wrapper.move-up-more {
    transform: none;
  }

  .step {
    min-height: 70vh;
  }

  #additionalInfo {
    margin-top: 10vh;
  }
}


/* Phones - Inspect > Device Toolbar: iPad Mini */
@media (max-width: 768px) {

  /* Position 1 */
  .image-wrapper.move-up {
    transform: translateY(-25%);
  }
  
  /* Position 2 */
  .image-wrapper.move-up-more {
    transform: translateY(-50%);
  }
  
    .step {
      min-height: 50vh;
    }
  
    .scroll-steps {
      padding-bottom: 40vh;
    }
  
    #scoreReporting {
      min-height: 60vh;
    }
  }


/* Small phones - Inspect > Device Toolbar:  */
@media (max-width: 576px) {

  .image-wrapper.move-up,
  .image-wrapper.move-up-more {
    transform: none;
  }

  .step {
    min-height: 50vh;
  }

  .scroll-steps {
    padding-bottom: 40vh;
  }

  #scoreReporting {
    min-height: 100vh;
  }
}