:root {
  color-scheme: dark;
  --dark: #05080b;
  --slate: #192934;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--dark); }
body { color: #d4e0e6; font-family: Arial, Helvetica, sans-serif; }
#experience {
  position: fixed; inset: 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 34%, #1d303e 0%, #080e13 66%, #030507 100%);
  width: 100%; width: 100dvw; height: 100%; height: 100dvh;
}
.background-reference {
  position:absolute; inset:-1.5%; z-index:0;
  background: url('assets/cube-reference.webp') center center / cover no-repeat;
  opacity: .72; filter: saturate(.92) contrast(1.09) brightness(1.02);
}
#cube-canvas {
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
  opacity:.74; mix-blend-mode: soft-light;
  pointer-events:none;
}
.backlight {
  position:absolute; inset:-8%; z-index:2; pointer-events:none;
  background: radial-gradient(ellipse 37% 51% at 50% 35%, rgba(162,220,245,.19), rgba(34,102,130,.08) 38%, transparent 82%);
  mix-blend-mode: screen;
}
.depth-haze {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.43),transparent 24%,transparent 76%,rgba(0,0,0,.44)),
    linear-gradient(0deg,rgba(0,0,0,.31),transparent 33%,rgba(0,0,0,.08));
}
#artboard {
  position:absolute; top:50%; left:50%; z-index:4;
  width:3840px; height:2160px;
  transform-origin: center center;
  transform:translate(-50%,-50%) scale(var(--art-scale,.42));
  pointer-events:none;
  will-change:transform;
}
.motion-layer, #logo-layer, #digital-noise {
  position:absolute; inset:0; pointer-events:none;
}
.motion-layer { will-change:transform; transform:translate3d(0,0,0); }
.artpiece {
  position:absolute; display:block; user-select:none;
  object-fit:fill; pointer-events:none;
  -webkit-user-drag:none;
}
#sigil-layer { z-index:1; mix-blend-mode:color-dodge; opacity:.41; }
.sigil-img { filter:brightness(1.06) saturate(.83); }
#infinity-layer { z-index:2; mix-blend-mode:screen; opacity:.23; }
.infinity-img { filter:brightness(1.4) contrast(1.35); }
#helmet-layer { z-index:3; }
.helmet-side { filter:contrast(1.11) saturate(.83); }
.helmet-center { filter:contrast(1.11) saturate(.87); }
.helmet-glow { mix-blend-mode:screen; opacity:.21; filter:contrast(1.25) saturate(.80); }
#logo-layer {
  z-index:4;
  filter: brightness(1.18) contrast(1.1) saturate(1.02) drop-shadow(0 10px 13px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(226, 241, 249, .12));
}
#logo-layer img {
  mix-blend-mode: screen;
}
#digital-noise {
  z-index:11;
  mix-blend-mode: screen;
  filter: brightness(1.08) contrast(1.14);
}
.glitch {
  opacity:.08;
  mix-blend-mode:screen;
  will-change:transform,opacity,clip-path;
  filter: brightness(1.14) contrast(1.24);
  transition:opacity 90ms linear;
}
.glitch.pulse { opacity:var(--pulse-opacity,.43); }
.scanlines {
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(7,13,18,.11) 4px);
  opacity:.15; mix-blend-mode:multiply;
}
.vignette {
  position:absolute; inset:0; z-index:10; pointer-events:none;
  background: radial-gradient(ellipse 77% 75% at 50% 45%, transparent 38%, rgba(0,0,0,.13) 68%,rgba(0,0,0,.77) 100%);
}
.visually-hidden {
  position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);margin:-1px;padding:0;border:0;
}
@media (max-aspect-ratio: 3/4) {
  .background-reference { background-size:auto 100%; opacity:.56; }
  #cube-canvas { opacity:.8; }
  .backlight {background:radial-gradient(ellipse 70% 38% at 50% 51%,rgba(100,173,209,.13),transparent 90%);}
  .vignette { background:radial-gradient(ellipse 105% 48% at 50% 51%,transparent 25%,rgba(0,0,0,.63) 100%); }
}
@media (prefers-reduced-motion:reduce) {
  .motion-layer { transition:none!important; }
  .glitch {transition:none!important;}
}