/* ── Lines overlay utilities ── */
.line-top-1,
.line-top-2,
.line-top-3,
.line-top-4,
.line-bottom-1,
.line-bottom-2,
.line-bottom-3,
.line-bottom-4,
.line-left-1,
.line-left-2,
.line-left-3,
.line-left-4,
.line-right-1,
.line-right-2,
.line-right-3,
.line-right-4 {
  --line-width: 20px;
  --line-opacity: 0.35;
}

.line-top-1,
.line-top-2,
.line-top-3,
.line-top-4 {
  position: relative;
}
.line-top-1::before,
.line-top-2::before,
.line-top-3::before,
.line-top-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--line-width);
  background-color: var(--line-color, #fff);
  opacity: var(--line-opacity, 1);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: center;
  -webkit-mask-size: 1000px auto;
  mask-repeat: repeat-x;
  mask-position: center;
  mask-size: 1000px auto;
  pointer-events: none;
  z-index: 1;
}

.line-bottom-1,
.line-bottom-2,
.line-bottom-3,
.line-bottom-4 {
  position: relative;
}
.line-bottom-1::before,
.line-bottom-2::before,
.line-bottom-3::before,
.line-bottom-4::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--line-width);
  background-color: var(--line-color, #fff);
  opacity: var(--line-opacity, 1);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: center;
  -webkit-mask-size: 1000px auto;
  mask-repeat: repeat-x;
  mask-position: center;
  mask-size: 1000px auto;
  pointer-events: none;
  z-index: 1;
}

.line-left-1,
.line-left-2,
.line-left-3,
.line-left-4 {
  position: relative;
}
.line-left-1::before,
.line-left-2::before,
.line-left-3::before,
.line-left-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--line-width);
  height: 100%;
  background-color: var(--line-color, #fff);
  opacity: var(--line-opacity, 1);
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-position: center;
  -webkit-mask-size: auto 1000px;
  mask-repeat: repeat-y;
  mask-position: center;
  mask-size: auto 1000px;
  pointer-events: none;
  z-index: 1;
}

.line-right-1,
.line-right-2,
.line-right-3,
.line-right-4 {
  position: relative;
}
.line-right-1::before,
.line-right-2::before,
.line-right-3::before,
.line-right-4::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--line-width);
  height: 100%;
  background-color: var(--line-color, #fff);
  opacity: var(--line-opacity, 1);
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-position: center;
  -webkit-mask-size: auto 1000px;
  mask-repeat: repeat-y;
  mask-position: center;
  mask-size: auto 1000px;
  pointer-events: none;
  z-index: 1;
}

/* Vertical images for left/right */
.line-left-1::before,
.line-right-1::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line1.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line1.png');
}

.line-left-2::before,
.line-right-2::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line2.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line2.png');
}

.line-left-3::before,
.line-right-3::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line3.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line3.png');
}

.line-left-4::before,
.line-right-4::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line4.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line4.png');
}

/* Horizontal (rotated) images for top/bottom */
.line-top-1::before,
.line-bottom-1::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line1_rot.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line1_rot.png');
}

.line-top-2::before,
.line-bottom-2::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line2_rot.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line2_rot.png');
}

.line-top-3::before,
.line-bottom-3::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line3_rot.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line3_rot.png');
}

.line-top-4::before,
.line-bottom-4::before {
  -webkit-mask-image: url('/themes/theme_hampter/assets/images/lines/line4_rot.png');
  mask-image: url('/themes/theme_hampter/assets/images/lines/line4_rot.png');
}

.line-color {
  --line-color: currentColor;
}

.line-color-white::before {
  --line-color: #fff;
}

.line-color-black::before {
  --line-color: #000;
}

.line-color-ff0000::before {
  --line-color: #ff0000;
}

.line-color-00ff00::before {
  --line-color: #00ff00;
}

.line-color-0000ff::before {
  --line-color: #0000ff;
}

.line-opacity-1::before { --line-opacity: 0.1; }
.line-opacity-2::before { --line-opacity: 0.2; }
.line-opacity-3::before { --line-opacity: 0.3; }
.line-opacity-4::before { --line-opacity: 0.4; }
.line-opacity-5::before { --line-opacity: 0.5; }
.line-opacity-6::before { --line-opacity: 0.6; }
.line-opacity-7::before { --line-opacity: 0.7; }
.line-opacity-8::before { --line-opacity: 0.8; }
.line-opacity-9::before { --line-opacity: 0.9; }

/* ── Component-specific overrides ── */
/* Footer already defines a full-cover ::before (inset:0). Reclaim it for the line utility. */
.footer-shader-container.line-top-1::before,
.footer-shader-container.line-top-2::before,
.footer-shader-container.line-top-3::before,
.footer-shader-container.line-top-4::before {
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--line-width) !important;
}