/* Cursor-reveal line charts. Graphs are hidden behind a radial mask
   that follows the cursor — only visible where the "light" shines.
   The light itself is green. */

.xalo-about-stage {
  /* Absolute + document-coord top/left (set by JS) so the stage
     scrolls natively with the page — no per-scroll JS updates,
     no jitter. */
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms ease-out;
  perspective: 1400px;
  overflow: hidden;
  /* Fade the stage's top + bottom into the surrounding black so the
     graphs and green glow blend smoothly with adjacent sections
     instead of meeting at a hard edge. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%
  );
}

/* Previously this rule painted the dot pattern directly on the About
   section via `background-image`. That was duplicating the pattern
   that `.xr-section::before` already paints — so the About section
   ended up with TWO dot layers (2× effective alpha) and looked
   visibly dottier/lighter than every other section.
   Now we only normalize the bg-color; the dot pattern comes from
   `.xr-section::before` (defined in xalo-react.css) like every other
   section on the site. */
[data-framer-name="About"] {
  background-color: #000000 !important;
}

.xalo-about-stage[data-in="1"] {
  opacity: 1;
}

/* Dot pattern is now applied directly to the About section (see rule
   above) so it matches every other section. No stage backdrop needed. */

/* Green "preview light" — cursor-following glow. Radius kept small
   enough that the glow fades to transparent before reaching the
   section edge, so it can never spill past the boundary. */
.xalo-about-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px 280px at var(--xg-mx, 50%) var(--xg-my, 50%),
    rgba(62, 224, 140, 0.22),
    rgba(62, 224, 140, 0.09) 45%,
    rgba(62, 224, 140, 0.02) 75%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 350ms ease-out;
  mix-blend-mode: screen;
  pointer-events: none;
}

.xalo-about-stage[data-hover="1"]::after {
  opacity: 1;
}

/* Graphs layer — masked to reveal only under the cursor.
   Bigger reveal disc, smoother graduated falloff to the edge. */
.xalo-graphs-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease-out;
  --xg-reveal-radius: 420px;
  -webkit-mask-image: radial-gradient(
    circle var(--xg-reveal-radius) at var(--xg-mx, 50%) var(--xg-my, 50%),
    black 5%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.25) 75%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--xg-reveal-radius) at var(--xg-mx, 50%) var(--xg-my, 50%),
    black 5%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.25) 75%,
    transparent 100%
  );
  will-change: mask-image, -webkit-mask-image;
}

.xalo-about-stage[data-hover="1"] .xalo-graphs-layer {
  opacity: 1;
}

/* Solid vertical dividers (reference-site style) — faint white lines
   at fixed x-positions that fade at the section top/bottom edges. */
.xalo-vert-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xalo-vert-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.09) 14%,
    rgba(255, 255, 255, 0.09) 86%,
    transparent 100%
  );
}

/* Individual chart — no background, pure SVG */
.xalo-graph {
  position: absolute;
  color: rgba(255, 255, 255, 1);
  opacity: 0;
  animation: xalo-graph-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--xg-delay, 0ms);
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

@keyframes xalo-graph-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, -20px) scale(0.96);
  }
  to {
    opacity: 0.1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.xalo-graph svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.xg-tick {
  font-family: "Space Grotesk", "Geist", sans-serif;
  font-size: 9px;
  font-weight: 400;
  fill: currentColor;
  opacity: 0.55;
}

@media (max-width: 900px) {
  .xalo-about-stage {
    display: none;
  }
}