/* ==========================================================================
   SCRIM & AMBIENT VEIL STYLES
   Fixed Ambient Top Veil, Lighting Overlays & Gradient Contrast Scrims
   ========================================================================== */

/* FIXED TOP AMBIENT FADE VEIL */
.top-fade-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height, 82px);
  z-index: var(--z-scrim-veil, 90);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--page-bg, #060709) 0%,
    var(--page-bg, #060709) 75%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-fast, 0.25s ease);
  will-change: opacity;
}

.top-fade-scrim.visible {
  opacity: 1;
}

@media (min-width: 769px) {
  .top-fade-scrim {
    height: var(--header-height-desktop, 96px);
    background: linear-gradient(
      to bottom,
      var(--page-bg, #060709) 0%,
      var(--page-bg, #060709) 78%,
      transparent 100%
    );
  }
}

/* Suppress top fade scrim whenever frosted menu or any modal overlay is active */
.top-bar.menu-active ~ .top-fade-scrim,
.top-bar.menu-active + .top-fade-scrim,
body:has(.frosted-menu-overlay.active) .top-fade-scrim,
body:has(.concierge-overlay.active) .top-fade-scrim,
body:has(.rewards-overlay.active) .top-fade-scrim,
body:has(.dining-menu-overlay.active) .top-fade-scrim,
body:has(.specials-overlay.active) .top-fade-scrim,
.frosted-menu-overlay.active ~ .top-fade-scrim {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* HERO LIGHTING SCRIM */
.scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 35%,
    rgba(6, 7, 9, 0.45) 70%,
    rgba(6, 7, 9, 0.95) 100%
  );
  pointer-events: none;
  z-index: var(--z-stage-props, 2);
  transition: opacity 0.4s ease;
}

/* STORY MEDIA SHADOW SCRIMS */
.story-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.story-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* SLOGAN BOTTOM SCRIM */
.slogan-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(6, 7, 9, 0.95) 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* SKY CRANE SCRIMS */
.crane-sky-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 85%;
  background: linear-gradient(180deg, #060709 0%, #060709 75%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.crane-bottom-scrim {
  display: none !important;
}

/* SPECIALS MODAL SCRIMS */
.specials-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.specials-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}