/* Luwi 官网宣传页 — 棱镜背景 / 滚动翻页 / 版面
 *
 * 三件事:
 *   ① 棱镜: 固定在视口上的一层, 几片暖色光斑 + blur + screen 混合。内容滚动时只有字在动,
 *      光停在背景上 —— 参照 QQ 下载页那种感觉, 色相全部留在暖侧 (不碰 200–280)。
 *   ② 滚动翻页: 每一幕是一个 100svh 的 snap 点。基础态只做 proximity —— 小屏上强制吸附
 *      会把一屏装不下的内容直接截掉, 那是丢内容而不是设计; 大屏且够高时才改 mandatory。
 *   ③ 版面: 封面 → 宣传片 → 四件事 (bento) → 还改了什么 (dl) → 收尾。
 *
 * 颜色/间距/圆角/字号/时长全部走 token; vmax / % / deg / 100svh 是几何, 不是颜色值。
 * 字一律压在深海上 (ocean-deep / ocean-hover), 光斑只在画面边缘 —— 白字压在天光带上
 * 实测只有 2.86:1, 而 axe 在渐变背景上是看不见这件事的。 */

/* ---------- 海面底色 ---------- */

/* 底色比下载页更沉一档 */
body.promo {
  background-color: var(--color-surface-ocean-abyss);
}

/* ---------- 日落海 ---------- */

/* 背景就是下载页那片「日落入海」: 暖橙天光 → 青绿海平线 → 深海 → 深渊。
   钉在视口上, 翻页时海不动, 只有字在动。 */
.prism {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  pointer-events: none;
}

.prism__sea {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--color-surface-ocean-deep);
  background-image:
    radial-gradient(58% 42% at 50% 6%, color-mix(in oklab, var(--color-surface-ocean-glow) 78%, transparent) 0%, transparent 72%),
    linear-gradient(
      180deg,
      var(--color-surface-ocean-sky) 0%,
      var(--color-surface-ocean-sky) 20%,
      var(--color-surface-ocean-mid) 25%,
      var(--color-surface-ocean-deep) 56%,
      var(--color-surface-ocean-abyss) 100%
    );
  background-repeat: no-repeat;
  background-size: cover;
}
/* 只在上面压一道: 天光是整个背景里最亮的一块, 白字压上去过不去 ——
   压到 30% 左右, 橙色还在, 但已经从"亮带"退成"天光"。 */
/* ---------- 磨砂玻璃 ---------- */

/* 一整块玻璃扣在海面上: 16px 的 backdrop 把海平线揉软 (平滑渐变本身看不出被模糊,
   看得出的是那道被打散的地平线), 再叠一层雾白与斜向反光。玻璃静止, 动的那层在它上面。 */
.prism__glass {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    radial-gradient(
      120% 80% at 50% 0%,
      color-mix(in oklab, var(--color-surface-ocean-foam) 6%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(
      118deg,
      transparent 26%,
      color-mix(in oklab, var(--color-surface-prism-haze) 10%, transparent) 40%,
      transparent 54%,
      color-mix(in oklab, var(--color-surface-prism-rose) 7%, transparent) 72%,
      transparent 88%
    );
  backdrop-filter: blur(var(--blur-lg)) saturate(0.94) brightness(1.02);
  pointer-events: none;
}

/* 噪点: 防止大片渐变出现色带 */
.prism__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 6rem 6rem;
  opacity: 0.06;
  mix-blend-mode: overlay;
}
/* ---------- 光标高光 ---------- */

/* 跟着指针走的暖光, 只改 transform, 在玻璃之上。 */
.prism__glow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 44vmax;
  block-size: 44vmax;
  margin-block-start: -22vmax;
  margin-inline-start: -22vmax;
  border-radius: var(--radius-full);
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--color-surface-prism-haze) 36%, transparent) 0%,
      color-mix(in oklab, var(--color-surface-prism-haze) 10%, transparent) 20%,
      transparent 38%
    ),
    radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--color-surface-prism-amber) 16%, transparent) 0%,
      transparent 72%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-60vmax, -60vmax, 0);
  transition: opacity var(--duration-slow) var(--ease-out);
  will-change: transform;
  pointer-events: none;
}
.prism__glow.is-on { opacity: 1; }



