/* ============================================================================
   Rayspring Ministry Digital — motion layer.

   Everything here is decoration. Every rule is written so that its absence
   changes nothing about whether the site works: no layout depends on these
   elements, none of them can take a click, and all of them switch off under
   `prefers-reduced-motion`.

   Separate from styles.css on purpose. It is loaded after the stylesheet and
   is the only file that can be deleted outright without breaking a page — if a
   future effect turns out to cost more than it gives, that is the file to
   remove.

   Colours come from the theme tokens in styles.css, so all seven themes get
   their own version of each effect without a single value repeated here.
   ========================================================================== */

/* ── Cursor glow ────────────────────────────────────────────────────────────
   A soft disc that trails the pointer. Created by motion.js and only on a
   device with a fine pointer, so it does not exist at all on a phone — the
   media query below is the second lock, not the first.
   ------------------------------------------------------------------------ */

.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 180;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1px solid var(--accent-line);
  background: radial-gradient(circle,
    var(--accent-soft) 0%,
    var(--accent-soft) 45%,
    transparent 72%);
  transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease;
  will-change: transform;
}
.cursor-orb.is-visible { opacity: 0.75; }

/* Over something you can actually press, it swells — the only part of this
   that carries information rather than atmosphere. */
.cursor-orb.is-hovering {
  width: 54px;
  height: 54px;
  opacity: 0.45;
}

/* ── Hero fireflies ─────────────────────────────────────────────────────────
   A canvas of slow gold motes inside the hero. Dark themes only: on ivory a
   pale mote on a pale field is either invisible or dirt, and there is no
   opacity that is both.
   ------------------------------------------------------------------------ */

.hero-motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
html[data-mode="dark"] .hero-motes { display: block; }

/* ── The night sky ──────────────────────────────────────────────────────────
   A full-viewport canvas of stars with a meteor across it every few seconds,
   for the cosmos theme and only for the cosmos theme. Fixed, not absolute:
   the sky must sit still while the page scrolls over it, exactly like the
   ambient wash it is drawn on top of. Scrolling a starfield turns depth into
   wallpaper.

   z-index -1 puts it above body::before's nebula and below every scrap of
   content, and pointer-events: none means it can never take a click.
   ------------------------------------------------------------------------ */

.night-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  /* The theme can change under the reader's cursor, so the sky fades in
     rather than snapping on. */
  opacity: 0;
  transition: opacity 0.6s ease;
}
html[data-theme="cosmos"] .night-sky { display: block; opacity: 1; }

/* ── Off ────────────────────────────────────────────────────────────────────
   Three ways this all goes away, and they must all work independently.
   ------------------------------------------------------------------------ */

/* No fine pointer: there is no cursor to follow. */
@media (max-width: 920px), (pointer: coarse) {
  .cursor-orb { display: none; }
}

/*
   Reduced motion does not mean "no stars". It means nothing may move. The
   sky is still drawn — a night theme without a sky is just a dark grey page —
   but motion.js paints it once and never animates it, and no meteor is ever
   sent. A still starfield is a picture, and a picture is allowed.
*/
@media (prefers-reduced-motion: reduce) {
  .cursor-orb,
  .hero-motes { display: none; }
}

@media print {
  .cursor-orb,
  .hero-motes,
  .night-sky { display: none; }
}