/* Fullscreen overlay for focus transitions */
#focus-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Place below navbar/sidebar (z-index 2000), above content */
  z-index: 1500;
  overflow: hidden;
}

/* Angled line sweep */
.focus-line {
  position: absolute;
  left: -50vmax;
  top: 50%;
  /* Use vmax so the line is long enough to cover viewport diagonally at any angle */
  width: 200vmax; /* generous overshoot to avoid cut-offs */
  height: 2px; /* initial thickness, will grow */
  background: var(--accent, var(--accent-color));
  opacity: 1;
  transform-origin: left center;
  transform: translateX(var(--tx, 0)) rotate(var(--angle, 12deg)) scaleX(0) scaleY(1);
  /* Left end thinner than right using a wedge clip-path */
  --thin: 2px;
  clip-path: polygon(
    0% calc(50% - (var(--thin) / 2)),
    100% calc(50% - (var(--final-thickness, 14px) / 2)),
    100% calc(50% + (var(--final-thickness, 14px) / 2)),
    0% calc(50% + (var(--thin) / 2))
  );
  transition:
    transform var(--draw, 220ms) cubic-bezier(0.3, 0.7, 0.1, 1),
    height var(--thicken, 220ms) ease-out var(--thicken-delay, 0ms),
    opacity var(--fade, 180ms) ease-out;
}

.focus-line.go {
  transform: translateX(var(--tx, 0)) rotate(var(--angle, 12deg)) scaleX(1) scaleY(1);
  height: var(--final-thickness, 14px);
}

.focus-line.exit {
  /* default exit goes left; JS may override --exit-x */
  --tx: var(--exit-x, -10vw);
  opacity: 0;
}