/* ShareRing house style.
 *
 * Three fixed layers behind page content: a flat deep ground, a slowly
 * drifting field of soft radial glows, and a low opacity glyph grid.
 * DigitalMe built the first version of this and called it .aurora;
 * ShareRing Link rebuilt it as .srl-tint plus .ledger-grid and credited
 * DigitalMe in its own source. This file names the technique and holds its
 * values in one place.
 *
 * Nothing here knows what page it is on. That is deliberate: this file is
 * written to be lifted into the theme later and shared, so it must carry no
 * assumption about the markup it sits behind. Mount it by placing
 * .srh-ground, .srh-glow and .srh-grid-texture as the first children of a
 * page wrapper. They sit at z-index -1 so ordinary non-positioned content
 * paints above them without needing a stacking context of its own. At z-index
 * 0 they would paint OVER any unpositioned text, because positioned elements
 * beat non-positioned siblings. DigitalMe hit this and its .aurora uses -1.
 *
 * Palette is taken verbatim from ShareRing Link rather than re-picked, so the
 * two pages cannot drift apart. */

:root {
  --srh-navy-deep: #010229;
  /* THE navy. Rohan, 2026-08-31: "Make them Navy."
     #0A1F44 is the value Alison's three media kits specify, and it is the only
     one on this project that arrives with CMYK and Pantone equivalents, so
     print and screen finally agree.
     It replaced #02184A, which was not defended by anything: it was used in
     exactly one place in the whole stylesheet. The real work was the artwork -
     six different navies were in play across the marks, the corporate logotype
     furthest out at #192670, a deltaE of 25 from this. Every ShareRing mark in
     assets/img is now this value. */
  --srh-navy: #0A1F44;
  --srh-ground: #050A20;
  --srh-navy-mid: #0a2472;
  --srh-accent: #2CE5A7;
  --srh-accent-ink: #02311f;
  --srh-ink: #EAF0FF;
  --srh-pale: #EDF3FF;
  /* Lapis is a light-canvas colour. Measured against the ground it reaches only
     2.94:1, below even the large-text floor, so it is used for glow tint and
     never for text. Link carries a lighter blue for exactly this reason and
     that is what text uses: 5.19:1, AA. */
  --srh-lapis: #3458E0;
  --srh-blue: #4d8aff;
  --srh-cta: #010ED0;

  --srh-surface: rgba(234, 240, 255, 0.05);
  --srh-surface-lift: rgba(234, 240, 255, 0.08);
  --srh-hairline: rgba(234, 240, 255, 0.14);
  --srh-ink-soft: rgba(234, 240, 255, 0.72);
  --srh-ink-fade: rgba(234, 240, 255, 0.52);

  --srh-radius: 16px;
  --srh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Layer 1: the ground.
 *
 * Not a flat fill any more. The scene kit's journey engine publishes
 * --srk-bg, lerped between adjacent scene midpoints as you scroll, so the
 * ground carries the colour of whichever scene you are reading. The fallback
 * is the old flat value, which is what paints if the engine never runs, if
 * scripting is off, or on a page that declares no journey.
 *
 * Precedent: DigitalMe does exactly this with its own --scroll-bg. */
.srh-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--srk-bg, var(--srh-ground));
}

/* Layer 2: the glow field. Two large soft radials on separate drift cycles.
 * The durations are deliberately not multiples of each other; equal or
 * harmonic durations phase-lock and the drift starts reading as a pulse. */
.srh-glow {
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  /* The second radial takes the LIVE accent, so the glow changes hue with the
     scene rather than sitting on one colour for the whole page. The first stays
     lapis as a constant, because two travelling hues read as a colour wash
     instead of a field. */
  background:
    radial-gradient(circle at 26% 22%,
      color-mix(in srgb, var(--srh-lapis) 10%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 74% 74%,
      color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 13%, transparent) 0%, transparent 60%);
  animation: srh-drift 67s var(--srh-ease) infinite alternate;
  will-change: transform;
}

.srh-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 58% 8%,
    color-mix(in srgb, var(--srh-navy-mid) 22%, transparent) 0%, transparent 50%);
  animation: srh-drift-slow 89s var(--srh-ease) infinite alternate;
  will-change: transform;
}

@keyframes srh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, -4vw) scale(1.12); }
}

@keyframes srh-drift-slow {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-5vw, 6vw) scale(1.08); }
}

/* Layer 3: the cell grid.
 *
 * A real grid of elements, not a repeating background image, because the
 * tinting that stops it reading as wallpaper needs per-cell selectors. Cells
 * take a small mix of accent over the ground, and coprime nth-child rhythms
 * (7n, 11n, 13n) scatter brighter ones so the eye never finds the repeat.
 * ShareRing Link does exactly this and credits DigitalMe for the scatter.
 *
 * The whole layer is deliberately close to invisible. If you can see it
 * without looking for it, it is too strong: it is texture, not decoration. */
.srh-grid-texture {
  position: fixed;
  inset: -25% 0 auto 0;
  height: 150vh;
  z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  /* Parallax. The grid is half a viewport taller than the window and rides
     --srk-parallax upward as the page scrolls, so the texture drifts against
     the content instead of sitting locked to the glass. DigitalMe does the
     same with its calendar and --cal-y. The value is clamped by the engine so
     the grid can never run past its own end and expose bare ground. */
  transform: translate3d(0, calc(var(--srk-parallax, 0px) * -1), 0);
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, rgba(0, 0, 0, 0.5) 68%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, rgba(0, 0, 0, 0.5) 68%, transparent 96%);
}

/* Cells tint off the LIVE accent and the LIVE ground, so the whole texture
 * travels with the journey. A cell that mixed a fixed accent over a moving
 * ground would drift out of key the moment the ground changed hue. */
.srh-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb,
    var(--srk-accent-live, var(--srh-accent)) 3%,
    var(--srk-bg, var(--srh-ground)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srh-ink) 4%, transparent);
}

.srh-cell:nth-child(7n + 3),
.srh-cell:nth-child(11n + 5) {
  background-color: color-mix(in srgb,
    var(--srk-accent-live, var(--srh-accent)) 6%,
    var(--srk-bg, var(--srh-ground)));
}

.srh-cell:nth-child(13n + 8) {
  background-color: color-mix(in srgb, var(--srh-lapis) 7%, var(--srk-bg, var(--srh-ground)));
}

.srh-cell-mark {
  width: min(42%, 54px);
  height: auto;
  color: color-mix(in srgb, var(--srh-ink) 9%, transparent);
}

.srh-cell:nth-child(7n + 3) .srh-cell-mark {
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 20%, transparent);
}

/* Scroll reveal. Content starts visible: if the observer never runs, because
 * JavaScript failed or is switched off, the page is still complete. The
 * script adds .srh-reveal to arm the effect and .srh-reveal-in to play it. */
.srh-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--srh-ease), transform 520ms var(--srh-ease);
}

.srh-reveal-in {
  opacity: 1;
  transform: none;
}

/* Motion is an enhancement and never a requirement. Everything above resolves
 * to its settled state and stops moving. */
@media (prefers-reduced-motion: reduce) {
  .srh-glow,
  .srh-glow::after {
    animation: none;
  }
  /*
   * The parallax is the part of the journey that actually moves, so it stops.
   * The colour journey itself continues: changing hue with scroll position is
   * not vestibular motion, nothing translates or oscillates, and switching it
   * off would leave a page designed around a travelling ground stuck on one
   * scene's colour.
   */
  .srh-grid-texture {
    transform: none;
    will-change: auto;
  }
  .srh-reveal,
  .srh-reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}