/* fx-shatter.css — TOBIRA「パーン」shatter effect styles.
   Overlay sits above the detail veil (z 80) and dialog (z 90) so the
   shards read on top of everything while the dialog fades in beneath. */

.fx-shatter-overlay {
  position: fixed;
  z-index: 120;
  pointer-events: none;      /* purely visual — never blocks the dialog */
  overflow: visible;
  contain: layout style;     /* isolate from page layout */
}

/* One shard = a tile of the source image, cut with a clip-path polygon.
   Only transform/opacity animate — compositor-friendly. */
.fx-shatter-shard {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Impact flash: white core → vermilion halo ring, scales + fades fast. */
.fx-shatter-flash {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;   /* centered on impact point */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 91, 61, .65) 32%,
    rgba(255, 91, 61, 0) 68%
  );
  mix-blend-mode: screen;
  will-change: transform, opacity;
}