/* Detail visuals: small variant renders blurred; class .loaded toggles
   blur off when the large is upgraded in. */
img.lazy-upgrade { filter: blur(4px); transition: filter 500ms ease; }
img.lazy-upgrade.loaded { filter: none; }
video.lazy-upgrade-video { filter: blur(4px); transition: filter 500ms ease; }
video.lazy-upgrade-video.loaded { filter: none; }

/* Respect prefers-reduced-motion: hide the video, force the fallback
   visible instead. JS also reveals the fallback when video ends. */
@media (prefers-reduced-motion: reduce) {
  video.lazy-upgrade-video { display: none; }
  .split-view { display: grid !important; }
}

/* Post-video split: static photo + app mockup. Asymmetric 3fr/2fr
   default so the mockup reads as a peek; hover on the mockup half
   expands to ~75%. Change to 1fr/1fr for a clean 50/50 default. */
.split-view {
  grid-template-columns: 3fr 2fr;
  transition: grid-template-columns 350ms ease;
}
.split-view:has(.split-mockup:hover) {
  grid-template-columns: 1fr 3fr;
}
.split-static, .split-mockup {
  min-width: 0; /* allow grid children to shrink below content size */
}

/* Tilted divider seams: 1px DOM-painted bands at top + bottom of each
   diagonal-transition strip. SVG antialiasing along the diagonal can
   leave sub-pixel gaps at the strip's edges where the body bg shows
   through; these inset shadows cover them. Colors are driven by
   --seam-prev / --seam-next set inline per divider. */
.tilted-divider {
  box-shadow: inset 0 1px 0 var(--seam-prev),
              inset 0 -1px 0 var(--seam-next);
}

/* TOC dividers: re-tint DaisyUI's line color to base-300 to match the
   page's other base-300 hairlines. */
.divider::before, .divider::after {
  background-color: var(--color-base-300);
}