/* LUNACREST preview: visual motion only. Original typography stays in styles.css.
   Named timelines keep the movement tied to the section, not its oversized media.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline */

@supports (animation-timeline: view()) and (animation-range: exit 0% exit 100%) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-parallax="off"]) .hero {
      --lc-hero-travel: 180px;
      --lc-mark-travel: 76px;
      view-timeline-name: --lc-hero;
      view-timeline-axis: block;
    }

    html:not([data-parallax="off"]) .hero-background-video {
      inset: -190px 0 auto;
      height: calc(100% + 380px);
      animation: lc-hero-depth 1s linear both;
      animation-timeline: --lc-hero;
      animation-range: exit 0% exit 100%;
      will-change: transform;
    }

    html:not([data-parallax="off"]) .hero.galaxy-surface .hero-media img {
      position: absolute;
      inset: -96px 0 auto;
      height: calc(100% + 192px);
      animation: lc-mark-depth 1s linear both;
      animation-timeline: --lc-hero;
      animation-range: exit 0% exit 100%;
      will-change: transform;
    }

    /* Keep the readability overlay stationary above the moving media. */
    html:not([data-parallax="off"]) .hero.galaxy-surface::before {
      animation: none;
      transform: none;
      opacity: 0.28;
    }

    html:not([data-parallax="off"]) :is(.vision, .recruit).galaxy-surface {
      --lc-section-travel: 76px;
      view-timeline-name: --lc-section;
      view-timeline-axis: block;
      background-image: none;
      animation: none;
    }

    html:not([data-parallax="off"]) .vision.galaxy-surface::before,
    html:not([data-parallax="off"]) .recruit.galaxy-surface::before {
      position: absolute;
      inset: -100px 0;
      z-index: 0;
      content: "";
      pointer-events: none;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      animation: lc-section-depth 1s linear both;
      animation-timeline: --lc-section;
      animation-range: entry 0% exit 100%;
    }

    html:not([data-parallax="off"]) .vision.galaxy-surface::before {
      background-image:
        radial-gradient(circle at 76% 20%, rgba(95, 223, 255, 0.18), transparent 32%),
        radial-gradient(circle at 16% 86%, rgba(126, 84, 255, 0.08), transparent 30%),
        linear-gradient(120deg, rgba(5, 10, 24, 0.9), rgba(13, 29, 55, 0.72) 48%, rgba(5, 10, 24, 0.88)),
        url("./lunacrest-galaxy-bg.png");
    }

    html:not([data-parallax="off"]) .recruit.galaxy-surface::before {
      background-image:
        radial-gradient(circle at 72% 28%, rgba(56, 162, 222, 0.18), transparent 32%),
        radial-gradient(circle at 18% 82%, rgba(28, 98, 158, 0.14), transparent 34%),
        linear-gradient(130deg, rgba(4, 8, 20, 0.93), rgba(13, 27, 52, 0.82) 48%, rgba(5, 11, 27, 0.92)),
        url("./lunacrest-galaxy-bg.png");
    }

    @media (max-width: 920px) {
      html:not([data-parallax="off"]) .hero {
        --lc-hero-travel: 100px;
        --lc-mark-travel: 44px;
      }

      html:not([data-parallax="off"]) .hero-background-video {
        inset: -112px 0 auto;
        height: calc(100% + 224px);
      }

      html:not([data-parallax="off"]) .hero.galaxy-surface .hero-media img {
        inset: -56px 0 auto;
        height: calc(100% + 112px);
      }

      html:not([data-parallax="off"]) :is(.vision, .recruit).galaxy-surface {
        --lc-section-travel: 42px;
      }
    }

    @media (max-width: 640px) {
      html:not([data-parallax="off"]) .hero {
        --lc-hero-travel: 68px;
        --lc-mark-travel: 28px;
      }

      html:not([data-parallax="off"]) :is(.vision, .recruit).galaxy-surface {
        --lc-section-travel: 28px;
      }
    }
  }
}

@keyframes lc-hero-depth {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--lc-hero-travel), 0); }
}

@keyframes lc-mark-depth {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--lc-mark-travel), 0); }
}

@keyframes lc-section-depth {
  from { transform: translate3d(0, calc(-1 * var(--lc-section-travel)), 0); }
  to { transform: translate3d(0, var(--lc-section-travel), 0); }
}