/* Single mobile page curtain. Loaded after mobile-nav.css so it replaces every
   legacy per-section mask without disturbing the finished layout. */
@media (max-width: 767px) {
  /* Remove the local seam treatment and all older section overlays, except the
     hero->page blend below, which stays and is restated here so it wins the
     cascade instead of depending on older rules further up mobile-nav.css. */
  #hero-section::before {
    display: none !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Fade the looping video to the section's own #050505 before its bottom
     edge, so the seam below is blending flat black, not live video frames. */
  #hero-section::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    z-index: 6 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -1px !important;
    width: auto !important;
    height: 34% !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, rgba(5,5,5,.1) 20%, rgba(5,5,5,.4) 45%, rgba(5,5,5,.82) 70%, #050505 88%, #050505 100%) !important;
    animation: none !important;
    transform: none !important;
  }

  /* Blur the hero-to-content seam the same way the desktop layout does (pure
     blur through the div's own feathered mask, no extra color wash — a color
     overlay on top of the blur re-introduces a visible step of its own). */
  #hero-section + div {
    z-index: 9 !important;
    background: transparent !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .kh-cascade-section,
  .kh-cascade-section.kh-cascade-visible {
    opacity: 1 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
    transition: none !important;
  }

  .kh-cascade-section::after,
  .kh-dark-reveal::after {
    display: none !important;
  }

  .animate-on-scroll,
  .animate-on-scroll.visible,
  .animate-scale-on-scroll,
  .animate-scale-on-scroll.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* One layer starts inside the lower part of the video and extends through the
     complete document. Its top edge is feathered over 150px. */
  .kh-page-curtain {
    position: absolute;
    z-index: 45;
    left: 0;
    right: 0;
    pointer-events: none;
    background: #050505;
    opacity: 1;
    visibility: visible;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, .08) 24px,
      rgba(0, 0, 0, .28) 55px,
      rgba(0, 0, 0, .58) 88px,
      rgba(0, 0, 0, .84) 120px,
      #000 150px,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, .08) 24px,
      rgba(0, 0, 0, .28) 55px,
      rgba(0, 0, 0, .58) 88px,
      rgba(0, 0, 0, .84) 120px,
      #000 150px,
      #000 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), visibility 0s linear .9s;
    will-change: opacity;
  }

  .kh-page-curtain.kh-page-curtain-revealed {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-page-curtain {
    display: none !important;
  }
}