@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
}

:root {
  --font-size: 16;
  --line-height: 20;

  --transition-duration-short: 0.125s;
  --transition-duration-medium: 0.25s;
  --transition-duration-long: 0.4s;
  --transition-duration-long-medium: 0.75s;
  --transition-duration-very-long: 1s;
  --transition-duration-super-long: 2s;

  --primary-color: #fff;
  --secondary-color: #ffedd8;
  --glassmorphism-color: #ffffff36;

  --emphasis-color: #0084d5;
  --button-blue: #0084d5;
  --button-blue-highlighted: #009dff;
  --highlight-transparent: #cecbe129;

  height: 100%;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-size: calc(1px * var(--font-size));
  line-height: calc(var(--line-height) / var(--font-size));
}
body {
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Icons */
.icon {
  --icon-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-mode: alpha;
  -webkit-mask-size: var(--icon-size);
  -webkit-mask-image: none;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-mode: alpha;
  mask-size: var(--icon-size);
  mask-image: none;
}
.icon[data-icon=fullscreen-enter] {
  -webkit-mask-image: url(/images/icons/fullscreen-enter.svg);
  mask-image: url(/images/icons/fullscreen-enter.svg);
}
.icon[data-icon=turn-arrow] {
  -webkit-mask-image: url(/images/icons/turn-arrow.svg);
  mask-image: url(/images/icons/turn-arrow.svg);
}
.icon[data-icon=back] {
  -webkit-mask-image: url(/images/icons/back.svg);
  mask-image: url(/images/icons/back.svg);
}
.icon[data-icon=cart] {
  -webkit-mask-image: url(/images/icons/cart.svg);
  mask-image: url(/images/icons/cart.svg);
}
.icon[data-icon=zoom] {
  -webkit-mask-image: url(/images/icons/zoom.svg);
  mask-image: url(/images/icons/zoom.svg);
}
.icon[data-icon=arrow] {
  -webkit-mask-image: url(/images/icons/arrow.svg);
  mask-image: url(/images/icons/arrow.svg);
}
.standard-icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
}
.cvs-icon {
  pointer-events: none;
  width: 100%;
  height: 1.5em;
  margin: 0.25em 0;
}

/* Canvas Layout */
.canvas-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  transition: all var(--transition-duration-long) ease-out;
  pointer-events: none;
}
.canvas-container[hidden]:not(.hidden-animating) {
  /*
  Don't use `display:none` here, as that will cause iOS devices to crash due to the <canvas> element being hidden.
  This is an iOS bug and it is unclear why it happens, but simply not using display seems to work.
  */
  visibility: hidden;
  pointer-events: none;
}
.canvas-container[hidden] {
  opacity: 0;
}
.canvas {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  outline: none;
  pointer-events: none;
}
.canvas[data-active] {
  pointer-events: all;
}
.content {
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
}
.param-error {
  color: #fff;
  font-size: 1.5em;
}
.canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
.canvas-overlay[hidden] {
  display: none;
}
.phase-content-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  font-size: 24px;
  color: #fff;
  transition: all var(--transition-duration-long) ease-out;
  opacity: 1;
  justify-content: center;
  align-items: center;
}
.phase-content-container[data-faded] {
  filter: brightness(0.35) blur(12px);
}
.phase-content-container[hidden] {
  opacity: 0;
}
.phase-content-video,
.phase-content-image {
  width: 100%;
  max-height: 100%;
  transition: all var(--transition-duration-super-long) ease-out;
  object-fit: unset;
}
.action-text {
  font-size: 2.5em;
  color: var(--secondary-color);
  pointer-events: none;
  transition: opacity var(--transition-duration-long) ease-out, top var(--transition-duration-long) ease-out;
  display: inline;
  opacity: 1;
  width: 60%;
  position: absolute;
  text-shadow: 1px 1px 3px #0005;
  text-align: center;
  justify-content: center;
  text-wrap: balance;
}
.question-text {
  font-size: 1.5em;
  color: var(--secondary-color);
  pointer-events: none;
  display: inline;
  margin: 0.5em;
}
.action-text[hidden]:not(.hidden-animating) {
  display: none;
}
.action-text[hidden] {
  opacity: 0;
}
.emphasis-text {
  color: var(--emphasis-color);
  font-weight: bold;
}
.exit-link {
  color: var(--button-blue);
  position: absolute;
  bottom: 20%;
  font-size: 3em;
  cursor: pointer;
}
.glassmorphism {
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
  background-color: var(--glassmorphism-color);
  border-radius: 0.5em;
}
.action-text[data-user-input] {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
  60% { transform: translateY(0%); }
  80% { transform: translateY(-10%); }
  90% { transform: translateY(0); }
}
.content-container {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  inline-size: fit-content;
}
.hitbox-container {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.25em;
  pointer-events: none;
}
.item-hitbox {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  transition:
    background-color var(--transition-duration-short) ease-out,
    box-shadow var(--transition-duration-short) ease-out;
}
.item-hitbox:hover {
  background: var(--highlight-transparent);
  box-shadow: 0px 0px 20px 16px var(--highlight-transparent);
}
.hitbox-incorrect, .hitbox-incorrect:hover {
  background-color: #f004;
  box-shadow: 0px 0px 20px 16px #f004;
}

