/* Glass fracture: Voronoi cracks and shards. Owner: HUD/overlays workstream (C, shatter.js). */

.glass-fracture {
  position: relative;
  isolation: isolate;
}

/* Text-sized targets hug their content so the cracks sit on the glyphs, not the column. */
.content-card > p.glass-fracture,
.section-kicker.glass-fracture,
.content-card h2.glass-fracture,
.menu-label.glass-fracture {
  width: fit-content;
  max-width: 100%;
}

/* Broken panes keep their box (no layout collapse) until reset. */
.glass-fracture.glass-broken {
  visibility: hidden !important;
  pointer-events: none;
}

.glass-fracture.glass-breaking {
  pointer-events: none;
}

/* ------------------------------------------------------------- crack layer */

.crack-overlay {
  position: absolute;
  z-index: 15;
  overflow: visible;
  pointer-events: none;
}

.crack-layer .crack-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crack-layer .crack-line .crack-path {
  stroke: var(--paper);
  stroke-opacity: 0.92;
}

.crack-layer .crack-shadow .crack-path {
  stroke: var(--ink);
  stroke-opacity: 0.55;
}

.crack-layer .crack-glow .crack-path {
  stroke: var(--cyan);
  stroke-opacity: 0.22;
}

.crack-layer .facet--light {
  fill: var(--ice);
  fill-opacity: 0.075;
}

.crack-layer .facet--dark {
  fill: var(--ink);
  fill-opacity: 0.16;
}

.crack-layer .crack-glint {
  fill: var(--paper);
}

.crack-layer .crack-impact-ring {
  fill: none;
  stroke: var(--paper);
  stroke-opacity: 0.85;
  stroke-width: 1.2;
}

.crack-layer .crack-impact-core {
  fill: var(--paper);
}

/* --------------------------------------------------------------- shards */

.shard-stage {
  position: fixed;
  z-index: var(--z-shards);
  pointer-events: none;
  perspective: 900px;
  contain: layout style;
}

.shard {
  position: absolute;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: visible;
}

.shard > :first-child {
  z-index: 0;
}

/* Glass sheen across each shard, at a random angle (--sheen) and strength (--sheen-a). */
.shard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    var(--sheen, 130deg),
    color-mix(in srgb, var(--ice) calc(var(--sheen-a, 0.2) * 100%), transparent) 0%,
    transparent 38%,
    transparent 72%,
    color-mix(in srgb, var(--ice) calc(var(--sheen-a, 0.2) * 45%), transparent) 100%
  );
  pointer-events: none;
}

/* Hairline edge highlight (half of the 2px stroke survives the clip). */
.shard-edge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  overflow: visible;
}

.shard-edge path {
  fill: none;
  stroke: var(--ice);
  stroke-opacity: 0.8;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Clones never replay entrance animations or transitions. */
.shard-stage *,
.shard-stage *::before,
.shard-stage *::after {
  animation: none !important;
  transition: none !important;
}