/* parallax.css — depth-layer stack built by parallax.js.
   Colours come only from the page token --crystal (glints, shard edges, blooms
   and the grid plane). Nothing here paints an opaque surface; the field gradient
   behind the sections stays the integrator's job (body / html background).

   Hooks the integrator sets per section:
     <section data-parallax="shards | plane | bloom | shards+bloom">
   Optional per-section overrides (custom properties on the section):
     --plx-shard-stroke   (default .55)   --plx-shard-fill-top (.12) / --plx-shard-fill-bottom (.03)
     --plx-bloom-opacity  (default .75)   --plx-grid-alpha (.22, white; an ink grid would be capped at .10)
     --plx-far-blur       (default 5px) */

[data-parallax] {
  position: relative;
  isolation: isolate;               /* layers sit at z-index -1 inside the section only */
}

.plx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;                   /* layers never widen the page */
  pointer-events: none;
  contain: layout paint style;
  color: var(--crystal, #fff);      /* shards + blooms draw in currentColor */
  /* fade at the section's top and bottom so clipped elements dissolve instead of slicing */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.plx__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* --- (a) crystal shards: inline SVG, thin white stroke, 3-12% white fill --- */
.plx__shard {
  position: absolute;
  height: auto;
  aspect-ratio: 1 / 2;
  overflow: visible;
  display: block;
}
.plx__shard polygon {
  stroke: currentColor;
  stroke-opacity: var(--plx-shard-stroke, .55);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.plx__shard .plx__stop-a { stop-opacity: var(--plx-shard-fill-top, .12); }
.plx__shard .plx__stop-b { stop-opacity: var(--plx-shard-fill-bottom, .03); }
.plx__shard .plx__facet {
  fill: none;
  stroke: currentColor;
  stroke-opacity: .28;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.plx__layer--far .plx__shard { filter: blur(var(--plx-far-blur, 5px)); }
.plx__layer--far .plx__shard polygon { stroke-opacity: .7; }
.plx__layer--near .plx__shard polygon { stroke-opacity: .8; }

/* --- (b) perspective grid plane: 2D SVG, white light lines, rides the far layer --- */
.plx__plane {
  position: absolute;
  left: -6%;
  bottom: -2%;
  width: 112%;
  height: 70%;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 58% 100% at 50% 100%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 100% at 50% 100%, #000 25%, transparent 100%);
}
.plx__plane path {
  fill: none;
  stroke: currentColor;
  stroke-opacity: var(--plx-grid-alpha, .22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- (c) light blooms: white -> transparent, 30-60vw wide --- */
.plx__bloom {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: var(--plx-bloom-opacity, .75);
  background: radial-gradient(circle closest-side,
    currentColor 0%,
    color-mix(in srgb, currentColor 55%, transparent) 22%,
    color-mix(in srgb, currentColor 18%, transparent) 50%,
    transparent 74%);
}

/* phones: shards read smaller against a 375px column; keep the blur light */
@media (max-width: 640px) {
  .plx__layer--far .plx__shard { filter: blur(3px); }
  .plx__layer--near { display: none; }    /* two shards max in a 375px column; no pointer on phones anyway */
}

/* reduced motion: rest composition, no transforms, nothing animates */
@media (prefers-reduced-motion: reduce) {
  .plx__layer { transform: none !important; will-change: auto; }
}
.plx-static .plx__layer { transform: none !important; will-change: auto; }