/* ====================================================================== *
 * File: landing-slideshow.css
 * Location: static/css/landing-slideshow.css
 * Description: Faded stacked slideshow positioned beneath the landing CSS curtains.
 * Version: 1.0.0
 * Last Modified: Sat Aug 08 2026 - 21:05
 * Dependencies: templates/academy/landing.html and landing_slideshow.js
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Slideshow stage — beneath curtains, above page background
 * -------------------------------------------------------------------------- */

.landing-slideshow {
  position: absolute;
  z-index: -3;
  top: 16%;
  left: 50%;
  width: min(54vw, 920px);
  height: min(54vh, 520px);
  min-height: 330px;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.landing-slideshow::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% 5% 4%;
  border-radius: 42% 58% 47% 53% / 48% 45% 55% 52%;
  background:
    radial-gradient(ellipse at center, rgba(72, 126, 224, 0.09), rgba(35, 78, 160, 0.035) 52%, transparent 76%);
  filter: blur(28px);
}

/* -------------------------------------------------------------------------- *
 * 2. Soft-edged image layers
 * -------------------------------------------------------------------------- */

.landing-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transform: translate3d(0, -24px, 0) scale(0.968);
  transform-origin: center 54%;
  filter:
    saturate(0.72)
    contrast(0.83)
    brightness(0.82)
    blur(0.35px);
  -webkit-mask-image: radial-gradient(
    ellipse 76% 72% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 36%,
    rgba(0, 0, 0, 0.72) 57%,
    rgba(0, 0, 0, 0.28) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 76% 72% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 36%,
    rgba(0, 0, 0, 0.72) 57%,
    rgba(0, 0, 0, 0.28) 76%,
    transparent 100%
  );
  transition:
    transform 1250ms cubic-bezier(0.22, 0.72, 0.22, 1),
    opacity 1050ms ease,
    filter 1050ms ease;
  will-change: transform, opacity;
}

.landing-slide.is-current {
  z-index: 3;
  opacity: 0.155;
  transform: translate3d(0, 0, 0) scale(1);
  filter:
    saturate(0.75)
    contrast(0.86)
    brightness(0.86)
    blur(0.2px);
}

.landing-slide.is-next {
  z-index: 2;
  opacity: 0.07;
  transform: translate3d(0, -22px, 0) scale(0.97);
  filter:
    saturate(0.68)
    contrast(0.8)
    brightness(0.76)
    blur(0.55px);
}

.landing-slide.is-exiting {
  z-index: 4;
  opacity: 0;
  transform: translate3d(0, 74px, 0) scale(1.018);
  filter:
    saturate(0.66)
    contrast(0.8)
    brightness(0.7)
    blur(1.1px);
}

/* -------------------------------------------------------------------------- *
 * 3. Responsive placement
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .landing-slideshow {
    top: 18%;
    width: min(72vw, 760px);
    height: min(48vh, 470px);
    min-height: 300px;
  }
}

@media (max-width: 700px) {
  .landing-slideshow {
    top: 20%;
    width: min(91vw, 620px);
    height: min(43vh, 410px);
    min-height: 260px;
  }

  .landing-slide.is-current {
    opacity: 0.13;
  }

  .landing-slide.is-next {
    opacity: 0.055;
    transform: translate3d(0, -15px, 0) scale(0.972);
  }
}

@media (max-width: 430px) {
  .landing-slideshow {
    top: 22%;
    width: 96vw;
    height: min(39vh, 350px);
    min-height: 230px;
  }
}

/* -------------------------------------------------------------------------- *
 * 4. Reduced-motion accessibility
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .landing-slide {
    transition: none;
  }

  .landing-slide:not(.is-current) {
    display: none;
  }
}

/* ============================= End of landing-slideshow.css ============================= */