/* ============================================================================
 * base.css · 复位 / 视口 / 安全区 / 屏状态机 / 通用按钮
 * ========================================================================== */

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

/* ---------------------------------------------------------------------------
 * 字体：OPPO Sans 3.0 子集（Regular / Medium / Bold）
 * Penpot 侧用的是同一个 fontId，所以设计稿里的 400 / 500 与这里一一对应。
 * weight 用区间声明（500-600 / 700-900），避免浏览器给 500 的字重合成加粗。
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "OPPOSans";
  src: url("../fonts/OPPOSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}@font-face {
  font-family: "OPPOSans";
  src: url("../fonts/OPPOSans-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "OPPOSans";
  src: url("../fonts/OPPOSans-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #eef2fa;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; color: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }

/* ★ `hidden` 必须真的隐藏。
   `img { display: block }` 是**作者样式**，优先级高于浏览器 UA 的
   `[hidden] { display: none }` —— 于是所有带 hidden 的 <img> 其实都在显示：
     · P3 那个还没有 src 的预览图 → 渲染成一张 **broken image**（用户报的「选照片后出现坏图」）
     · P4 的静帧兜底图 → 一直**盖在视频上面**（视频在播，但看到的是一张静止图）
   这一行是这类问题的标准修法。 */
[hidden] { display: none !important; }

/* 全站图片一律按 EXIF 方向渲染。现代浏览器默认就是它，这里显式钉死是为了
   「手机竖拍照片上传后转了 90°」这类问题不因默认值变化而复现。 */
img { image-orientation: from-image; }

/* 标题类元素的浏览器默认 margin 必须清掉。
   ★ 这一条是量出来的：`.up-sub` 实测比设计低 **18.09px**，正好是 h1 的
     默认 margin-block-end `0.67em × 27px = 18.09px` —— 只 reset `p` 是不够的。 */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* ---------------------------------------------------------------------------
 * 舞台（H5 Design Stage）
 *
 * 坐标系就是 Penpot 的正式移动端画板 **390 × 844.5**（--stage-w / --stage-h）。
 * 屏内所有元素都用**设计稿的绝对坐标**摆放，不再逐个元素写弹性留白或 media query。
 * 装不下时只做一件事：把整个舞台等比缩小（--stage-k，由 layout.js 算）。
 *
 * 两层结构的理由：
 *   .stage        布局盒 = **缩放后**的尺寸（宽高都乘 k）
 *   .stage__inner 设计尺寸 390×844.5，transform: scale(k)
 * 这样布局盒和视觉盒永远一致 —— 不会出现「子元素比屏幕大」导致的溢出、
 * 也不会出现「overflow:hidden 把投影切掉」这类连锁问题。
 *
 * 底部/顶部的安全区在 .screen 上一次性留出（padding），
 * 于是「刘海不压内容、Home Indicator 不压按钮」对五个屏同时成立。
 * ------------------------------------------------------------------------- */
.app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;

  /* 设计画板 */
  --stage-w: 390;
  --stage-h: 844.5;
  /* 由 layout.js 写：min(可用宽/--stage-w, 可用高/--stage-h)
     ★ 只给**桌面 9:16 手机框**用。手机端不再整体等比缩放。 */
  --stage-k: 1;

  /* ── 短屏重分配系统（C02 short viewport）──────────────────────────────
     手机端不再「整页等比缩小」，而是按可用高度**重分配垂直空间**：
       1) 先压掉无效间隙 / 过大的 gap         → --gap-scale
       2) 间隙压到底还不够，才适度缩主视觉      → --visual-k
       3) 文字与按钮**完全不参与**这两个缩放（保持可读 / 可点）
     --usable-h 由 layout.js 用 100dvh + visualViewport 同步写入。 */
  --usable-h: 100dvh;
  --gap-scale: 1;
  --visual-k: 1;

  /* 手机端：设计里的 `h5背景` 直接**整屏铺**（cover），内容舞台叠在上面。
     这样屏幕比例接近 9:16 时整张背景图完整可见、没有任何接缝；
     而在 390×844.5 设计口径下，cover 会把两侧各裁 42.5px —— 与设计稿一致。 */
  background-image: url("../img/bg-app.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #e8eef9;
}

/* PC / 宽屏：背景换成「桌面」（用设计 app-bg-gradient 的色标），
   手机舞台自己带设计背景 —— 于是舞台边界是**有意为之**的手机轮廓。
   这是全站唯一的一处 media query，切的是「手机模式 / 桌面模式」，不是逐元素补丁。 */
@media (min-width: 700px) {
  .app {
    background-image: none;
    background: linear-gradient(180deg, #f7f9fe 0%, #e8eef9 46%, #d9e3f6 100%);
  }
  /* PC 上背景图与投影都交给**风层**（.wind）去画 —— 见 wind.css 的同名媒体查询。
     这里保持透明，风墨迹才有地方显现；内容仍然在风层之上。 */
  .stage__inner {
    background-image: none;
    box-shadow: none;
  }

  /* ---- 可选：严格 9:16 手机框（?pcFrame=916）---------------------------------
     默认的 PC 舞台取**设计画板比例** 390:844.5（≈9:19.5）—— 既不裁也不拉伸，
     内容正好铺满。要求里点名的是 9:16，而画板比 9:16 更竖长：
     若把内容塞进严格 9:16 的框、还要「不裁不拉伸」，就必然空出两侧约 18% 的边。
     这个开关就是那种模式：外框 9:16，设计画板在其中水平居中，两侧用同一张
     背景图铺满（无缝）。两种模式都不裁、不拉伸，区别只是「要不要那圈边」。 */
  .app[data-pc-frame="916"] .stage {
    display: grid;
    place-items: center;
    width: calc(var(--stage-h) * var(--stage-k) * 9 / 16 * 1px);
    height: calc(var(--stage-h) * var(--stage-k) * 1px);
    background-image: url("../img/bg-app.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: 0 24px 70px rgba(24, 40, 80, 0.16);
  }
  .app[data-pc-frame="916"] .stage__inner {
    position: relative;
    left: auto;
    top: auto;
    transform: scale(var(--stage-k));
    transform-origin: center center;
    background-image: none;
    box-shadow: none;
  }
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: start center;   /* 手机：舞台自己撑满，不需要再居中 */
  /* 安全区只在这里留一次；舞台整体落在安全区内 */
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-screen) var(--ease-out), visibility 0s linear var(--t-screen);
}
.screen[data-active] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-screen) var(--ease-out), visibility 0s;
}

