/* ==========================================================================
   Lyset — the layers for hero-light.js

   The light fills the whole first screen, edge to edge. The hero itself
   sits inside #main's padding (24px, 16px on phones), so the hero stops
   clipping (overflow: visible, no rounded corners) and the layers reach
   out past it by that padding on the top and both sides. Its height is
   the one hero-space.css gives it, the window less that padding and the
   strip at the bottom where the tops of the cards show (--hero-card-peek),
   so it is always plain that the page goes on. The dark stops at a
   clean edge along the hero's bottom, and the cards keep the same
   padding's distance from it.

   The name's canvas and the ball of light sit behind everything else in
   the hero. The hero is its own stacking context (Framer gives it
   position:relative and z-index:1), so z-index:-1 puts them above the
   hero's background and below every one of its children — the e-mail
   link stays on top — and pointer-events:none lets clicks through to
   them; the light is added before the name, so the name is in front of
   it.

   The light and the shadows are on a canvas of their own (.light-haze),
   on <body> rather than in the hero, so they can carry on down the page
   behind the cards and fade out there instead of stopping at the hero's
   edge. z-index:-1 at the top level of the page puts it over the page's
   background and under everything else. The script places and sizes it
   over the same box as the name's canvas and further down.

   All of this hangs off .light-on on the hero, which the script sets once
   WebGL is running, so without it the hero is left exactly as it was.
   ========================================================================== */

.framer-iuqqS .framer-1vm40ij.light-on {
  --light-bleed: 24px;
  /* Framer lifts the hero above the rest of the page (z-index:1), which
     put the ball of light over the cards whenever it came down to the
     hero's bottom edge. At 0 the hero is still its own stacking context,
     so everything inside it stacks as before, but the cards come later
     in the page and so lie on top of it: the light goes under them. */
  z-index: 0;
  overflow: visible;
  border-radius: 0;
  margin-bottom: var(--light-bleed);
  min-height: calc(100vh - 2 * var(--light-bleed) - var(--hero-card-peek, 36px));
  min-height: calc(100svh - 2 * var(--light-bleed) - var(--hero-card-peek, 36px));
}

@media (max-width: 809.98px) {
  .framer-iuqqS .framer-1vm40ij.light-on {
    --light-bleed: 16px;
  }
}

/* Framer paints the page's background on its own root as well as on
   <body>. It is the same colour, so the root lets <body>'s show through
   instead, or it would cover the haze. */
.light-page [data-framer-root] {
  background-color: transparent !important;
}

.light-haze {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

.light-layer {
  position: absolute;
  top: calc(-1 * var(--light-bleed, 0px));
  left: calc(-1 * var(--light-bleed, 0px));
  z-index: -1;
  width: calc(100% + 2 * var(--light-bleed, 0px));
  height: calc(100% + var(--light-bleed, 0px));
  pointer-events: none;
}

/* The ball of light: a soft white glow, brightest in the middle, with no
   hard edge to its core, so it is easy to look at; the same in both
   themes, pure white, which the light theme's grey page lets show. The
   script sizes it to the screen and moves it with a transform. */
.light-orb {
  position: absolute;
  top: calc(-1 * var(--light-bleed, 0px));
  left: calc(-1 * var(--light-bleed, 0px));
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 0.96) 0,
    rgba(255, 255, 255, 0.92) 11%,
    rgba(255, 255, 255, 0.72) 19%,
    rgba(255, 255, 255, 0.4) 28%,
    rgba(255, 255, 255, 0.17) 40%,
    rgba(255, 255, 255, 0.07) 56%,
    rgba(255, 255, 255, 0.02) 76%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* On the light theme's grey a glow that wide runs into the light round
   it, so there the ball is tighter: a clear white core and a short soft
   edge. */
:root:not([data-color-scheme="dark"]) .light-orb {
  background: radial-gradient(
    circle closest-side,
    rgba(255, 255, 255, 1) 0,
    rgba(255, 255, 255, 1) 14%,
    rgba(255, 255, 255, 0.8) 18%,
    rgba(255, 255, 255, 0.35) 22%,
    rgba(255, 255, 255, 0.1) 28%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(255, 255, 255, 0) 50%
  );
}

/* The heading stays in the page for screen readers and search engines;
   the name the eye sees is the one drawn with the light. !important
   because Framer animates the heading's own inline styles. */
.light-on h1 {
  opacity: 0 !important;
  pointer-events: none;
}

/* Before the script has run, the heading would show for a moment where
   Framer put it, big in the corner, and then vanish. A line in the
   page's head marks the page light-pending before its first paint, which
   keeps it hidden until the script either turns the light on or, if it
   can't, gives it back; and, should the script never run at all, the page
   gives it back itself once it has loaded. */
.light-pending section[data-framer-name="Hero"] h1 {
  opacity: 0 !important;
}