@import url("https://fonts.googleapis.com/css2?family=Jacquard+12&family=Jacquarda+Bastarda+9&display=swap");

:root {
  --bg: #000;
  --ui: #20eb18;
  --line: #20eb18;
  --pixel-font: "Jacquarda Bastarda 9", serif;
  --ui-font: "Jacquarda Bastarda 9", serif;
  --cursor-default: url("./assets/cursor.png") 0 0, auto;
  --cursor-hover: url("./assets/cursorhover.png") 0 32, pointer;
  --cursor-drag: url("./assets/cursordrag.png") 24 16, grab;
  --ui-control-height: 2.6rem;
  --loader-gradient: linear-gradient(
    90deg,
    #000000 0%,
    #1515f0 25%,
    #13a9af 50%,
    #20eb18 75%,
    #f7ff00 100%
  );
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--ui);
  font-family: var(--pixel-font);
  overflow: hidden;
  cursor: var(--cursor-default);
}

.experience-shell {
  position: relative;
  width: 100vw;
  height: 100svh;
  isolation: isolate;
}

#scene-root {
  position: absolute;
  inset: 0;
  cursor: var(--cursor-drag);
}

#scene-root canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: var(--cursor-drag);
}

#scene-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.experience-shell.is-controls-hint-visible #scene-root::after {
  opacity: 1;
}

.loading-card {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #000;
  transition: opacity 180ms steps(2, end);
}

.debug-panel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  min-width: 19rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--ui);
  border-radius: 0;
  background: #000;
  color: var(--ui);
  font: 1.15rem/1.2 var(--pixel-font);
  white-space: pre-wrap;
  pointer-events: none;
}

.controls-hint {
  position: absolute;
  top: 1%;
  left: 1%;
  z-index: 3;
  display: grid;
  gap: 0.18rem;
  width:200%;
  /* width: min(18rem, calc(100vw - 2rem)); */
  /* padding: 0.78rem 1rem; */
  /* border: 1px solid var(--ui);
  background: #000; */
  color: white;
  mix-blend-mode: difference;
  font: 8.4rem/1.08 var(--pixel-font);
  letter-spacing:-0.8rem;
  line-height: 6.5rem;
  /* text-transform: capitalize; */
  text-align: left;
  text-wrap: balance;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease;
  user-select: none;
}

.controls-hint.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.pixel-control {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(8rem, 12rem) 3ch;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  max-width: calc(100vw - 2rem);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--ui);
  border-radius: 0;
  background: #000;
  color: var(--ui);
  font: 1.2rem/1 var(--ui-font);
}

.utility-controls {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-button {
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--ui);
  border-radius: 0;
  background: #000;
  color: var(--ui);
  font: 1.2rem/1 var(--ui-font);
  letter-spacing:-0.1rem;
  line-height: 1.2rem;
  cursor: var(--cursor-default);
  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 140ms ease;
}

.ui-button:hover,
.ui-button:focus-visible,
.ui-button[aria-pressed="true"] {
  background: var(--ui);
  color: #000;
  outline: none;
}

.ui-button:hover,
.ui-button:focus-visible {
  cursor: var(--cursor-hover);
}

.ui-button:active {
  transform: translateY(1px);
}

.gradient-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    color 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 140ms ease;
}

.gradient-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ui);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gradient-toggle[aria-pressed="true"] {
  background: #000;
  color: #000;
}

.gradient-toggle[aria-pressed="true"]::before {
  transform: scaleX(1);
  transform-origin: left;
}

.gradient-toggle[aria-pressed="false"]:hover,
.gradient-toggle[aria-pressed="false"]:focus-visible {
  background: #000;
  box-shadow: inset 0 0 0 1px var(--ui);
  color: var(--ui);
}

.gradient-toggle[aria-pressed="false"]:hover::before,
.gradient-toggle[aria-pressed="false"]:focus-visible::before {
  transform: scaleX(0);
}

.pixel-control__label,
.pixel-control__value {
  user-select: none;
}

.pixel-control__value {
  text-align: right;
  color: var(--ui);
}

.pixel-control__slider {
  width: 100%;
  accent-color: var(--ui);
  cursor: var(--cursor-drag);
}

.pixel-control__slider::-webkit-slider-runnable-track {
  height: 0.35rem;
  border: 1px solid var(--ui);
  background: #000;
}

.pixel-control__slider::-webkit-slider-thumb {
  margin-top: -0.38rem;
}

.pixel-control__slider::-moz-range-track {
  height: 0.35rem;
  border: 1px solid var(--ui);
  background: #000;
}

.loading-card.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-card__inner {
  width: min(48rem, calc(100vw - 3rem));
}

.loading-bar {
  width: 100%;
  height: clamp(2.25rem, 6vw, 3.75rem);
  overflow: hidden;
  border: 4px solid var(--ui);
  background: #000;
  image-rendering: pixelated;
}

.loading-bar span {
  display: block;
  width: 18%;
  height: 100%;
  background: var(--loader-gradient);
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    #000 0,
    #000 1.35rem,
    transparent 1.35rem,
    transparent 1.7rem
  );
  mask-image: repeating-linear-gradient(
    90deg,
    #000 0,
    #000 1.35rem,
    transparent 1.35rem,
    transparent 1.7rem
  );
  transition: width 120ms steps(1, end);
}

.noscript-banner {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 3;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ui);
  border-radius: 0;
  background: #000;
  color: var(--ui);
  font-family: var(--pixel-font);
}

@media (max-width: 520px) {
  .controls-hint {
    width: 100%;
    font-size: 4rem;
    letter-spacing:-0.2rem;
    line-height:3rem;
  }

  .pixel-control {
    grid-template-columns: auto minmax(7rem, 1fr) 3ch;
    right: 1%;
    bottom: calc(var(--ui-control-height) + 1%);
    left: 1%;
    max-width: none;
  }

  .utility-controls {
    right: 1%;
    bottom: 0.5%;
    left: 1%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1%;
  }

  .ui-button {
    min-width: 0;
    width: 100%;
  }

  .gradient-toggle {
    min-width: 0;
  }
}