/* - == === BHL VARIABLES === == - */

/* This is a BHL theme, which is configuration-based, so the root element
 * contains variables that will affect the whole theme
 */
:root {
  /* S-CSS-P integration */
  --theme-base: "black-highlighter";
  --theme-id: "swirling-ashes";
  --theme-name: "Swirling Ashes Theme";

  /* Colours */
  --dark-gray-monochrome: 26, 24, 26;
  --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
  --dark-accent: 63, 9, 143;
  --medium-accent: 81, 13, 181;
  --bright-accent: 105, 49, 186;
  --pale-accent: 128, 80, 200;

  /* Sky */
  --sky-at-dawn: 236, 112, 99;
  --sky-at-morning: 174, 214, 241;
  --sky-at-daytime: 249, 231, 159;
  --sky-at-evening: 248, 196, 113;
  --sky-at-dusk: 140, 50, 70;
  --sky-at-night: 50, 40, 67;
  --sky-length: 15;
  --sky-time: 60s;

  /* Header adjustments */
  --header-title: "Rat's Nest";
  --header-subtitle: "let's begin at the end";

  /* Delete the default header background */
  --gradient-header: linear-gradient(transparent, transparent);
  --diagonal-stripes: linear-gradient(transparent, transparent);
}

/* - == === HEADER BACKGROUNDS === == - */

/* The header is made up of a million different stacked backgrounds.
 * Instead of fucking about with z-index, I've added backgrounds to
 * the ::before and ::after of various full-page elements in their
 * natural stacking order.
 */

/* The following pseudoelements each contain a different part of the
 * header background. They need to be drawn precisely over the header
 * and made unclickable so they don't interfere with the links up there.
 * They appear on the page in this order, so they'll also be drawn on
 * top of each other in this order.
 */
body::before,
div#container-wrap-wrap::before,
div#container-wrap::before,
div#container-wrap-wrap::after,
body::after {
  content: "";
  position: absolute;
  height: var(--header-height-on-desktop); width: 100%; top: 0; left: 0;
  pointer-events: none;
}

/* The sky, which loops through a series of colours to evoke the
 * unstoppable passing of time
 */
body::before {
  background: linear-gradient(
                to top,
                rgb(var(--sky-at-morning)) 0%,
                rgb(var(--sky-at-morning)) 11%,
                rgb(var(--sky-at-daytime)) 22%,
                rgb(var(--sky-at-daytime)) 33%,
                rgb(var(--sky-at-evening)) 44%,
                rgb(var(--sky-at-dusk)) 55%,
                rgb(var(--sky-at-night)) 66%,
                rgb(var(--sky-at-night)) 77%,
                rgb(var(--sky-at-dawn)) 88%,
                rgb(var(--sky-at-morning)) 100%
              );
  background-size: 100% calc(var(--header-height-on-desktop)
                             * var(--sky-length));
  animation: sky linear var(--sky-time) infinite;
}
@keyframes sky {
  from { background-position: 0 0; }
  to {
    background-position: 0 calc(var(--header-height-on-desktop)
                                * var(--sky-length));
  }
}

/* The city skyline */
div#container-wrap-wrap::before {
  background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline.png');
  background-size: auto var(--header-height-on-desktop);
}

/* Two backgrounds: a white and blurred shine on the buildings,
 * taken from a brightness threshold of the original skyline
 * image; and a white-to-transparent gradient that uses the
 * original skyline image as a clipping mask. These appear in
 * the day and fade for the night to represent the sun's 
 * reflection on the buildings.
 */
div#container-wrap::before {
  background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-whitewash.png'),
              url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline-highlight.png');
  background-size: auto var(--header-height-on-desktop);
  animation: shine ease-in-out var(--sky-time) infinite;
}
@keyframes shine {
  0%, 40%, 100% { opacity: 0.2; }
  55%, 77% { opacity: 0; }
}

/* The final two pseudoelements contain the ashes: clouds that
 * roll past the city at ground level. Two elements are needed 
 * because the two layers of clouds have different widths and
 * move at different speeds.
 * The fade animation affords an unobscured view of the city
 * every 3rd night.
 */
div#container-wrap-wrap::after, body::after {
  background-size: var(--ashes-width) var(--header-height-on-desktop);
  background-repeat: repeat-x;
  animation: ashes-move linear var(--ashes-move-duration), 
             ashes-fade ease calc(var(--sky-time) * 3);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
div#container-wrap-wrap::after {
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-large.png');
  --ashes-move-duration: 27s;
  --ashes-width: 500px;
  --ashes-opacity: 0.5;
}
body::after {
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/ashes-small.png');
  --ashes-move-duration: 20s;
  --ashes-width: 800px;
  --ashes-opacity: 0.4;
}
@keyframes ashes-move {
  from { background-position: 0 0; }
  to { background-position: var(--ashes-width) 0; }
}
@keyframes ashes-fade {
  0%, 85%, 96%, 100% { opacity: var(--ashes-opacity); }
  88.66%, 92.33% { opacity: 0.1; }
}

/* - == === BODY BACKGROUNDS === == - */

/* This psuedolement contains the faint purple patchy smog on the page
 * just below the header, as a thematic transition from dark to light.
 */
#content-wrap { position: relative; }
#content-wrap::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/purple-smoke.png');
  opacity: 0.2;
}

/* This one is the skyline at the bottom of the sidebar */
#side-bar::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; bottom: 0; left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aswirling-ashes/skyline.png');
  background-size: auto 15rem;
  background-position: bottom;
  opacity: 0.2;
}

/* - == === MISCELLANEOUS === == - */

.scpnet-interwiki-wrapper {
  filter: brightness(0.86) invert(1) hue-rotate(73deg) saturate(10);
}

@media screen and (prefers-reduced-motion: reduce) {
  body::before,
  div#container-wrap::before,
  div#container-wrap-wrap::after,
  body::after {
    animation: none;
  }
}