/* ===== hero section ===== */

.hero-sec {
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1)),
    url("../../img/hero-background-temp.jpeg");
  background-position: center right;
  background-size: cover;

  overflow: hidden;
}

.hero-sec__content-wrapper {
  display: flex;
  justify-content: right;
}

.hero-sec__content {
  margin-right: 6%;

  margin-top: calc(var(--nav-height) + 0.5rem);
}

.hero-sec__bdd-heading {
  margin-block: 6%;

  font-size: clamp(3rem, 6vw, 8rem);

  font-family: "Zen Tokyo Zoo", "Gill Sans", "Gill Sans MT", Calibri,
    "Trebuchet MS", sans-serif;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;

  color: var(--blue-clr);
}

.hero-sec__bdd-pink {
  color: var(--pink-clr);
}

.hero-sec__prijava-btn {
  font-size: clamp(1rem, 2vw, 2rem);

  margin-block: 8%;
  padding: 0.5em 1.75em;

  color: var(--pink-clr);
  box-shadow: 0.3em 0.3em 0 0 var(--pink-clr-light),
    inset 0.3em 0.3em 0 0 var(--pink-clr);
  border: none;
  border-radius: 0.5rem;

  text-transform: uppercase;
  cursor: pointer;

  transition: box-shadow 300ms;
}

.hero-sec__prijava-btn > a {
  text-decoration: none;
}

.hero-sec__prijava-btn:enabled:not(:hover) {
  animation: pulse 5s infinite;
}

.hero-sec__prijava-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hero-sec__prijava-btn:enabled:hover,
.hero-sec__prijava-btn:enabled:focus {
  box-shadow: 0 0 0 0 var(--blue-clr-light),
    inset 6em 3.5em 0 0 var(--blue-clr-light);
}

.hero-sec__content > a > .hero-sec__prijava-btn:enabled:hover,
.hero-sec__content > a > .hero-sec__prijava-btn:enabled:hover {
  color: whitesmoke;
}

.hero-sec__prijava-btn:disabled:hover,
.hero-sec__prijava-btn:disabled:focus {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes pulse {
  40% {
    transform: scaleX(1);
  }
  45% {
    transform: scale(1.1);
  }
  50% {
    transform: scaleX(1);
  }
  55% {
    transform: scale(1.1);
  }
  60% {
    transform: scaleX(1);
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.hero-sec > .flipdown {
  margin-block: min(4vw, 7rem);

  display: flex;
  justify-content: center;
}

.hero-sec > .flipdown.flipdown__theme-dark .rotor-group-heading:before {
  color: var(--brown-clr);
  text-transform: uppercase;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}