@font-face {
  font-family: "IRANYekanX";
  src: url("/fonts/IRANYekanXVFaNumVF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ivory: #f9f5ec;
  --ivory-bright: #fefdfb;
  --path-warm: #f3e2b8;
  --green-deep: #020705;
  --green-shadow: #06120d;
  --green-horizon: #0d2a1f;
  --horizon: 49.25%;
  font-family: "IRANYekanX", Tahoma, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  background: #050a08;
  color: var(--ivory);
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: inset 0 0 0 1px rgba(249, 245, 236, 0.18);
  border-radius: 0 0 18px 18px;
}

.sky,
.stars,
.road,
.dawn,
.skyline,
.vignette {
  position: absolute;
  pointer-events: none;
}

.sky,
.stars,
.dawn,
.vignette {
  inset: 0;
}

.sky {
  z-index: 0;
  background: radial-gradient(78% 38% at 50% 30%, rgba(10, 42, 31, 0.22), transparent 72%),
    linear-gradient(
      180deg,
      #010604 0%,
      #020906 27%,
      #06150f 39%,
      #0b2b20 var(--horizon),
      #061b14 56%,
      #020b08 76%,
      #010604 100%
    );
}

.stars {
  z-index: 1;
  bottom: auto;
  height: 34%;
  opacity: 0.68;
  animation: stars-breathe 10s ease-in-out infinite;
}

.stars--near {
  background-image: radial-gradient(
      circle at 6% 18%,
      rgba(249, 245, 236, 0.75) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(circle at 11% 44%, rgba(249, 245, 236, 0.54) 0 1px, transparent 1.7px),
    radial-gradient(circle at 23% 16%, rgba(249, 245, 236, 0.44) 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 31%, rgba(243, 226, 184, 0.63) 0 1px, transparent 1.7px),
    radial-gradient(circle at 37% 58%, rgba(243, 226, 184, 0.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 47% 42%, rgba(243, 226, 184, 0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 13%, rgba(249, 245, 236, 0.5) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 64% 47%, rgba(249, 245, 236, 0.48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 79% 9%, rgba(249, 245, 236, 0.56) 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 24%, rgba(243, 226, 184, 0.49) 0 1px, transparent 1.7px),
    radial-gradient(circle at 93% 46%, rgba(249, 245, 236, 0.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 96% 29%, rgba(249, 245, 236, 0.46) 0 1px, transparent 1.6px);
}

.stars--far {
  opacity: 0.36;
  background-image: radial-gradient(
      circle at 18% 63%,
      rgba(249, 245, 236, 0.7) 0 0.8px,
      transparent 1.4px
    ),
    radial-gradient(circle at 29% 8%, rgba(249, 245, 236, 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 51% 25%, rgba(243, 226, 184, 0.7) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 71% 51%, rgba(249, 245, 236, 0.6) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 91% 8%, rgba(249, 245, 236, 0.65) 0 0.8px, transparent 1.4px);
  animation-delay: -4s;
  animation-duration: 13s;
}

.road {
  z-index: 2;
  inset-inline: 0;
  top: var(--horizon);
  bottom: 0;
  clip-path: polygon(46.15% 0, 53.85% 0, 81.35% 100%, 18.65% 100%);
  background: radial-gradient(70% 22% at 50% 0%, rgba(255, 253, 245, 0.78), transparent 70%),
    linear-gradient(
      180deg,
      rgba(254, 249, 224, 0.98) 0%,
      rgba(243, 226, 184, 0.66) 17%,
      rgba(233, 199, 127, 0.35) 47%,
      rgba(125, 113, 78, 0.19) 73%,
      rgba(20, 29, 23, 0.2) 100%
    );
  filter: drop-shadow(0 0 36px rgba(243, 226, 184, 0.13));
  animation: road-arrive 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

.road::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -180px;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(249, 245, 236, 0.15), transparent);
  animation: road-shimmer 7s linear infinite;
}

.road::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(243, 226, 184, 0.9);
  box-shadow: 0 0 14px rgba(243, 226, 184, 0.95), 0 0 34px rgba(233, 199, 127, 0.5);
  opacity: 0;
  animation: road-comet 7s 1.6s ease-in infinite;
}

.dawn {
  z-index: 3;
  mix-blend-mode: screen;
  background: radial-gradient(
      11% 3.4% at 50% var(--horizon),
      rgba(255, 253, 247, 0.74),
      transparent 78%
    ),
    radial-gradient(34% 9% at 50% var(--horizon), rgba(249, 245, 236, 0.24), transparent 76%),
    radial-gradient(66% 17% at 50% var(--horizon), rgba(152, 190, 176, 0.2), transparent 76%),
    radial-gradient(94% 31% at 50% var(--horizon), rgba(111, 162, 144, 0.12), transparent 72%);
  transform-origin: 50% var(--horizon);
  animation: dawn-arrive 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) both,
    dawn-breathe 9s ease-in-out 1.7s infinite;
}

.skyline {
  z-index: 4;
  inset-inline: 5%;
  top: var(--horizon);
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(249, 245, 236, 0.28) 18%,
    rgba(249, 245, 236, 0.82) 43%,
    #fefdfb 50%,
    rgba(249, 245, 236, 0.82) 57%,
    rgba(249, 245, 236, 0.28) 82%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(249, 245, 236, 0.34), 0 0 52px rgba(152, 190, 176, 0.22);
  animation: horizon-arrive 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.vignette {
  z-index: 5;
  background: linear-gradient(
      180deg,
      rgba(0, 4, 2, 0.2),
      transparent 38%,
      transparent 66%,
      rgba(0, 4, 2, 0.5)
    ),
    radial-gradient(104% 90% at 50% 48%, transparent 34%, rgba(0, 5, 3, 0.58) 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.24);
}

.hero {
  position: absolute;
  z-index: 7;
  top: 7.7%;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-inline: 1.25rem;
  text-align: center;
  pointer-events: none;
}

.product-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 20px;
  background: #17493b;
  box-shadow: inset 0 1px 0 rgba(243, 226, 184, 0.32), inset 0 0 0 1px rgba(249, 245, 236, 0.13),
    0 0 42px rgba(233, 199, 127, 0.16), 0 18px 40px -18px rgba(0, 0, 0, 0.92);
  animation: rise 0.9s 0.08s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.product-mark img {
  display: block;
  width: 42px;
  height: 42px;
}

.mark {
  margin: 0;
  font-size: clamp(4rem, 8.2vw, 6.5rem);
  font-weight: 870;
  line-height: 1.04;
  color: transparent;
  background: linear-gradient(180deg, var(--ivory-bright) 30%, #ede3c6 100%);
  background-clip: text;
  filter: drop-shadow(0 4px 30px rgba(233, 199, 127, 0.14));
  animation: rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.tagline {
  margin: 0;
  color: rgba(243, 226, 184, 0.82);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 300;
  word-spacing: 0.28em;
  animation: rise 0.9s 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.downloads {
  position: relative;
  z-index: 8;
  margin-top: 69.15vh;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  gap: 13px;
  padding-inline: 1rem;
  padding-bottom: 2rem;
  text-align: center;
}

.doors {
  display: flex;
  justify-content: center;
  gap: 14px;
  animation: rise 0.9s 0.48s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.door {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: clamp(188px, 18.8vw, 236px);
  min-height: 59px;
  padding: 11px 22px 12px;
  color: #071b15;
  background: linear-gradient(160deg, #fefbf1 0%, #f9f5ec 48%, #f3e2b8 100%);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 0 38px rgba(243, 226, 184, 0.23),
    0 20px 44px -18px rgba(0, 0, 0, 0.92);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.door--macos {
  border-radius: 16px 16px 16px 5px;
}

.door--windows {
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(200deg, #fefbf1 0%, #f9f5ec 48%, #f3e2b8 100%);
}

.door:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 52px rgba(243, 226, 184, 0.36),
    0 24px 48px -18px rgba(0, 0, 0, 0.95);
}

.door:active {
  transform: translateY(0);
}

.door[aria-disabled="true"] {
  cursor: default;
  opacity: 0.65;
  pointer-events: none;
}

.foot.install-note {
  max-width: 46rem;
  padding-inline: 1rem;
  font-size: 0.7rem;
}

.door:focus-visible {
  outline: 2px solid var(--ivory-bright);
  outline-offset: 4px;
}

.door-text {
  display: grid;
  flex: 1;
  justify-items: start;
  gap: 1px;
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 820;
  line-height: 1.25;
  text-align: start;
}

.door-note {
  color: rgba(7, 27, 21, 0.62);
  font-size: 0.68rem;
  font-weight: 600;
}

.glyph {
  flex: none;
}

.foot {
  margin: 5px 0 0;
  color: rgba(249, 245, 236, 0.44);
  font-size: 0.72rem;
  font-weight: 550;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
  animation: rise 0.9s 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes horizon-arrive {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }
}

@keyframes dawn-arrive {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes dawn-breathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes road-arrive {
  from {
    opacity: 0;
    clip-path: polygon(49.6% 0, 50.4% 0, 53% 100%, 47% 100%);
  }
}

@keyframes road-shimmer {
  to {
    transform: translateY(88vh);
  }
}

@keyframes road-comet {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.25);
  }
  12% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 50vh) scale(1.6);
  }
}

@keyframes stars-breathe {
  0%,
  100% {
    opacity: 0.48;
  }
  50% {
    opacity: 0.72;
  }
}

@media (max-width: 640px) {
  :root {
    --horizon: 46%;
  }

  .hero {
    top: 6.5%;
    gap: 12px;
  }

  .product-mark {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .mark {
    font-size: clamp(3.7rem, 23vw, 5.4rem);
  }

  .tagline {
    font-size: 1rem;
  }

  .road {
    clip-path: polygon(43% 0, 57% 0, 98% 100%, 2% 100%);
  }

  .downloads {
    margin-top: 62vh;
  }

  .doors {
    width: min(100%, 22rem);
    flex-direction: column;
    gap: 10px;
  }

  .door {
    width: 100%;
    justify-content: center;
    border-radius: 15px;
  }
}

@media (max-height: 620px) and (min-width: 641px) {
  .hero {
    top: 4.5%;
    gap: 8px;
  }

  .product-mark {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .mark {
    font-size: 4.3rem;
  }

  .downloads {
    margin-top: 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars,
  .road,
  .road::before,
  .road::after,
  .dawn,
  .skyline,
  .product-mark,
  .mark,
  .tagline,
  .doors,
  .foot {
    animation: none;
  }
}