@import url("https://fonts.googleapis.com/css2?family=Rye&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");

@import url("common/base.css");

* {
  font-family: unset;
}

:root {
  --light-color: #f1c40f;
  --light-size: 15px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}

/* --------------- Canvas --------------- */

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: #000;
}

/* --------------- Connection overlay --------------- */

#connection-overlay {
  display: flex;
  width: 100%;
  height: 100vh;

  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#connection-overlay__lights {
  position: relative;
  display: inline-block;
}

/* --------------- Connection button --------------- */

#admin-access-button {
  position: relative;
  cursor: pointer;
  outline: none;

  font-family: "Akaya Kanadaka", system-ui;
  padding: 1em;
  font-size: 1.5em;

  border: 2px solid #aa6600;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ff9900, #cc7700);
  box-shadow: 0 4px 0 #884d00;

  color: white;
  filter: drop-shadow(
    0 0 50px color-mix(in srgb, red 50%, var(--light-color) 50%)
  );
}

#admin-access-button p {
  display: block;
  position: absolute;
  top: -150%;
  left: 0%;
  width: 100%;

  text-wrap: nowrap;
  text-align: center;
  text-shadow: 1px 1px 2px black;
}

#admin-access-button p em {
  font-size: 0.75em;
}

#admin-access-button input {
  width: 10em;
  font-size: 1em;

  outline: none;
  border: none;
  background-color: transparent;
  color: white;
}

/* Lights */
.light {
  position: absolute;
  width: var(--light-size);
  height: var(--light-size);

  border: 2px solid darkred;
  border-radius: 12px;
  background-color: red;
  box-shadow: 0 4px 0 darkred;

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.lightbulb {
  position: absolute;
  width: var(--light-size);
  height: var(--light-size);

  background-color: var(--light-color);
  border-radius: 50%;

  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.lightbulb::after {
  content: "";
  position: absolute;
  width: calc(var(--light-size));
  height: calc(var(--light-size));

  transform-origin: center center;
  transform: scale(4);

  background-color: var(--light-color);
  border-radius: 50%;
  filter: blur(8px);
}

/* --------------- Connection neon arrows --------------- */

.neon-arrow {
  --size: 150px;
  --angle-delay: 0deg;
  --arrow-color: #0ff;

  position: absolute;
  right: calc(50% + var(--size));
  top: calc(50% - var(--size) / 2);
  width: var(--size);
  height: var(--size);

  transform-origin: calc(100% + var(--size)) center; /* 100% to the right of the arrow + the size of the arrow (offset from the center of the button as in right) */
  transform: scale(var(--scale-factor))
    rotate(calc(var(--angle-offset) + var(--angle-delay)))
    translateX(var(--x-offset));

  animation: neon-blink 1s ease-in-out infinite alternate,
    move 1s ease-in-out infinite alternate, rotate 10s linear infinite forwards;
  z-index: 1;
}

.neon-arrow svg {
  width: 100%;
  height: 100%;
}

.neon-border {
  fill: none;
  stroke: var(--arrow-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--arrow-color));
}

/* --------------- Video --------------- */

video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  transition: all var(--transition-duration) var(--transition-timing-function);

  opacity: 0;
  z-index: 1;
}

.video__animation {
  animation: rick-roll 30s linear infinite, rick-filters 10s linear infinite;
}

@keyframes rick-roll {
  0% {
    transform: scale(2) rotate(0deg);
  }

  100% {
    transform: scale(2) rotate(360deg);
  }
}

@keyframes rick-filters {
  0% {
    filter: contrast(100%) hue-rotate(0deg);
  }

  50% {
    filter: contrast(200%) hue-rotate(180deg);
  }

  100% {
    filter: contrast(100%) hue-rotate(360deg);
  }
}

/* --------------- Animations --------------- */
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes reverse-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes neon-blink {
  from {
    filter: drop-shadow(0 0 5px var(--arrow-color));
    opacity: 0.3;
  }
  to {
    filter: drop-shadow(0 0 25px var(--arrow-color));
    opacity: 1;
  }
}

@property --scale-factor {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

@property --x-offset {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes move {
  from {
    --x-offset: -50%;
    --scale-factor: 1;
  }
  to {
    --x-offset: 0%;
    --scale-factor: 0.75;
  }
}

@keyframes rotate {
  from {
    --angle-offset: 0deg;
  }
  to {
    --angle-offset: 360deg;
  }
}