/*
 * Custom Properties
 */

:root {
  /* Color */

  --black: rgb(0, 0, 0);
  --opaqueBlack: rgba(0, 0, 0, .9);
  --yellow: rgb(255, 201, 39);
  --white: rgb(255, 255, 255);

  /* Easings */

  --easeQuintOut: cubic-bezier(0.23, 1, 0.32, 1);

  /* Font */

  --up10: 4em;
  --up9: 3.482202em;
  --up8: 3.013143em;
  --up7: 2.639016em;
  --up6: 2.297397em;
  --up5: 2em;
  --up4: 1.751101em;
  --up3: 1.515717em;
  --up2: 1.319508em;
  --up1: 1.148698em;
  --down1: 0.8706em;
  --down2: 0.7579em;
  --down3: 0.6599em;
  --down4: 0.5745em;
  --down5: 0.5em;
  --down6: 0.435275em;
  --down7: 0.378929em;
  --down8: 0.329877em;
  --down9: 0.287175em;
  --down10: 0.25em;

  /* Grid */

  --grid: 36px;
}



/*
 * Animations
 */

@keyframes draw {
  from {
    transform-origin: 50% 0;
    transform: scaleY(0);
  }
}

@keyframes spin {
  from {
    transform: translateX(-40%);
  }
}



/*
 * Base
 */

html,
body {
  background: var(--black);
  color: var(--white);
  font-family: "Input Mono Reg", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  animation: body 2s ease 0.4s backwards;
}

@keyframes body {
  from {
    opacity: 0;
  }
}

/* Core */

a {
  color: var(--yellow);
}

button {
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: none;
  display: flex;
  font-family: inherit;
  justify-content: center;
  outline: none;
  padding: 0
}

button svg {

  pointer-events: none;
}

h1 {
  color: var(--yellow);
  font-size: var(--up3);
  margin: 0 0 calc(0.5 * var(--grid));
  text-transform: uppercase;
}

h2 {
  color: var(--yellow);
  font-size: var(--down1);
  letter-spacing: 0.1em;
  margin: 0 0 calc(0.5 * var(--grid));
  text-transform: uppercase
}

h2 span {

  position: relative;

  z-index: 10;
}

h2 span::after {

  background: rgba(255, 255, 255, .225);

  bottom: -10%;

  content: '';

  height: 60%;

  left: calc(-0.125 * var(--grid));

  position: absolute;

  right: calc(-0.125 * var(--grid));

  z-index: -1;
}

canvas,
svg {
  display: block;
}



/*
 * App
 */

.app {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}



/*
 * Canvas
 */

.canvas {
  left: 0;
  position: fixed;
  right: 0;
  z-index: 10;
}


/*
 * Globe
 */

.globe {
  background: black;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--yellow);
  height: calc(80vmin - 72px);
  position: relative;
  width: calc(80vmin - 72px);
}

/* Modifiers */

.globe--small {
  background: none;
  box-shadow: inset 0 0 0 2px var(--yellow);
  cursor: pointer;
  height: 0;
  padding-top: 100%;
  width: 100%
}

.globe--small .globe-crop {

  background: rgba(255, 201, 39, .25);

  bottom: 4px;

  left: 4px;

  right: 4px;

  top: 4px;
}

.globe--small .globe-map {

  background-image: url(ef0a543ab3f59253d88e496f0ab8929a.png);

  opacity: 0.5;
}

.globe--small .globe-marker {

  background-color: rgba(0, 0, 0, .2);

  height: 12px;

  width: 12px;
}

.globe--small .globe-marker::after {

  height: 4px;

  width: 4px;
}

.globe--start {
  animation: globe-start 1.5s var(--easeQuintOut) 1.5s backwards;
  bottom: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 201, 39, .8);
  left: 50%;
  height: 60vmin;
  position: absolute;
  transform: translate(-50%, 50%);
  width: 60vmin
}

.globe--start .globe-map {

  animation: spin 2.5s var(--easeQuintOut) 1.5s backwards;

  transform: translateX(-50%);
}

@keyframes globe-start {
  from {
    transform: translate(-50%, 100%);
  }
}

/* Submodules */

.globe-crop {
  background: rgba(255, 201, 39, .1);
  border-radius: 50%;
  bottom: 3vmin;
  left: 3vmin;
  overflow: hidden;
  position: absolute;
  right: 3vmin;
  top: 3vmin;
  z-index: 10;
}

.globe-map {
  background-image: url(1eb4c1d0c2a8d547e599b98769375385.png);
  background-position: center center;
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  transition: transform 5000ms;
  width: 619.60074%;
}

.globe-iss {
  height: auto;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, calc(-6vmin - var(--grid)));
  width: calc(2 * var(--grid));
  z-index: 10;
}

.globe-markercontainer {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 5s;
  width: 100%;
}

