/* VelvetWeaver's site: what every page shares — the fonts, the fifteen languages, the age gate, the screenshot viewer,
   the wallet, Lustlands' demo window, the footer. Each page then takes its project's look: persona.css (the studio and Demon Queen) or cozy.css (Lustlands). */

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito.woff") format("woff");
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Italic.woff") format("woff");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.wrap {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

/* The fifteen languages: the pages hold the English, and site.js writes the language in use over it. Until its texts
   are read the English stays hidden (a moment), so that it does not flash. Anton, the display font, draws Latin only:
   the other scripts take a heavy font of their own from the system. */
html.i18n-wait [data-i18n] {
  visibility: hidden;
}

:root {
  --display: "Anton", Impact, sans-serif;
  --display-weight: 400;
}

:root:lang(ru) {
  --display: "Anton", Impact, "Arial Black", sans-serif;
}

:root:lang(ja) {
  --display: "Anton", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --display-weight: 900;
}

:root:lang(ko) {
  --display: "Anton", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --display-weight: 900;
}

:root:lang(zh-Hans) {
  --display: "Anton", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --display-weight: 900;
}

:root:lang(zh-Hant) {
  --display: "Anton", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --display-weight: 900;
}

:root:lang(th) {
  --display: "Anton", "Leelawadee UI", Thonburi, "Noto Sans Thai", sans-serif;
  --display-weight: 800;
}

:root:lang(hi) {
  --display: "Anton", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif;
  --display-weight: 800;
}

:root:lang(he) {
  --display: "Anton", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
  --display-weight: 800;
}

:root:lang(ko) body {
  word-break: keep-all;
}

/* Those scripts ask for a heavy weight, which Anton (one weight) must not get by thickening. */
:root:is(:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(th), :lang(hi), :lang(he)) {
  font-synthesis-weight: none;
}

/* The language menu: a button with the language in use, and the fifteen in a list under it. */
.lang-pick {
  position: relative;
}

.lang-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  cursor: pointer;
}

.lang-now svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.lang-list {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  gap: 2px;
  width: max-content;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.lang-list[hidden] {
  display: none;
}

.lang-list button {
  width: 100%;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.gate .lang-list {
  inset-inline-end: auto;
  left: 50%;
  translate: -50% 0;
}

.lang-code {
  display: none;
}

/* On a phone the top bar is two short rows that scroll away: the name and the language, then the links in one row
   that slides sideways. */
@media (max-width: 700px) {
  body .top {
    position: static !important;
  }

  body .top .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
  }

  body .top .lang-pick {
    grid-column: 2;
    grid-row: 1;
  }

  body .top .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: nowrap;
    margin: 0;
    padding: 2px 4px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body .top .nav a {
    flex: none;
  }

  body .top .lang-name {
    display: none;
  }

  body .top .lang-code {
    display: inline;
  }

  body .brand {
    font-size: 21px !important;
  }

  body .brand img {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 700px) {
  .lang-list,
  .gate .lang-list {
    position: fixed;
    top: 76px;
    left: 16px;
    right: 16px;
    width: auto;
    translate: none;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The age gate: over everything until the visitor says they are 18 or older. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 16px;
}

html.gated .gate {
  display: grid;
}

html.gated body {
  overflow: hidden;
}

.gate-box {
  width: min(560px, 100%);
  text-align: center;
}

/* The screenshot viewer. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgb(8 4 14 / 0.92);
  cursor: zoom-out;
}

.lightbox.open {
  display: grid;
}

.lightbox img {
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.6);
}

[data-zoom] {
  cursor: zoom-in;
}

/* What slides in as it scrolls into view (none of it when the visitor asked for less motion). */
[data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

[data-reveal].in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .hero video {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The layout both looks share: the top bar, the screenshots' grid, the footer. */
.top .wrap {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  min-height: 66px;
  flex-wrap: wrap;
  padding-block: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.foot .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

.foot .links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: flex-end;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  text-decoration: underline;
}

.age-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 4px solid #e01b24;
  border-radius: 50%;
  font-weight: 1000;
  font-size: 19px;
}

@media (max-width: 900px) {
  .foot .wrap {
    grid-template-columns: 1fr;
  }

  .foot .links {
    justify-content: flex-start;
  }
}

/* The wallet: its address, a button that copies it, and a word when it did. */
.wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.wallet code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-all;
  user-select: all;
}

.copy .done,
.copy.is-copied .idle {
  display: none;
}

.copy.is-copied .done {
  display: inline;
}

/* Lustlands' demo, in a window over the page. */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  padding: 16px;
}

.demo-modal[hidden] {
  display: none;
}

html.demo-open body {
  overflow: hidden;
}

.demo-box {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(1680px, 100%);
  height: min(1000px, 100%);
}

.demo-stage {
  position: relative;
  min-height: 0;
}

.demo-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #1b140f;
  outline: none;
}

.demo-end {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
}

.demo-end[hidden] {
  display: none;
}

/* A jump to a section (#demo, #news…) leaves room for the top bar that stays on screen. */
section[id] {
  scroll-margin-top: 84px;
}