/* ---------- 滚动翻页 ---------- */

html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

/* 大屏 + 够高才强制翻页: 1280x800 这种笔电竖着放不下"片头 + 视频 + 说明"还留白,
   强制吸附会把视频下面那行往期入口直接截在屏幕外。736 = 46rem, 给足余量 */
@media (min-width: 64rem) and (min-height: 52rem) {
  html { scroll-snap-type: y mandatory; }
}

.scene {
  position: relative;
  z-index: 1;
  display: grid;
  /* safe: 内容比一屏高时 (窄屏的收尾幕) 从顶部开始排, 不要居中后把标题顶出视口 */
  align-content: safe center;
  justify-items: center;
  gap: var(--space-8);
  min-block-size: 100svh;
  padding-block: var(--space-16) var(--space-12);
  padding-inline: var(--space-4);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* 封面那圈暗晕故意比内容框大, 不裁掉就会把整个文档顶宽 (实测 390 视口撑到 481) */
  overflow: clip;
}

/* 一幕里的内容栏: 标题与正文块共用左边线, 不出现"标题 52rem、卡片 68rem"的错位 */
.scene__inner {
  display: grid;
  gap: var(--space-6);
  inline-size: 100%;
  max-inline-size: 68rem;
}
.scene--film .scene__inner { max-inline-size: 52rem; }

/* 这一版四件事的标题正好压在天光最亮的边上 (实测 2.4~2.5:1), 内容整体下移一档落到海面 */
.scene--four .scene__inner { margin-block-start: 12vh; }

/* 顶栏留在顶上: 翻到第几幕都还能回下载页 */
.promo .topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

/* ---------- 封面 ---------- */

.promo-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-inline-size: 46rem;
  text-align: center;
}

/* 文字底下的暗晕: 棱镜从两侧擦过去, 但不能从字后面透上来。
   压在光斑上的白字实测只有 2.86:1, 而 axe 取的是 background-color, 看不见渐变。
   每一幕的内容块共用这一套 (封面 / 正文三幕 / 收尾), 所以只写一遍。 */
.promo-hero,
.scene__inner,
.end { position: relative; }

.promo-hero::before,
.scene__inner::before,
.end::before {
  content: "";
  position: absolute;
  /* 暗晕铺满内容块本身, 边缘在框内淡出 —— 背景会被裁在元素自己的边框盒里,
     半径超过半个框时边缘就变成一条直线 (收尾那一幕实测过: 出来是一块硬边矩形)。 */
  inset: -8%;
  z-index: -1;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 90%, transparent) 0%,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 58%, transparent) 56%,
    transparent 100%
  );
  pointer-events: none;
}

