/**
 * The VestMind ambient background system.
 *
 * One template, used by every surface except the landing page.
 * A page opts in by loading this stylesheet and placing the component at the
 * top of its `<body>`:
 *
 *   <link rel="stylesheet" href="/styles/vestmind-atmosphere.css">
 *   <script src="/components/atmosphere/atmosphere.js" defer></script>
 *   ...
 *   <vestmind-atmosphere variant="product"></vestmind-atmosphere>
 *
 * Loading the stylesheet is the opt-in, which is why it also neutralises the
 * page-level paper further down: a surface that paints its own opaque
 * background would sit in front of the atmosphere and hide it. Only the
 * page-level surface is neutralised — cards keep their own crisp white.
 *
 * Five layers, never at equal strength:
 *
 *   1. Cloud base            almost white, occasionally toward pale blue
 *   2. Sky-light bloom       enormous blurred radials in sky blue, 4–8%
 *   3. Intelligence contours hairline flowing lines in Signal Blue, 3–6%
 *   4. Gold signature        small arcs and dot fields in gold, 5–10%
 *   5. Depth wash            one large translucent shape behind the layout
 *
 * The layers live in the page's whitespace — the gutters, the corners, the
 * band above the fold — and never under a dense table, a chart or a column of
 * text. That is what keeps a product screen readable rather than decorative.
 *
 * Three movements, and only three: the blooms and the depth wash drift, the
 * contours translate and rotate a degree, the gold field rises a few pixels.
 * Nothing pulsates, nothing sparkles, no opacity is animated.
 *
 * Strength is the only dial. `variant` picks it:
 *
 *   marketing  100%   content surfaces, where atmosphere is allowed to read
 *   product     40%   the investor's working screens — the reference setting
 *   report      15%   anything printed, exported or read as a document
 *
 * Every layer's own colour is authored at marketing strength, and the variant
 * multiplies it. Product therefore lands on the values the design spec gives
 * as its starting point (a ~14% sky bloom, ~9.5% contours, ~8% gold dots),
 * which is what the reference screen was drawn against.
 */

:root {
  /* 1 — the cloud base. A solid floor, so a page still reads correctly if the
     component itself never renders. */
  --vm-atmos-cloud: #F7FBFF;
  --vm-atmos-cloud-blue: #EAF6FF;

  /* Channels rather than hexes: every layer mixes its own alpha. */
  --vm-atmos-sky: 117, 199, 244;    /* #75C7F4 — sky light */
  --vm-atmos-signal: 11, 99, 246;   /* #0B63F6 — Signal Blue, the intelligence */
  --vm-atmos-gold: 214, 154, 45;    /* #D69A2D — the signature, used sparingly */
}

/* ── The cloud base ───────────────────────────────────────────────────────── */

/* `html:root` rather than `:root`, so this outranks a product stylesheet that
   set its own paper on `:root` regardless of which file loaded first. */
html:root { background-color: var(--vm-atmos-cloud); }

/* Everything the atmosphere has to see through. A page-level surface here is
   the paper the page used to paint for itself; the atmosphere paints it now.
   Cards, panels, heroes and sections are deliberately untouched. */
html body,
body.research-body,
body .about-page,
body .media-app,
body .research-page,
body .stock-intel,
body .pa,
body .app > .landing,
/* The content pages paint their paper a second time, on the wrapper inside the
   page rather than on the page itself, so clearing the outer one is not enough
   — these are the near-white bands that would otherwise seal the atmosphere off
   completely. Heroes, images and cards are left alone. */
body .guest-how-it-works,
body .logged-process,
body .about-page .values { background: transparent; }

/* VestMonitor is the exception: its shell is a frosted card rather than paper,
   and it covers the viewport. Thinned rather than removed, so the working
   surface still lifts off the page and the atmosphere still reads under it. */
body .monitor-shell { background: rgba(255, 255, 255, .55); }

/* ── The component ───────────────────────────────────────────────────────── */

vestmind-atmosphere {
  /* Two dials, multiplied: the variant the page asked for, and how much room
     the viewport has for atmosphere at all. Keeping them apart is what lets a
     media query step back from a `marketing` page without out-specifying it. */
  --vm-atmos-variant: .4;
  --vm-atmos-viewport: 1;
  --vm-atmos-strength: calc(var(--vm-atmos-variant) * var(--vm-atmos-viewport));

  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  /* Fixed to the viewport rather than to the page: the monitor scrolls inside a
     pane rather than the document, so a document-height layer would sit still
     on one surface and travel on another. */
  contain: paint;
}

vestmind-atmosphere[variant='marketing'] { --vm-atmos-variant: 1; }
vestmind-atmosphere[variant='product'] { --vm-atmos-variant: .4; }
vestmind-atmosphere[variant='report'] { --vm-atmos-variant: .15; }

vestmind-atmosphere > * {
  position: absolute;
  display: block;
}

/* Only the layers that actually move are promoted. */
.vm-atmos-bloom,
.vm-atmos-wash,
.vm-atmos-contours,
.vm-atmos-gold,
.vm-atmos-gold-arc { will-change: transform; }

/* ── 1b. The pale-blue transition of the base ─────────────────────────────── */

/* Corner-anchored on purpose. A band across the top would tint the reading
   column with it; these three reach in from the edges and leave the middle of
   the page the near-white it is supposed to be. */
.vm-atmos-sky {
  inset: 0;
  opacity: var(--vm-atmos-strength);
  background:
    radial-gradient(900px 620px at 6% 10%, rgba(var(--vm-atmos-sky), .25), transparent 66%),
    radial-gradient(780px 640px at 96% 6%, rgba(var(--vm-atmos-signal), .11), transparent 70%),
    radial-gradient(760px 560px at 98% 78%, rgba(var(--vm-atmos-sky), .2), transparent 68%),
    radial-gradient(620px 520px at 2% 92%, var(--vm-atmos-cloud-blue), transparent 70%);
}

