/* universal styling */

@font-face {
  font-family: "WiiContb";
  src: url("../fonts/contb.ttf") format("truetype");
  font-display: swap;
}

* {
  font-family: "WiiContb", sans-serif;
}

.app {
  width: 100vw;
  height: 100vh;
  background-color: #e5e8ec;
  display: block;
}

body,
html {
  margin: 0;
  overflow: hidden;
  background-color: #e5e8ec;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  transition: 900ms;
  cursor: url(../images/cursor.png), auto;
}

body.pointer-enhanced,
body.pointer-enhanced * {
  cursor: none !important;
}

.virtual-pointer {
  --pointer-size: 1;
  --pointer-trail: 0.35;
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999998;
  transform: translate(-50%, -50%) scale(var(--pointer-size));
  transform-origin: center;
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 2px rgba(44, 118, 168, 0.35),
    0 0 18px rgba(94, 173, 227, calc(0.5 * var(--pointer-trail))),
    0 0 34px rgba(94, 173, 227, calc(0.35 * var(--pointer-trail)));
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(171, 216, 249, 0.15) 58%,
    rgba(171, 216, 249, 0) 100%
  );
  opacity: 0;
  transition: opacity 120ms ease;
}

.virtual-pointer.active {
  opacity: 1;
}

.virtual-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
}

.forecast-rain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999997;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease;
}

body.forecast-rain-active .forecast-rain-layer {
  opacity: 1;
}

.forecast-raindrop {
  position: absolute;
  top: -14vh;
  width: 2px;
  height: 16vh;
  background: linear-gradient(
    180deg,
    rgba(185, 230, 255, 0.1) 0%,
    rgba(185, 230, 255, 0.72) 65%,
    rgba(185, 230, 255, 0.05) 100%
  );
  border-radius: 999px;
  transform: rotate(12deg);
  animation-name: forecast-rain-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

body.forecast-rain-active .app {
  filter: saturate(0.92) brightness(0.94);
}

@keyframes forecast-rain-fall {
  from {
    transform: translate3d(0, -14vh, 0) rotate(12deg);
  }
  to {
    transform: translate3d(-4vw, 120vh, 0) rotate(12deg);
  }
}

.black {
  background-color: black;
  width: 100vw;
  height: 100vh;
  z-index: 999999999;
  top: 100vh;
  opacity: 0;
  transition: opacity 300ms;
  position: absolute;
}

.black.animate {
  opacity: 1;
}