@font-face {
  font-family: "Andale Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/andale-mono.ttf") format("truetype");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --ink: #f4f6f7;
  --ink-soft: rgba(244, 246, 247, 0.92);
  --art-w: 390;
  --art-h: 844;
  /* Zero = one line down from the previous preview (back to mockup). */
  --copy-lift: 0px;
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: #000000;
}

body {
  font-family: "Andale Mono", Vazirmatn, "Courier New", monospace;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #000000;
}

.art {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg {
  position: absolute;
  inset: 0;
  background-color: #000000;
  background-image: url("/assets/Landing-Page-Mobile.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.unfolding,
.lang,
.brand,
.contact {
  position: absolute;
  margin: 0;
}

.copy {
  text-align: left;
}

html[lang="fa"] .copy {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  font-family: Vazirmatn, "Andale Mono", sans-serif;
}

html[lang="fa"] .unfolding,
html[lang="fa"] .contact {
  letter-spacing: 0;
}

html[lang="fa"] .tag {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Andale Mono", "Courier New", monospace;
}

html[lang="fa"] .name {
  direction: ltr;
  font-family: "Andale Mono", "Courier New", monospace;
}

html[lang="fa"] .contact a {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Measured from 390x844 mockup */
.unfolding {
  left: calc(100vw * 25 / 390);
  top: calc(100dvh * 418 / 844 - var(--copy-lift));
  font-weight: 400;
  font-size: calc(100vw * 16 / 390);
  letter-spacing: 0.16em;
  line-height: 1;
  white-space: nowrap;
}

.lang {
  left: calc(100vw * 25 / 390);
  top: calc(100dvh * 496 / 844 - var(--copy-lift));
}

.play {
  width: calc(100vw * 14 / 390);
  height: calc(100vw * 16 / 390);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(100vw * 8 / 390) 0 calc(100vw * 8 / 390) calc(100vw * 14 / 390);
  border-color: transparent transparent transparent #fff;
}

.lang-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.6em);
  margin: 0;
  padding: 0.35em 0;
  list-style: none;
  background: rgba(20, 20, 20, 0.55);
  min-width: 8em;
}

.lang-menu button {
  display: block;
  width: 100%;
  padding: 0.35em 0.7em;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.brand {
  left: calc(100vw * 25 / 390);
  top: calc(100dvh * 608 / 844 - var(--copy-lift));
  display: flex;
  align-items: stretch;
  gap: calc(100vw * 16 / 390);
}

.logo {
  width: calc(100vw * 81 / 390);
  height: calc(100vw * 81 / 390);
  flex-shrink: 0;
  display: block;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0.05em;
}

.name {
  margin: 0;
  font-weight: 400;
  font-size: calc(100vw * 22 / 390);
  letter-spacing: 0.04em;
  line-height: 1;
}

.tag {
  margin: 0;
  font-weight: 400;
  font-size: calc(100vw * 10 / 390);
  letter-spacing: 0.14em;
  line-height: 1.28;
  text-transform: uppercase;
}

.contact {
  left: calc(100vw * 25 / 390);
  top: calc(100dvh * 754 / 844 - var(--copy-lift));
  right: calc(100vw * 24 / 390);
  font-style: normal;
  font-weight: 400;
  font-size: calc(100vw * 9 / 390);
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink-soft);
}

.contact p {
  margin: 0;
}

.contact p + p {
  margin-top: 0.35em;
}

.contact p:has(> a) + p:has(> a) {
  margin-top: 0.1em;
}

.addr-wide {
  display: none;
}

.addr-narrow {
  display: block;
}

.contact a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 600px), (orientation: landscape) and (max-width: 1023px) {
  :root {
    --art-w: 768;
    --art-h: 1024;
    --copy-lift: 0px;
  }

  .bg {
    background-image: url("/assets/Landing-Page-Tablet.jpg");
  }

  .unfolding {
    left: calc(100vw * 37 / 768);
    top: calc(100dvh * 487 / 1024 - var(--copy-lift));
    font-size: calc(100vw * 20 / 768);
    letter-spacing: 0.18em;
  }

  .lang {
    left: calc(100vw * 37 / 768);
    top: calc(100dvh * 584 / 1024 - var(--copy-lift));
  }

  .play {
    width: calc(100vw * 16 / 768);
    height: calc(100vw * 18 / 768);
  }

  .play::before {
    border-width: calc(100vw * 9 / 768) 0 calc(100vw * 9 / 768) calc(100vw * 16 / 768);
  }

  .brand {
    left: calc(100vw * 37 / 768);
    top: calc(100dvh * 722 / 1024 - var(--copy-lift));
    gap: calc(100vw * 18 / 768);
  }

  .logo {
    width: calc(100vw * 102 / 768);
    height: calc(100vw * 102 / 768);
  }

  .name {
    font-size: calc(100vw * 26 / 768);
  }

  .tag {
    font-size: calc(100vw * 11 / 768);
    letter-spacing: 0.16em;
  }

  .contact {
    left: calc(100vw * 37 / 768);
    top: calc(100dvh * 923 / 1024 - var(--copy-lift));
    right: auto;
    font-size: calc(100vw * 11 / 768);
  }

  .addr-wide {
    display: block;
  }

  .addr-narrow {
    display: none;
  }
}

/* Phone landscape (Pro Max class): keep tablet art, scroll so overlays do not crush. */
@media (orientation: landscape) and (max-width: 1023px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stage {
    width: 100vw;
    height: calc(100vw * 1024 / 768);
    min-height: 100dvh;
    overflow: visible;
  }

  .bg {
    background-image: url("/assets/Landing-Page-Tablet.jpg");
    background-position: center top;
    background-size: cover;
  }

  .unfolding {
    left: calc(100vw * 37 / 768);
    top: calc(100vw * 487 / 768);
    font-size: calc(100vw * 20 / 768);
  }

  .lang {
    left: calc(100vw * 37 / 768);
    top: calc(100vw * 584 / 768);
  }

  .brand {
    left: calc(100vw * 37 / 768);
    top: calc(100vw * 722 / 768);
  }

  .contact {
    left: calc(100vw * 37 / 768);
    top: calc(100vw * 923 / 768);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  :root {
    --art-w: 1440;
    --art-h: 1024;
    --copy-lift: 0px;
  }

  .bg {
    background-image: url("/assets/Desktop.jpg");
    background-size: cover;
    background-position: center;
  }

  .unfolding {
    left: calc(100vw * 41 / 1440);
    top: calc(100dvh * 512 / 1024 - var(--copy-lift));
    font-size: calc(100vw * 22 / 1440);
    letter-spacing: 0.2em;
  }

  .lang {
    left: calc(100vw * 41 / 1440);
    top: calc(100dvh * 625 / 1024 - var(--copy-lift));
  }

  .play {
    width: calc(100vw * 18 / 1440);
    height: calc(100vw * 22 / 1440);
  }

  .play::before {
    border-width: calc(100vw * 11 / 1440) 0 calc(100vw * 11 / 1440) calc(100vw * 18 / 1440);
  }

  .brand {
    left: calc(100vw * 41 / 1440);
    top: calc(100dvh * 745 / 1024 - var(--copy-lift));
    gap: calc(100vw * 20 / 1440);
  }

  .logo {
    width: calc(100vw * 120 / 1440);
    height: calc(100vw * 120 / 1440);
  }

  .name {
    font-size: calc(100vw * 32 / 1440);
  }

  .tag {
    font-size: calc(100vw * 13 / 1440);
    letter-spacing: 0.14em;
    line-height: 1.22;
  }

  .contact {
    left: calc(100vw * 41 / 1440);
    top: calc(100dvh * 941 / 1024 - var(--copy-lift));
    font-size: calc(100vw * 12 / 1440);
  }

  .contact p + p {
    margin-top: 0.45em;
  }

  .contact p:has(> a) + p:has(> a) {
    margin-top: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}