/* Shared shell: tokens, top bar, full-screen snapping, type defaults.
   Each app page layers its own palette and display face on top. */

@view-transition { navigation: auto; }

:root {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #000000;
  --muted: #4A5468;
  --line: #D5DBE6;
  --blue: #2E54A1;
  --sky: #91ACE0;
  --logo-blue: #2E54A1;
  --logo-sky: #91ACE0;
  --focus: #2E54A1;

  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK SC", "Noto Sans", sans-serif;
  --display: var(--sans);
  --bar-h: 72px;
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0B1530;
  --surface: #12204A;
  --ink: #F3F6FC;
  --muted: #9AA7C2;
  --line: #24345C;
  --blue: #7C9BE0;
  --sky: #A9C0EC;
  --logo-blue: #5B82D6;
  --logo-sky: #A9C0EC;
  --focus: #A9C0EC;
  color-scheme: dark;
}

:lang(zh-Hant) { --sans: "Schibsted Grotesk", -apple-system, "PingFang TC", "Noto Sans CJK TC", sans-serif; }
:lang(ja) { --sans: "Schibsted Grotesk", -apple-system, "Hiragino Sans", "Noto Sans CJK JP", sans-serif; }
:lang(ko) { --sans: "Schibsted Grotesk", -apple-system, "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif; }
:lang(ar) { --sans: "Schibsted Grotesk", -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", sans-serif; }

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

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; word-break: auto-phrase; }
:lang(zh-Hans) :is(h1, h2), :lang(zh-Hant) :is(h1, h2) { line-break: strict; word-break: keep-all; overflow-wrap: anywhere; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- full-screen scenes (the page itself never scrolls) ---------- */
.stage { position: fixed; inset: 0; --dir: 1; }
.stage[data-dir="up"] { --dir: -1; }

.screen {
  position: absolute; inset: 0;
  padding: calc(var(--bar-h) + 24px) var(--gutter) 48px;
  overflow: hidden;
  visibility: hidden; pointer-events: none;
}
.screen.is-active, .screen.is-leaving { visibility: visible; }
.screen.is-active { pointer-events: auto; z-index: 1; }
.screen.is-leaving { z-index: 0; }

/* Parts leave and arrive in place; the first scene shows without a replay. */
.stage[data-moved] .is-active .part {
  animation: partIn .75s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--k, 0) * 60ms + 260ms);
}
.is-leaving .part {
  animation: partOut .34s cubic-bezier(.5, 0, .9, .4) both;
  animation-delay: calc(var(--k, 0) * 22ms);
}
@keyframes partIn { from { opacity: 0; translate: 0 calc(var(--dir) * 34px); } }
@keyframes partOut { to { opacity: 0; translate: 0 calc(var(--dir) * -22px); } }

