/* AthletiGo, one shared layer of depth.
   ---------------------------------------------------------------------------
   The flat black across the site reads as an absence rather than as a
   surface. This file replaces the flat section fills with slow vertical
   gradients, so the eye gets a sense of a room with a light in it instead of a
   void with text on top.

   Two rules the whole file keeps to:

   1. Nothing rises more than about six percent above the void. The palette
      here runs #050506 (2%) to #0e0e11 (5.5%), which is inside --ink-2. It is
      texture, not decoration: on a poor screen it should read as one black.
   2. One light source per page. The pages that already own a light source
      keep it; the ones that never had one get a still glow through :where(),
      which carries no specificity and so never wins against a page's own rule.

   Loaded last of the child stylesheets, so a single class here beats the same
   single class in the page's own sheet without needing !important.
   --------------------------------------------------------------------------- */

:root{
  --sunk:#040405;   /* a touch below the void, for the foot of a section */
  --lift:#0c0c0f;   /* the top of a lifted section, ~4.7% */
  --lift-2:#0e0e11; /* the ceiling of this file, ~5.5% */
}

/* The document itself. A gradient across the whole scroll, not a fixed one:
   fixed attachment repaints on every scroll frame and buys nothing here. */
body.athletigo-standalone{
  background-color:var(--void);
  background-image:linear-gradient(180deg,#0a0a0c 0%,#050506 38%,#08080a 72%,#050506 100%);
}

/* ---------------------------------------------------------------------------
   Sections that used to be one flat colour.

   The rhythm alternates deliberately: a section that starts lifted ends sunk,
   and the next one starts sunk and ends lifted, so the seams between them
   disappear instead of stacking into visible bands.
   --------------------------------------------------------------------------- */

/* void sections: barely lifted at the top, back to the void at the foot */
.manifesto,
.marquee{
  background-color:transparent;
  background-image:linear-gradient(180deg,#08080a 0%,var(--void) 100%);
}

/* ink sections: the lifted ones */
.proof,
.principles,
.skills{
  background-color:transparent;
  background-image:linear-gradient(180deg,var(--lift) 0%,#08080a 62%,var(--sunk) 100%);
}

/* ink-2 sections: the lightest the site goes */
.session{
  background-color:transparent;
  background-image:linear-gradient(180deg,var(--lift-2) 0%,#0a0a0d 70%,#070709 100%);
}

/* the article wrappers on the pages that are one long surface */
.fit,
.contact{
  background-color:transparent;
  background-image:linear-gradient(180deg,#0a0a0c 0%,var(--void) 30%,#08080a 100%);
}
body.athletigo-fitness{background-color:var(--void)}

/* ---------------------------------------------------------------------------
   One light source per page.

   :where() scores zero, so home-new.css and training-new.css keep the glow
   that follows the cursor, and the pages that only carry the empty <div>
   get this still one instead of nothing.
   --------------------------------------------------------------------------- */
:where(#glow){
  position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(700px 520px at 84% 2%,rgba(255,111,32,.055),transparent 70%);
}

@media (max-width:760px){
  /* a phone screen is small enough that the wash reads as banding; flatten
     the document gradient and let the sections carry the depth on their own */
  body.athletigo-standalone{background-image:linear-gradient(180deg,#08080a 0%,var(--void) 55%,#070709 100%)}
}

@media (prefers-reduced-motion:reduce){
  :where(#glow){transition:none}
}