/* OshiDiary — landing page
   Palette follows OshiDiary/Utilities/ColorScheme.swift (LightPalette / DarkPalette).

   NOTE — three light-mode tokens are deliberately DARKER than their Swift
   counterparts. The app's own values fail WCAG AA on a near-white page:
     accent  #eb7d81 → 2.7:1   muted #9e6b6c → 4.4:1   faint #bdbab4 → 2.7:1
   Don't "restore" them to match the Swift source — that silently reintroduces
   the failures. Text/button fills use --accent-deep; --accent is kept at the
   true brand value for decoration only (glows, tints), which is unregulated.
   Verified: every text/background pair on the page is ≥4.5:1 in both schemes. */

:root {
  --accent:        #eb7d81;  /* decoration only — never text */
  --accent-deep:   #b93f45;  /* text + button fills: 5.4:1 on bg, 4.7:1 on tag wash */
  --text:          #513535;
  --text-muted:    #8b6262;  /* 5.0:1 on --surface, 4.7:1 on --surface-2 */
  --text-faint:    #7f6f69;  /* 4.8:1 on --bg */
  --bg:            #fefefe;
  --surface:       #fcfaf8;
  --surface-2:     #f6f1ee;
  --border:        rgba(81, 53, 53, .12);
  --mint:          #d9f0e3;
  --mint-soft:     #edf8f1;

  --shadow-sm: 0 1px 2px rgba(81,53,53,.05), 0 2px 8px rgba(81,53,53,.05);
  --shadow-md: 0 4px 12px rgba(81,53,53,.07), 0 12px 32px rgba(81,53,53,.07);
  --shadow-lg: 0 8px 24px rgba(81,53,53,.10), 0 28px 64px rgba(81,53,53,.12);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 40px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans TC", "Hiragino Sans", "Microsoft JhengHei", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:      #ff9095;
    --accent-deep: #ff9095;
    --text:        #f5e6e6;
    --text-muted:  #d4b8b8;
    --text-faint:  #a08888;
    --bg:          #1a1616;
    --surface:     #2a2222;
    --surface-2:   #353030;
    --border:      rgba(245,230,230,.13);
    --mint:        #21332b;
    --mint-soft:   #1d2822;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 28px 64px rgba(0,0,0,.45);
  }
}

/* ─── base ─── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -.015em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.45rem); }
p  { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px;
}
.lede { font-size: clamp(1.02rem, 1.9vw, 1.18rem); color: var(--text-muted); }

/* ─── button ─── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent-deep); color: #fff;
  font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: 999px; padding: 11px 22px; font-size: .95rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-deep) 32%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-deep) 42%, transparent); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 9px 18px; font-size: .875rem; }
@media (prefers-color-scheme: dark) {
  .btn { color: #2a1a1a; box-shadow: 0 2px 10px rgba(255,144,149,.25); }
  .btn:hover { box-shadow: 0 8px 22px rgba(255,144,149,.35); }
}

/* ─── store badges ───
   Both families draw edge to edge inside their viewBox, so matching height
   is enough to line them up — the widths differ and that is expected. */
.storebadges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.storebadge { display: inline-flex; border-radius: 9px; transition: transform .18s ease; }
.storebadge img { height: 48px; width: auto; }
a.storebadge:hover  { transform: translateY(-2px); }
a.storebadge:active { transform: translateY(0); }
.storebadge--soon img { opacity: .5; }
.storebadges__soon { font-size: .8rem; color: var(--text-faint); }
@media (max-width: 480px) { .storebadge img { height: 42px; } }

/* ─── nav ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--border); }
/* space-between (not auto-margins on .nav__links) so .brand and .nav__right
   still anchor to the row's own edges — and thus to the shared --pad inset —
   when .nav__links is display:none below 720px. The old auto-margin version
   centered .nav__links by giving it margin-inline:auto; with .nav__links gone
   nothing was left to push .nav__right right, so brand+right clumped at the
   left with the row's right padding sitting empty (visible at ≤720px). */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
/* flex-shrink:0 — without it, a too-narrow row quietly crushes the logo
   toward 0×0 instead of overflowing, which is a worse failure: no scrollbar
   ever appears to signal it, the icon just silently disappears. */
.brand__icon { flex-shrink: 0; border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand__name { font-size: 1.02rem; letter-spacing: -.02em; }

.nav__links { display: flex; gap: 26px; font-size: .9rem; }
.nav__links a { text-decoration: none; color: var(--text-muted); transition: color .18s ease; }
.nav__links a:hover { color: var(--accent-deep); }

.nav__right { display: flex; align-items: center; gap: 12px; }

.langswitch {
  display: flex; background: var(--surface-2); border-radius: 999px;
  padding: 3px; border: 1px solid var(--border);
}
.langswitch button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.langswitch button:hover { color: var(--text); }
.langswitch button.is-active {
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm);
}

