/*
  ============================================================================
  VEYRA POLISH: depth, light and contrast for the public homepage
  ============================================================================

  Loaded LAST, and only by index.html.

  WHY A SEPARATE FILE RATHER THAN EDITS IN PLACE.

  Everything here is presentational and additive: not one rule changes a
  layout, a size, a font, a colour role or a piece of copy. Keeping it apart
  means the homepage's polish can be read, reviewed or removed as one unit,
  and means styles.css and veyra-design.css - which carry the application and
  every other page - are not touched at all. A selector below such as
  .button-accent or .site-nav is shared with the rest of the site; because
  this file is only linked from index.html, nothing outside the homepage can
  be affected by it.

  WHAT IT IS TRYING TO DO.

  The page was not flat because it lacked effects. It was flat because three
  of its grounds are a single solid colour - .cinema paints #03060d, the
  timeline #04060a, the footer --ink-deep - so there is nothing for the eye
  to read depth from between the lit moments. Meanwhile the two sections that
  DO have layered light, .veyra-engine and .closer, already look the way the
  rest should.

  So this file mostly borrows from what the page already does well:

    - the same cyan (#5ecbff) the hero, engine and closer already use
    - radial pools at the same restraint the engine uses (0.12-0.19 alpha)
    - the hairline-and-glow language of .eng-title em and .vit-panel

  Nothing new is invented. Every value is at or below the alpha the page
  already permits itself, and every glow has a stated reason to exist.

  WHAT IT DELIBERATELY DOES NOT DO.

  No gradient-filled display text (the generic choice, and it costs
  readability). No glowing borders on everything. No decorative graphics. No
  new sections, no new elements, no animation beyond hover transitions that
  were already present in weaker form. The hero's own lighting, the engine's
  and the closer's backgrounds, and the .vit-panel card are left alone: they
  were already right.

  Structure:
    1. Shared light values
    2. Ambient depth on the flat grounds
    3. Section seams
    4. Buttons
    5. Typography
    6. Surfaces
    7. Icons
    8. Interactive polish
    9. The inventory loop       (main composition, #features)
   10. The intelligence sphere  (main composition, "Stop typing")
   11. The wireframe brain      (main composition, "Everything starts here")
   12. The box                  (supporting, #the-problem)
   13. Reduced motion
*/

/* ==========================================================================
   1. SHARED LIGHT VALUES
   ==========================================================================
   One place for the light this file adds, so a change to the page's mood is
   a change to four numbers rather than forty. The hue is the one already in
   use across the hero, engine and closer.
   ========================================================================== */

:root {
  /* The page's established cyan, as channels, so alpha can vary per use. */
  --vp-cyan-rgb: 94, 203, 255;
  /* The deeper blue the engine lights its floor with. */
  --vp-blue-rgb: 26, 104, 176;

  /* Ambient pools. At or below what .veyra-engine already paints. */
  --vp-ambient-strong: 0.1;
  --vp-ambient-soft: 0.06;
  --vp-ambient-faint: 0.035;

  /* The lit seam between sections, brightest at the centre. */
  --vp-seam: rgba(var(--vp-cyan-rgb), 0.28);
}

/* ==========================================================================
   2. AMBIENT DEPTH ON THE FLAT GROUNDS
   ==========================================================================
   Each of these three sections paints a single solid colour today. A couple
   of very low-alpha pools give the eye somewhere to travel without reading
   as a gradient: offset from centre, different sizes, never symmetrical.

   Applied as background-image, not through a pseudo-element, for two
   reasons: all three set background as a COLOUR only, so adding an image
   layer takes nothing away; and it avoids giving a section a new containing
   block, which could move any absolutely positioned descendant.
   ========================================================================== */

/*
  The opening frame. The room already has its own lighting in .cine-atmos -
  this sits underneath all of it, lifting the corners off pure black so the
  arcs have something to sit in. Kept fainter than anywhere else on the page:
  the mark is the only thing that should carry light here.
*/
.cinema {
  background-image:
    radial-gradient(
      120% 80% at 50% -10%,
      rgba(var(--vp-cyan-rgb), var(--vp-ambient-faint)),
      transparent 60%
    ),
    radial-gradient(
      90% 60% at 12% 100%,
      rgba(var(--vp-blue-rgb), var(--vp-ambient-soft)),
      transparent 68%
    );
}

