@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";

// 그라데이션 배경 - 전역 body에 렌더링됨
.gradientBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; // 클릭 이벤트가 아래로 통과하도록

  // 기본 상태에서는 숨김
  display: none;

  // 활성화 상태
  &.visible {
    display: block;
  }
}

// 그라데이션 레이어 1: 270도 방향 (왼쪽→오른쪽, 투명→불투명)
// linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.77) 70%, rgba(0, 0, 0, 1) 100%)
.gradientLayer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.77) 70%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 1; // container 내부 상대적 zIndex
}

// 그라데이션 레이어 2: 180도 방향 (위→아래, 투명→불투명)
// linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
.gradientLayer2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  z-index: 2; // gradientLayer1보다 높게
}

// 그라데이션 레이어 3: 투명 그라데이션
// linear-gradient(0deg, rgba(0, 0, 0, 0))
.gradientLayer3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0));
  z-index: 3; // 가장 높은 레이어
}