/* Scene pager: one diamond per scene, like the logo's tiles. */
.pager {
  position: fixed; z-index: 21; inset-inline-end: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%;
  display: grid; gap: 6px;
}
.pager button {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.pager button::before {
  content: ""; width: 7px; height: 7px; rotate: 45deg;
  border: 1.5px solid currentColor; opacity: .45;
  transition: background .25s, opacity .25s, scale .25s;
}
.pager button:hover::before { opacity: .9; }
.pager button[aria-current="step"]::before { background: currentColor; opacity: 1; scale: 1.25; }

@media (max-width: 819px) {
  .screen { overflow-y: auto; scrollbar-width: none; }
  .screen::-webkit-scrollbar { display: none; }
  .pager { inset-inline-end: 4px; gap: 2px; }
}

/* ---------- top bar (identical on every page) ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
  view-transition-name: bar;
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0; transition: opacity .25s;
}
.bar.is-scrolled::before { opacity: 1; }

.bar__logo { display: inline-flex; color: var(--ink); text-decoration: none; padding: 4px; margin-inline-start: -4px; }
.bar__logo svg { height: 40px; width: auto; }
.bar__spacer { flex: 1; }

.bar__link {
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
}
.bar__link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.lang {
  position: relative; display: inline-flex; align-items: center;
}
.lang svg { position: absolute; inset-inline-start: 12px; width: 18px; height: 18px; pointer-events: none; }
.lang select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent;
  border-radius: 999px;
  padding-block: 7px; padding-inline: 38px 16px;
  font-size: .9375rem; font-weight: 500;
  cursor: pointer;
}
.lang select:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.lang option { color: #000; background: #fff; }

.theme-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent; cursor: pointer;
  display: inline-grid; place-items: center;
}
.theme-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.theme-btn svg { width: 18px; height: 18px; }

/* ---------- shared pieces ---------- */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 500;
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .9;
}
.status--review { color: #2C7A4B; }
.status--dev { color: #A35F12; }
:root[data-theme="dark"] .status--review { color: #7FD3A0; }
:root[data-theme="dark"] .status--dev { color: #F0B868; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg);
  transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }

.chev { width: 14px; height: 22px; flex: none; }

/* Next-app footer shared by app pages */
.next {
  display: grid; align-content: center; gap: 40px;
}
.next__label { font-size: 1rem; font-weight: 500; opacity: .7; }
.next__link {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  text-decoration: none; width: fit-content;
}
.next__link img { width: clamp(72px, 9vw, 120px); height: auto; border-radius: 22.5%; }
.next__name {
  font-size: clamp(3rem, 9vw, 8.5rem); line-height: .9; font-weight: 700; letter-spacing: -.035em;
}
.next__link:hover .next__name { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.next__foot {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  font-size: .9375rem; opacity: .75;
}

:lang(zh-Hans) .next__name, :lang(zh-Hant) .next__name, :lang(ja) .next__name, :lang(ko) .next__name { letter-spacing: 0; line-height: 1.05; }

/* ---------- device frame: titanium band, black bezel, screen, island, keys ----------
   Proportions follow a current 6.x" iPhone; percentages keep it crisp at any size. */
.device {
  --ti: linear-gradient(90deg, #7f8084, #d8d9db 5%, #b3b4b7 11%, #9d9ea2 50%, #b3b4b7 89%, #d8d9db 95%, #7f8084);
  --key: linear-gradient(90deg, #6f7074, #c3c4c7 50%, #8a8b8f);
  position: relative; aspect-ratio: .484;
  padding: 1.3%;
  border-radius: 18% / 8.7%;
  background: var(--ti);
  filter: drop-shadow(0 34px 46px rgba(20, 22, 26, .22)) drop-shadow(0 4px 10px rgba(20, 22, 26, .12));
}
.device--desert {
  --ti: linear-gradient(90deg, #8f7559, #e6d3b8 5%, #c9b194 11%, #b59c80 50%, #c9b194 89%, #e6d3b8 95%, #8f7559);
  --key: linear-gradient(90deg, #7d654b, #d6c2a6 50%, #9b8267);
}
.device__body {
  position: relative; width: 100%; height: 100%;
  padding: 3.3%;
  border-radius: 17.15% / 8.18%;
  background: #050506;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.device__screen {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  border-radius: 14.8% / 6.83%;
  background: #1c1c1e;
}
.device__island {
  position: absolute; left: 50%; top: 2.83%; translate: -50% 0;
  width: 29.9%; aspect-ratio: 3.4; border-radius: 999px; background: #000;
}
.device__key { position: absolute; width: 1%; border-radius: 2px; background: var(--key); }
.device__key--action { inset-inline-start: -.75%; top: 17%; height: 3.4%; }
.device__key--up     { inset-inline-start: -.75%; top: 23.5%; height: 6.2%; }
.device__key--down   { inset-inline-start: -.75%; top: 31%; height: 6.2%; }
.device__key--power  { inset-inline-end: -.75%; top: 25.5%; height: 9.5%; }
:root[data-theme="dark"] .device { filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .25)); }

/* ---------- motion ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 560px) {
  :root { --bar-h: 64px; }
  .bar { gap: 8px; }
  .bar__logo svg { height: 34px; }
  .bar__link { display: none; }
  .lang select { padding-inline: 34px 12px; font-size: .875rem; max-width: 9.5rem; }
  .lang svg { inset-inline-start: 10px; }
}