/*
  The timeline. Its ::before already lights the middle; these two sit below
  that and light the upper left and lower right, so the black has a diagonal
  rather than a single central pool. The section is the longest on the page
  and was the flattest at its edges.
*/
.veyra-inventory-timeline {
  background-image:
    radial-gradient(
      70% 50% at 8% 6%,
      rgba(var(--vp-blue-rgb), var(--vp-ambient-strong)),
      transparent 70%
    ),
    radial-gradient(
      80% 55% at 92% 96%,
      rgba(var(--vp-cyan-rgb), var(--vp-ambient-soft)),
      transparent 72%
    );
}

/*
  The problem section. Its own pool is preserved verbatim as the first layer
  below - restated rather than replaced, because .boxlab sets `background`
  as a shorthand and declaring background-image alone would silently drop it.
  The two added layers widen the light to the shoulders.
*/
.boxlab {
  background-color: var(--ink);
  background-image:
    /* preserved from styles.css */
    radial-gradient(900px 500px at 50% 18%, rgba(114, 188, 228, 0.06), transparent 70%),
    /* added */
    radial-gradient(
      60% 45% at 95% 15%,
      rgba(var(--vp-cyan-rgb), var(--vp-ambient-soft)),
      transparent 70%
    ),
    radial-gradient(
      75% 50% at 2% 85%,
      rgba(var(--vp-blue-rgb), var(--vp-ambient-soft)),
      transparent 72%
    );
}

/*
  The footer. A single wide pool low and centred, so the page settles rather
  than stopping at a flat block. Deliberately the faintest on the page - this
  is the end of the document, not a feature of it.
*/
.site-footer {
  background-image:
    radial-gradient(
      100% 180% at 50% 100%,
      rgba(var(--vp-blue-rgb), var(--vp-ambient-soft)),
      transparent 70%
    );
}

/* ==========================================================================
   3. SECTION SEAMS
   ==========================================================================
   The sections met at a flat 1px hairline running edge to edge, which is
   what made the page read as stacked blocks. Each seam now brightens toward
   the middle and dissolves before either edge, so the join reads as two
   grounds meeting under a light rather than as a drawn rule.

   Done with border-image on the hairline that already exists: no new
   element, no change to spacing, and the border collapses to nothing on the
   sides because only the top edge has width.
   ========================================================================== */

.boxlab,
.veyra-engine,
.site-footer {
  border-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--vp-cyan-rgb), 0.04) 18%,
      var(--vp-seam) 50%,
      rgba(var(--vp-cyan-rgb), 0.04) 82%,
      transparent 100%
    )
    1;
}

/*
  The engine carries the strongest seam on the page: it is where the product
  argument begins, and it is the one join between two sections that are both
  lit. A faint bloom under the line finishes the hand-over.
*/
.veyra-engine {
  box-shadow: inset 0 1px 0 rgba(var(--vp-cyan-rgb), 0.07),
    inset 0 60px 90px -70px rgba(var(--vp-cyan-rgb), 0.3);
}

/*
  The timeline has no border of its own - it receives .cinema's dissolve from
  above - so its seam is a bloom rather than a line, picking the hand-over up
  where the gradient finishes.
*/
.veyra-inventory-timeline {
  box-shadow: inset 0 50px 80px -70px rgba(var(--vp-cyan-rgb), 0.26);
}

/* ==========================================================================
   4. BUTTONS
   ==========================================================================
   The primary action is a near-white button on a near-black page, which is
   already high contrast. What it lacked was illumination: it sat on the
   ground rather than above it.

   A cool halo under the button and a lit top edge, both reading as the page
   light catching a raised surface. The shape, size, colour and type are
   untouched.
   ========================================================================== */

