/* demo-parallax.css
   Minimal, corrected parallax stack CSS.
   - Preserves image aspect ratio
   - Table determines stack height (no vh usage)
   - JS modifies only --parallax-y
*/

/* Keep the site image container a fixed, centered box for this spotlight */
.spotlights > section > .image.parallax {
  /* keep the theme's default width (25em) so the image area isn't too narrow */
  width: 25em;
  margin: 0 auto;
  overflow: visible; /* allow layers to extend visually */
}

/* Make the demos heading and description use black text instead of the theme's light color */
#demos .content .inner h2,
#demos .content .inner p {
  color: #000 !important;
}

/* demos: make the parallax area taller and center the table so legs reach bottom */
#demos .image.parallax {
  width: auto;
  max-width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* Expand the image column inside the demos spotlight so it takes available space. */
#demos > section > .image.parallax {
  /* Make the demos image column narrower so the marked region is smaller. */
  flex: 0 0 40%; /* fixed column width (~42% of the spotlight row) */
  width: 40%;
  max-width: 40%;
}

@media (max-width: 1200px) {
  #demos > section > .image.parallax { flex-basis: 48%; width: 48%; max-width: 48%; }
}

@media (max-width: 980px) {
  /* revert to full width on small screens (main.css handles this too) */
  #demos > section > .image.parallax { flex: 1 1 auto; width: 100%; max-width: 100%; }
}

/* Stack container: no VH sizing, stack height comes from table image */
.parallax-stack {
  position: relative;
  width: auto;
  max-width: none;
  overflow: visible;
  height: 100%;
  /* no --parallax-stack-offset here */
  transform: translateX(var(--parallax-stack-offset, 0px));
}

/* Ensure the stack fills the right image area so the table centers within it */
#demos .parallax-stack {
  width: 100%;
  margin: 0 auto;
  transform: none;
  /* Use flex so the table layer can fill height and align to bottom */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media (max-width: 900px) {
  #demos .image.parallax { --parallax-stack-offset: 0px; }
}

/* Base layer behaviour. JS controls only --parallax-y; do not change transform in JS */
.parallax-stack .layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  --parallax-x: -50%;
  --parallax-y: 0px;
  transform: translateX(var(--parallax-x)) translateY(var(--parallax-y));
  transform-origin: bottom center;
  will-change: transform;
  pointer-events: none;
}

/* Table: remains visually at bottom and determines stack height indirectly (image in flow) */
.parallax-stack .layer.table {
  position: relative;
  left: 0;
  transform: none;
  width: 70%;
  /* let the table be smaller than the full stack height but pin its bottom to the stack bottom */
  height: auto;
  max-height: 85%;
  align-self: flex-end;
  margin: 0 auto;
  z-index: 1;
  pointer-events: auto;
}

/* Decorative background behind the table. Place a background image via a pseudo element
   so it sits behind the table image and scales responsively. Save the image as
   `students/images/background.png` (path used below is relative to this CSS file). */
.parallax-stack .layer.table::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 0; /* behind the table img (table has z-index:1) */
  /* path corrected: assets/css -> ../../images/ */
  background-image: url("../../images/background.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  opacity: 1;
}

@media (max-width: 900px) {
  .parallax-stack .layer.table::before {
    width: 140%;
    height: 140%;
    background-size: contain;
    top: -6%;
  }
}

/* Devices: absolutely positioned above the table */
.parallax-stack .layer.device {
  position: absolute;
  /* Size is controlled via the image itself (the layer is the <img> element).
     Keep width auto so natural aspect ratio is preserved; cap with max-width. */
  width: auto;
  z-index: 3; /* sit above clouds */
  pointer-events: auto;
  cursor: pointer;
}

/* Center device layers vertically by default so they appear in the middle before JS runs.
   JS will overwrite --parallax-y with pixel values when aligning to the table. */
.parallax-stack .layer.device {
  top: 50%;
  bottom: auto;
  --parallax-y: -50%;
  transform: translateX(var(--parallax-x)) translateY(var(--parallax-y));
  transform-origin: center center;
}

/* Smooth fade for devices so resets aren't visually jarring when we move them off-screen */
.parallax-stack .layer.device {
  opacity: 0;
  transition: opacity 220ms ease;
}


/* Images preserve aspect ratio and do not stretch */
.parallax-stack .layer img {
  display: block;
  position: relative; /* override theme's absolute positioning for spotlight images */
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .spotlights > section > .image.parallax {
    width: 18em;
  }

  /* Reduce device size on smaller screens using percent for responsiveness */
  .parallax-stack img.layer.device { width: 10%; }
}

/* Per-device horizontal placement (controls x-axis only; JS changes only --parallax-y) */

.parallax-stack .layer.device.device-1 { left: 40%; }
.parallax-stack .layer.device.device-2 { left: 50%; }
.parallax-stack .layer.device.device-3 { left: 60%; }
.parallax-stack .layer.device.device-4 { left: 70%; }

/* Cap device sizes so they don't dominate the stack on wide screens */
.parallax-stack img.layer.device {
  display: block;
  width: 18%; /* responsive size relative to the stack width */
  max-width: none;
  height: auto;
  object-fit: contain;
}

/* Strong override to force device image sizes so they sit properly on the table */
.spotlights > section > .image.parallax .parallax-stack img.layer.device,
.parallax-stack .layer.device {
  width: 18%;
  max-width: none;
  height: auto;
  object-fit: contain;
}

/* Mobile override already sets 28% above; ensure stack-specific rule takes precedence */

/* Force images inside our parallax-stack back into flow so the table image defines height.
   This needs a high-specificity selector and a single !important to override the theme's
   absolute image rule without changing JS or the rest of the theme. */
.spotlights > section > .image.parallax .parallax-stack .layer img {
  position: relative !important;
}

/* Ensure table image fills the stack width but preserves aspect ratio */
.parallax-stack .layer.table img { width: auto; height: 100%; display: block; max-width: none; }

/* Ensure our image selectors take precedence over the theme's .spotlights > section > .image img */
.spotlights > section > .image.parallax .parallax-stack .layer img {
  position: relative;
}

/* Particle clouds container inside parallax stacks */
.parallax-stack .parallax-clouds {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; /* fill the entire stack area */
  pointer-events: none;
  z-index: 2; /* place clouds behind devices (devices are z-index:3) */
  overflow: visible;
  /* fade the top of the cloud container so clouds blend into background */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,1) 60%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,1) 60%);
  filter: blur(2px); /* reduced blur for visibility */
}

/* Ensure the particles canvas covers the container */
.parallax-stack .parallax-clouds canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Lecture background video container: allow dynamic aspect ratio via --lecture-aspect
   JS will set --lecture-aspect to the video's native width/height (e.g. 16/9).
   Browsers that support `aspect-ratio` will size the container accordingly. For
   older browsers a padding-top fallback is applied by JS. */
.image.lecture-bg {
  position: relative;
  overflow: hidden;
  --lecture-aspect: 16/9;
  aspect-ratio: var(--lecture-aspect);
}

.image.lecture-bg video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.image.lecture-bg.mentor-bg video {
  object-position: 32% center;
}