/* Saudade · 推广页
   色值全部取自 iOS 工程 Theme.swift，与 App 同源：
   纸 #F2F0EA / 纸边墨 #3F3D38 / 数码管 #E8F1F6 / 底色 #08090B */

:root{
  --paper: #F2F0EA;
  --paper-frame: #E9E6DF;
  --paper-ink: #3F3D38;
  --paper-ink-dim: #6F6B63;
  --paper-ink-faint: #A29D94;

  --ink: #EEF2F5;
  --ink-dim: #A0A8B2;
  --ink-faint: #7C8590;
  --hairline: rgba(255,255,255,.10);
  --silver: #E8F1F6;

  /* 由 sky-boot.js / main.js 按当前时刻改写 */
  --sky-top: #101527;
  --sky-bottom: #070910;
  --page: #070809;

  --gutter: clamp(20px, 5.2vw, 60px);
  --maxw: 1160px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  /* 相纸字幕的手写体，App 用同一份 Pacifico（SIL OFL 1.1，见 assets/fonts/OFL.txt） */
  --hand: "Pacifico", "Snell Roundhand", "Segoe Script", cursive;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@font-face{
  font-family:"Pacifico";
  src:url("assets/fonts/Pacifico-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

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

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

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

.skip{
  position:fixed; left:-9999px; top:0; z-index:99;
  background:var(--paper); color:var(--paper-ink);
  padding:10px 16px; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

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

/* ── 通用字级 ───────────────────────────────────────────── */

.kicker{
  margin:0;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.26em;
  color:var(--ink-faint);
  font-weight:500;
}

h1,h2{ margin:0; font-weight:300; }

h1{
  font-size:clamp(42px, 7.4vw, 88px);
  line-height:1.04;
  letter-spacing:-.015em;
}

h2{
  font-size:clamp(26px, 3.6vw, 42px);
  line-height:1.28;
  letter-spacing:-.005em;
}

.lede{
  text-wrap:pretty;
  margin:22px 0 0;
  font-size:clamp(15px, 1.6vw, 17.5px);
  line-height:2;
  color:var(--ink-dim);
  max-width:32em;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.sec__text p:not(.kicker):not(.fine){
  text-wrap:pretty;
  color:var(--ink-dim);
  font-size:15.5px;
  line-height:2.05;
  max-width:30em;
}

.fine{
  margin-top:20px;
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--ink-faint);
}

/* ── 首屏 ───────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  padding-bottom:clamp(28px, 5vw, 56px);
}

.hero__sky{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--sky-top) 0%, transparent 62%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 68%, var(--page) 100%);
  transition:background 2s ease-in-out;
}

.hero__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:clamp(22px, 4vw, 40px);
}

.mark{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--silver);
}
.mark__icon{
  width:56px;
  height:56px;
  border-radius:13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.5);
}
.mark__word{
  font-size:15px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:300;
  color:var(--ink);
  opacity:.86;
}

.now{
  display:flex;
  align-items:center;
  gap:12px;
}
.now__kicker{
  font-size:10.5px;
  letter-spacing:.26em;
  color:var(--ink-faint);
}
.led{ height:34px; }
.led svg{
  display:block;
  height:100%;
  width:auto;
  filter:drop-shadow(0 0 4px rgba(232,241,246,.32));
}
.led .seg{ fill:rgba(255,255,255,.055); transition:fill .18s linear; }
.led .seg.on{ fill:var(--silver); }

.hero__body{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:center;
  gap:clamp(28px, 5vw, 72px);
  padding-block:clamp(40px, 8vh, 96px) clamp(20px, 4vh, 48px);
}

.hero__copy{ max-width:37rem; }
.hero__copy .kicker{ margin-bottom:26px; }
.hero__copy .lede{ max-width:26em; }

.hero__cta{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  height:46px;
  padding:0 26px;
  border-radius:2px;
  background:var(--paper);
  color:var(--paper-ink);
  font-size:13.5px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ transform:translateY(-1px); background:#fff; }
.btn--off{
  background:transparent;
  color:var(--ink-dim);
  border:1px solid var(--hairline);
  cursor:default;
}
.btn--off:hover{ transform:none; background:transparent; }

.btn-note{
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:.02em;
}

.device{
  margin:0;
  justify-self:end;
  width:clamp(190px, 23vw, 292px);
}
.device__frame{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.5),
    0 40px 80px -24px rgba(0,0,0,.85);
  transform:rotate(-1.6deg);
  background:#000;
}
.device__frame img{ width:100%; }

/* 首屏那台「手机」不再用截图：相纸、数码管、页脚都是真 DOM，
   照片每次刷新随机，所以这里只写骨架，内容由 main.js 填 */
.phone__screen{
  position:relative;
  aspect-ratio:430/932;
  background:radial-gradient(130% 60% at 50% 0%, #191C23 0%, #0B0D11 58%, #07080A 100%);
}
/* 顶上那半张：只露下半截，虚着焦 */
.phone__peek{
  position:absolute;
  top:0; left:4%;
  width:74%;
  padding:6px 6px 0;
  background:var(--paper);
  border-radius:0 0 2px 2px;
  filter:blur(.7px);
  box-shadow:0 8px 16px -6px rgba(0,0,0,.7);
}
.phone__peek-photo{ height:34px; overflow:hidden; background:var(--paper-frame); }
.phone__peek-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
.phone__cap--peek{ height:22px; padding:0 2px; opacity:.92; }

/* 往下排的几组：间距 30pt 在 430pt 屏上≈7%，这里按卡片宽度折算成 8.8% */
.phone__list{
  position:absolute;
  top:13.5%; left:4%;
  width:74%;
}
.phone__group{ position:relative; margin-bottom:20px; }
.phone__group:last-child{ margin-bottom:0; }

.phone__paper{
  position:relative;
  padding:8px 8px 0;
  background:var(--paper);
  border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.55);
}
.phone__paper::before,
.phone__paper::after{
  content:"";
  position:absolute;
  left:5px; right:5px; bottom:-5px;
  height:8px;
  border-radius:2px;
  background:#EDEAE3;
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  z-index:0;
}
.phone__paper::after{ left:2px; right:2px; bottom:-10px; background:#E7E4DB; }
.phone__paper > *{ position:relative; z-index:1; }

.phone__photo{ overflow:hidden; background:var(--paper-frame); }
.phone__photo img{ display:block; width:100%; height:auto; }
.phone__cap{
  height:29px;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--hand);
  font-size:9px;
  line-height:1;
  color:var(--paper-ink);
  white-space:nowrap;
  overflow:hidden;
}
.phone__cap i{ font-style:normal; color:rgba(162,157,148,.55); }
.phone__cap span:last-child{ color:var(--paper-ink-dim); }
.phone__badge{
  position:absolute;
  top:6px; left:6px;
  z-index:2;
  padding:2px 5px;
  border-radius:7px;
  background:rgba(8,9,11,.5);
  color:rgba(255,255,255,.86);
  font-size:7px;
  letter-spacing:.6px;
}
/* 数码管挂在第一组右边，与卡片垂直居中 */
.phone__led{
  position:absolute;
  left:104%;
  top:50%;
  transform:translateY(-50%);
  width:14%;
}
.phone__led svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 3px rgba(232,241,246,.3)); }
.phone__led .seg{ fill:rgba(255,255,255,.055); }
.phone__led .seg.on{ fill:var(--silver); }
.phone__foot{
  position:absolute;
  left:0; right:0; bottom:3.5%;
  text-align:center;
  font-size:6px;
  letter-spacing:.2em;
  color:rgba(238,242,245,.5);
}

.shot-paper{
  padding:9px 9px 0;
  background:var(--paper);
  border-radius:2px;
}
.shot-paper__photo{ overflow:hidden; background:var(--paper-frame); }
.shot-paper__photo img{ display:block; width:100%; height:auto; }
.shot-paper__cap{
  height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--hand);
  font-size:12px;
  line-height:1;
  color:var(--paper-ink);
  white-space:nowrap;
  overflow:hidden;
}
.shot-paper__cap i{ font-style:normal; color:rgba(162,157,148,.55); }
.shot-paper__cap span:last-child{ color:var(--paper-ink-dim); }
.cta__shot--a{ transform:rotate(-2.4deg) translateY(10px); }
.cta__shot--b{ transform:rotate(2.4deg) translateY(-6px); }

/* ── 段落骨架 ───────────────────────────────────────────── */

.sec{
  padding-block:clamp(84px, 12vw, 156px);
  border-top:1px solid var(--hairline);
}
.sec__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(36px, 6vw, 88px);
  align-items:center;
}
.sec__head{
  max-width:44rem;
  margin-bottom:clamp(40px, 6vw, 72px);
}
.sec__narrow{ max-width:var(--maxw); }
.sec .kicker + h2{ margin-top:20px; }