/* 页脚那排小字单独垫一块暗底 */
.scene--end .sea__foot { position: relative; }
.scene--end .sea__foot::before {
  content: "";
  position: absolute;
  inset: -120% -10%;
  z-index: -1;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 88%, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.promo-hero__eyebrow {
  position: relative;
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
}
/* 这行版号字压在太阳光斑边上, 比正文更靠上; 单独给它一小块暗底, 别拖累整块 hero 的暗晕 */
.promo-hero__eyebrow::before {
  content: "";
  position: absolute;
  inset: -70% -24%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 72%, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.promo-hero__title {
  color: var(--color-text-on-ocean);
  font-size: var(--text-6xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-none);
}

.promo-hero__lead {
  color: var(--color-text-on-ocean);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  max-inline-size: 30ch;
  text-wrap: balance;
}

.promo-hero__sub {
  color: var(--color-text-on-ocean);
  max-inline-size: 42ch;
  text-wrap: balance;
}

.promo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---------- 右侧翻页 ---------- */

/* 五幕各一屏, 右侧一排锚点; 窄屏收起 */
.scene-nav { display: none; }

@media (min-width: 48rem) {
  .scene-nav {
    display: grid;
    gap: var(--space-1);
    position: fixed;
    inset-block-start: 50%;
    inset-inline-end: var(--space-4);
    transform: translateY(-50%);
    z-index: var(--z-sticky);
    padding: var(--space-2);
    background: color-mix(in oklab, var(--color-surface-ocean-abyss) 34%, transparent);
    border: 1px solid var(--color-surface-ocean-foam-soft);
    border-radius: var(--radius-full);
    backdrop-filter: blur(var(--blur-sm));
  }
}

.scene-nav__dot {
  position: relative;
  display: grid;
  place-items: center;
  /* 显式给色: 全局 a:hover 会把颜色改成品牌 700, 在深底上只有 2.2:1 (门槛实测) */
  color: var(--color-text-on-ocean);
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  border-radius: var(--radius-full);
}
.scene-nav__dot::before {
  content: "";
  display: block;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-text-on-ocean);
  opacity: var(--opacity-muted);
  transition-property: opacity, transform;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.scene-nav__dot:hover { color: var(--color-text-on-ocean); }
.scene-nav__dot:hover::before,
.scene-nav__dot.is-active::before { opacity: 1; }
.scene-nav__dot.is-active::before { transform: scaleY(2.4); }


/* 下载按钮悬停时并排弹两张码: 镜像 / 直链 */
.qr--pair { display: flex; gap: var(--space-3); align-items: flex-start; }
.qr__item { display: grid; justify-items: center; gap: var(--space-2); }

/* ---------- 每一幕的标题块 ---------- */

.scene__head {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-inline-size: 52rem;
}




.scene__title {
  color: var(--color-text-on-ocean);
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}

.scene__lead {
  color: var(--color-text-on-ocean);
  max-inline-size: 46ch;
}

/* ---------- 宣传片 ---------- */

.film {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  inline-size: 100%;
}

/* 很素的一层玻璃框, 全页只此一处 */
.film__frame {
  inline-size: 100%;
  padding: var(--space-2);
  background: color-mix(in oklab, var(--color-surface-card) 8%, transparent);
  border: 1px solid var(--color-surface-ocean-foam-soft);
  border-radius: var(--radius-3xl);
  box-shadow:
    var(--shadow-2xl),
    inset 0 1px 0 color-mix(in oklab, var(--color-surface-ocean-foam) 18%, transparent);
  backdrop-filter: blur(var(--blur-md));
}

.film__video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--size-aspectRatio-video);
  background: var(--color-surface-ocean-abyss);
  border-radius: var(--radius-2xl);
}

.film__cap {
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.film__note {
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
  max-inline-size: 52ch;
  text-align: center;
}

.film__archive {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition-property: color, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
/* 海面链接必须显式写 hover 色 (全局 a:hover 会抢成品牌 700) */
.film__archive:hover { background: var(--color-surface-ocean-hover); color: var(--color-text-on-ocean); }

/* ---------- 四件事 (bento: 一块大的带三块小的, 不做等大三卡) ---------- */

.four {
  display: grid;
  gap: var(--space-3);
  inline-size: 100%;
}

.four__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface-ocean-hover);
  border: 1px solid var(--color-surface-ocean-foam-soft);
  border-radius: var(--radius-2xl);
  /* 上沿一道 1px 的亮边 + 一层极浅的外阴影: 卡片像一块放进凹槽的玻璃板, 不是贴上去的色块 */
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--color-surface-ocean-foam) 14%, transparent),
    var(--shadow-sm);
}

.four__icon {
  inline-size: var(--size-icon-lg);
  block-size: var(--size-icon-lg);
  color: var(--color-surface-ocean-glow);
}

