:root {
  color-scheme: dark;
  --bg: #050505;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --skew-x: 0deg;
  --skew-y: 0deg;
  --roll-z: 0deg;
  --logo-scale: 1;
  --origin-x: 50%;
  --origin-y: 50%;
  --shadow-x: 0px;
  --shadow-y: 18px;
  --shadow-blur: 34px;
  --logo-margin: 100px;
  --logo-width: min(640px, 33.333vw, calc(33.333vh * 151 / 132));
  --home-backdrop-image: none;
  --logo-window-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 151 109' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' transform='matrix(0.178738 0 0 1.4441 0.8942 -61.3705)' d='M519.973 50L239.982 110.021L99.992 110.021L310.009 65L65 65.005L65.002 50L519.973 50Z'/%3E%3Cpath fill='white' transform='matrix(-0.178738 0 0 -1.4441 149.2378 169.7171)' d='M449.975 65.005L239.982 110.021L99.992 110.021L240.012 80.005L65.169 80.008L65.161 50L205.151 50L205.149 65.005L449.975 65.005Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(5, 5, 5, .80), rgba(5, 5, 5, .80)),
    var(--home-backdrop-image);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 720px;
  perspective-origin: var(--origin-x) var(--origin-y);
  padding: var(--logo-margin);
}

.hero__logo {
  position: relative;
  display: block;
  width: var(--logo-width);
  aspect-ratio: 151 / 132;
  filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(0, 0, 0, 0.76));
  transform-origin: var(--origin-x) var(--origin-y);
  transform-style: preserve-3d;
  transform:
    translateZ(0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    rotateZ(var(--roll-z))
    skew(var(--skew-x), var(--skew-y))
    scale(var(--logo-scale));
  transition: filter 180ms ease-out;
}

.logo-frame,
.starfield-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.logo-frame {
  z-index: 2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-outline {
  fill: #fff;
  fill-rule: evenodd;
  clip-rule: evenodd;
}

.starfield-canvas {
  z-index: 1;
  height: 82.58%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 41, 200, .28), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(0, 220, 255, .18), transparent 38%),
    linear-gradient(#020516 0%, #07113a 48%, #05040c 100%);
  mask-image: var(--logo-window-mask);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: var(--logo-window-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  transition: opacity 220ms ease-out;
}

.effects-ready .starfield-canvas {
  opacity: 1;
}

.wordmark {
  fill: #fff;
  font-family: "Rubik Mono One", Inter, system-ui, sans-serif;
  font-size: 10.6px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .88);
  stroke-width: 1.4px;
}

.lens {
  mix-blend-mode: screen;
  opacity: .46;
  pointer-events: none;
}

.lens--red {
  fill: #d20000;
}

.lens--cyan {
  fill: #00a7d2;
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo {
    animation: none;
    transition: none;
    transform: none;
  }
}