.button-accent {
  box-shadow:
    /* the lit top edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    /* the halo, cool rather than neutral */
    0 2px 10px -4px rgba(var(--vp-cyan-rgb), 0.3),
    0 1px 2px rgba(3, 8, 20, 0.45);
  transition:
    background var(--duration-base) var(--ease),
    box-shadow var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}

.button-accent:hover,
.button-accent:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    /* the halo widens and warms toward cyan on approach */
    0 8px 28px -10px rgba(var(--vp-cyan-rgb), 0.55),
    0 6px 16px -8px rgba(3, 8, 20, 0.6),
    0 2px 4px rgba(3, 8, 20, 0.45);
}

.button-accent:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 6px -3px rgba(var(--vp-cyan-rgb), 0.35),
    0 1px 2px rgba(3, 8, 20, 0.45);
}

/*
  There is no secondary button on this page - both actions are
  .button-accent, in the masthead and at the close - so nothing else is
  styled here. The masthead's action while the hero is on screen keeps its
  own cyan hairline treatment from veyra-hero.css, which is higher
  specificity than anything above and deliberately left to win.
*/

/* ==========================================================================
   5. TYPOGRAPHY
   ==========================================================================
   No size, weight, family or copy changes. Two things only: the small
   labels are lit so they read as indicators rather than grey text, and the
   display headings get a shadow so they sit above the ground instead of on
   it.
   ========================================================================== */

/*
  The eyebrows. Both already carry the brand blue; a close glow is what the
  page does elsewhere for text that is meant to read as lit (.eng-title em),
  so the same treatment makes them consistent rather than novel.
*/
.vit-eyebrow,
.eng-eyebrow {
  text-shadow: 0 0 18px rgba(var(--vp-cyan-rgb), 0.35);
}

/*
  Display headings. A soft dark shadow, not a glow: on a near-black ground a
  halo would muddy the letterforms, while a shadow beneath them separates
  the type from the light behind it and raises apparent contrast without
  touching the colour. Kept to one pixel of offset and a wide, weak blur.
*/
.eng-title,
.closer-title,
.veyra-inventory-timeline h2,
.boxlab-head h2 {
  text-shadow:
    0 1px 0 rgba(3, 8, 20, 0.5),
    0 2px 24px rgba(3, 8, 20, 0.6);
}

/*
  The one coloured phrase on the page already glows. It is the page's
  strongest typographic moment and the reference the eyebrows above now
  match; the glow is widened very slightly so it still leads them.
*/
.eng-title em {
  text-shadow:
    0 0 34px rgba(var(--vp-cyan-rgb), 0.45),
    0 0 72px rgba(var(--vp-cyan-rgb), 0.18);
}

/*
  The step numerals. A mono label over a 2px rule; the rule now carries the
  brand rather than plain white, which ties the section markers to the
  eyebrows beside them.
*/
.step-index {
  border-top-color: rgba(var(--vp-cyan-rgb), 0.38);
}

/* ==========================================================================
   6. SURFACES
   ==========================================================================
   The timeline panel is the page's only card and was already well made -
   gradient fill, blur, inset highlight. It gets depth under it rather than
   more light on it, so it lifts off the section without gaining a glowing
   border.
   ========================================================================== */

.vit-panel {
  box-shadow:
    /* all three layers preserved verbatim from styles.css - the card already
       carries its own blue halo and dropping it would dim the panel rather
       than deepen it */
    0 40px 80px -40px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 56px -26px var(--vit-glow),
    /* added: a cool pool directly beneath, so the card is held above the
       floor rather than lit from within it */
    0 28px 64px -40px rgba(var(--vp-cyan-rgb), 0.26);
}

/* ==========================================================================
   7. ICONS
   ==========================================================================
   The page's marks are inline SVG drawn on currentColor. They are left as
   they are; only the brand mark in the masthead is lit, because it is the
   one icon that carries identity rather than meaning.
   ========================================================================== */

.site-header .brand-mark {
  filter: drop-shadow(0 0 14px rgba(var(--vp-cyan-rgb), 0.2));
  transition: filter var(--duration-base) var(--ease);
}

