@import url("https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --grey: #272727;
  --white: #ffffff;
  --green: #0afd9f;
  --orange: #f53d17;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--grey);
  color: var(--white);
  font-family: "Changa One", Impact, sans-serif;
  font-weight: 400;
}

.wrapper {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.berreh-card {
  width: 100%;
  min-height: 694px;
  padding: 52px 28px;
  background: var(--grey);
  overflow: hidden;
}

.berreh-mark {
  display: block;
  width: 60px;
  height: 65px;
  object-fit: contain;
}

.berreh-mark--yes {
  margin-bottom: 24px;
  color: var(--green);
}

.berreh-mark--no {
  margin-top: 20px;
  margin-left: 20px;
  color: var(--orange);
}

.berreh-heading,
.berreh-message {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.berreh-heading {
  margin-bottom: 44px;
  font-size: clamp(2.5rem, 6.4vw, 3.25rem);
  line-height: 1;
}

.berreh-message {
  max-width: 680px;
  font-size: clamp(2.5rem, 6.4vw, 3.25rem);
  line-height: 1.12;
}

.berreh-yes {
  color: var(--green);
}

.berreh-word-loop,
.berreh-phrase-loop {
  display: inline-grid;
  vertical-align: baseline;
}

.berreh-word-loop > span,
.berreh-phrase-loop > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: cycle-word 10s infinite;
}

.berreh-word-loop > span:first-child,
.berreh-phrase-loop > span:first-child {
  animation-name: cycle-anchor;
}

.berreh-word-loop > span:nth-child(2),
.berreh-phrase-loop > span:nth-child(2) {
  animation-delay: 4s;
}

.berreh-word-loop > span:nth-child(3),
.berreh-phrase-loop > span:nth-child(3) {
  animation-delay: 6s;
}

.berreh-word-loop > span:nth-child(4),
.berreh-phrase-loop > span:nth-child(4) {
  animation-delay: 8s;
}

.berreh-phrase-loop > span:nth-child(1) {
  animation-delay: 400ms;
}

.berreh-phrase-loop > span:nth-child(2) {
  animation-delay: 4.4s;
}

.berreh-phrase-loop > span:nth-child(3) {
  animation-delay: 6.4s;
}

.berreh-phrase-loop > span:nth-child(4) {
  animation-delay: 8.4s;
}

@keyframes cycle-word {
  0%,
  16% {
    opacity: 1;
    transform: translateY(0);
  }

  20%,
  95% {
    opacity: 0;
    transform: translateY(-0.25em);
  }

  96% {
    opacity: 0;
    transform: translateY(0.25em);
  }
}

@keyframes cycle-anchor {
  0%,
  36% {
    opacity: 1;
    transform: translateY(0);
  }

  40%,
  95% {
    opacity: 0;
    transform: translateY(-0.25em);
  }

  96% {
    opacity: 0;
    transform: translateY(0.25em);
  }
}

.berreh-thumb {
  transform-box: fill-box;
  transform-origin: center;
  animation: tap-thumb 10s ease-in-out infinite;
}

.berreh-thumb--no {
  animation-name: tap-thumb-no;
  animation-delay: 400ms;
}

@keyframes tap-thumb {
  0%,
  34%,
  40%,
  100% {
    transform: translateY(0);
  }

  37% {
    transform: translateY(5px);
  }
}

@keyframes tap-thumb-no {
  0%,
  34%,
  40%,
  100% {
    transform: translateY(0);
  }

  37% {
    transform: translateY(-5px);
  }
}

.berreh-no {
  color: var(--orange);
}

.font-plex {
  font-family: "IBM Plex Sans", Arial, sans-serif;
}

.berreh-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  color: var(--white);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.berreh-footer a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 520px) {
  .berreh-card {
    min-height: 100svh;
    padding: 32px 20px;
  }

  .berreh-heading {
    margin-bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .berreh-word-loop > span,
  .berreh-phrase-loop > span,
  .berreh-thumb {
    animation: none;
  }

  .berreh-word-loop > span:first-child,
  .berreh-phrase-loop > span:first-child {
    opacity: 1;
  }
}