/* ── 应用介绍 ───────────────────────────────────────────── */

.sec--intro{ border-top:none; padding-top:clamp(64px, 9vw, 120px); }

.intro__lead{
  text-wrap:pretty;
  margin-top:24px;
  font-size:clamp(19px, 2.2vw, 24px);
  line-height:1.95;
  font-weight:300;
  color:var(--ink);
  letter-spacing:.005em;
  max-width:23em;
}
.intro__p{
  margin-top:clamp(20px, 2.6vw, 28px);
  font-size:clamp(14.5px, 1.5vw, 16px);
  line-height:2.1;
  color:var(--ink-dim);
  max-width:34em;
}
.intro__p .link{ font-size:inherit; color:var(--ink); border-color:rgba(255,255,255,.24); }

/* ── 01 相纸堆 ──────────────────────────────────────────── */

.deck-wrap{ display:flex; flex-direction:column; align-items:center; }

.deck{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  touch-action:pan-y;
  cursor:grab;
  outline:none;
}
.deck:active{ cursor:grabbing; }
.deck:focus-visible{ outline:1px solid var(--paper-ink-faint); outline-offset:12px; }

.deck__stack{
  position:relative;
  width:clamp(220px, 30vw, 344px);
  height:380px;   /* 起始占位，JS 按当前顶张的高度改写 */
  transition:height .44s var(--ease);
}