/* content (esp. the EN "Download" label, now stacked against 4 language
   buttons) can outgrow this row before any other breakpoint kicks in —
   tighten gaps and drop the wordmark first; the icon alone still links home.
   Four buttons need this earlier than the two this tier was first tuned for,
   so the wordmark now goes here too instead of waiting for a narrower tier. */
@media (max-width: 480px) {
  .nav__inner { gap: 10px; }
  .nav__right { gap: 8px; }
  .langswitch button { padding: 5px 9px; }
  .brand__name { display: none; }
}
/* Under 375px that still isn't enough room for 4 buttons + the pill —
   tighten both further. */
@media (max-width: 374px) {
  .langswitch button { padding: 5px 7px; }
  .nav .btn--sm { padding: 9px 14px; }
}

/* ─── hero ─── */
.hero { position: relative; padding: clamp(48px, 8vw, 92px) 0 clamp(56px, 9vw, 110px); overflow: hidden; }
.hero__glow {
  position: absolute; inset: -30% -20% auto -20%; height: 130%;
  background:
    radial-gradient(52% 46% at 22% 18%, var(--mint) 0%, transparent 62%),
    radial-gradient(46% 42% at 84% 26%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 64%),
    radial-gradient(40% 40% at 62% 82%, color-mix(in srgb, #cc87f5 20%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; gap: clamp(40px, 6vw, 64px);
  grid-template-columns: 1fr; align-items: center;
}
.hero__copy h1 { margin-bottom: 20px; }
.hero__copy .lede { max-width: 33em; }
.hero__actions { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__note { font-size: .85rem; color: var(--text-faint); }

/* phone + polaroids */
.hero__art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
.phone {
  position: relative; z-index: 3;
  width: min(268px, 68vw); aspect-ratio: 828 / 1800;
  background: #000000; padding: 10px; border-radius: 46px;
  box-shadow: 
    0 0 0 1px #1c1c1e,
    0 0 0 4px #787774,
    0 0 0 5px #1c1c1e,
    var(--shadow-lg);
}
.phone::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 25px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}
.phone::after {
  content: "";
  position: absolute;
  top: 24px;
  right: calc(50% - 31px);
  width: 11px;
  height: 11px;
  background: #111;
  border-radius: 50%;
  z-index: 3;
  box-shadow: inset -1px -1px 2px rgba(255,255,255,0.2), 0 0 1px rgba(0,0,0,0.8);
}
.phone picture { display: block; width: 100%; height: 100%; }
.phone img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 36px; display: block; }
.phone--sm { width: min(214px, 58vw); border-radius: 38px; padding: 8px; }
.phone--sm::before { top: 14px; width: 66px; height: 20px; border-radius: 11px; }
.phone--sm::after { top: 19px; right: calc(50% - 25px); width: 9px; height: 9px; }
.phone--sm img { border-radius: 30px; }

/* Both sit *behind* the phone so they only ever peek out past its edge —
   never over the screenshot, at any viewport width. */
.polaroid {
  position: absolute; z-index: 1;
  width: 120px; padding: 10px 10px 27px;
  background: #fbf7f0; border-radius: 5px;
  box-shadow: var(--shadow-md);
}
.polaroid__photo { display: block; aspect-ratio: 1; border-radius: 3px; background: linear-gradient(150deg, var(--c1), var(--c2)); }

@keyframes float-a {
  0%, 100% { transform: rotate(-14deg) translateY(0px); }
  50% { transform: rotate(-15deg) translateY(-14px); }
}
@keyframes float-b {
  0%, 100% { transform: rotate(12deg) translateY(0px); }
  50% { transform: rotate(13deg) translateY(-16px); }
}

.polaroid--a { 
  transform: rotate(-14deg); left: max(0px, calc(50% - 208px)); top: 9%; 
  animation: float-a 6.5s ease-in-out infinite;
}
.polaroid--b { 
  transform: rotate(12deg); right: max(0px, calc(50% - 208px)); bottom: 6%; 
  animation: float-b 7.5s ease-in-out infinite;
  animation-delay: -3s;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
  .hero__art { min-height: 520px; }
  .phone { width: 292px; border-radius: 50px; padding: 11px; }
  .phone::before { top: 19px; width: 90px; height: 27px; border-radius: 15px; }
  .phone::after { top: 26px; right: calc(50% - 34px); width: 12px; height: 12px; }
  .phone img { border-radius: 39px; }
  .polaroid { width: 142px; padding: 11px 11px 31px; }
  .polaroid--a { left: max(0px, calc(50% - 232px)); }
  .polaroid--b { right: max(0px, calc(50% - 232px)); }
}

/* very narrow: the phone eats the whole column, so drop the decoration */
@media (max-width: 480px) {
  .polaroid { display: none; }
}

/* ─── values ─── */
.values { padding: clamp(20px, 4vw, 36px) 0 clamp(48px, 7vw, 80px); }
.values__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.vcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vcard h3 { margin-bottom: 10px; }
.vcard p { color: var(--text-muted); font-size: .95rem; }

.chip {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 15px; margin-bottom: 18px;
  background: linear-gradient(140deg, var(--g1), var(--g2));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--g1) 40%, transparent);
}
.chip svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip--sm { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 15px; }
.chip--sm svg { width: 21px; height: 21px; }
.chip--lg { width: 62px; height: 62px; border-radius: 19px; margin: 0 auto 22px; }
.chip--lg svg { width: 30px; height: 30px; }

