/* ── Ambient motion (v26.0) ───────────────────────────────────────────
   Site-wide: a slow green tide behind every page, and a light that walks
   the boundary of the two panels the home page is built around.

   Rules this file follows, because the alternative is a site that feels
   cheap: nothing moves fast, nothing moves under text that is being read,
   and every animation is transform/opacity so it stays on the compositor.
   Anything heavier (a blurred 60vw circle on a phone) is toned down rather
   than shipped at desktop weight. */

@property --nm-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── the tide ───────────────────────────────────────────────────────── */
.nm-aura {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden; contain: strict;
}
.nm-aura i {
  position: absolute; display: block; border-radius: 50%;
  opacity: .08; filter: blur(70px); will-change: transform, opacity;
  background: radial-gradient(circle, rgba(87,209,141,.85), rgba(87,209,141,0) 70%);
}
.nm-aura i:nth-child(1) {
  width: 54vw; height: 54vw; inset-inline-start: -14vw; top: -12vw;
  animation: nm-tide-a 4s ease-in-out infinite;
}
.nm-aura i:nth-child(2) {
  width: 46vw; height: 46vw; inset-inline-end: -12vw; top: 26vh;
  background: radial-gradient(circle, rgba(204,228,100,.7), rgba(204,228,100,0) 70%);
  animation: nm-tide-b 5.2s ease-in-out infinite;
}
.nm-aura i:nth-child(3) {
  width: 62vw; height: 62vw; inset-inline-start: 16vw; bottom: -28vw;
  animation: nm-tide-c 6.4s ease-in-out infinite;
}
@keyframes nm-tide-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);      opacity: .05; }
  50%      { transform: translate3d(7vw, 6vh, 0) scale(1.22); opacity: .26; }
}
@keyframes nm-tide-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08);    opacity: .04; }
  45%      { transform: translate3d(-6vw, -7vh, 0) scale(1);  opacity: .22; }
}
@keyframes nm-tide-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: .05; }
  55%      { transform: translate3d(-8vw, -5vh, 0) scale(1.24); opacity: .24; }
}

/* the bot page paints its own backdrop; two would fight */
body.botpage .nm-aura { display: none; }

/* ── a light walking the boundary ───────────────────────────────────── */
.pulse-clockbox, .msim-panel { position: relative; isolation: isolate; }
.pulse-clockbox::after, .msim-panel::after {
  content: ""; position: absolute; inset: -1px; z-index: 1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--nm-ang),
              transparent 0 56%, rgba(87,209,141,.65) 70%,
              rgba(204,228,100,.9) 78%, rgba(87,209,141,.45) 84%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nm-ring 2.4s linear infinite;
}
.msim-panel::after { animation-duration: 3.2s; animation-delay: -1.2s; }
.pulse-clockbox, .msim-panel { animation: nm-breathe 1.6s ease-in-out infinite; }
.msim-panel { animation-delay: -2.5s; }
@keyframes nm-ring    { to { --nm-ang: 360deg; } }
@keyframes nm-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(87,209,141, 0); }
  50%      { box-shadow: 0 0 26px rgba(87,209,141, .10); }
}

/* the clock's own digits get a breath of light behind them */
.pulse-clockbox .pulse-matrix { position: relative; z-index: 2; }

@media (max-width: 760px) {
  .nm-aura i { filter: blur(48px); opacity: .06; }
  .nm-aura i:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-aura i, .pulse-clockbox, .msim-panel,
  .pulse-clockbox::after, .msim-panel::after { animation: none !important; }
}