.site-header .brand:hover .brand-mark,
.site-header .brand:focus-visible .brand-mark {
  filter: drop-shadow(0 0 20px rgba(var(--vp-cyan-rgb), 0.38));
}

/* ==========================================================================
   8. INTERACTIVE POLISH
   ==========================================================================
   Hover states that already existed, given a little more life. Nothing
   moves on its own; every transition below is a response to the pointer or
   the keyboard.
   ========================================================================== */

/*
  Navigation. The links changed colour on hover and nothing else. A hairline
  grows from the centre - the same gesture the section seams make - so the
  masthead answers the pointer without the page shifting.
*/
.site-nav a {
  position: relative;
  transition: color var(--duration-base) var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--vp-cyan-rgb), 0.75),
    transparent
  );
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* The quiet sign-in link beside the action. */
.nav-login {
  transition: color var(--duration-base) var(--ease);
}

/*
  The masthead once the page has scrolled past the hero. While the hero is
  on screen the bar is deliberately bare and veyra-hero.css owns it; this
  only affects the solid state, where a lit underline and a touch more blur
  separate the bar from the section travelling under it.
*/
.site-header:not(.is-over-hero) {
  border-bottom-color: rgba(var(--vp-cyan-rgb), 0.14);
  box-shadow: 0 1px 0 rgba(var(--vp-cyan-rgb), 0.05),
    0 12px 32px -24px rgba(3, 8, 20, 0.9);
}

/* Footer links: the existing colour change, now eased rather than stepped. */
.footer-col a {
  transition: color var(--duration-base) var(--ease);
}

/* ==========================================================================
   9. THE INVENTORY LOOP
   ==========================================================================
   The first of the page's two main compositions: the hub in #features that
   the five products report to.

   Every value below raises an existing one. Nothing is positioned, sized,
   re-coloured or re-timed - the dials turn at the same rates, the halo
   breathes on the same 7s, the connectors run the same paths. The hub was
   drawn correctly and lit conservatively; this lights it properly.

   Note what is NOT touched: opacity and transform on .vit-halo and
   .vit-pulse are both driven by keyframes, so setting either here would
   fight the animation. Only the paint changes.
   ========================================================================== */

/*
  The bloom behind the core. One more pool at the centre, tighter and cooler
  than the two it already has, so the hub reads as the source of the
  section's light rather than an object sitting in it.
*/
.vit-halo {
  background: radial-gradient(
    circle,
    rgba(var(--vp-cyan-rgb), 0.17),
    rgba(62, 162, 211, 0.26) 24%,
    rgba(27, 135, 189, 0.085) 48%,
    rgba(4, 6, 10, 0) 72%
  );
}

/* The ring that leaves the core on each beat. Slightly more present at the
   moment it is visible at all; its timing and travel are unchanged. */
.vit-pulse {
  border-color: rgba(var(--vp-cyan-rgb), 0.46);
}

/*
  The dials. Both rims sat close to the floor of what renders cleanly on a
  dark ground - at 0.26 and 0.12 the inner one was nearly invisible on a
  dimmer display. Raised enough to read as drawn hairlines.
*/
.vit-dial-rim {
  stroke: rgba(126, 196, 240, 0.34);
}

.vit-dial-rim.is-faint {
  stroke: rgba(126, 196, 240, 0.17);
}

/*
  The two lit arcs. These are the moving part of the composition and the
  thing the eye follows, so they carry the clearest lift on the page: a
  wider, cooler glow behind the same stroke.
*/
.vit-dial-arc {
  opacity: 0.88;
  filter:
    drop-shadow(0 0 6px var(--vit-glow))
    drop-shadow(0 0 16px rgba(var(--vp-cyan-rgb), 0.3));
}

/* The mark at the centre. A second, wider halo under the existing one, so
   the brand is the brightest object in the section - which is the point of
   putting it at the middle of the hub. */
