.peek { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(220px, 17vw, 320px); margin: 0 0 0 28px; pointer-events: none; will-change: transform; }
.peek-in { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #111317; transform: translateY(-50%) scale(0.86); opacity: 0; clip-path: inset(18% 18% round 6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transition: transform 450ms var(--ease), opacity 220ms ease, clip-path 450ms var(--ease); }
.peek.is-on .peek-in { transform: translateY(-50%) scale(1); opacity: 1; clip-path: inset(0 0 round 6px); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; clip-path: inset(0 0 100% 0); transform: scale(1.12); filter: saturate(0.85); transition: clip-path 0s linear 500ms, transform 0s linear 500ms; }
.peek img.on { z-index: 2; clip-path: inset(0 0 0 0); transform: scale(1); transition: clip-path 500ms var(--ease), transform 900ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .peek-in, .peek img, .peek img.on { transition: opacity 150ms ease; }
}