/* ReactBits-ish gradual blur (bottom) */
.rb-gradual-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--gb-height, 220px);
  pointer-events: none;
  z-index: 80; /* below modals, above content */
  opacity: var(--gb-opacity, 0);
  transition: opacity .12s linear;
}
.rb-gradual-blur .rb-gb {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(calc(var(--gb-strength, 1) * var(--gb-blur, 0px)));
  -webkit-backdrop-filter: blur(calc(var(--gb-strength, 1) * var(--gb-blur, 0px)));
  background: linear-gradient(to bottom, rgba(10, 12, 18, 0), rgba(10, 12, 18, .18));
  -webkit-mask-image: var(--gb-mask);
  mask-image: var(--gb-mask);
}
/* Bands (top -> bottom) */
.rb-gb-1 {
  --gb-blur: 4px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 0) 28%);
  opacity: .35;
}
.rb-gb-2 {
  --gb-blur: 7px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 40%);
  opacity: .35;
}
.rb-gb-3 {
  --gb-blur: 10px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0) 56%);
  opacity: .40;
}
.rb-gb-4 {
  --gb-blur: 14px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 78%);
  opacity: .45;
}
.rb-gb-5 {
  --gb-blur: 18px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 1) 74%, rgba(0, 0, 0, 0) 92%);
  opacity: .55;
}
.rb-gb-6 {
  --gb-blur: 24px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 100%);
  opacity: .65;
}
.rb-gb-7 {
  --gb-blur: 32px;
  --gb-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
  opacity: .80;
}
/* Keep Bootstrap modals on top */
.modal, .modal-backdrop {
  z-index: 1050 !important;
}
/* ---------------------------------------
   MOBILE FALLBACK (important)
   If blur is disabled/unsupported on mobile,
   keep the same look with "fog" instead of blur.
   --------------------------------------- */
@media (max-width: 768px) {
  .rb-gradual-blur {
    height: 240px; /* slightly taller on mobile */
  }
  .rb-gradual-blur .rb-gb {
    /* blur often doesn't work on iOS Safari — fallback to fog */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(to bottom, rgba(10, 12, 18, 0), rgba(10, 12, 18, .22), rgba(10, 12, 18, .40)) !important;
  }
}
/* When a Bootstrap modal is open, hide the blur overlay completely */
body.modal-open .rb-gradual-blur {
  display: none !important;
}
/* Safety: keep modals above everything */
.modal {
  z-index: 1050 !important;
}
.modal-backdrop {
  z-index: 1040 !important;
}