:root {
  color-scheme: dark;
  background: #02030a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #02030a;
}

body {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;

  background: #02030a;
}

#maintenance {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  display: grid;
  place-items: center;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(255, 0, 130, 0.10),
      transparent 38%
    ),
    radial-gradient(
      circle at 80% 35%,
      rgba(0, 195, 255, 0.10),
      transparent 38%
    ),
    #02030a;
}


/* ---------------------------------------------------
   AMBIENT BACKGROUND EXTENSION

   This fills widescreen areas without cropping the
   actual foreground artwork.
--------------------------------------------------- */

.ambient-art {
  position: absolute;

  inset: -7vmax;

  z-index: 0;

  background-image:
    url("/assets/virelion-os-under-construction.jpg");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  filter:
    blur(42px)
    brightness(0.30)
    saturate(1.35);

  opacity: 0.58;

  transform: scale(1.08);

  pointer-events: none;
}


/* ---------------------------------------------------
   PRIMARY ARTWORK

   contain = entire image ALWAYS visible.
--------------------------------------------------- */

.construction-art {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: none;

  -webkit-user-drag: none;

  filter:
    drop-shadow(0 0 16px rgba(0, 190, 255, 0.15))
    drop-shadow(0 0 28px rgba(255, 0, 160, 0.10));
}


/* ---------------------------------------------------
   ELECTRIC PARTICLE CANVAS
--------------------------------------------------- */

#electric-particles {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: block;

  pointer-events: none;

  mix-blend-mode: screen;
}


/* ---------------------------------------------------
   VERY SUBTLE EDGE DEPTH
--------------------------------------------------- */

.edge-vignette {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  box-shadow:
    inset 0 0 110px rgba(0, 0, 0, 0.45);

  background:
    radial-gradient(
      ellipse at center,
      transparent 58%,
      rgba(0, 0, 0, 0.16) 100%
    );
}


/* ---------------------------------------------------
   MOBILE / TABLET
--------------------------------------------------- */

@media (max-width: 900px) {
  .ambient-art {
    filter:
      blur(26px)
      brightness(0.28)
      saturate(1.25);

    opacity: 0.42;
  }

  .edge-vignette {
    box-shadow:
      inset 0 0 50px rgba(0, 0, 0, 0.35);
  }
}


/* ---------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #electric-particles {
    opacity: 0.60;
  }
}