@charset "utf-8";
/*
 * Built-in site themes of the neon-mu template: Rainbow and Christmas, picked with the colour button of both top bars
 * like the colour schemes (view.header.php $siteThemes, cookie neon_color_scheme, mobile.js). view.header.php gives their
 * colours (--m-acc, --m-acc-hi, --m-acc-pale, --holo-filter) the way it does for a scheme and renders the decoration
 * elements (.site-fx, .site-garland) on every page; they show only under body.d-scheme-rainbow or
 * body.d-scheme-christmas, so a choice applies at once without a reload. Pictures: ../images/themes/, built by
 * .tools/SiteThemes/build-assets.cjs.
 * Every endless animation moves only transform or opacity, which the browser runs off the main thread; visitors who ask
 * for reduced motion get still decorations.
 */

.site-fx,
.site-garland {
  display: none;
}

/* Swatches of the two themes in the colour lists (mobile.css .d-scheme-swatch). */
.d-scheme-swatch.is-rainbow {
  border-color: rgba(255, 255, 255, 0.6);
  background: conic-gradient(from 200deg, #ff4d6d, #ffb340, #f5ff5a, #4dff9a, #4dd8ff, #7a6bff, #ff5ce1, #ff4d6d);
  box-shadow: 0 0 8px rgba(255, 120, 220, 0.5);
}

.d-scheme-swatch.is-christmas {
  border-color: #ffd77a;
  background: linear-gradient(135deg, #e8283f 0 50%, #1fae5b 50% 100%);
  box-shadow: 0 0 8px rgba(255, 215, 122, 0.5);
}

/* Shared layers: .site-fx-back lies under the page and the desktop wings (z-index -1, before canvas.d-ambient), and
   .site-fx-front over it. Both cover the window and never take a click. */
body.d-scheme-rainbow .site-fx,
body.d-scheme-christmas .site-fx {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.site-fx-back {
  z-index: -1;
}

.site-fx i {
  position: absolute;
  display: block;
}

/* Rainbow
   A slowly turning oil film over the site in hue blend: every coloured thing (accents, glows, the wings, pictures)
   takes the hue of the film where it is, while greys and white text keep their look, so the colours run over the page
   like a petrol stain. Soft glows under the page give the dark background colour for the film to paint.
   The film lies under the top bars (desktop 9000, phone 10010) and over the phone tab bar, drawer and sheets
   (10003-10006). Each top bar has its own band of flowing colours (its span.site-garland) under its drop-down lists, so
   the lists, with the swatches of the colour button, keep their true colours.
---------------------------------------------------------------------------*/
body.m-ready.d-scheme-rainbow .d-brand,
body.m-ready.d-scheme-rainbow .m-brand {
  color: var(--m-acc-pale);
}

/* Grey bar backgrounds: the hue blend would turn their navy into muddy brown and olive. */
body.m-ready.d-scheme-rainbow .d-topbar {
  background: rgba(8, 8, 10, 0.94);
}

body.m-ready.d-scheme-rainbow .m-topbar {
  background: rgba(9, 9, 11, 0.84);
}

body.d-scheme-rainbow .site-fx-front {
  z-index: 10007;
  mix-blend-mode: hue;
}

body.d-scheme-rainbow .site-garland {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10015;
  overflow: hidden;
  mix-blend-mode: hue;
  pointer-events: none;
}

/* One rainbow per bar width (a third of the band), moved by one third per loop. */
body.d-scheme-rainbow .site-garland i:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg, #ff4d6d, #ffb340, #f5ff5a, #4dff9a, #4dd8ff, #7a6bff, #ff5ce1, #ff4d6d) 0 0 / 33.3334% 100% repeat-x;
  animation: site-rainbow-bar 24s linear infinite;
  will-change: transform;
}

@keyframes site-rainbow-bar {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

@media (min-width: 901px) {
  body.d-scheme-rainbow .site-fx-front {
    z-index: 8999;
  }

  /* Over the bar's buttons (z-index 1), under its drop-down panels (9100). */
  body.d-scheme-rainbow .site-garland {
    z-index: 50;
  }
}

/* A 50vmax square drawn at 3.2-3.7 times its size: the browser keeps a small texture of the smooth film and stretches
   it, and the square still covers the window at every turn (its inner circle stays wider than half the diagonal). */
body.d-scheme-rainbow .site-fx-front .fx-1 {
  top: 50%;
  left: 50%;
  width: 50vmax;
  height: 50vmax;
  margin: -25vmax 0 0 -25vmax;
  background: url(../images/themes/oil.webp) center / 100% 100% no-repeat;
  transform: scale(3.2);
  animation: site-oil 110s linear infinite;
  will-change: transform;
}

@keyframes site-oil {
  0% { transform: translate(0, 0) rotate(0deg) scale(3.2); }
  25% { transform: translate(4vmax, -3vmax) rotate(90deg) scale(3.5); }
  50% { transform: translate(0, 4vmax) rotate(180deg) scale(3.7); }
  75% { transform: translate(-4vmax, -2vmax) rotate(270deg) scale(3.5); }
  100% { transform: translate(0, 0) rotate(360deg) scale(3.2); }
}

body.d-scheme-rainbow .site-fx-back i {
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 92, 210, 0.2), rgba(255, 92, 210, 0.08) 55%, rgba(255, 92, 210, 0));
  will-change: transform;
}

body.d-scheme-rainbow .site-fx-back .fx-1 {
  top: -30vmax;
  left: -25vmax;
  animation: site-glow-a 47s ease-in-out infinite alternate;
}

body.d-scheme-rainbow .site-fx-back .fx-2 {
  top: 15%;
  right: -35vmax;
  animation: site-glow-b 59s ease-in-out infinite alternate;
}

body.d-scheme-rainbow .site-fx-back .fx-3 {
  bottom: -40vmax;
  left: 20%;
  animation: site-glow-a 71s ease-in-out -20s infinite alternate-reverse;
}

@keyframes site-glow-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18vmax, 12vmax) scale(1.25); }
}