.sheet{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  margin:0;
  padding:11px 11px 0;
  background:var(--paper);
  border-radius:2px;
  /* 只留贴纸级的接触阴影：页面底色本来就接近纯黑，
     再叠一层大范围投影只会把下面那两张纸边压成灰条。 */
  box-shadow:0 1px 2px rgba(0,0,0,.55);
  will-change:transform;
  transition:bottom .44s var(--ease), transform .44s var(--ease), opacity .3s var(--ease);
  user-select:none;
  -webkit-user-drag:none;
}
.sheet img{ pointer-events:none; }

.sheet__photo{
  background:var(--paper-frame);
  overflow:hidden;
}
/* 相纸底部那行字，与 PolaroidSheet.SheetCaption 一致：
   Pacifico 13 / 字距 .2 / 日期·地名 7 / 左缘对齐照片左缘（相纸已留 11 内边距） */
.sheet__cap{
  height:41px;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--hand);
  font-size:13px;
  line-height:1;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
}
.cap-date{ color:var(--paper-ink); }
.cap-dot{ color:rgba(162,157,148,.5); }
.cap-place{ color:var(--paper-ink-dim); overflow:hidden; text-overflow:ellipsis; }

.deck__foot{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ink-faint);
}
.deck__count{ font-variant-numeric:tabular-nums; color:var(--ink-dim); }
.deck__hint::before{
  content:"";
  display:inline-block;
  width:26px;
  height:1px;
  margin-right:10px;
  vertical-align:middle;
  background:var(--hairline);
}

/* ── 02 天光色带 ────────────────────────────────────────── */

.strip{
  position:relative;
  height:clamp(120px, 17vw, 176px);
  border-radius:2px;
  overflow:hidden;
  background-image:var(--grad-top, #101527);
}
.strip::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grad-bottom, #070910);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 100%);
}
.strip__key{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.055);
}
.strip__now{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--silver);
  box-shadow:0 0 12px rgba(232,241,246,.55);
  pointer-events:none;
  z-index:2;
}

.strip__axis{
  position:relative;
  height:22px;
  margin-top:12px;
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.strip__axis span{ flex:0 0 auto; }

.strip__read{
  margin-top:26px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--ink-faint);
}
.strip__read b{ color:var(--ink-dim); font-weight:400; font-variant-numeric:tabular-nums; }

/* ── CTA ────────────────────────────────────────────────── */

.sec--cta{ border-top:1px solid var(--hairline); }

.cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px, 3vw, 40px);
}
.cta__box{ text-align:center; }
.cta__box h2{ font-size:clamp(24px, 3vw, 34px); }
.cta__fine{ margin-top:18px; }
.cta__row{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.link{
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link:hover{ color:var(--ink); border-color:rgba(255,255,255,.4); }

.cta__shot{
  margin:0;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.8));
}
.cta__icon{
  display:block;
  width:56px;
  height:56px;
  margin:0 auto 22px;
  border-radius:13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -8px rgba(0,0,0,.85);
}

/* ── 页脚 ───────────────────────────────────────────────── */

.foot{
  border-top:1px solid var(--hairline);
  padding-block:44px 56px;
}
.foot__in{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 32px;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-faint);
}
.foot__brand{
  margin:0;
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-right:auto;
}
.foot__meta{ margin:0; }
.foot a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.foot a:hover{ border-color:rgba(255,255,255,.3); }

/* ── 入场 ───────────────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ── 响应式 ─────────────────────────────────────────────── */

@media (max-width:900px){
  .hero__body{
    grid-template-columns:1fr;
    justify-items:start;
    padding-block:clamp(32px, 6vh, 64px) 32px;
  }
  .device{
    width:min(62vw, 260px);
    justify-self:center;
    margin-top:8px;
  }
  .sec__grid{ grid-template-columns:1fr; }
  .deck-wrap{ margin-top:12px; }
  .cta{ grid-template-columns:1fr; }
  .cta__shot{ display:none; }
  .cta__box{ text-align:left; }
  .cta__icon{ margin:0 0 20px; }
  .cta__row{ align-items:flex-start; }
  .led{ height:28px; }
  .foot__in{ flex-direction:column; gap:8px; }
  .foot__brand{ margin-right:0; }
}

@media (max-width:520px){
  h1{ font-size:clamp(38px, 11vw, 52px); }
  .now__kicker{ display:none; }
  .deck__stack{ width:min(78vw, 320px); }
}

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