.vit-core-mark {
  filter:
    drop-shadow(0 0 16px rgba(62, 162, 211, 0.6))
    drop-shadow(0 0 38px rgba(var(--vp-cyan-rgb), 0.26));
}

/*
  The wordmark under it is deliberately left crisp. The mark above already
  carries a 38px halo, and a second one on white type directly beneath it
  turns the most important area of the composition soft. The centre of the
  hub should be the one place on the page where something is sharp.
*/

/*
  The connectors. At 0.14 the resting lines were almost lost against the
  ground, which made the stage read as scattered objects rather than a
  system reporting to a centre. Raised enough to be followed, and still
  clearly subordinate to a lit one.
*/
.vit-link {
  stroke: rgba(120, 190, 235, 0.2);
}

/* A selected connector gains a second, wider bloom so the chosen path is
   unmistakable against the four that are not. */
.vit-link.is-lit {
  filter:
    drop-shadow(0 0 5px var(--vit-glow))
    drop-shadow(0 0 14px rgba(var(--vp-cyan-rgb), 0.35));
}

/* ==========================================================================
   10. THE INTELLIGENCE CORE
   ==========================================================================
   The second main composition: the sphere in the closing section.

   It is almost entirely inline SVG whose gradients are defined in
   index.html. Those are left exactly as they are - the composition, the
   geometry and the stop positions ARE the drawing, and editing them would
   be redrawing it. Everything below is CSS over the top: stroke alpha on
   hairlines that sat near the floor, and glow on the few elements that are
   meant to be emitting light.
   ========================================================================== */

/*
  The three orbit rings. Each raised by roughly the same proportion, so the
  deliberate front-to-back ordering between them is preserved rather than
  flattened.
*/
.vcore-ring {
  stroke: rgba(112, 186, 244, 0.22);
}

.vcore-ring[data-ring='2'] {
  stroke: rgba(120, 196, 250, 0.27);
}

.vcore-ring[data-ring='3'] {
  stroke: rgba(134, 210, 255, 0.35);
}

/* The halo. Its opacity and scale are on a 3.4s keyframe, so only the glow
   is added here - the throb itself is untouched. */
.vcore-halo {
  filter: drop-shadow(0 0 26px rgba(var(--vp-cyan-rgb), 0.3));
}

/* The bright centre: the one place on the page where light is supposed to
   look like it has a source. */
.vcore-heart {
  filter: drop-shadow(0 0 20px rgba(var(--vp-cyan-rgb), 0.45));
}

/* (The mark is handled below, with the rest of the second pass.) */

/* The source dots. The ring around each is what reads at a glance, so it
   takes most of the lift. */
.vcore-dot {
  box-shadow:
    0 0 0 0.28em rgba(var(--vp-cyan-rgb), 0.18),
    0 0 12px rgba(var(--vp-cyan-rgb), 0.5);
}

/*
  WHY AN EARLIER PASS OF THIS SECTION BARELY SHOWED.

  Everything above is CSS over an SVG whose light is not in CSS at all: the
  sphere's atmosphere, glass rim, halo and heart are painted from four
  radialGradients declared in index.html, at stop alphas between 0.02 and
  0.30. A drop-shadow around a shape that faint adds a glow to something
  there is not much of, so the rules above were doing their job on an object
  that was never bright enough to carry them.

  Those stop alphas have now been raised in index.html - alphas ONLY. Every
  offset, every cx/cy/r, every path and the element order are untouched,
  because those are the drawing. The gradients are its lighting.

  The rest of this block covers the parts of the composition that are drawn
  in CSS rather than gradient-filled, and were left out of the first pass.
*/

/* The orbit ellipses and the meridians. Together these read as the platform
   the sphere sits on; both sat low enough to fade out against the section's
   own background. */
.vcore-orbit {
  stroke: rgba(120, 196, 250, 0.3);
}

.vcore-meridian {
  stroke: rgba(108, 180, 240, 0.2);
}

