/* Hallmark · macrostructure: Poster/Statement · tone: austere-calm · anchor hue: moonlit teal
 * stilltime — arty App Store landing + connected legal page. Locked system: DESIGN.md + BRAND.md.
 * Font: the app's system font (SF / PingFang). Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@import url("tokens.css");

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--teal-glow); color: #fff; }

/* ---------- i18n ---------- */
html:not([data-lang="zh"]) [data-l="zh"] { display: none !important; }
html[data-lang="zh"]        [data-l="en"] { display: none !important; }

/* ---------- page shell ---------- */
.page {
  min-height: 100svh; display: flex; flex-direction: column;
  max-width: 68rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: clamp(var(--space-3), 2.2vh, var(--space-6));
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-mark); font-weight: 600;
  letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: #fff; }
.wordmark .cn { font-weight: 500; color: var(--text-dim); }
/* the app icon, as a small rounded chip beside the wordmark */
.brandmark { width: 30px; height: 30px; border-radius: 23%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }

/* language toggle — quiet glass pill */
.lang {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill);
  background: var(--surface-1); border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
}
.lang button {
  appearance: none; border: 0; background: transparent; color: var(--text-faint);
  font: inherit; font-size: var(--text-xs); line-height: 1; padding: 0.4em 0.7em;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.lang button:hover { color: var(--text-dim); }
.lang button[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }

/* ---------- hero: main bowl + carousel ---------- */
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(var(--space-2), 2vh, var(--space-6));
  padding-block: clamp(var(--space-2), 2.5vh, var(--space-6));
  min-height: 0;
}
.carousel { position: relative; width: min(760px, 100%); margin-inline: auto; }
.carousel__viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; outline: none;
  /* soft fade at the left/right edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport { cursor: grab; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding-block: var(--space-2); }
.slide img { -webkit-user-drag: none; user-select: none; }
/* bowl fits within both a max width AND the viewport height, so the page never outgrows the screen */
.slide img {
  max-width: min(600px, 86vw); max-height: 36vh; width: auto; height: auto;
  filter: drop-shadow(0 24px 54px rgba(0,0,0,0.65)) drop-shadow(0 0 42px rgba(79,197,214,0.08));
}
.carousel__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border-radius: var(--radius-pill); cursor: pointer; color: var(--text);
  background: var(--surface-1); border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow:hover { background: var(--surface-2); border-color: var(--hairline); }
.carousel__arrow[disabled] { opacity: 0.25; cursor: default; }
.carousel__arrow[data-dir="-1"] { left: -6px; }
.carousel__arrow[data-dir="1"]  { right: -6px; }
.carousel__dots { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer; border: 0;
  background: rgba(255,255,255,0.22);
  transition: background var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.dot:hover { background: rgba(255,255,255,0.42); }
.dot[aria-selected="true"] { background: var(--teal); transform: scale(1.15); }

.hero__words { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
/* the name lockup: big lowercase brand + a sharp letter-spaced descriptor */
.lockup { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.lockup__brand {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(2.3rem, min(9vw, 8.5vh), 4.5rem);  /* height-aware so short screens fit */
  letter-spacing: -0.045em; line-height: 1; color: #fff;
}
.lockup__desc {
  font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal);
}
html[data-lang="zh"] .lockup__desc { letter-spacing: 0.34em; text-transform: none; }

/* primary action — teal-tinted glass pill (DESIGN.md "one button system for primacy") */
.cta {
  display: inline-flex; align-items: center; gap: 0.55em; margin-top: var(--space-2);
  padding: 0.9em 1.5em; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; color: var(--text); text-decoration: none;
  background: var(--teal-fill); border: 1px solid var(--teal-line);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  transition: transform var(--dur-instant) var(--ease-out),
              background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
a.cta:hover { background: rgba(79,197,214,0.22); border-color: rgba(79,197,214,0.5); }
a.cta:active { transform: scale(0.98); }
.cta[aria-disabled="true"] { cursor: default; }
.cta__glyph { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ---------- footer: legal link + copyright ---------- */
.footer {
  padding-block: clamp(var(--space-4), 2.5vh, var(--space-8)) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-12); color: var(--text-faint); font-size: var(--text-xs);
}
.footer a { color: var(--text-dim); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); }
.footer a:hover { color: var(--text); }

/* ---------- legal / prose page (Privacy & Terms, connected) ---------- */
.prose { max-width: var(--measure); margin: 0 auto; padding-block: var(--space-12) var(--space-24); flex: 1; }
.prose h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--space-2); color: #fff;
}
.prose .updated { color: var(--text-faint); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.legal-nav { display: flex; gap: var(--space-6); font-size: var(--text-sm); margin: 0 0 var(--space-12); }
.legal-nav a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.legal-nav a:hover { color: var(--text); border-bottom-color: var(--teal-line); }
.legal-section { scroll-margin-top: var(--space-8); }
.legal-section + .legal-section { margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--hairline-soft); }
.legal-section > h2:first-child {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: -0.01em; color: #fff; margin: 0 0 var(--space-6);
}
.prose h3 { font-size: var(--text-body); font-weight: 600; letter-spacing: 0.005em; margin: var(--space-8) 0 var(--space-2); color: #fff; }
.prose p { color: var(--text-dim); margin: 0 0 var(--space-4); }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-style: normal; color: var(--text); }
.prose a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-line); overflow-wrap: anywhere; }
.prose a:hover { border-bottom-color: var(--teal); }
.prose .lede { color: var(--text); font-size: var(--text-lead); line-height: 1.55; margin-bottom: var(--space-8); }

/* ---------- responsive ---------- */
@media (max-width: 40rem) {
  .carousel__arrow { display: none; }   /* swipe on touch */
}

/* short windows (landscape phones, small/short desktop windows): shrink the bowl so it always fits */
@media (max-height: 640px) {
  .slide img { max-height: 30vh; }
  .carousel__dots { margin-top: var(--space-2); }
  .hero { gap: var(--space-2); padding-block: var(--space-2); }
  .hero__words { gap: var(--space-3); }
}

/* ---------- reduced motion / transparency / contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lang, .cta { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-soft); }
  .cta { background: rgba(79,197,214,0.18); }
}
@media (prefers-contrast: more) {
  :root { --text-dim: rgba(255,255,255,0.82); --text-faint: rgba(255,255,255,0.6); --hairline-soft: rgba(255,255,255,0.2); }
  .cta { border-color: var(--teal); }
}