.hp2-energy,
.hp2-energy * {
  box-sizing: border-box;
}

.hp2-energy {
  position: relative;
  padding: 72px 0 64px;
  background: var(--bs-white);
  color: var(--bs-charcoal);
  font-family: Arial, "Helvetica Neue", sans-serif;
}

.bs-energy-section {
  position: relative;
  overflow: hidden;
}

.bs-energy-compare {
  --split: 50%;
  position: relative;
  width: 100%;
  height: clamp(600px, 43vw, 780px);
  overflow: hidden;
  background: var(--bs-charcoal);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}

.bs-energy-compare:focus-visible {
  outline: 3px solid var(--bs-green);
  outline-offset: -3px;
}

.bs-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bs-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.bs-day-scene { z-index: 1; }
.bs-night-scene { z-index: 3; clip-path: inset(0 0 0 var(--split)); }

.bs-energy-svg {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bs-day-energy { clip-path: inset(0 calc(100% - var(--split)) 0 0); }

.day-pulse,
.night-pulse { fill: var(--bs-white); }
.day-pulse { filter: drop-shadow(0 0 4px #FFF4CD) drop-shadow(0 0 9px #FF8A00); }
.night-pulse { filter: drop-shadow(0 0 4px #D8F1FF) drop-shadow(0 0 9px #168CFF); }

.bs-divider {
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  transform: translateX(-1px);
  background: color-mix(in srgb,var(--bs-white) 96%,transparent);
  box-shadow: 0 0 8px color-mix(in srgb,var(--bs-charcoal) 20%,transparent);
  pointer-events: none;
}

.bs-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--bs-white);
  color: var(--bs-text);
  font-size: 24px;
  box-shadow: 0 5px 20px color-mix(in srgb,var(--bs-charcoal) 23%,transparent);
}

.bs-handle-arrow {
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.bs-handle-arrow--left { transform: rotate(-135deg); }
.bs-handle-arrow--right { transform: rotate(45deg); }

.bs-scene-label {
  position: absolute;
  z-index: 10;
  bottom: 26px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb,var(--bs-white) 50%,transparent);
  border-radius: 100px;
  background: color-mix(in srgb,var(--bs-charcoal) 26%,transparent);
  color: var(--bs-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.bs-scene-label--day { left: max(48px, calc((100vw - 1480px)/2)); }
.bs-scene-label--night { right: max(48px, calc((100vw - 1480px)/2)); }

.hp2-energy-hint {
  margin: 20px 24px 0;
  color: var(--bs-text-muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .hp2-energy { padding: 54px 0 46px; }
  .bs-energy-compare { height: clamp(330px, 91vw, 410px); }
  .bs-scene img { object-position: center 55%; }
  .bs-energy-svg { display: none; }
  .bs-handle { width: 46px; height: 46px; font-size: 22px; }
  .bs-scene-label { top: 14px; bottom: auto; padding: 6px 9px; font-size: 9px; }
  .bs-scene-label--day { left: 16px; }
  .bs-scene-label--night { right: 16px; }
  .hp2-energy-hint { margin-top: 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp2-energy .bs-energy-svg { display: none; }
}