/*
  The four incoming connections.

  The glow goes on the FEED - four static paths - and not on the eight
  .vcore-particle dashes travelling them, even though the dashes are the
  livelier target. A filter on a path whose stroke-dashoffset animates
  continuously re-rasterises the filter region every frame, and the region
  here is the whole feed curve rather than the 3-unit dash inside it. The
  travelling dashes instead get a brighter stroke, which costs nothing.
*/
.vcore-feed {
  /* Raised so the lines stay followable across the full width of the stage;
     the dash timing, the spacing and the deliberately unequal periods that
     stop the four ever arriving together are untouched. */
  stroke: rgba(118, 194, 250, 0.5);
  filter: drop-shadow(0 0 6px rgba(var(--vp-cyan-rgb), 0.22));
}

.vcore-particle {
  stroke: #e4f4ff;
}

/* The answer leaving the core, and the ring that marks it leaving. The
   outgoing path was quieter than the four incoming ones, which read as the
   core absorbing rather than answering. */
.vcore-emit {
  stroke: rgba(134, 210, 255, 0.55);
}

.vcore-impact {
  stroke: rgba(150, 216, 255, 0.62);
}

/* The mark at the centre. It is a raster image, so it takes light rather
   than making it - a little contrast and a halo put it in front of the
   brightened heart instead of being washed out by it. */
.vcore-mark {
  opacity: 1;
  filter:
    drop-shadow(0 0 18px rgba(var(--vp-cyan-rgb), 0.45))
    drop-shadow(0 0 44px rgba(var(--vp-cyan-rgb), 0.2))
    contrast(1.06);
}

/*
  The floating answer panel. It is the one thing on the page that states
  what the core produced, and it was the quietest element in its own
  composition: a hairline border on a translucent fill, sitting over the
  section's darkest corner.
*/
.vcore-out {
  border-color: rgba(var(--vp-cyan-rgb), 0.34);
  box-shadow:
    inset 0 1px 0 rgba(var(--vp-cyan-rgb), 0.16),
    0 18px 44px -24px rgba(3, 8, 20, 0.9),
    0 0 36px -14px rgba(var(--vp-cyan-rgb), 0.3);
}

.vcore-out-tag {
  text-shadow: 0 0 18px rgba(var(--vp-cyan-rgb), 0.4);
}

/* The answer the core produces. It is the sentence the section exists to
   deliver, so it takes the same depth treatment as the display headings. */
.vcore-out-line {
  text-shadow:
    0 1px 0 rgba(3, 8, 20, 0.5),
    0 2px 20px rgba(3, 8, 20, 0.55);
}

/* The hairline arc that floors the section. Its gradient was raised in
   index.html alongside the sphere's; this puts a little bloom under it so
   the page ends on a lit horizon rather than a drawn rule. */
.closer-horizon path {
  filter: drop-shadow(0 0 8px rgba(var(--vp-cyan-rgb), 0.3));
}

/* ==========================================================================
   11. THE WIREFRAME BRAIN
   ==========================================================================
   The composition under "Everything starts here."

   WHY IT WAS UNAFFECTED BY EVERYTHING ABOVE: it is styled entirely in
   veyra-brain.css, under its own .vbrain-* vocabulary, and no earlier
   section of this file names a single one of those selectors. The brain got
   the engine section's ambient light and nothing else - it was not under-
   enhanced, it was untouched.

   PERFORMANCE SHAPES WHAT IS DONE HERE, and it is worth saying why. The
   wireframe is roughly 1,420 fibre paths inside .vbrain-net, and .vbrain-net
   animates its own opacity on a 7.5s loop with will-change: opacity. A
   drop-shadow on that group would force the whole wireframe to re-rasterise
   every frame. So the glow goes on .vbrain-edge - three static silhouette
   paths - and everything else is raised by colour and alpha, which costs
   nothing to animate over.
   ========================================================================== */

/*
  The silhouette. At 0.18 the outline of the brain was close to invisible,
  which is why the composition read as a cloud of fibres rather than a
  shape. This is the "glow around the silhouette": the outline itself, lit,
  which also gives the wireframe inside it an edge to sit within.
*/
.vbrain-edge {
  stroke: rgba(126, 196, 240, 0.34);
  filter: drop-shadow(0 0 12px rgba(var(--vp-cyan-rgb), 0.3));
}