/* ─── section head ─── */
.shead { max-width: 34em; margin-bottom: clamp(36px, 5vw, 60px); }
.shead h2 { margin: 0; text-wrap: balance; }

/* ─── features ─── */
.features { 
  position: relative; overflow: hidden;
  padding: clamp(52px, 8vw, 96px) 0; background: var(--surface); border-block: 1px solid var(--border); 
}
.features::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 90% 10%, color-mix(in srgb, var(--mint) 50%, transparent) 0%, transparent 60%),
    radial-gradient(70% 70% at 10% 45%, color-mix(in srgb, #cc87f5 15%, transparent) 0%, transparent 60%),
    radial-gradient(80% 70% at 85% 90%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.features > .wrap { position: relative; z-index: 1; }
.frow {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(26px, 3.4vw, 38px) 0;
}
.frow + .frow { border-top: 1px solid var(--border); }
.frow__shot { margin: 0; display: flex; justify-content: center; }
.frow__copy h3 { margin-bottom: 12px; }
/* :not(.tag) — otherwise this (0,1,1) outranks .tag (0,1,0) and the tag
   loses its accent colour to --text-muted */
.frow__copy p:not(.tag) { color: var(--text-muted); max-width: 34em; }
.tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}
@media (min-width: 820px) {
  .frow { grid-template-columns: 1fr 1fr; }
  .frow--flip .frow__copy { order: 2; }
  .frow--flip .frow__shot { order: 1; }
}

/* ─── more ─── */
.more { padding: clamp(52px, 8vw, 96px) 0; }
.mgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.mcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 24px 22px 26px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mcard h3 { font-size: 1.03rem; margin-bottom: 7px; }
.mcard p { color: var(--text-muted); font-size: .9rem; line-height: 1.65; }

/* ─── privacy ─── */
.privacy { padding: 0 0 clamp(52px, 8vw, 96px); }
.pbox {
  text-align: center; max-width: 660px; margin-inline: auto;
  background: linear-gradient(165deg, var(--mint-soft), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 52px);
  box-shadow: var(--shadow-sm);
}
.pbox h2 { margin-bottom: 16px; text-wrap: balance; }
/* balance keeps CJK from stranding one character on the last line */
.pbox > p { color: var(--text-muted); text-wrap: pretty; max-width: 44em; margin-inline: auto; }
.fineprint { margin-top: 18px !important; font-size: .82rem; color: var(--text-faint); line-height: 1.6; text-wrap: pretty; }

/* ─── cta ─── */
.cta { padding: clamp(56px, 9vw, 104px) 0; background: var(--surface); border-top: 1px solid var(--border); }
.cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__icon { border-radius: 21px; box-shadow: var(--shadow-md); margin-bottom: 26px; }
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--text-muted); margin-bottom: 30px; max-width: 30em; }
/* centred layout: the note drops to its own line so the badge pair stays on axis */
.cta .storebadges { justify-content: center; }
.cta .storebadges__soon { flex-basis: 100%; text-align: center; }

/* ─── footer ─── */
.foot { padding: 40px 0; border-top: 1px solid var(--border); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.foot__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .93rem; }
.foot__brand img { border-radius: 7px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .87rem; }
.foot__links a { color: var(--text-muted); text-decoration: none; transition: color .18s ease; }
.foot__links a:hover { color: var(--accent-deep); }
.foot__copy { margin-left: auto; font-size: .82rem; color: var(--text-faint); }

/* ─── reveal ───
   Gated on .js-anim (set by app.js) so the page is fully visible
   if JavaScript never runs. */
.js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─── small screens ─── */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .foot__copy { margin-left: 0; }
  .foot__links { justify-content: flex-start; }
}