/* Shard-pile hero overlay — companion to js/exploding-text.js.
   Structural rules only; per-form geometry and pigment are inline (set by JS)
   so no stylesheet ordering can strip the background-clip:text pigment. */

/* No hold here — the page curtain in main.css waits for the hero image,
   fonts, and this overlay, so everything appears in one frame. */
.exploding-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /*lgz starting-style */
  transition: opacity .75s;
  @starting-style {
    opacity: 0;
  }
}

.exploding-text__pile {
  position: absolute;
  inset: 0;
}

.exploding-text__grain {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  /* No mix-blend-mode: multiply here — a blend layer over the whole hero
     forces the compositor to re-blend every animating shard every frame.
     At 5% opacity, normal blending is visually indistinguishable. */
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.xt-form {
  position: absolute;
  display: block;
  overflow: hidden;
  font-style: normal;
  /* Explicit size + overflow:hidden makes strict containment safe: the
     ~5-7k chars of 7px text inside each fragment can never trigger
     layout or paint outside its own box. */
  contain: strict;
  /* iconoir "hammer" at 36px, white halo + ink stroke so it reads on any pigment */
  cursor: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fffffe' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6337 11.0555L2.14839 19.5407L4.26971 21.6621L12.755 13.1768'/%3E%3Cpath d='M10.6337 11.0555L12.0479 9.64124C12.0479 9.64124 12.4015 6.45926 8.86595 2.92373L9.92661 1.86307L18.4119 7.51992L17.3512 8.58058L18.7654 9.99479L19.8261 8.93413L22.301 11.409L17.3512 16.3588L14.8764 13.8839L15.937 12.8232L14.5228 11.409L12.755 13.1768L10.6337 11.0555Z'/%3E%3C/g%3E%3Cg stroke='%2316150f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6337 11.0555L2.14839 19.5407L4.26971 21.6621L12.755 13.1768'/%3E%3Cpath d='M10.6337 11.0555L12.0479 9.64124C12.0479 9.64124 12.4015 6.45926 8.86595 2.92373L9.92661 1.86307L18.4119 7.51992L17.3512 8.58058L18.7654 9.99479L19.8261 8.93413L22.301 11.409L17.3512 16.3588L14.8764 13.8839L15.937 12.8232L14.5228 11.409L12.755 13.1768L10.6337 11.0555Z'/%3E%3C/g%3E%3C/svg%3E") 18 18, pointer;
  pointer-events: auto;
  user-select: none;
  transition: scale .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.xt-form:hover {
  z-index: 50 !important;
  scale: 1.15;
  filter: brightness(1.15) saturate(1.2);
}

.xt-form.is-gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
}

.xt-burst {
  position: absolute;
  z-index: 998;
  pointer-events: none;
}

.xt-shard {
  position: absolute;
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-weight: 700;
  font-size: 7px;
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  will-change: transform, opacity;
  /* --xt-flight is set from the FLIGHT_DUR tunable in exploding-text.js */
  transition:
    transform var(--xt-flight, 1s) cubic-bezier(.15, .8, .25, 1),
    opacity var(--xt-flight, 1s) ease;
}

.xt-burst.is-flying .xt-shard {
  /* --spread on the burst wrapper scales the blast (finale sets 1.75) */
  transform:
    translate(calc(var(--dx) * var(--spread, 1)), calc(var(--dy) * var(--spread, 1)))
    rotate(var(--rot));
  opacity: 0;
}

/* Reduced motion: shorter, smaller burst — 25% of the distance, no spin,
   400ms — rather than deleting the animation. */
@media (prefers-reduced-motion: reduce) {
  .xt-shard { transition: transform .4s cubic-bezier(.15, .8, .25, 1), opacity .4s ease; }
  .xt-burst.is-flying .xt-shard {
    transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .25));
  }
}