/* The folds. They describe the form, and at 0.3 they were being lost
   against the fibres crossing them. */
.vbrain-groove {
  stroke: rgba(86, 170, 236, 0.44);
}

/*
  The fibres themselves: the definition the whole drawing rests on. One step
  toward electric blue rather than a wholesale change - the per-fibre
  opacities that give the bundle its depth are set inline on each path and
  are left exactly as they are, so the near/far banding is preserved.
*/
.vbrain-fibre {
  stroke: #7cc8fb;
}

/* The junction nodes. Their individual fill-opacities are inline per circle
   and untouched; only the colour they are drawn in is lifted, so the
   deliberate bright-to-faint distribution across the net survives. */
.vbrain-nodes {
  fill: #c2e9ff;
}

/*
  The twelve brightest nodes. Each is a hard spark inside a soft bloom, and
  the bloom's gradient was raised in index.html; taking its opacity to full
  lets that through. No filter here - the parent .vbrain-star is on a scale
  animation, and a filter under it would re-rasterise on every frame.
*/
.vbrain-bloom {
  opacity: 1;
}

/*
  The travelling signals. Left at their existing width and colour on
  purpose: they are already near-white, they animate their dash offset
  continuously, and a filter on a moving stroke is the most expensive thing
  this composition could be asked to do. The brighter fibres underneath give
  them more to travel along, which is the effect that was wanted.
*/

/*
  The light the brain hangs over - the pool that reads as a platform beneath
  it. Its gradient was raised in index.html; this adds one more pool to the
  engine section itself, placed under the drawing on the right rather than
  centred, so the composition sits in light rather than on a dark panel.

  The section's three existing layers are restated verbatim ahead of it:
  .veyra-engine sets `background` as a shorthand, so declaring
  background-image alone would silently drop all three.
*/
.veyra-engine {
  background-image:
    /* preserved from veyra-engine.css */
    radial-gradient(1400px 700px at 68% 92%, rgba(26, 104, 176, 0.16), transparent 66%),
    radial-gradient(900px 520px at 12% 4%, rgba(22, 82, 150, 0.12), transparent 70%),
    /* added: the pool the brain sits over */
    radial-gradient(
      760px 520px at 72% 46%,
      rgba(var(--vp-cyan-rgb), 0.075),
      transparent 68%
    ),
    linear-gradient(180deg, #03060d 0%, #050b18 52%, #061020 100%);
}

/* ==========================================================================
   12. THE BOX
   ==========================================================================
   The supporting illustration in #the-problem. It is already well lit the
   moment it opens - .vbox-glow runs to 0.55 alpha and the seam to 0.95 -
   so nothing about the opening sequence or the opened state is changed.
   What was flat is the box at REST, before anyone touches it: a dark
   object on a dark ground.
   ========================================================================== */

/* A cool rim on the closed lid, so the object has an edge catching the
   section's light before it is opened. */
.vbox-lid-rule {
  box-shadow: 0 0 10px rgba(var(--vp-cyan-rgb), 0.22);
}

/* The figures in the statistics beside it. Depth rather than glow - these
   are numbers to be read, not objects to be lit. */
.vbox-stat-figure {
  text-shadow:
    0 1px 0 rgba(3, 8, 20, 0.5),
    0 2px 18px rgba(3, 8, 20, 0.5);
}

.vbox-stat-index {
  text-shadow: 0 0 16px rgba(var(--vp-cyan-rgb), 0.26);
}

/* ==========================================================================
   13. REDUCED MOTION
   ==========================================================================
   Everything above is either static or a hover response, so there is little
   to disable - but the underline that grows and the lifts that translate
   are motion, and someone who has asked for less of it should get the state
   change without the movement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after {
    transition: none;
  }

  .button-accent,
  .button-accent:hover,
  .button-accent:focus-visible,
  .button-accent:active {
    transform: none;
  }
}