/*
 * orkio.si/download and /tr/download (pen.dev "orkio.si — Download · v3", cut down to its hero): one
 * screen, no scrolling. The night desk whose laptop closes fills it and the Mac download sits on top.
 * Loads after blog.css, which brings the nav, the phone menu and the language and status links.
 */

/* ---------- hero: the whole page; the scene fills the screen, the copy is centred on it ---------- */
.d-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 104px 20px 64px;
  background: var(--ink);
}
@supports (height: 100svh) {
  .d-hero {
    min-height: 100svh;
  }
}
.d-glow {
  position: absolute;
  z-index: 1;
  left: calc(50% + 150px);
  top: -180px;
  width: 700px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(159, 180, 255, 0.2), rgba(159, 180, 255, 0));
}
.d-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  text-align: center;
}
.d-release {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px 6px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--nav-text);
}
.d-release i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5bd69a;
}
.d-copy h1 {
  margin: 0;
  text-wrap: balance;
  font-size: clamp(44px, 6.67vw, 96px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.042em;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.d-lead,
.d-meta,
.d-mobile-note {
  text-shadow: 0 1px 12px rgba(5, 6, 12, 0.8);
}
.d-lead {
  max-width: 620px;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--nav-text);
}
.d-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}
.d-mac {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 18px;
  border-radius: 11px;
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 0 30px rgba(159, 180, 255, 0.33);
  transition: box-shadow 0.2s;
}
.d-mac:hover {
  box-shadow: 0 0 40px rgba(159, 180, 255, 0.55);
}
.d-mac .apple {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}
.d-mac .arrow {
  width: 38px;
  height: 38px;
  margin-left: 4px;
  border-radius: 8px;
  background: var(--text);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.d-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(5, 6, 12, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  transition: border-color 0.15s;
}
.d-ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.d-ghost .i {
  font-size: 16px;
  color: var(--dim);
}
.d-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--dim);
}
.d-specs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.d-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
}
.d-meta a {
  color: var(--white);
  font-weight: 500;
}
.d-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.d-which {
  position: relative;
}
.d-which summary {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
}
.d-which summary::-webkit-details-marker {
  display: none;
}
.d-which summary:hover {
  color: var(--nav-text);
}
.d-which summary .i {
  font-size: 13px;
}
.d-which summary .chev {
  display: none;
}
.d-which[open] summary .chev {
  display: block;
  transform: rotate(180deg);
}
.d-note {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  padding: 14px 16px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 14, 26, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.d-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: #6f7287;
}
.d-path kbd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--nav-text);
}
.d-path kbd:last-child {
  color: var(--white);
}
.d-path .apple {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}
.d-path .i {
  font-size: 13px;
}
.d-note p {
  margin: 0;
  line-height: 1.5;
}

/* The scene behind everything, cropped to the screen. The copy sits over the laptop, so the scene is
   dimmed, most behind the copy, where the lid catches the moonlight as it closes, and under the nav
   and the bottom links. */
.d-stage {
  position: absolute;
  z-index: 0;
  inset: 0;
}
.d-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 46% at 50% 54%, rgba(5, 6, 12, 0.7), rgba(5, 6, 12, 0)),
    linear-gradient(
      180deg,
      rgba(5, 6, 12, 0.85) 0,
      rgba(5, 6, 12, 0.4) 20%,
      rgba(5, 6, 12, 0.4) 80%,
      rgba(5, 6, 12, 0.85) 100%
    );
}

/* After a click on a Mac download: a line under the meta, out of the flow so the scene doesn't move,
   on its own ink because the moon is right there. */
.d-started {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(5, 6, 12, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  color: #5bd69a;
}
.d-started:empty {
  display: none;
}

/* iPhone, iPad and Android (the head script sets .mobile-os): the Mac app can't run there, so the web
   app is the main button and a line says where to get the Mac app. */
.d-mobile-note {
  display: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
}
.d-mobile-note b {
  font-weight: 500;
  color: var(--white);
}
.mobile-os .d-mac,
.mobile-os .d-meta {
  display: none;
}
.mobile-os .d-mobile-note {
  display: block;
}
.mobile-os .d-actions .d-ghost {
  border-color: transparent;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 30px rgba(159, 180, 255, 0.33);
}
.mobile-os .d-actions .d-ghost .i {
  color: var(--text);
}

/* ---------- the language and status links, inside the screen (blog.css styles them) ---------- */
.d-bar {
  position: absolute;
  z-index: 2;
  right: max(20px, calc((100% - 1240px) / 2));
  bottom: 20px;
  margin: 0;
  font-size: 13px;
}

/* ---------- narrower screens ---------- */
@media (max-width: 640px) {
  .d-hero {
    padding: 96px 20px 56px;
  }
  .d-bar {
    left: 0;
    right: 0;
    justify-content: center;
  }
  /* A phone shows the middle of the scene: the lid is behind the whole copy. */
  .d-stage::after {
    background:
      radial-gradient(ellipse 90% 50% at 50% 55%, rgba(5, 6, 12, 0.65), rgba(5, 6, 12, 0)),
      linear-gradient(
        180deg,
        rgba(5, 6, 12, 0.85) 0,
        rgba(5, 6, 12, 0.5) 20%,
        rgba(5, 6, 12, 0.5) 80%,
        rgba(5, 6, 12, 0.9) 100%
      );
  }
  .d-copy {
    gap: 14px;
  }
  .d-copy h1 {
    letter-spacing: -0.04em;
  }
  .d-lead {
    font-size: 16px;
  }
  .d-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    padding-top: 6px;
  }
  .d-mac {
    justify-content: space-between;
    height: 54px;
    padding: 0 6px 0 18px;
    border-radius: 12px;
  }
  .d-mac .arrow {
    margin-left: auto;
  }
  .d-ghost {
    justify-content: center;
    height: 50px;
    border-radius: 12px;
  }
  .d-meta {
    flex-direction: column;
    gap: 8px;
  }
  .d-sep {
    display: none;
  }
  .d-note {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
}