/* LU Photo Portal — on-scroll Flip galleries (Codrops-derived, scoped) */

@keyframes lppz-page-gradient-flow {
  0%,
  100% {
    background-position: 0% 0%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }
}

.lppz-page {
  --lppz-page-vignette-radius: 100vmax;
  --lppz-page-vignette-a32: 0.995;
  --lppz-page-vignette-a44: 0.90;
  --lppz-page-vignette-a56: 0.82;
  --lppz-page-vignette-a68: 0.58;
  --lppz-page-vignette-a80: 0.3;
  --lppz-page-vignette-a92: 0.08;
  background-color: #07050d;
  background-image: linear-gradient(
    135deg,
    #2D1353 0%,
    #192F59 28%,
    #53601E 53%,
    #53331C 76%,
    #460F43 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 240% 240%;
  background-position: 0% 0%;
  animation: lppz-page-gradient-flow 24s linear infinite;
}

/*
 * Three-layer background system:
 * 1. the animated four-color page gradient above;
 * 2. this radial mask, which controls where black remains visible;
 * 3. the optically black fill on this fixed layer.
 *
 * The layer stays below the ambient canvas and every portal/gallery element,
 * preserving their existing lighting, shadows, masks, and interactions.
 */
.lppz-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #050007;
  -webkit-mask-image: radial-gradient(
    circle var(--lppz-page-vignette-radius) at 50% 50%,
    #000 0%,
    #000 20%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a32)) 32%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a44)) 44%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a56)) 56%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a68)) 68%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a80)) 80%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a92)) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--lppz-page-vignette-radius) at 50% 50%,
    #000 0%,
    #000 20%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a32)) 32%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a44)) 44%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a56)) 56%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a68)) 68%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a80)) 80%,
    rgba(0, 0, 0, var(--lppz-page-vignette-a92)) 92%,
    transparent 100%
  );
}

@media screen and (max-width: 37.5em) {
  .lppz-page {
    /*
     * On portrait phones, vmax follows the tall edge. A smaller radius keeps
     * the center black but restores the desktop-strength corner color.
     */
    --lppz-page-vignette-radius: 75vmax;
    --lppz-page-vignette-a32: 0.99;
    --lppz-page-vignette-a44: 0.90;
    --lppz-page-vignette-a56: 0.8;
    --lppz-page-vignette-a68: 0.65;
    --lppz-page-vignette-a80: 0.5;
    --lppz-page-vignette-a92: 0.06;
  }
}

/*
 * The fixed Explore More control overlaps the final headline line on tall
 * portrait phones. Preserve the existing mobile composition, with a 20px
 * clearance lift for the hero copy only.
 */
@media screen and (max-width: 40em) and (orientation: portrait) {
  .lppz-page .lppz-hero-foot {
    bottom: calc(clamp(24px, 10vh, 70px) + 1.5625rem);
  }
}

.lppz-scroll-galleries {
  --lppz-sg-caption: #fff;
  --lppz-sg-caption-alt: rgba(244, 241, 234, 0.55);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
}

.lppz-scroll-galleries .gallery-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40vh;
  overflow: hidden;
}

.lppz-scroll-galleries .gallery-wrap--dense {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lppz-page {
    animation-play-state: paused;
  }
}

.lppz-scroll-galleries .gallery {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
}

.lppz-scroll-galleries .gallery__item {
  background-position: 50% 50%;
  background-size: cover;
  flex: none;
  border-radius: 6px;
  position: relative;
  filter: brightness(1);
}

.lppz-scroll-galleries .caption {
  font-family: var(--primary-font, "Montserrat"), sans-serif;
  font-size: clamp(1rem, 3vw, 1.75rem);
  z-index: 101;
  color: var(--lppz-sg-caption);
  font-weight: 400;
  line-height: 1.45;
}

/* Gallery 1: row */
.lppz-scroll-galleries .gallery--row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  --size-factor: 1.25;
  --item-height: 20vh;
}

.lppz-scroll-galleries .gallery--row .gallery__item {
  width: auto;
  aspect-ratio: 2 / 3;
}

.lppz-scroll-galleries .gallery--row .gallery__item--xl {
  z-index: 100;
  height: calc(var(--size-factor) * 3 * var(--item-height));
  isolation: isolate;
  overflow: hidden;
}

.lppz-scroll-galleries .gallery__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background: rgba(4, 3, 8, 0.58);
  opacity: 1;
}

.lppz-scroll-galleries .gallery__mask--linear {
  --shade-top: 0.98;
  --shade-mid: 0.88;
  --shade-bottom: 0.7;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgb(4 3 8 / var(--shade-top)) 0%,
    rgb(4 3 8 / var(--shade-mid)) 50%,
    rgb(4 3 8 / var(--shade-bottom)) 100%
  );
}

.lppz-scroll-galleries .gallery__mask--edge {
  z-index: 3;
  background: radial-gradient(
    ellipse at 50% 44%,
    rgba(4, 3, 8, 0.04) 8%,
    rgba(4, 3, 8, 0.14) 30%,
    rgba(4, 3, 8, 0.48) 56%,
    rgba(4, 3, 8, 0.88) 78%,
    rgba(4, 3, 8, 1) 100%
  );
}