@keyframes site-glow-b {
  from { transform: translate(0, 0) scale(1.15); }
  to { transform: translate(-16vmax, 10vmax) scale(0.9); }
}

/* Christmas
   Red, gold and snow white with green corner marks; the desktop wings get red, green, gold and ice ribbons
   (js/ambient.js --ambient-cores). Snow falls over the page in three depths under the top bar, a garland of blinking
   bulbs hangs on icicles under the top bar, frost breathes in the bottom corners and ice glints twinkle behind the page.
---------------------------------------------------------------------------*/
body.m-ready.d-scheme-christmas {
  --corner: #3fd884;
  --m-corner: rgba(63, 216, 132, 0.75);
  --ambient-cores: 255 64 84, 63 216 132, 255 205 92, 150 214 255;
  --ambient-tint: 180 224 255;
}

body.d-scheme-christmas .site-fx-front {
  z-index: 8990;
}

/* Snow: each layer is one tile taller than the window and falls by one tile per loop, so the loop has no seam. The near
   layer also carries the crystals in a wider tile of the same height. */
body.d-scheme-christmas .site-fx-front .fx-1,
body.d-scheme-christmas .site-fx-front .fx-2,
body.d-scheme-christmas .site-fx-front .fx-3 {
  left: -40px;
  width: calc(100% + 80px);
  will-change: transform;
}

body.d-scheme-christmas .site-fx-front .fx-1 {
  top: -256px;
  height: calc(100% + 256px);
  background: url(../images/themes/snow-far.svg) 0 0 / 256px 256px;
  animation: site-snow-far 22s linear infinite;
}

body.d-scheme-christmas .site-fx-front .fx-2 {
  top: -384px;
  height: calc(100% + 384px);
  background: url(../images/themes/snow-mid.svg) 0 0 / 384px 384px;
  animation: site-snow-mid 17s linear infinite;
}

body.d-scheme-christmas .site-fx-front .fx-3 {
  top: -512px;
  height: calc(100% + 512px);
  background:
    url(../images/themes/snow-near.svg) 0 0 / 512px 512px,
    url(../images/themes/snow-crystals.svg) 0 0 / 1210px 512px;
  animation: site-snow-near 13s linear infinite;
}

@keyframes site-snow-far {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, 128px, 0); }
  100% { transform: translate3d(0, 256px, 0); }
}

@keyframes site-snow-mid {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-16px, 192px, 0); }
  100% { transform: translate3d(0, 384px, 0); }
}

