/* LaserFlow — WebGL hero background.
   Matches the previous hero-bg.mp4 behaviour: diffuse ambient glow that
   lightens the page additively and fades at the edges so it reads as
   atmospheric backlight around the hero mockup rather than a narrow beam. */
.laser-flow-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* Same mask geometry as the old .hero-video — brightest at 50% 45%,
     fading to transparent at the frame edges so the laser wraps around
     the hero content instead of running to the rails. The canvas's own
     near-black background disappears into the dark page, and the
     shader's edge-vignette handles internal falloff. */
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 45%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 78% at 50% 45%, #000 48%, transparent 100%);
}
.laser-flow-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* LaserFlow replaces the video background — hide the existing video layer */
.hero .hero-video {
  display: none !important;
}

/* ── Laser beam "wrap around" the hero mockup ──
   The beam's pool terminates at the top of the novadental.co.uk mockup.
   These overrides extend the emerald light down the sides and under the
   bottom so the laser visually flows AROUND the browser frame instead of
   just stopping at its top edge. */
.hero .hero-mockup::before {
  /* Override the base mockup glow with a brighter emerald halo tuned to
     hand off from the laser's pool. Stronger top (picks up the beam),
     pronounced sides (the "wrap"), and a soft bottom spill. */
  background:
    /* Top — bright band, carries the laser's pool into the mockup's edge */
    radial-gradient(ellipse 80% 45% at 50% 0%,   rgba(59,155,116,0.95) 0%, rgba(59,155,116,0.4) 35%, transparent 75%),
    /* Left rail — runs the full height of the frame */
    radial-gradient(ellipse 22% 90% at 0% 50%,   rgba(59,155,116,0.72) 0%, rgba(59,155,116,0.25) 45%, transparent 80%),
    /* Right rail — mirror of the left */
    radial-gradient(ellipse 22% 90% at 100% 50%, rgba(59,155,116,0.72) 0%, rgba(59,155,116,0.25) 45%, transparent 80%),
    /* Bottom — closes the loop under the frame */
    radial-gradient(ellipse 70% 35% at 50% 100%, rgba(59,155,116,0.65) 0%, rgba(59,155,116,0.2) 40%, transparent 75%)
    !important;
  /* Expand outwards so the halo reads as light around the frame, not a
     tight inner glow stuck to its edges. */
  top: -80px !important;
  left: -80px !important;
  right: -80px !important;
  bottom: -80px !important;
  filter: blur(32px) !important;
}

/* Larger diffuse aura behind everything — fills in the "negative space"
   around the frame with atmospheric emerald so the wrap reads as light
   spilling over, not four separate glow patches. */
.hero .hero-mockup::after {
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(59,155,116,0.28) 0%, rgba(59,155,116,0.08) 45%, transparent 80%)
    !important;
  top: -140px !important;
  left: -140px !important;
  right: -140px !important;
  bottom: -140px !important;
  filter: blur(70px) !important;
}

/* Thin emerald rim-light on the browser frame itself — makes the laser
   appear to catch the mockup's outer edge, reinforcing the wrap. */
.hero .hero-mockup .browser-frame {
  box-shadow:
    0 0 0 1px rgba(74, 175, 133, 0.35),
    0 -18px 50px -8px rgba(59, 155, 116, 0.55),
    0 18px 50px -8px rgba(59, 155, 116, 0.35),
    -18px 0 50px -8px rgba(59, 155, 116, 0.42),
    18px 0 50px -8px rgba(59, 155, 116, 0.42);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .laser-flow-bg { display: none; }
}