/* ELEGANT SECTION TRANSITIONS */

/* 1. Gradient Blending */
.transition-blend {
  position: relative;
  margin-top: -100px;
  height: 200px;
  width: 100%;
  background: linear-gradient(to bottom, transparent, #050505 50%, transparent);
  z-index: 5;
  pointer-events: none;
}

/* 2. Glow Separator */
.transition-glow {
  height: 2px;
  width: 100%;
  background: radial-gradient(circle, rgba(255, 46, 147, 0.4) 0%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 3. Layered Separator */
.section-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(0deg, #050505 0%, transparent 100%);
  z-index: 2;
}

/* 4. Mask Transition */
.cinematic-mask {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}