/* Window Flow's site: the app's Ribbons stage behind everything, the icon and name over it, then the film. Glass is
   frosted with what's behind it and rimmed with light from the top left, as on macOS. */

:root {
  color-scheme: dark;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.76);
  --ink-3: rgba(255, 255, 255, 0.5);
  --ink-4: rgba(255, 255, 255, 0.32);
  --rim: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.24));
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: #020713;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent;
}

/* Only the chosen language shows. */
html:not([data-lang="zh"]) [data-l="zh"],
html[data-lang="zh"] [data-l="en"] { display: none !important; }

a { color: inherit; }

/* The stage, fixed behind the page; without WebGL, the same colours as a still gradient. */
#ribbons {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100lvh;
  display: block;
  z-index: -1;
  pointer-events: none;
}
.no-webgl body {
  background:
    radial-gradient(60% 30% at 50% 42%, rgba(46, 130, 170, 0.22), transparent 70%),
    linear-gradient(176deg, transparent 52%, rgba(90, 200, 230, 0.14) 60%, transparent 66%),
    radial-gradient(120% 90% at 50% 40%, #04121c, #010409 80%);
  background-attachment: fixed;
}

/* Frosted glass with a rim of light. */
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(0, 6, 16, 0.28);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* The language switch: two names in a fine white line, like the download button, a soft pill gliding to the chosen one. */
.bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 0;
}
.lang {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}
.lang button {
  position: relative;
  z-index: 1;
  min-width: 52px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  font: 500 13px/1 var(--font);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lang button:hover { color: var(--ink-2); }
.lang button[aria-checked="true"] { color: var(--ink); }
.lang button:focus-visible { outline: 2px solid rgba(140, 220, 255, 0.8); outline-offset: 1px; }
.lang-pill {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.38s var(--ease);
}
html[data-lang="zh"] .lang-pill { transform: translateX(100%); }

/* The hero: the icon, the name, what it's for, and the download. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 16px 112px;
  text-align: center;
}
.icon {
  position: relative;
  width: 184px;
  height: 184px;
  margin-bottom: 30px;
}
/* The shadow fades out inside the image's own box (clear padding, given back by the margin): Safari cuts a filter's
   shadow off at the box, which left a faint square round the icon. The pointer goes to .icon, so the glint still
   comes when it reaches the icon itself. */
.icon img {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding: 72px;
  margin: -72px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 24px 44px rgba(0, 8, 22, 0.55));
}
/* The glint: a band of light across the icon, as in the app, once on arrival and again when the pointer comes by. */
.icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, 0.6) 49%, transparent 60%) 140% 0 / 260% 100% no-repeat;
  -webkit-mask: url("/assets/icon-512.png") center / contain no-repeat;
  mask: url("/assets/icon-512.png") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.icon.glint::after { animation: glint 1.1s cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes glint {
  0% { background-position: 140% 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(46px, 7vw, 76px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-shadow: 0 2px 30px rgba(0, 10, 24, 0.5);
}
.line {
  max-width: 30em;
  margin: 0 0 40px;
  color: var(--ink-2);
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.4;
  text-wrap: balance;
}
html[data-lang="zh"] .line { letter-spacing: 0.02em; }
/* A narrow screen breaks the line between its phrases, never inside a word. */
.phrase { display: inline-block; }

.download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px 0 26px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  /* Drawn, not filled: a fine line round it and the ribbons showing through, no glow. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.download svg { width: 19px; height: 19px; flex: none; }
.download:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.78);
}
.download:active { transform: scale(0.98); transition-duration: 0.08s; }
.download:focus-visible { outline: 2px solid rgba(140, 220, 255, 0.9); outline-offset: 3px; }
.meta {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
/* Who made it, the name in the ribbons' aqua: a group of its own, well clear of the download's details. */
.byline {
  margin: 34px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.author {
  color: #9be3ff;
  font-weight: 600;
  text-decoration: none;
}
.author:hover { color: #c4efff; text-decoration: underline; text-underline-offset: 3px; }
/* What inspired it, under the byline and quieter. */
.inspired {
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}

/* In order, quickly, on arrival. */
.hero > * { animation: rise 0.9s var(--ease) both; }
.hero > :nth-child(2) { animation-delay: 0.08s; }
.hero > :nth-child(3) { animation-delay: 0.16s; }
.hero > :nth-child(4) { animation-delay: 0.24s; }
.hero > :nth-child(5) { animation-delay: 0.3s; }
.hero > :nth-child(6) { animation-delay: 0.36s; }
.hero > :nth-child(7) { animation-delay: 0.42s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.cue {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 22px;
  height: 22px;
  margin-left: -11px;
  color: var(--ink-4);
  transition: opacity 0.4s var(--ease);
  animation: rise 0.9s 0.6s var(--ease) both;
}
.scrolled .cue { opacity: 0; }

/* The film. */
.film {
  display: flex;
  justify-content: center;
  padding: 24px 16px 120px;
}
.screen {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 50px 120px rgba(0, 4, 12, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.screen.tall { width: min(560px, 100%); aspect-ratio: 3 / 4; }
.screen video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 0 16px max(40px, env(safe-area-inset-bottom));
  color: var(--ink-3);
  font-size: 13px;
}
footer a { text-decoration: none; transition: color 0.2s var(--ease); }
footer a:hover { color: var(--ink); }
footer .made { color: var(--ink-4); }

/* The policy and the release notes: a column of text on dark glass. */
.page {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 120px 16px 72px;
}
.page .back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.page .back img { width: 34px; height: 34px; }
.page .back:hover { color: var(--ink); }
.sheet {
  padding: 44px 48px 40px;
  border-radius: 26px;
  background: rgba(4, 12, 24, 0.55);
  line-height: 1.65;
}
.sheet h1 { font-size: clamp(34px, 5vw, 46px); margin-bottom: 18px; text-shadow: none; }
.sheet h2 { margin: 34px 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.sheet p, .sheet li { color: var(--ink-2); font-size: 16px; }
.sheet p { margin: 0 0 12px; }
.sheet .lead { color: var(--ink); font-size: 18px; font-weight: 500; }
.sheet .note { margin-top: 30px; color: var(--ink-3); font-size: 14px; }
.sheet a { color: #9be3ff; text-decoration: none; }
.sheet a:hover { text-decoration: underline; }
.release { padding-top: 6px; }
.release + .release { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.release h2 { margin: 0 0 2px; display: flex; align-items: baseline; gap: 12px; }
.release time { color: var(--ink-3); font-size: 14px; font-weight: 400; }
.release ul { margin: 12px 0 0; padding-left: 1.2em; }
.release li { margin: 6px 0; }

@media (max-width: 640px) {
  .icon { width: 136px; height: 136px; margin-bottom: 24px; }
  .line { margin-bottom: 32px; }
  .sheet { padding: 30px 22px 26px; border-radius: 22px; }
  .page { padding-top: 92px; }
  .screen { border-radius: 16px; }
}

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