/* `--trip-opacity` and `--veil` are printed inline from the admin settings
   (see custom3_scripts), so they must not be hard-coded here. */

#gl{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:var(--trip-opacity);
  pointer-events:none;
  filter:none !important;
  transform:none !important;
  background:#09040d;
}

#page{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  background:
    radial-gradient(ellipse at 18% 12%,rgba(95,24,115,.16),transparent 36%),
    radial-gradient(ellipse at 82% 34%,rgba(76,17,101,.13),transparent 40%),
    radial-gradient(ellipse at 30% 72%,rgba(104,26,119,.09),transparent 38%),
    linear-gradient(180deg,#09050b 0%,#060408 48%,#08050a 100%);
}

#page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.58;
  background:
    repeating-radial-gradient(ellipse at 20% 10%,
      rgba(128,50,150,.045) 0 1px,
      transparent 2px 14px),
    repeating-radial-gradient(ellipse at 80% 40%,
      rgba(104,35,132,.035) 0 1px,
      transparent 2px 18px);
  mask-image:linear-gradient(#000,rgba(0,0,0,.75));
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.75));
}

/* This used to be `#page > :not(#gl):not(.trip-veil)...`, but `:not()` inherits
   the specificity of its argument, so the id selectors inside it overrode
   `position:fixed` on the topbar, the player and the search panel and dropped
   them back into the document flow. Only the in-flow blocks are listed now. */
#page > main,
#page > #primary,
#page > .footer{
  position:relative;
  z-index:3;
}

.trip-veil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(90% 72% at 48% 0%,
      rgba(68,13,79,.10),
      rgba(8,5,10,.27) 56%,
      rgba(4,3,6,.75) 100%),
    linear-gradient(180deg,
      rgba(6,4,8,calc(var(--veil) * .42)),
      rgba(6,4,8,calc(var(--veil) * .78)) 68%,
      rgba(4,3,6,.82));
}

@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .glass{
    backdrop-filter:blur(24px) saturate(130%);
    -webkit-backdrop-filter:blur(24px) saturate(130%);
  }
}

@media (hover:none), (max-width:900px){
  .glass,
  .widget,
  .search-panel,
  .nav,
  .player{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:linear-gradient(150deg,rgba(30,14,36,.92),rgba(12,7,16,.95));
  }

  .topbar{
    background:rgba(11,6,14,.92);
  }

  .glass::before{
    display:none;
  }

  .trip-grain,
  .ornament{
    display:none !important;
  }

  .trip-veil{
    background:
      radial-gradient(95% 72% at 48% 0%,
        rgba(68,13,79,.08),
        rgba(8,5,10,.31) 58%,
        rgba(4,3,6,.82) 100%),
      linear-gradient(180deg,
        rgba(6,4,8,.26),
        rgba(6,4,8,.47) 70%,
        rgba(4,3,6,.84));
  }
}

.trip-static-fallback #gl,
.no-webgl #gl{
  display:none !important;
}

.trip-static-fallback .trip-veil,
.no-webgl .trip-veil{
  background:
    radial-gradient(110% 72% at 50% 5%,rgba(104,28,123,.27),rgba(10,5,12,.52) 52%,rgba(5,3,7,.90)),
    linear-gradient(180deg,rgba(35,10,42,.34),rgba(5,3,7,.90));
}

@media (prefers-reduced-motion:reduce){
  #gl{opacity:.58}
}