/* 手机：舞台 = 满宽（最多 390）× 真实可用高。**不缩放**。 */
.stage {
  position: relative;
  flex: 0 0 auto;
  width: min(calc(var(--stage-w) * 1px), 100%);
  height: 100%;
  /* 不要 overflow:hidden —— P5 海报的投影要溢到舞台外 */
}
/* 舞台内部是一个纵向弹性列：DOM 顺序 = 视觉顺序（五个屏都成立）。
   顶部区、主视觉、底部区依次排布；
   底部区用 margin-top:auto 顶到下方，中间空间自动让给主视觉。 */
.stage__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 桌面 / 宽屏：仍然是「居中的 9:16 手机框」，内部按设计画板等比缩放。
   短屏那套 CSS 变量在桌面一律为 1，互不干扰。 */
@media (min-width: 700px) {
  .stage {
    width: calc(var(--stage-w) * var(--stage-k) * 1px);
    height: calc(var(--stage-h) * var(--stage-k) * 1px);
  }
  .stage__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--stage-w) * 1px);
    height: calc(var(--stage-h) * 1px);
    transform: scale(var(--stage-k));
    transform-origin: top left;
    display: block;          /* 桌面沿用设计稿的绝对坐标 */
  }
}


/* 屏内元素的统一入场：`.rise` 在自己所在的屏激活后逐个浮上来 */
.rise {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: var(--rise-delay, 0ms);
}
.screen[data-active] .rise { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
 * 通用：顶栏（返回 / 回到主页）
 * ------------------------------------------------------------------------- */
/* 顶栏：设计 (22,28)，高 34 —— 绝对定位在舞台坐标系里 */
.topbar {
  position: absolute;
  left: 22px;
  top: 28px;
  height: 34px;
  z-index: 3;
  display: flex;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  transition: transform 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.pill:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.5); }
.pill__icon { flex: 0 0 auto; }
.pill__text {
  font-size: var(--fs-pill);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* 返回：设计 pill 69.92×34 @(22,28)；雪佛龙中心线盒 (39.375,40.625) 4.375×8.75、描边 1.6。
   ★ icon-back.svg 的导出尺寸是 **12.375×16.75**（viewBox 从 -4,-4 起，Penpot 为描边留了白），
     所以盒子左上角 = (39.375-4, 40.625-4) = (35.375,36.625) → pill 内 (13.375, 8.625)。
     上一版按 4.375×8.75 渲染，箭头只剩应有的 35%（用户看到的「箭头过小」）。
     pill 内 flex 垂直居中正好给出 8.625 = (34-16.75)/2 ✓ */
/* ★ padding 要减掉 1px 边框（box-sizing: border-box，内容从边框内侧起算），
   否则图标整体右移 1px —— 实测 14.375 而非 13.375 */
.pill--back { padding: 0 15px 0 12.375px; gap: 4.25px; }
.pill--back .pill__icon { width: 12.375px; height: 16.75px; }

/* 回到主页：设计 95×34，图标 9.625×9.975 @ 左 15.188，文字顶左 32 */
.pill--home { padding: 0 13px 0 14.188px; gap: 7.187px; }   /* 同样减 1px 边框 */
.pill--home .pill__icon { width: 9.625px; height: 9.975px; }

/* OnePlus 组合标：设计 101×24，居中 */
.brand {
  flex: 0 0 auto;
  width: 101px;
  height: 24px;
}
.brand img { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------------
 * 通用：CTA
 * 设计：竖向渐变 #9cbdfa → #032a8e，圆角 4，投影 0 22 46 / .36
 * ------------------------------------------------------------------------- */
.cta {
  flex: 0 0 auto;
  height: 54px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand-ink) 100%);
  box-shadow: var(--sh-cta);
  color: var(--ink-invert);
  font-size: var(--fs-cta);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-btn);
  transition: transform 0.16s var(--ease-out), opacity 0.2s linear, box-shadow 0.2s linear;
}
.cta:active:not([disabled]) { transform: scale(0.975); }

.cta[disabled],
.cta[aria-disabled="true"] {
  background: var(--disabled-bg);
  box-shadow: none;
  color: var(--disabled-ink);
  cursor: default;
}

/* ---------------------------------------------------------------------------
 * 通用：toast
 * ------------------------------------------------------------------------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translate(-50%, 8px);
  z-index: 40;
  max-width: min(86%, 340px);
  padding: 9px 16px;
  border-radius: 18px;
  background: rgba(8, 14, 32, 0.86);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0s linear 0.24s;
}
.toast[data-show] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out), visibility 0s;
}

/* ---------------------------------------------------------------------------
 * 可访问性
 * ------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}