/* OBSIDIAN — headlight before/after comparison slider */
.hl-compare{
  --pos:50%;
  --glow:150,205,255;
  position:relative;
  width:100%;
  max-width:620px;
  justify-self:end;
  align-self:center;
  aspect-ratio:4/3;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#07080b;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.03);
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:ew-resize;
  isolation:isolate;
}
.hl-compare img{
  position:absolute;inset:0;
  display:block;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;
  pointer-events:none;
  -webkit-user-drag:none;user-select:none;
}
.hl-compare .hlc-before{z-index:0}
.hl-compare .hlc-after{
  z-index:1;
  -webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}

/* glowing divider */
.hl-compare .hlc-line{
  position:absolute;top:0;bottom:0;left:var(--pos);
  z-index:3;
  width:2px;margin-left:-1px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(234,244,255,0) 0%,#eef6ff 14%,#ffffff 50%,#eef6ff 86%,rgba(234,244,255,0) 100%);
  box-shadow:0 0 6px 1px rgba(var(--glow),.95),0 0 18px 3px rgba(var(--glow),.6),0 0 42px 8px rgba(var(--glow),.28);
  animation:hlcGlow 2.8s ease-in-out infinite;
}
@keyframes hlcGlow{
  0%,100%{box-shadow:0 0 6px 1px rgba(var(--glow),.95),0 0 18px 3px rgba(var(--glow),.6),0 0 42px 8px rgba(var(--glow),.28)}
  50%{box-shadow:0 0 8px 1px rgba(var(--glow),1),0 0 26px 5px rgba(var(--glow),.75),0 0 60px 12px rgba(var(--glow),.36)}
}

/* small central arrow handle */
.hl-compare .hlc-handle{
  position:absolute;top:50%;left:var(--pos);
  z-index:4;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  color:#f4f8ff;
  background:rgba(7,8,11,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(230,242,255,.85);
  box-shadow:0 0 10px rgba(var(--glow),.85),0 0 26px rgba(var(--glow),.45),inset 0 0 8px rgba(var(--glow),.25);
  cursor:ew-resize;
  outline:none;
  transition:width .25s ease,height .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.hl-compare .hlc-handle svg{width:16px;height:16px;display:block;filter:drop-shadow(0 0 3px rgba(var(--glow),.9))}
.hl-compare:hover .hlc-handle,.hl-compare.is-dragging .hlc-handle{
  background:rgba(7,8,11,.78);
  box-shadow:0 0 14px rgba(var(--glow),1),0 0 36px rgba(var(--glow),.6),inset 0 0 10px rgba(var(--glow),.3);
}
.hl-compare .hlc-handle:focus-visible{
  box-shadow:0 0 0 3px rgba(7,8,11,.9),0 0 0 5px rgba(var(--glow),.95),0 0 30px rgba(var(--glow),.7);
}

/* before / after tags */
.hl-compare .hlc-tag{
  position:absolute;top:14px;z-index:2;
  padding:6px 10px;border-radius:999px;
  font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;
  color:#e8eef6;
  background:rgba(7,8,11,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
  transition:opacity .3s ease;
}
.hl-compare .hlc-tag-after{left:14px}
.hl-compare .hlc-tag-before{right:14px}

/* restoration percentage */
.hl-compare figcaption{
  position:absolute;left:50%;bottom:14px;z-index:4;
  transform:translateX(-50%);
  margin:0;
  pointer-events:none;
}
.hl-compare .hlc-pct{
  display:inline-block;white-space:nowrap;
  padding:8px 14px;border-radius:999px;
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:#f2f6fb;
  background:rgba(7,8,11,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(var(--glow),.35);
  box-shadow:0 0 16px rgba(var(--glow),.18);
}
.hl-compare.is-restored .hlc-pct{color:#bfe6ff;border-color:rgba(var(--glow),.75);box-shadow:0 0 22px rgba(var(--glow),.45)}

/* mobile */
@media (max-width:900px){
  .hl-compare{max-width:none;justify-self:stretch;border-radius:14px;margin-top:8px}
}
@media (max-width:560px){
  .hl-compare{aspect-ratio:1/1}
  .hl-compare .hlc-tag{top:10px;font-size:9px;padding:5px 8px}
  .hl-compare .hlc-tag-after{left:10px}
  .hl-compare .hlc-tag-before{right:10px}
  .hl-compare figcaption{bottom:10px}
  .hl-compare .hlc-pct{font-size:10px;padding:7px 12px}
}
@media (pointer:coarse){
  .hl-compare .hlc-handle{width:42px;height:42px}
  .hl-compare .hlc-handle svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .hl-compare .hlc-line{animation:none}
  .hl-compare .hlc-handle{transition:none}
}