/* Lumen hero — cursor light, sparkle reveal, and the tagline sequence
 *
 * ---------------------------------------------------------------------------
 * PART 1: the tagline
 *
 * Two lines share one grid cell so the second can replace the first without
 * the block changing height. The column's own slide-up brings the first line
 * in; from there the sequence is: hold, fade out, short beat, second line
 * fades in and stays.
 * ---------------------------------------------------------------------------
 */

.lumen-tagline {
  display: grid;
  justify-items: end;
  /* letter-spacing adds a trailing gap after the last character, which pushes
   * right-aligned text visibly off the margin. Pull it back. */
  margin-right: -.25em;
}

.lumen-tagline > span {
  grid-area: 1 / 1;
  font-family: "Tenor Sans", Optima, Candara, "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.lumen-tagline-b { opacity: 0; }

/* Cued from the video's own clock rather than by a fixed delay, so the handover
 * lands exactly on the fade to black. The script adds these classes. */
.lumen-tagline.is-out .lumen-tagline-a { animation: lumenTagOut .7s ease both; }
.lumen-tagline.is-in  .lumen-tagline-b { animation: lumenTagIn  .9s ease both; }

@keyframes lumenTagOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes lumenTagIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* No sequence when motion is unwelcome — go straight to the resting line. */
@media (prefers-reduced-motion: reduce) {
  .lumen-tagline .lumen-tagline-a { opacity: 0; animation: none; }
  .lumen-tagline .lumen-tagline-b { opacity: 1; animation: none; }
}

/* ---------------------------------------------------------------------------
 * PART 2: the cursor light
 *
 * The hero video ends on a near-dark still of the room. Once it does, moving a
 * pointer across the hero reveals the same frame lit, through a soft radial
 * mask that follows the pointer, while white sparkles trail behind it.
 *
 * Layer order inside .lumen-glow, bottom to top:
 *   .lumen-glow-lit    the lit still, masked to a pool of light at the pointer
 *   .lumen-glow-scrim  the row's own bottom gradient, re-applied so revealed
 *                      areas keep the same contrast the headline was set on
 *   canvas             the sparkles, drawn additively so they read as light
 *
 * z-index 1 matches .nectar-video-wrap and sits later in the DOM, so it paints
 * over the video and under .video-color-overlay (z-index 3) and the content.
 */

.lumen-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease-out;
}

/* pointer is over the hero and the video has finished */
.lumen-glow.is-lit { opacity: 1; }

/* pointer has left: a very slight hold (JS) then a short fade out */
.lumen-glow.is-leaving { transition: opacity .36s ease-in; }

.lumen-glow-lit {
  --mx: 50%;
  --my: 50%;
  --mr: 300px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/lumen-hero-lit.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  -webkit-mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 36%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,.18) 82%,
    rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle var(--mr) at var(--mx) var(--my),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 36%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,.18) 82%,
    rgba(0,0,0,0) 100%);
}

.lumen-glow-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 25%, #000 100%);
  opacity: .38;
}

.lumen-glow-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Browsers without mask support would show the whole lit frame at once, which
 * would simply replace the dark ending. Hide the layer rather than do that. */
@supports not ((-webkit-mask-image: radial-gradient(#000, transparent)) or (mask-image: radial-gradient(#000, transparent))) {
  .lumen-glow-lit { display: none; }
}