/* Tiny Tomato Games — CLICK-TO-SHATTER mark interaction
   Click (or Enter/Space) the hero tomato to burst it into low-poly triangles
   that fly out from the click point, then spring back together. Motion-safe;
   reduced-motion users get a static, non-interactive mark. */

@media (prefers-reduced-motion: no-preference) {

  /* discoverable affordance */
  .mark-3d.shatterable { cursor: pointer; outline: none; }
  /* legacy enlarged hit area (kept as a fallback) */
  .mark-3d.shatterable::before {
    content: ''; position: absolute; inset: -20px; z-index: 5;
    border-radius: 50%; cursor: pointer;
  }
  /* FLAT, STABLE click hotspot — lives in .mark-wrap, OUTSIDE the 3D orbit/tilt
     rig, so it never drifts out from under the cursor and hit-testing is
     reliable. Generously oversized to forgive the mark's ambient wobble. */
  .mark-wrap .mark-hotspot {
    position: absolute; inset: -24px; z-index: 6;
    border-radius: 50%; cursor: pointer; background: transparent;
  }
  .mark-3d.shatterable img.mark {
    transition: transform 0.24s cubic-bezier(0.2, 0.85, 0.3, 1), filter 0.24s ease;
    will-change: transform;
  }
  .mark-3d.shatterable:hover img.mark,
  .mark-3d.shatterable.is-hover img.mark {
    transform: translateY(-5px) scale(1.045);
    filter: drop-shadow(0 16px 34px color-mix(in oklab, var(--accent) 48%, transparent));
  }
  .mark-3d.shatterable:focus-visible img.mark {
    filter: drop-shadow(0 0 0 2px color-mix(in oklab, var(--accent) 70%, transparent));
  }
  .mark-3d.pressing img.mark {
    transform: scale(0.93);
    filter: none;
    transition-duration: 0.08s;
  }

  /* settle pop when shards reassemble */
  .mark-3d.land img.mark { animation: shatter-pop 0.62s cubic-bezier(0.2, 1.25, 0.3, 1); }
  @keyframes shatter-pop {
    0%   { transform: scale(0.8); }
    55%  { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  /* freeze ambient orbit while bursting so the explosion stays symmetric */
  .mark-3d.busy-shatter { animation: none !important; transform: rotateY(0deg) !important; }

  /* reusable ring bloom on landing */
  .mark-ring.bloom { animation: shatter-ring 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  @keyframes shatter-ring {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.55); }
    35%  { opacity: 0.9;  }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
  }

  /* triangle shards (built in JS, driven by inline transforms) */
  .mark-shards .tri { position: absolute; transform-style: preserve-3d; }

  /* one-time "tap me" hint */
  .shatter-hint {
    position: absolute; left: 50%; top: 52%; width: 116%; aspect-ratio: 1;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
    opacity: 0; z-index: 1;
  }
  .shatter-hint.show { animation: shatter-hintpulse 2.1s ease-out 0.2s 2; }
  @keyframes shatter-hintpulse {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.62); }
    28%  { opacity: 0.55; }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.32); }
  }
  .shatter-label {
    position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.3em; text-indent: 0.3em; color: var(--faint);
    white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity 0.45s ease; z-index: 2;
  }
  .shatter-label.show { opacity: 1; }
}