@import '../css/reset.css';
@import '../css/animation-keyframes.css';
:root {
  --cursorX: 50vw;
  --cursorY: 50vh;
}

.unselected {
  -webkit-user-select: none;
}

.black-screen-flash-light {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  inset: 0 0 0 0;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(circle 15vmax at var(--cursorX) var(--cursorY), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.7) 100%);
}

.body {
  position: relative;
  width: 100%;
  background: url("../assets/background.jpg") center;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  font-family: Roboto, sans-serif;
}

.wrapper__main {
  margin-top: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
}

.stars-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stars-container__star {
  position: absolute;
  height: 1px;
  background: linear-gradient(-70deg, #FFEBEB, #000000);
}

.stars-container__star:nth-child(1) {
  top: calc(-39%);
  left: calc(16%);
  animation: animate-shooting-star 2112ms linear 3254ms infinite;
}

.stars-container__star:nth-child(2) {
  top: calc(11%);
  left: calc(9%);
  animation: animate-shooting-star 2314ms linear 5674ms infinite;
}

.stars-container__star:nth-child(3) {
  top: calc(-29%);
  left: calc(48%);
  animation: animate-shooting-star 1458ms linear 2617ms infinite;
}

.stars-container__star:nth-child(4) {
  top: calc(-9%);
  left: calc(8%);
  animation: animate-shooting-star 1711ms linear 2877ms infinite;
}

.stars-container__star:nth-child(5) {
  top: calc(-36%);
  left: calc(49%);
  animation: animate-shooting-star 2501ms linear 7007ms infinite;
}

.stars-container__star:nth-child(6) {
  top: calc(-32%);
  left: calc(40%);
  animation: animate-shooting-star 1474ms linear 2827ms infinite;
}

.stars-container__star:nth-child(7) {
  top: calc(19%);
  left: calc(2%);
  animation: animate-shooting-star 2428ms linear 1505ms infinite;
}

.stars-container__star:nth-child(8) {
  top: calc(7%);
  left: calc(37%);
  animation: animate-shooting-star 1052ms linear 7081ms infinite;
}

.stars-container__star:nth-child(9) {
  top: calc(9%);
  left: calc(2%);
  animation: animate-shooting-star 1369ms linear 4700ms infinite;
}

.header {
  position: relative;
  text-align: center;
}
.header .header__title {
  text-transform: uppercase;
  font-size: 5rem;
  color: #C5C3C3;
}
.header .header__title::before {
  position: absolute;
  content: "unihub";
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(#FF9F1C, #f3E975);
  -webkit-background-clip: text;
  animation: 5s swing infinite alternate;
}

.cards-container {
  display: grid;
  width: 90%;
  max-width: 1200px;
  margin-top: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.card-ubicoin {
  justify-content: flex-end;
}

.card-unihero {
  margin-top: 70px;
  justify-content: center;
}

.card-cardbrix {
  justify-content: flex-end;
}

.card {
  position: relative;
  display: flex;
  height: 74%;
  transform: scale3d(0.9, 0.9, 0.9);
}
.card .card__content {
  position: relative;
  transition: all 0.5s ease-in-out 0s;
}
.card .card__content:hover {
  transform: rotate(-14deg) skew(-14deg) scale(0.96);
}
.card .card__content:hover + .card__title {
  opacity: 1;
  transform: translateX(0);
}
.card .card__content:hover .card__border {
  visibility: visible;
}
.card .card__content:hover + .card__title + .card__coming-soon {
  opacity: 1;
  transform: translateX(0);
}
.card .card__content:hover .rect-gradient {
  animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.card .card__content:hover .card__icon {
  filter: grayscale(1);
}
.card .card__content .card__border {
  position: absolute;
  visibility: hidden;
  width: 110%;
  height: 83%;
  inset: -10px 0 0 -45px;
  z-index: -1;
}
.card .card__content .card__border svg {
  height: 100%;
  width: 100%;
}
.card .card__title {
  position: absolute;
  max-width: 100%;
  top: 100%;
  font-size: 45px;
  font-weight: 700;
  color: #C5C3C3;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.card .card__coming-soon {
  position: absolute;
  top: 20%;
  left: 105%;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  color: #C5C3C3;
  opacity: 0;
  transform: translate(-120px);
  transition: all 1s;
  z-index: -1;
}
@media only screen and (max-width: 465px) {
  .card .card__coming-soon {
    top: 110%;
    left: 0;
  }
}

.rect-gradient {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: erase-line 0.5s ease-in-out forwards;
}

.flashlight-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.flashlight-composition {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 425px;
  min-height: 170px;
  overflow: hidden;
  z-index: 25;
}

.flashlight-composition__flashlight {
  transform-origin: center;
  transform: rotate(0deg);
}

.flashlight-composition__flashlight-img {
  max-width: 120px;
}

.flashlight-composition__power-button {
  position: absolute;
  padding: 0;
  width: 25px;
  height: 25px;
  background: none;
  border: none;
  inset: 45% 0 0 42%;
}
.flashlight-composition__power-button:hover {
  cursor: pointer;
}

.flashlight-composition__power-button-img {
  max-width: 25px;
  filter: hue-rotate(86deg) brightness(200%);
}

.black-screen {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0 0 0 0;
  z-index: 10;
  background-color: #000000;
}

@media only screen and (max-width: 465px) {
  .unihero-title, .cardbrix-title {
    display: none;
  }
}
@media only screen and (max-width: 680px) {
  .cards-container {
    grid-template-columns: auto;
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: center;
    row-gap: 50px;
  }

  .card {
    height: 100%;
  }

  .card-unihero {
    margin-top: 0;
    align-self: center;
  }

  .card-cardbrix {
    align-self: center;
  }
}
@media (hover: none) {
  .card .card__content:hover {
    transform: none;
  }
  .card .card__content:hover .card__icon {
    filter: none;
  }
  .card .card__title {
    display: none;
  }
  .card .card__border {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */