Pinch-to-Zoom Hint

<div class="nuda-pinch" role="img" aria-label="Pinch to zoom indicator">
  <div class="nuda-pinch__photo"></div>
  <div class="nuda-pinch__frame" aria-hidden="true">
    <span class="nuda-pinch__corner nuda-pinch__corner--tl"></span>
    <span class="nuda-pinch__corner nuda-pinch__corner--tr"></span>
    <span class="nuda-pinch__corner nuda-pinch__corner--bl"></span>
    <span class="nuda-pinch__corner nuda-pinch__corner--br"></span>
  </div>
  <span class="nuda-pinch__finger nuda-pinch__finger--a"></span>
  <span class="nuda-pinch__finger nuda-pinch__finger--b"></span>
</div>

/* Pinch-to-Zoom Hint
   Two finger dots spread diagonally as the image zooms in.
   Customize: --pinch-accent */

.nuda-pinch {
  --pinch-accent: #e4ff54;
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0c0c10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-pinch__photo {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 30%,
    var(--pinch-accent),
    #10b981 45%,
    #0c0c10 85%
  );
  animation: nuda-pinch-zoom 3.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.nuda-pinch__frame {
  position: absolute;
  width: 120px;
  height: 120px;
  animation: nuda-pinch-frame 3.6s ease-in-out infinite;
}

.nuda-pinch__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #fafafa;
  border-radius: 2px;
}

.nuda-pinch__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.nuda-pinch__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.nuda-pinch__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.nuda-pinch__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.nuda-pinch__finger {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(228, 255, 84, 0.25);
  border: 2px solid var(--pinch-accent);
  box-shadow: 0 0 14px rgba(228, 255, 84, 0.55);
  top: 50%;
  left: 50%;
}

.nuda-pinch__finger--a {
  animation: nuda-pinch-a 3.6s ease-in-out infinite;
}

.nuda-pinch__finger--b {
  animation: nuda-pinch-b 3.6s ease-in-out infinite;
}

@keyframes nuda-pinch-zoom {
  0%, 15% { transform: scale(1); }
  50%, 70% { transform: scale(1.35); }
  90%, 100% { transform: scale(1); }
}

@keyframes nuda-pinch-frame {
  0%, 15% { transform: scale(0.85); opacity: 0.7; }
  50%, 70% { transform: scale(1); opacity: 1; }
  90%, 100% { transform: scale(0.85); opacity: 0.7; }
}

@keyframes nuda-pinch-a {
  0%, 15% { transform: translate(-50%, -50%) translate(-12px, -12px); }
  50%, 70% { transform: translate(-50%, -50%) translate(-44px, -44px); }
  90%, 100% { transform: translate(-50%, -50%) translate(-12px, -12px); }
}

@keyframes nuda-pinch-b {
  0%, 15% { transform: translate(-50%, -50%) translate(12px, 12px); }
  50%, 70% { transform: translate(-50%, -50%) translate(44px, 44px); }
  90%, 100% { transform: translate(-50%, -50%) translate(12px, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pinch__photo,
  .nuda-pinch__frame,
  .nuda-pinch__finger--a,
  .nuda-pinch__finger--b { animation: none; }
}