/* =========================================================
   effects.css — layers for the glow trail, laser and molten metal
   ========================================================= */

/* React Bits GlowCursor, stretched over the screen: above the content, never
   catches taps. Screen blend on the container so the light adds to the page
   underneath (a fixed element blends only inside itself). */
.glow-cursor.glow-cursor--page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 44;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* React Bits LaserFlow host: covers the whole page behind the content
   (the beam falls from the top and lands on the link stack) */
.laser-host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;               /* JS sets the real height: down to just past the landing point */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 120px), transparent);  /* light fades out, no hard edge */
  z-index: 1;                 /* above the molten metal, below the content */
  pointer-events: none;
  overflow: hidden;
}

/* Text that sits in front of the beam: a soft dark halo keeps it readable
   where the light is brightest (invisible on the plain dark page) */
.profile .name,
.profile .eyebrow,
.quote__text,
.quote__author,
.link-group__title {
  text-shadow:
    0 0 2px rgba(5, 5, 7, .95),
    0 0 10px rgba(5, 5, 7, .85),
    0 0 22px rgba(5, 5, 7, .6);
}

/* React Bits MoltenMetal host: the page background. Fixed to the screen, above
   the grid but under the laser (z 1, later in the page) and the content (z 2). */
.molten-host {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}