@keyframes site-snow-near {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(24px, 256px, 0); }
  100% { transform: translate3d(0, 512px, 0); }
}

/* Frost in the bottom corners (the right one mirrored). */
body.d-scheme-christmas .site-fx-front .fx-4,
body.d-scheme-christmas .site-fx-front .fx-5 {
  bottom: 0;
  width: 300px;
  height: 300px;
  background: url(../images/themes/frost-corner.svg) 0 0 / 100% 100% no-repeat;
  opacity: 0.4;
  animation: site-frost 7s ease-in-out infinite alternate;
}

body.d-scheme-christmas .site-fx-front .fx-4 {
  left: 0;
}

body.d-scheme-christmas .site-fx-front .fx-5 {
  right: 0;
  transform: scaleX(-1);
  animation-delay: -3.5s;
}

@keyframes site-frost {
  from { opacity: 0.28; }
  to { opacity: 0.6; }
}

/* Under the page: a cold glow from the top edges and two layers of ice glints that twinkle in turns. */
body.d-scheme-christmas .site-fx-back i {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.d-scheme-christmas .site-fx-back .fx-1 {
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(46, 204, 113, 0.11), rgba(46, 204, 113, 0) 70%),
    radial-gradient(55% 45% at 88% 0%, rgba(255, 64, 84, 0.11), rgba(255, 64, 84, 0) 70%),
    radial-gradient(80% 50% at 50% 100%, rgba(170, 220, 255, 0.08), rgba(170, 220, 255, 0) 70%);
}

body.d-scheme-christmas .site-fx-back .fx-2,
body.d-scheme-christmas .site-fx-back .fx-3 {
  background: url(../images/themes/sparkles-a.svg) 0 0 / 320px 320px;
  animation: site-twinkle 3.4s ease-in-out infinite alternate;
}

body.d-scheme-christmas .site-fx-back .fx-3 {
  background-image: url(../images/themes/sparkles-b.svg);
  background-position: 160px 90px;
  animation-delay: -1.7s;
}

@keyframes site-twinkle {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

/* Garland under both top bars (view.header.php: span.site-garland as the last child of .d-topbar and .m-topbar):
   icicles, the wire with dim bulbs, glow A (bulbs 1 and 3) and glow B (bulbs 2 and 4) in turns, and a glint that runs
   along the ice (the b element is masked by the icicles). */
body.d-scheme-christmas .site-garland {
  --garland: 210px 57.5px;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 58px;
  margin-top: -1px;
  pointer-events: none;
  background:
    url(../images/themes/garland.svg) 0 0 / var(--garland) repeat-x,
    url(../images/themes/icicles.svg) 0 0 / var(--garland) repeat-x;
}

body.d-scheme-christmas .site-garland i,
body.d-scheme-christmas .site-garland b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.d-scheme-christmas .site-garland i {
  background: url(../images/themes/garland-a.svg) 0 0 / var(--garland) repeat-x;
  animation: site-bulbs 1.3s ease-in-out infinite alternate;
}

body.d-scheme-christmas .site-garland i + i {
  background-image: url(../images/themes/garland-b.svg);
  animation-direction: alternate-reverse;
}

@keyframes site-bulbs {
  0%, 15% { opacity: 1; }
  85%, 100% { opacity: 0.08; }
}

body.d-scheme-christmas .site-garland b {
  overflow: hidden;
  -webkit-mask: url(../images/themes/icicles.svg) 0 0 / var(--garland) repeat-x;
  mask: url(../images/themes/icicles.svg) 0 0 / var(--garland) repeat-x;
}

body.d-scheme-christmas .site-garland b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%);
  animation: site-glint 9s ease-in-out infinite;
}

@keyframes site-glint {
  0% { transform: translateX(-100%); }
  45%, 100% { transform: translateX(400%); }
}

/* Phones: a smaller garland and frost. */
@media (max-width: 900px) {
  body.d-scheme-christmas .site-garland {
    --garland: 150px 41px;
    height: 41px;
  }

  body.d-scheme-christmas .site-fx-front .fx-4,
  body.d-scheme-christmas .site-fx-front .fx-5 {
    width: 170px;
    height: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-fx i,
  .site-garland i,
  .site-garland b::before {
    animation: none !important;
  }
}

@media print {
  .site-fx,
  .site-garland {
    display: none !important;
  }
}