/* Canvas Overlay */
.shopping-buttons {
  bottom: 5%;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.button {
  color: #fff;
  font-size: 1.75em;
  background-color: var(--button-blue);
  width: 12em;
  padding: 0.25em 0.75em;
  border-radius: 5em;
  margin: 0.25em;
  box-shadow: 0px 0px 8px 0px #0005;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  cursor: pointer;
  font-weight: bolder;
  pointer-events: all;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
}
.button[hidden] {
  display: none;
}
.button:hover {
  background-color: var(--button-blue-highlighted);
}
.button-icon {
  width: auto;
}
.button[data-on] {
  border-color: #fff;
}
.button-cancel-purchase {
  background-color: #ff2929;
  width: 1.5em;
  padding: 0;
}
.button-cancel-purchase:hover {
  background-color: #ff4f4f;
}
.purchasing-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all var(--transition-duration-long) ease-out;
}
.purchasing-container[hidden]:not(.hidden-animating) {
  display: none;
}
.purchasing-container[hidden] {
  opacity: 0;
}
.questionnaire {
  display: flex;
  flex-direction: column;
  bottom: 5%;
  position: absolute;
  background: #000a;
  color: #fff;
  border-radius: 0.5em;
  padding: 1em;
  font-size: 1em;
  opacity: 1;
  transition: all var(--transition-duration-long) ease-out;
  pointer-events: all;
  align-items: center;
  max-width: 45em;
  flex-wrap: wrap;
}
.questionnaire[hidden]:not(.hidden-animating) {
  display: none;
}
.questionnaire[hidden] {
  opacity: 0;
}
.questionnaire-input-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
#user-perspective {
  font-size: 1.25em;
  width: 95%;
  border-radius: 0.25em;
  padding: 0.5em;
  margin: 0.5em;
  font-family: Roboto, sans-serif;
  resize: none;
  background-color: #000a;
  border: none;
  outline: none;
  color: #fff;
}
#user-perspective:focus {
  background-color: #000a;
}
#scene-explorer-host {
  z-index: 9999;
  pointer-events: all;
}
#inspector-host {
  z-index: 9999;
  pointer-events: all;
}
.continue-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 1;
  transition: all var(--transition-duration-long) ease-out;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.continue-overlay[hidden]:not(.hidden-animating) {
  display: none;
}
.continue-overlay[hidden] {
  opacity: 0;
}
.continue-text {
  user-select: none;
  margin-bottom: 1.5em;
  font-size: 3em;
  color: var(--secondary-color);
  pointer-events: none;
  transition: opacity var(--transition-duration-long) ease-out, top var(--transition-duration-long) ease-out;
  display: inline;
  opacity: 1;
  position: absolute;
  text-shadow: 1px 1px 3px #0005;
  text-align: center;
  animation: bounce 2s ease infinite;
}

/* Loading Ring */
.loading-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity var(--transition-duration-long) ease-out;
  flex-direction: column;
}
.loading-overlay[hidden]:not(.hidden-animating) {
  display: none;
}
.loading-overlay[hidden] {
  opacity: 0;
}
.loading-title {
  font-size: 2.25em;
  margin: 0.5em;
  text-align: center;
  color: #fff;
  font-weight: inherit;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.loading-title .blue {
  color: var(--button-blue);
}
.loading-title .blue:not(:first-child) {
  margin-left: 0.25em;
}
.loading-title .rest {
  max-width: 0;
  opacity: 0;
  width: auto;
  overflow: hidden;
  transition:
    width var(--transition-duration-long-medium) ease-in-out,
    opacity var(--transition-duration-long-medium) ease-in-out;
}
.company-logo {
  width: 15em;
}

@media only screen and ((max-width: 900px) or (max-height: 600px)) {
  .action-text {
    width: 100%;
    font-size: 1.75em;
  }
  .action-text.large-text {
    font-size: 3em;
  }
}
/* @media (max-width: 768px) {
  :root {
    --font-size: 10;
  }
} */