.lppz-scroll-galleries .gallery--row .caption {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: -50vh;
  left: 0;
  padding: 4.5vw;
  max-width: 730px;
  opacity: 0;
}

.lppz-scroll-galleries .gallery--switch.gallery--row .caption {
  bottom: 150px;
  opacity: 1;
}

.lppz-scroll-galleries .gallery--switch .gallery__item--center {
  height: 100vh;
  width: 100vw;
  aspect-ratio: auto;
  border-radius: 0;
  filter: brightness(1);
}

.lppz-scroll-galleries .gallery--switch .gallery__mask {
  opacity: 0;
}

.lppz-scroll-galleries .gallery--switch .gallery__mask--linear {
  opacity: 1;
}

/* Gallery 2: stack */
.lppz-scroll-galleries .gallery--stack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-content: start;
  gap: 2rem;
  /*
   * One shared inset keeps Gallery 2's image stack and copy aligned,
   * while retaining at least a 50px viewport edge margin.
   */
  --lppz-g2-side-gutter: clamp(4.125rem, 5.5vw, 7.5rem);
  --lppz-g2-card-width: 25vw;
  --lppz-g2-stack-step: clamp(3.5rem, 4.25vw, 4.0rem);
  --lppz-g2-copy-gap: clamp(2.5rem, 4vw, 5rem);
  padding: 2rem var(--lppz-g2-side-gutter);
  --offset: var(--lppz-g2-stack-step);
}

