@font-face {
  font-family: "Ethnocen";
  src: url("../fonts/OrbitronVariable.ttf");
}

body {
  background: linear-gradient(rgba(0, 0, 0, 0.658), #00000000), rgb(14, 28, 43);
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.card-line {
  display: flex;
  align-items: center;
  height: 50vh;
  justify-content: space-around;
}

/* ----- cards style ----- */
:root {
  --border-radius: 2vh;

  --rare-color: #aee1ff;
  --epic-color: #b600ff;
  --legendary-color: #fd8718;
  --elite-color-1: #ffa600;
  --elite-color-2: #cc00ff;

  --yellow-front: #f7e967;
  --yellow-middle: #d8b724;
  --yellow-back: #967d0f;
}
.card {
  position: relative;
  width: var(--card-width);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}
.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: auto;
  backface-visibility: hidden;
}
.card .front {
  position: relative;
  transition: all 0.3s ease-in-out;
  transform: rotateY(180deg);
  overflow: hidden;
  width: 100%;
}
.card.flipped {
  transform: rotateY(180deg);
}

.front img,
.back img {
  width: 100%;
  height: auto;
}

.front .card-img {
  z-index:-2;
}

.front .elite-img {
  position:absolute;
  z-index:-1;
}

.card-arrival {
  animation: card-arrival 3s ease-in-out forwards;
}
@keyframes card-arrival {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.card-departure {
  animation: card-departure 3s ease-in-out forwards;
}
@keyframes card-departure {
  0% {
    transform: translateX(0) rotateY(180deg);
  }
  100% {
    transform: translateX(-150vh) rotateY(180deg);
  }
}

.ultra-rare-text {
  position: relative;
  display: flex;
  width: 30%;
  font-family: "Ethnocen";
  font-size: 56pt;
  font-weight: bold;
  color: rgb(255, 255, 255);
  overflow: visible;
  justify-content: center;
  text-shadow: 0.1vw 0vw 0.25vw var(--yellow-front), 0.2vw 0vw 0.25vw var(--yellow-front), 0.4vw 0vw 0.25vw var(--yellow-front), 0.1vw 0vw 0vw var(--yellow-middle), 0.2vw 0vw 0vw var(--yellow-middle), 0.4vw 0vw 0vw var(--yellow-middle), 0.1vw 0vw 0.1vw var(--yellow-middle), 0.2vw 0vw 0.1vw var(--yellow-middle), 0.4vw 0vw 0.1vw var(--yellow-middle), 0.1vw 0vw 2vw var(--yellow-middle), 0.2vw 0vw 2vw var(--yellow-middle), 0.4vw 0vw 2vw var(--yellow-middle), 0.1vw 0vw 1vw var(--yellow-back), 0.2vw 0vw 1vw var(--yellow-back), 0.4vw 0vw 5vw var(--yellow-back), 0.1vw 0vw 5vw var(--yellow-back), 0.2vw 0vw 20vw var(--yellow-back);
}

.ultra-rare-text.elite {
  order: -1;
  animation: elite-text-arrival 2s ease-in-out forwards;
}
@keyframes elite-text-arrival {
  0% {
    left: -40%;
  }
  100% {
    left: 0%
  }
}

.ultra-rare-text.elite.reverse {
  animation: elite-text-departure 2s ease-in-out forwards;
}
@keyframes elite-text-departure {
  0% {
    left: 0%;
  }
  100% {
    left: -40%
  }
}

.ultra-rare-text.rarity {
  order: 1;
  animation: rarity-text-arrival 2s ease-in-out forwards;
}
@keyframes rarity-text-arrival {
  0% {
    right: -50%;
  }
  100% {
    right: 3%;
  }
}

.ultra-rare-text.rarity.reverse {
  animation: rarity-text-departure 2s ease-in-out forwards;
}
@keyframes rarity-text-departure {
  0% {
    right: 3%;
  }
  100% {
    right: -50%;
  }
}

.card .back:hover {
  content: url("https://digitalself.io/picture_feed/cards/alpha_back_02.png");
  cursor: pointer;
}

.card.common .back:hover {
  animation: shake 0.8s ease-in-out;
}

.card.rare .back:hover {
  animation: shake 0.6s ease-in-out;
}

.card.epic .back:hover {
  animation: shake 0.6s ease-in-out;
}

.card.legendary .back:hover {
  animation: shake 0.4s ease-in-out;
}

.card.elite .back:hover {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0% {
    transform: rotateY(0);
  }
  20% {
    transform: rotateY(8deg) rotateX(-2deg) rotateZ(-2deg);
  }
  40% {
    transform: rotateY(-8deg) rotateX(2deg) rotateZ(2deg);
  }
  60% {
    transform: rotateY(5deg) rotateX(-1.25deg) rotateZ(-1.25deg);
  }
  80% {
    transform: rotateY(-5deg) rotateX(1.25deg) rotateZ(1.25deg);
  }
  100% {
    transform: rotateY(0);
  }
}

/* -------------------- animation classes ------------------------- */

.card-grow {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

.card-glow {
  animation: glow-white 1.5s ease-out infinite alternate;
}
@keyframes glow-white {
  0% {
    filter: drop-shadow(0 0 5px #fff);
  }
  100% {
    filter: drop-shadow(0 0 10px #fff);
  }
}

/* small tilt on hover for the front of the card */
.card .front:hover {
  transform: rotateY(180deg) rotateY(-10deg);
}

/* .card .front .betaCard_beta-card:hover {
  filter: brightness(40%);
  -webkit-filter: brightness(40%);
  transition: filter 0.2s ease-in-out;
} */

#disclaimerElement {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2000;
  width:30%;
  height:10%;
  /*font-size: 14px;
  font-family: "ethocent";
  font-style: italic;
  color: rgb(165, 165, 165);*/
}

.inspection-prompt-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
}

.inspection-prompt-dim-overlay {
  width:100%;
  height:100%;
  background-color:black;
  opacity:0.3;
}

.inspection-prompt {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Common card */
.card.common {
  /* TBD */
}

/* Levitate for cards that have class ship */
.card.common .front.ship.levitate {
  animation: levitate 2s ease-in-out infinite;
}
@keyframes levitate {
  0% {
    transform: translateY(0px) rotateY(180deg);
  }
  50% {
    transform: translateY(-5px) rotateY(180deg);
  }
  100% {
    transform: translateY(0px) rotateY(180deg);
  }
}

.card.common .front.ship.levitate:hover {
  animation: rotate 0.5s ease-in-out forwards;
}
@keyframes rotate {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(170deg);
  }
}

/* Rare card */
.card.rare .front {
  animation: rare-glow 1s ease-in-out infinite alternate;
}
@keyframes rare-glow {
  0% {
    filter: drop-shadow(0 0 1px var(--rare-color));
  }
  100% {
    filter: drop-shadow(0 0 6px var(--rare-color));
  }
}

.card.rare .front.ship.levitate {
  animation: rare-glow 1s ease-in-out infinite alternate, levitate 2s ease-in-out infinite;
}

.card.rare .front.ship.levitate:hover {
  animation: rare-glow 1s ease-in-out infinite alternate, rotate 0.5s ease-in-out forwards;
}

/* Epic card */
.card.epic .front {
  animation: epic-glow 1s ease-in-out infinite alternate;
}
@keyframes epic-glow {
  0% {
    filter: drop-shadow(0 0 8px var(--epic-color));
  }
  100% {
    filter: drop-shadow(0 0 20px var(--epic-color));
  }
}

.card.epic .front.ship.levitate {
  animation: epic-glow 1s ease-in-out infinite alternate, levitate 2s ease-in-out infinite;
}

.card.epic .front.ship.levitate:hover {
  animation: epic-glow 1s ease-in-out infinite alternate, rotate 0.5s ease-in-out forwards;
}

/* Legendary card */
.card.legendary .front {
  animation: legendary-glow 1s ease-in-out infinite alternate;
}
@keyframes legendary-glow {
  0% {
    filter: drop-shadow(0 0 10px var(--legendary-color));
  }
  100% {
    filter: drop-shadow(0 0 30px var(--legendary-color));
  }
}

.card.legendary .front.ship.levitate {
  animation: legendary-glow 1s ease-in-out infinite alternate, levitate 2s ease-in-out infinite;
}

.card.legendary .front.ship.levitate:hover {
  animation: legendary-glow 1s ease-in-out infinite alternate, rotate 0.5s ease-in-out forwards;
}

.card.legendary .front::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 217, 0, 0.1);
  height: 100%;
  width: 50px;
  transform: skewX(-30deg);
  left: -300px;
  animation: shine 3s ease-in-out infinite;
  z-index: 999;
}
@keyframes shine {
  0% {
    left: -300px;
    top: -200px
  }
  100% {
    left: 120%;
    top: 25%;
  }
}

/* Elite status */
.card.elite .front {
  animation: elite-glow 1s ease-in-out infinite alternate;
}
@keyframes elite-glow {
  0% {
    filter: drop-shadow(0 0 20px var(--elite-color-1));
  }
  100% {
    filter: drop-shadow(0 0 25px var(--elite-color-2));
  }
}

.card.elite .front.ship.levitate {
  animation: elite-glow 1s ease-in-out infinite alternate, levitate 2s ease-in-out infinite;
}

.card.elite .front.ship.levitate:hover {
  animation: elite-glow 1s ease-in-out infinite alternate, rotate 0.5s ease-in-out forwards;
}

.card.elite .front::before {
  content: '';
  position: absolute;
  background-color: rgba(255, 217, 0, 0.15);
  height: 100%;
  width: 50px;
  transform: skewX(-30deg);
  left: -300px;
  animation: shine 3.2s ease-in-out infinite;
  z-index: 999;
}