/* Registered so the transition on .scene can smooth them. */
@property --px {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --py {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0E0326;
}

::selection {
  background: hsla(0, 88%, 57%, .4);
}

.scene {
  --size: min(150vh, 125cqw);

  position: relative;
  overflow: hidden;
  container-type: inline-size;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 3.5vw, 56px);
  display: flex;
  align-items: flex-end;
  background: radial-gradient(90% 80% at 72% 46%, #1c0b42, #0E0326 72%);
  transition: --px 900ms cubic-bezier(.16, 1, .3, 1), --py 900ms cubic-bezier(.16, 1, .3, 1);
}

.mark {
  position: absolute;
  top: 46%;
  right: calc(var(--size) * -.235);
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  overflow: visible;
}

/* --px and --py come from site.js; each layer sets its own --depth. */
.depth {
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
}

.dust {
  position: absolute;
  inset: -100px -100px calc(-100px - var(--tile));
  pointer-events: none;
  background-size: var(--tile) var(--tile);
  animation: rise var(--speed) linear infinite;
}

.far {
  --tile: 560px;
  --speed: 120s;
  --depth: 30;

  background-image:
    radial-gradient(circle 1px at 8% 14%, #fffc, transparent),
    radial-gradient(circle 1px at 27% 62%, #fff9, transparent),
    radial-gradient(circle 1px at 41% 31%, #fffc, transparent),
    radial-gradient(circle 1px at 58% 83%, #fff9, transparent),
    radial-gradient(circle 1px at 66% 12%, #fff9, transparent),
    radial-gradient(circle 1px at 79% 49%, #fffc, transparent),
    radial-gradient(circle 1px at 93% 74%, #fff9, transparent);
}

.near {
  --tile: 880px;
  --speed: 70s;
  --depth: 90;

  background-image:
    radial-gradient(circle 2px at 16% 38%, #fff9, transparent),
    radial-gradient(circle 2px at 37% 88%, #F23030cc, transparent),
    radial-gradient(circle 2px at 62% 22%, #fff9, transparent),
    radial-gradient(circle 2px at 86% 59%, #F23030cc, transparent);
}

.red {
  --depth: -5;

  fill-rule: evenodd;
  animation: lock-red 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

.white {
  --depth: 5;

  animation: lock-white 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

/* Sits inside .red, so --depth is the white's offset relative to the red. */
.shadow {
  --depth: 10;

  opacity: .55;
  animation: lock-shadow 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

h1 {
  --depth: -20;

  position: relative;
  margin: 0;
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3.25rem, 5cqw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

@keyframes rise {
  to { transform: translateY(calc(var(--tile) * -1)); }
}

@keyframes lock-red {
  from { transform: translate(-44px, -44px); opacity: 0; }
}

@keyframes lock-white {
  from { transform: translate(44px, 44px); opacity: 0; }
}

@keyframes lock-shadow {
  from { transform: translate(88px, 88px); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .depth {
    translate: none;
  }
}