.lppz-scroll-galleries .gallery--stack .gallery__item {
  border-radius: 10px;
  width: var(--lppz-g2-card-width);
  height: 35vw;
  z-index: 1;
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item {
  grid-area: 1 / 1 / 2 / 2;
}

.lppz-scroll-galleries .gallery--stack .caption {
  position: absolute;
  bottom: 0;
  left: 100vw;
  width: 100vw;
  padding: 5vw;
  padding-inline: var(--lppz-g2-side-gutter);
  color: var(--lppz-sg-caption-alt);
  opacity: 0;
  z-index: 0;
}

.lppz-scroll-galleries .gallery--stack .caption p {
  margin: 0;
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .caption {
  left: 0;
  opacity: 1;
}

.lppz-scroll-galleries .gallery--caption-ready.gallery--stack .caption {
  left: 0;
  opacity: 1;
  will-change: transform, opacity;
}

.lppz-scroll-galleries .gallery--stack-inverse .gallery__item:nth-child(5) {
  z-index: 2;
}

.lppz-scroll-galleries .gallery--stack-inverse .gallery__item:nth-child(4) {
  z-index: 3;
}

.lppz-scroll-galleries .gallery--stack-inverse .gallery__item:nth-child(3) {
  z-index: 4;
}

.lppz-scroll-galleries .gallery--stack-inverse .gallery__item:nth-child(2) {
  z-index: 5;
}

.lppz-scroll-galleries .gallery--stack-inverse .gallery__item:nth-child(1) {
  z-index: 6;
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(2) {
  margin-left: var(--offset);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(3) {
  margin-left: calc(var(--offset) * 2);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(4) {
  margin-left: calc(var(--offset) * 3);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(5) {
  margin-left: calc(var(--offset) * 4);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(6) {
  margin-left: calc(var(--offset) * 5);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack-dark .gallery__item:nth-child(2) {
  filter: brightness(0.8);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack-dark .gallery__item:nth-child(3) {
  filter: brightness(0.7);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack-dark .gallery__item:nth-child(4) {
  filter: brightness(0.6);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack-dark .gallery__item:nth-child(5) {
  filter: brightness(0.5);
}

.lppz-scroll-galleries .gallery--switch.gallery--stack-dark .gallery__item:nth-child(6) {
  filter: brightness(0.4);
}

@media screen and (min-width: 64em) {
  .lppz-scroll-galleries .gallery--stack .caption {
    bottom: 40%;
    width: 60vw;
    max-width: 800px;
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .caption {
    left: 40vw;
  }
}

/* Tablet and mobile composition ------------------------------------------ */
@media screen and (max-width: 64em) {
  .lppz-scroll-galleries .caption {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.25;
  }

  /*
   * Desktop's 40vh inter-gallery margin becomes disproportionately large on
   * tall portrait screens. Scale this space from viewport width instead.
   */
  .lppz-scroll-galleries .gallery-wrap:not(.gallery-wrap--dense) {
    margin-bottom: clamp(6rem, 14vw, 9rem);
  }

  /* Gallery 1: edge-to-edge image with a full-width lower caption. */
  .lppz-scroll-galleries .gallery--row .caption {
    max-width: none;
  }

  .lppz-scroll-galleries .gallery--row .gallery__caption-copy {
    display: block;
    transform: translateY(var(--lppz-g1-caption-clear-offset, 0px));
    will-change: transform;
  }

  /* Gallery 2: compact upper-left stack and a separate lower text block. */
  .lppz-scroll-galleries .gallery--stack {
    align-items: start;
    /*
     * Keep the gap after Gallery 1 visually proportional to desktop.
     * The prior 27–31vh inset was added on top of the shared 40vh
     * inter-gallery margin, making the tablet/mobile separation too large.
     */
    padding: clamp(5rem, 10vw, 7rem) var(--lppz-g2-side-gutter) 0;
    --lppz-g2-card-width: clamp(11.5rem, 25vw, 19rem);
  }

  .lppz-scroll-galleries .gallery--stack .gallery__item {
    width: var(--lppz-g2-card-width);
    height: auto;
    aspect-ratio: 5 / 7;
  }

  .lppz-scroll-galleries .gallery--stack .caption {
    bottom: 7.5vh;
    width: 100vw;
    max-width: none;
    padding: 5vw;
    padding-inline: var(--lppz-g2-side-gutter);
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .caption {
    left: 0;
  }
}

@media screen and (max-width: 37.5em) {
  .lppz-scroll-galleries .gallery--stack .caption {
    /* Align Gallery 2's mobile copy with the marked upper resting point. */
    bottom: 25vh;
  }
}

/*
 * Finished Gallery 2 composition:
 * - On wide screens, the fan and copy share equal outer gutters and behave
 *   as one horizontally centered unit.
 * - When the copy moves below, the complete fan centers independently.
 */
@media screen and (min-width: 64em) {
  .lppz-scroll-galleries .gallery--switch.gallery--stack .caption,
  .lppz-scroll-galleries .gallery--caption-ready.gallery--stack .caption {
    left: calc(
      var(--lppz-g2-side-gutter) +
      var(--lppz-g2-card-width) +
      (var(--lppz-g2-stack-step) * 5) +
      var(--lppz-g2-copy-gap)
    );
    width: calc(
      100vw -
      (var(--lppz-g2-side-gutter) * 2) -
      var(--lppz-g2-card-width) -
      (var(--lppz-g2-stack-step) * 5) -
      var(--lppz-g2-copy-gap)
    );
    max-width: none;
    padding-inline: 0;
  }
}

@media screen and (max-width: 63.999em) {
  .lppz-scroll-galleries .gallery--stack {
    --lppz-g2-card-width: clamp(10rem, 43vw, 14rem);
    --lppz-g2-stack-step: clamp(
      0.75rem,
      calc(
        (
          100vw -
          (var(--lppz-g2-side-gutter) * 2) -
          var(--lppz-g2-card-width)
        ) / 5
      ),
      2rem
    );
    --lppz-g2-stack-start: calc(
      (
        100vw -
        (var(--lppz-g2-side-gutter) * 2) -
        var(--lppz-g2-card-width) -
        (var(--lppz-g2-stack-step) * 5)
      ) / 2
    );
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(1) {
    margin-left: var(--lppz-g2-stack-start);
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(2) {
    margin-left: calc(var(--lppz-g2-stack-start) + var(--lppz-g2-stack-step));
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(3) {
    margin-left: calc(var(--lppz-g2-stack-start) + (var(--lppz-g2-stack-step) * 2));
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(4) {
    margin-left: calc(var(--lppz-g2-stack-start) + (var(--lppz-g2-stack-step) * 3));
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(5) {
    margin-left: calc(var(--lppz-g2-stack-start) + (var(--lppz-g2-stack-step) * 4));
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .gallery__item:nth-child(6) {
    margin-left: calc(var(--lppz-g2-stack-start) + (var(--lppz-g2-stack-step) * 5));
  }
}

/*
 * Portrait end state: keep the section's document position untouched, but
 * let Flip finish with the fan's bottom edge at the viewport midpoint. The
 * reflowed caption then centers in the lower half instead of being stretched.
 */
@media screen and (max-width: 63.999em) and (orientation: portrait) {
  .lppz-scroll-galleries .gallery--switch.gallery--stack {
    padding-top: calc(
      50vh -
      (var(--lppz-g2-card-width) * 1.4)
    );
  }

  .lppz-scroll-galleries .gallery--switch.gallery--stack .caption,
  .lppz-scroll-galleries .gallery--caption-ready.gallery--stack .caption {
    top: 50%;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-block: 0;
    translate: none;
  }
}

/*
 * Gallery 2 image offset scales with width rather than height. This avoids
 * large changes on portrait displays while preserving the desktop-like
 * composition across tablet and mobile widths.
 */
@media screen and (min-width: 64em) and (max-width: 90.625em) {
  .lppz-scroll-galleries .gallery--stack .gallery__item {
    /*
     * Interpolates from approximately 184px at 1024px to 200px at 1450px,
     * so the visual lift stays almost constant without a fixed pixel offset.
     */
    translate: 0 calc(-1 * clamp(11.5rem, calc(3.76vw + 10.1rem), 12.5rem));
  }
}

@media screen and (max-width: 63.9375em) {
  .lppz-scroll-galleries .gallery--stack .gallery__item {
    /*
     * Eases from 100px on narrow phones to 140px immediately below tablet,
     * which keeps the lower composition balanced as the stack scales down.
     */
    translate: 0 clamp(12.25rem, calc(15vw + 8.5rem), 18.75rem);
  }
}