.four__title {
  color: var(--color-text-on-ocean);
  font-size: var(--text-xl);
}

.four__body {
  color: var(--color-text-on-ocean);
  max-inline-size: 42ch;
}

.four__meta {
  margin-block-start: var(--space-1);
  color: var(--color-surface-ocean-glow);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

/* ---------- 还改了什么 ---------- */

.notes {
  position: relative;
  display: grid;
  inline-size: 100%;
}

/* 这张清单横向铺得比标题宽, 落在内容块暗晕的最外圈; 单独再兜一层,
   否则光标高光移到清单上时, 最后几行会掉到 3.7:1 (实测) */
.notes::before {
  content: "";
  position: absolute;
  inset: -40% -8%;
  z-index: -1;
  background: radial-gradient(
    ellipse 34rem 17rem at 50% 50%,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 92%, transparent) 0%,
    color-mix(in oklab, var(--color-surface-ocean-abyss) 62%, transparent) 56%,
    transparent 100%
  );
  pointer-events: none;
}

.notes__row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-surface-ocean-foam-soft);
}
.notes__row:last-child { border-block-end: 1px solid var(--color-surface-ocean-foam-soft); }

.notes__term {
  color: var(--color-surface-ocean-glow);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
}

.notes__desc {
  color: var(--color-text-on-ocean);
  max-inline-size: 56ch;
}

.notes__desc code {
  color: var(--color-text-on-ocean);
  font-family: var(--font-mono);
}

/* ---------- 收尾 ---------- */

/* 结尾: 正文与联系方式并排 —— 联系方式若压到正文下面, 整块会被顶高、标题就压到天光上了 */
.end__wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
}

.end__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .end__wrap {
    grid-template-columns: minmax(0, 44rem) auto;
    align-items: center;
    gap: var(--space-10);
  }
}

/* 窄屏: 结尾的内容比一屏高, 靠 safe center 从顶部排会顶到天光上; 直接给它一个下沿起点 */
@media (max-width: 63.99rem) {
  .scene--end { align-content: start; padding-block-start: 24vh; }
  /* 窄屏的天光占 20% 高, 12vh 的下移不够 (实测四件事 2.53:1 / 还改了什么 2.29:1) */
  .scene--four .scene__inner,
  .scene--notes .scene__inner { margin-block-start: 22vh; }
}

.end__qq {
  inline-size: 9rem;
  block-size: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.end__contact-text {
  display: grid;
  gap: var(--space-1);
  text-align: start;
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
}

.end__contact-text a { color: var(--color-text-on-ocean); }
.end__contact-text a:hover { color: var(--color-text-on-ocean); }

.scene--end { grid-template-rows: 1fr auto; }

.end {
  display: grid;
  align-self: center;
  justify-items: center;
  gap: var(--space-4);
  max-inline-size: 44rem;
  text-align: center;
}

.end__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.end__meta {
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
}

/* ---------- 宽屏 ---------- */

@media (min-width: 48rem) {
  .scene { padding-block: var(--space-16) var(--space-12); padding-inline: var(--space-8); }
  .scene__title { font-size: var(--text-4xl); }
}

@media (min-width: 60rem) {
  .promo-hero__title { font-size: var(--text-7xl); }
  .promo-hero__lead { font-size: var(--text-2xl); }
  .four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .four__item--lead { grid-column: span 2; padding: var(--space-8); }
  .four__item--wide { grid-column: span 2; }
  .four__item--lead .four__title { font-size: var(--text-3xl); }
  .notes__row { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
}

@media (min-width: 80rem) {
  .scene__title { font-size: var(--text-5xl); }
}

/* 矮屏 (1280x800 这种笔电、横放的手机): 视频再小一档, 否则片名下面那行往期入口会被推到折叠线外 */
@media (max-height: 52rem) {
  .scene--film .scene__inner { max-inline-size: 44rem; }
}