.globe-marker {
  align-items: center;
  box-shadow: 0 0 0 2px var(--white);
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px
}

.globe-marker::after {

  background-color: white;

  border-radius: 50%;

  content: "";

  height: 6px;

  width: 6px;
}

.globe-tracecontainer {
  bottom: 3vmin;
  left: 3vmin;
  position: absolute;
  right: 3vmin;
  top: 3vmin;
  z-index: 20;
}

.globe-trace {
  background-image: radial-gradient(
    circle at 1px 1px,
    white 2px,
    transparent 2px
  );
  background-repeat: repeat-y;
  background-size: 4px 8px;
  left: 50%;
  margin-left: -1px;
  position: absolute;
  top: calc(-6vmin + 4px);
  transition: bottom 5s;
  width: 2px;
}



/*
 * Info
 */

/* Submodules */

.info-button {
  border-radius: 50%;
  cursor: pointer;
  height: calc(1.25 * var(--grid));
  position: absolute;
  right: calc(0.25 * var(--grid));
  top: calc(0.25 * var(--grid));
  width: calc(1.25 * var(--grid));
  z-index: 100;
}

.info-button--close {
  background-color: var(--yellow)
}

.info-button--close svg {

  fill: var(--black);

  width: 14px;
}

.info-button--open {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 2px var(--yellow)
}

.info-button--open svg {

  fill: var(--white);

  width: 12px;
}

.info-content {
  margin: auto;
  max-width: 32em;
}

.info-fullscreen {
  background-color: var(--black);
  box-sizing: border-box;
  bottom: 0;
  display: flex;
  left: 0;
  overflow: auto;
  padding: var(--grid) var(--grid) calc(0.5 * var(--grid));
  position: fixed;
  right: 0;
  top: 0;
  z-index: 101;
}

.info-image {
  display: block;
  margin: 0 auto var(--grid);
  width: calc(1.5 * var(--grid));
}



/*
 * Start
 */

/* Submodules */

.start-body {
  animation: start-body 1.5s var(--easeQuintOut) 1.2s backwards;
  margin: auto;
  max-width: 32em;
  position: relative;
  z-index: 10;
}

@keyframes start-body {
  from {
    opacity: 0.01;
    transform: translateY(-5%);
  }
}

.start-button {
  background-color: var(--yellow);
  font-size: var(--up1);
  margin-top: calc(0.5 * var(--grid));
  padding: calc(0.5 * var(--grid));
  position: relative;
  text-transform: uppercase;
  width: 100%;
}

.start-fullscreen {
  background-color: var(--opaqueBlack);
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  overflow: auto;
  padding: calc(0.5 * var(--grid));
  position: absolute;
  right: 0;
  top: 0;
  z-index: 101;
}

.start-globe {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.start-inner {
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-size: calc(50% - 3em) 1px, calc(50% - 3em) 1px;
  border: 1px solid var(--white);
  border-top: 0;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  min-height: 100%;
  padding: var(--grid) calc(0.5 * var(--grid));
  position: relative;
}

.start-iss {
  left: 50%;
  position: absolute;
  top: calc(0.5 * var(--grid));
  transform: translate(-50%, -50%);
  width: calc(1.5 * var(--grid));
  z-index: 20;
}



/*
 * Tracker
 */

.tracker {
  bottom: calc(0.5 * var(--grid));
  box-shadow: inset 1px -1px var(--white);
  display: flex;
  left: calc(0.5 * var(--grid));
  position: fixed;
  right: calc(0.5 * var(--grid));
  z-index: 81
}

.tracker h2 {

  margin-bottom: calc(0.1 * var(--grid));
}

/* Submodules */

.tracker-button {
  border-radius: 50%;
  height: calc(1.5 * var(--grid));
  width: calc(1.5 * var(--grid));
}

.tracker-button--close {
  background-color: var(--yellow)
}

.tracker-button--close svg {

  fill: var(--black);

  width: 14px;
}

.tracker-fullscreen {
  background-color: var(--black);
  display: flex;
  align-items: center;
  bottom: 0;
  justify-content: center;
  left: 0;
  padding-bottom: calc(2 * var(--grid));
  padding-top: calc(2 * var(--grid));
  padding-left: var(--grid);
  padding-right: var(--grid);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 80;
}

.tracker-location {
  flex-grow: 1;
  overflow: hidden;
  padding-left: calc(0.5 * var(--grid));
}

.tracker-readout {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .7)
}

.tracker-readout span {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.tracker-readout-distance {
  font-size: var(--down2);
}

.tracker-toggle {
  align-items: center;
  box-shadow: inset -1px 1px var(--white);
  display: flex;
  justify-content: center;
  padding: calc(0.25 * var(--grid));
}



/*
 * Video
 */

.video {
  height: 100%;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

.video-container {
  height: 100vh;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1;
}