/* ── 2. The sky-light bloom ───────────────────────────────────────────────── */

.vm-atmos-bloom {
  border-radius: 50%;
  filter: blur(12px);
  opacity: var(--vm-atmos-strength);
  animation: vm-atmos-drift 26s ease-in-out infinite alternate;
}

/* Enters from the top right, behind the headline and the page's own gutter. */
.vm-atmos-bloom--lead {
  top: 6%;
  right: -280px;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle,
    rgba(var(--vm-atmos-sky), .36) 0%,
    rgba(var(--vm-atmos-sky), .115) 42%,
    transparent 72%);
}

/* The faint one that sits behind the primary card. Deliberately the weakest
   bloom on the page: it is there to lift the card off the paper, not to be
   seen. */
.vm-atmos-bloom--counter {
  top: -14%;
  left: 22%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle,
    rgba(var(--vm-atmos-sky), .2) 0%,
    rgba(var(--vm-atmos-sky), .07) 46%,
    transparent 70%);
  animation-duration: 21s;
  animation-name: vm-atmos-drift-counter;
}

/* ── 5. The depth wash ────────────────────────────────────────────────────── */

/* One large translucent shape moving behind the layout — behind the page, never
   behind an individual card, which is why it is this big and this diffuse. */
.vm-atmos-wash {
  right: -16%;
  bottom: -26%;
  width: min(1180px, 92vw);
  height: 780px;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  filter: blur(26px);
  opacity: var(--vm-atmos-strength);
  background: radial-gradient(circle at 38% 34%,
    rgba(var(--vm-atmos-signal), .1) 0%,
    rgba(var(--vm-atmos-sky), .085) 44%,
    transparent 74%);
  animation: vm-atmos-drift 34s ease-in-out infinite alternate;
}

/* ── 3. The intelligence contours ─────────────────────────────────────────── */

.vm-atmos-contours {
  width: min(620px, 48vw);
  height: auto;
  opacity: calc(.24 * var(--vm-atmos-strength));
  animation: vm-atmos-contour 38s ease-in-out infinite alternate;
}

.vm-atmos-contours path {
  fill: none;
  stroke: rgb(var(--vm-atmos-signal));
  stroke-width: .75;
}

/* The broad field entering from the top right, behind the page's first
   headline. The mask is what keeps it out of the reading column. */
.vm-atmos-contours--lead {
  top: 74px;
  right: -120px;
  -webkit-mask-image: linear-gradient(255deg, #000 34%, transparent 88%);
  mask-image: linear-gradient(255deg, #000 34%, transparent 88%);
}

/* Its answer in the lower right, drawn from the same curves flipped, so the two
   read as one field the page is sitting inside. */
.vm-atmos-contours--trail {
  right: -80px;
  bottom: -110px;
  width: min(470px, 38vw);
  animation-duration: 44s;
  -webkit-mask-image: linear-gradient(285deg, #000 30%, transparent 86%);
  mask-image: linear-gradient(285deg, #000 30%, transparent 86%);
}

/* ── 4. The gold signature geometry ───────────────────────────────────────── */

/* A sparse micro-dot field down the left edge, below the fold's headline row.
   Small, masked, and the only gold on the page other than the arc below. */
.vm-atmos-gold {
  left: -46px;
  top: 38%;
  width: 340px;
  height: min(520px, 52vh);
  opacity: calc(.62 * var(--vm-atmos-strength));
  background-image: radial-gradient(rgba(var(--vm-atmos-gold), .32) .7px, transparent .8px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 88%);
  mask-image: linear-gradient(90deg, #000, transparent 88%);
  animation: vm-atmos-gold-rise 32s ease-in-out infinite alternate;
}

/* One arc and three dots, high on the right. The signature moment: a fraction
   of the page, and the only place gold is allowed to be geometry. */
.vm-atmos-gold-arc {
  top: 21%;
  right: 7%;
  width: 132px;
  height: auto;
  opacity: calc(.26 * var(--vm-atmos-strength));
  animation: vm-atmos-gold-rise 24s ease-in-out infinite alternate;
}

.vm-atmos-gold-arc path { fill: none; stroke: rgb(var(--vm-atmos-gold)); stroke-width: 1; }
.vm-atmos-gold-arc circle { fill: rgb(var(--vm-atmos-gold)); }

/* ── The three movements ──────────────────────────────────────────────────── */

@keyframes vm-atmos-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-34px, 24px, 0) scale(1.04); }
}

@keyframes vm-atmos-drift-counter {
  from { transform: translate3d(0, 0, 0) scale(1.03); }
  to { transform: translate3d(30px, -18px, 0) scale(1); }
}

@keyframes vm-atmos-contour {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-16px, 12px, 0) rotate(1.2deg); }
}

@keyframes vm-atmos-gold-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-9px); }
}

/* ── Where the atmosphere steps back ──────────────────────────────────────── */

/* A narrow screen has no whitespace to put a pattern in: the content column is
   the page. The blooms stay, because they are the paper rather than a pattern;
   the contours and the gold go. */
@media (max-width: 900px) {
  vestmind-atmosphere { --vm-atmos-viewport: .65; }
  .vm-atmos-contours,
  .vm-atmos-gold,
  .vm-atmos-gold-arc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  vestmind-atmosphere > * { animation: none !important; }
}

@media print {
  vestmind-atmosphere { display: none; }
}