/* Scoped parallax styles for #intro only - Firewatch-style layered parallax
   Layers are positioned absolutely inside #intro and sit behind the .inner content.
   Images should be placed in educators/images/parallax/ named layer-1.png ... layer-6.png
*/

#intro { position: relative; overflow: hidden; }
#intro .intro-parallax { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#intro .intro-parallax .layer {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  /* allow horizontal offset via --x, vertical via --y and subtle per-layer scale via --s */
  transform: translateX(calc(-50% + var(--x, 0px))) translateY(var(--y, 0px)) scale(calc(1 + var(--s, 0)));
  will-change: transform, opacity;
  pointer-events: none;
}
#intro .intro-parallax .layer.cover { height: 100%; }

/* Use an <img> inside each layer so browsers scale by height preserving aspect ratio
   and minimizing ugly upscaling/blur compared to background-size:cover */
/* Make each layer image cover the layer area so all layers fill the section
   and do not produce differing horizontal gaps when their intrinsic widths differ. */
#intro .intro-parallax .layer img {
  position: absolute;
  left: 50%;
  bottom: 0; /* pin to bottom so parallax vertical movement appears natural */
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover; /* crop to fill while preserving aspect ratio */
  will-change: transform;
  pointer-events: none;
  image-rendering: auto;
  transform-origin: center bottom;
}

/* Make parallax more visible: slight fade and contrast for layers */
#intro .intro-parallax .layer { opacity: 0.98; }


/* ensure .inner sits above layers */
#intro > .inner { position: relative; z-index: 2; }

/* Single-image fallback used on small viewports */
#intro .intro-parallax-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
#intro .intro-parallax-base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: reduce visual intensity on smaller screens */
@media (max-width: 900px) {
  #intro .intro-parallax .layer { height: 110%; }
}

@media (max-width: 700px) {
  #intro .intro-parallax .layer { height: 106%; }
  #intro .intro-parallax .layer img {
    width: 104%;
    height: 104%;
    object-position: 24% center;
  }
  #intro .intro-parallax-base { display: none; }
}

@media (max-width: 480px) {
  #intro .intro-parallax .layer { height: 104%; }
  #intro .intro-parallax .layer img {
    width: 106%;
    height: 106%;
    object-position: 22% center;
  }

  #intro .intro-parallax-base img {
    object-position: 22% center;
  }
}

/* Safety overrides to ensure the intro occupies full viewport and isn't clipped by wrapper fixed height */
#wrapper { height: auto !important; }
.wrapper.fullscreen { min-height: 100vh !important; height: auto !important; }
#intro { overflow: hidden; }

/* Make the intro section's fullscreen wrapper align content to the top
   so the .inner content sits at the top of the section instead of centered. */
#intro.wrapper.fullscreen {
  justify-content: flex-start;
}