:root { --leak-rest: 1; }

.leak {
  position: absolute;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  border-radius: inherit;
  pointer-events: none;
}

.leak__frame {
  position: absolute;
  inset: 0;
  background-color: #D7D9E4;
  background-image: url('../assets/img/aurora-1600.21ad4c4f5abcbf4f.webp');
  background-size: cover;
  background-position: center;
}

.leak--fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: var(--leak-rest);
}

@media (max-width: 768px) {
  .leak__frame { background-image: url('../assets/img/aurora-900.57e1811baadf7da7.webp'); }
}

#cases::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 572px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg-cream) 48px,
    rgba(255, 252, 244, 0.988) 111px,
    rgba(255, 252, 244, 0.746) 283px,
    rgba(255, 252, 244, 0.304) 416px,
    rgba(255, 252, 244, 0) 572px);
}

#over-ons::after,
#stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--slate);
}

#over-ons > .container,
#stats > .container { position: relative; }

.stone-scene {
  position: relative;
  isolation: isolate;
}

.problem-blur { display: none; }

.stone-scene__media {
  position: sticky;
  top: 0;
  height: 100lvh;
  z-index: 0;
  background-color: var(--bg-studio);
  pointer-events: none;
}

@media (min-width: 769px) {
  .stone-scene__media + section { margin-top: -100lvh; }
}

.stone-scene__media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

.stone-scene > section { z-index: 2; }

.stone-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    #FFFFFF 21%,
    rgba(255, 255, 255, 0) 79.6%);
}

.stone-scene::before {
  content: "";
  position: absolute;
  top: -45px;
  right: 0;
  left: 0;
  height: 142px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(207, 211, 223, 0) 0%,
    rgb(209, 213, 224) 25%,
    rgb(224, 223, 229) 59.62%,
    rgba(226, 225, 230, 0) 100%);
}

#probleem::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 159px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 252, 244, 0) 36.5%, var(--bg-cream) 100%);
}


.section-ground--bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255, 252, 244, 0) calc(50% - 441px),
    var(--bg-cream) calc(50% + 204px));
}