/* Published-game landing page additions. */
:root {
  --font-body: "Estedad", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --font-persian-display: "Lalezar", "Estedad", Tahoma, sans-serif;
  --font-latin-display: "Bangers", Impact, sans-serif;
}

body,
button {
  font-family: var(--font-body);
}

.latin-display {
  font-family: var(--font-latin-display);
  font-weight: 400;
  letter-spacing: .13em;
}

.hero h1,
.section-intro h2,
.games-heading h2,
.game-info h3,
.contact-copy h2 {
  font-family: var(--font-persian-display);
  font-weight: 400;
  letter-spacing: 0;
}

.header-cta {
  border: 1px solid #ffffff2b;
  padding: 11px 18px;
  transition: color .25s, background .25s, border-color .25s;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: #ffffff0a;
  border-color: #ffffff66;
}

.primary-button { gap: 0; }

.text-button,
.inline-link {
  border-bottom: 1px solid #ffffff24;
  padding-bottom: 7px;
  transition: color .25s, border-color .25s;
}

.text-button:hover,
.inline-link:hover {
  border-color: var(--orange);
}

.about-content .about-personal {
  color: #a7b6bb;
  border-right: 2px solid var(--orange);
  margin-top: 29px;
  padding-right: 18px;
}

.team-signature {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  display: grid;
}

.team-signature > div {
  border-left: 1px solid var(--line);
  padding: 20px 14px;
}

.team-signature > div:last-child { border-left: 0; }

.team-signature strong {
  color: var(--orange);
  margin-bottom: 7px;
  font-family: var(--font-latin-display);
  font-size: 24px;
  font-weight: 400;
  display: block;
}

.team-signature span {
  color: #93a5ac;
  font-size: 10px;
}

.games-section {
  position: relative;
  overflow: hidden;
}

.games-section::before {
  content: "OUR GAMES";
  direction: ltr;
  color: #ffffff05;
  font-family: var(--font-latin-display);
  font-size: clamp(140px, 22vw, 330px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: .8;
  white-space: nowrap;
  position: absolute;
  top: 82px;
  left: -2%;
  transform: rotate(-5deg);
}

.games-heading,
.game-card {
  z-index: 1;
  position: relative;
}

.game-art {
  aspect-ratio: 9 / 16;
  min-height: auto;
  outline: none;
}

.game-art:focus-visible {
  box-shadow: inset 0 0 0 2px var(--orange);
}

.showcase-slides,
.showcase-slide {
  position: absolute;
  inset: 0;
}

.showcase-slide {
  opacity: 0;
  margin: 0;
  transition: opacity .7s ease, transform .9s ease;
  transform: scale(1.025);
}

.showcase-slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

.showcase-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.game-art-progress {
  z-index: 4;
  direction: ltr;
  align-items: center;
  gap: 9px;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 28px;
}

.showcase-dot {
  cursor: pointer;
  background: #dce5e566;
  border-radius: 999px;
  width: 10px;
  height: 7px;
  transition: width .35s, background .35s;
}

.showcase-dot.is-active {
  background: var(--orange);
  width: 42px;
}

.showcase-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.contact-english {
  color: var(--orange);
  margin: 0 0 17px;
  font-size: 18px;
}

.email-link > span {
  background: var(--orange);
  font-family: Arial, sans-serif;
  font-size: 17px;
}

.social-link bdi {
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.social-link i { font-size: 9px; }

@media (max-width: 720px) {
  .header-cta { padding: 9px 12px; }

  .games-section::before {
    font-size: 32vw;
    top: 4%;
  }

  .game-art-progress {
    bottom: 24px;
    left: 22px;
  }

  .team-signature > div { padding-inline: 9px; }
  .team-signature strong { font-size: 21px; }
  .team-signature span { font-size: 9px; }

  .contact-english { font-size: 15px; }
  .social-link bdi { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-slide { transition: none; }
}