/**
 * Fixed left background flag - viewport-locked inside #main-content, behind page content.
 */

.landing-page__flow {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}

.landing-sticky-panel {
  display: none;
}

@media (min-width: 64em) {
  #main-content.dashboard-page-wrap.page-landing > #landing-sticky-panel,
  #main-content.dashboard-page-wrap.page-landing > .landing-sticky-panel {
    display: block;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    right: auto !important;
    width: min(58vw, 960px);
    height: auto !important;
    margin: 0 !important;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transform: none !important;
  }

  #main-content.dashboard-page-wrap.page-landing {
    transform: none !important;
  }

  #main-content.dashboard-page-wrap.page-landing > .landing-page {
    position: relative;
    z-index: 2;
  }

  .landing-sticky-panel__stage {
    position: absolute;
    left: 0;
    bottom: clamp(0.5rem, 1.5vh, 1.25rem);
    width: min(118%, 68vw);
    max-width: 1100px;
    margin-left: -22%;
  }

  .landing-sticky-panel__card {
    position: relative;
    margin: 0;
    width: 100%;
    transform: rotateX(3deg) rotateY(22deg) scale(1.06);
    transform-origin: 72% 92%;
    opacity: var(--sticky-panel-opacity, 0.62);
  }

  [data-mantine-color-scheme="light"] .landing-sticky-panel__card {
    --sticky-panel-opacity: 0.48;
  }

  .landing-sticky-panel__frame {
    position: relative;
    border-radius: clamp(1rem, 1.8vw, 1.4rem);
    overflow: hidden;
    background: rgba(15, 20, 25, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 40px 80px -32px rgba(0, 0, 0, 0.55),
      0 0 48px -16px rgba(59, 130, 246, 0.14);
  }

  [data-mantine-color-scheme="light"] .landing-sticky-panel__frame {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 32px 64px -28px rgba(15, 23, 42, 0.12);
  }

  .landing-sticky-panel__frame .landing-hero__parallax-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 1rem);
    object-fit: contain;
    object-position: left bottom;
  }

  [data-mantine-color-scheme="dark"] .landing-sticky-panel__frame .mantine-dark-hidden,
  [data-mantine-color-scheme="light"] .landing-sticky-panel__frame .mantine-light-hidden {
    display: none !important;
  }

  .landing-sticky-panel__shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0%,
      transparent 40%,
      transparent 100%
    );
    mix-blend-mode: soft-light;
    opacity: 0.4;
  }

  .landing-sticky-panel__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--landing-bg-deep) 50%, transparent) 100%),
      linear-gradient(0deg, transparent 60%, color-mix(in srgb, var(--landing-bg-deep) 40%, transparent) 100%);
    opacity: 0.65;
  }

  [data-mantine-color-scheme="light"] .landing-sticky-panel__vignette {
    background:
      linear-gradient(90deg, transparent 55%, color-mix(in srgb, #fff 45%, transparent) 100%),
      linear-gradient(0deg, transparent 60%, color-mix(in srgb, #fff 35%, transparent) 100%);
  }

  body.page-landing .landing-hero--showcase {
    background: transparent !important;
  }
}

@media (max-width: 63.99em) {
  .landing-sticky-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-sticky-panel__card {
    transform: rotateY(18deg) scale(1.04);
  }
}