/* ============================================================
   visual.css — 4 种视觉风格增强
   风格 1：Sketch and Scribble（手绘涂鸦感）
   风格 2：Digital Impressionism（数字印象派）
   风格 3：Morphing Objects（形变物体）
   风格 4：Generative Art（生成艺术）
   ============================================================ */

/* ---------- 字体：不再自托管手写体 ----------
   2026-10-10 回到 v1.2 风格。v1.2 里确实写了三个 @font-face（Caveat / 马善政
   latin 子集 / 一个 fonts.gstatic.com 的 CDN 中文备选），但它自己的 _headers 是
   font-src 'none' —— 三条从未生效，v1.2 真实渲染出来就是系统宋体 + 系统正文。
   所以这里不重建手写体，直接去掉：零外链、零字体文件、零 CSP 违规，
   体积也小了约 1.1 MB。原字体文件已移出仓库，在 .work/backup-v20-style-20261010/fonts/。
   --font-hand 保留（老类 .font-hand / .hand-title 还在用），但指向 display 宋体系。 */
:root {
  --font-hand: var(--font-display);
}

/* ============================================================
   风格 1：Sketch and Scribble（手绘涂鸦感）
   ============================================================ */

/* 手写字体类 */
.font-hand {
  font-family: var(--font-hand);
}

/* 支线大标题手写体（用更高特异性，不覆盖 app.css 原类） */
.hand-title {
  font-family: var(--font-hand);
  font-weight: 600;
}

/* 手绘按钮边框：不规则圆角模拟手绘线条 */
.btn-sketch {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border: 1.5px solid var(--ink);
  position: relative;
  transition: border-radius 0.2s ease;
}
.btn-sketch:active {
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
}

/* 手绘下划线：SVG path 背景 + dasharray 动画 */
.hand-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 15 2, 30 5 T 60 5 T 98 4' fill='none' stroke='%23c49a4f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.3em;
  padding-bottom: 0.15em;
}

/* 票根撕裂边缘：clip-path 锯齿 */
.ticket-sketch {
  clip-path: polygon(
    0% 2%, 3% 0%, 7% 3%, 12% 1%, 18% 3%, 25% 0%, 33% 2%, 42% 1%, 50% 3%,
    58% 1%, 67% 2%, 75% 0%, 82% 3%, 88% 1%, 93% 3%, 97% 0%, 100% 2%,
    99% 10%, 100% 20%, 98% 35%, 100% 50%, 99% 65%, 100% 80%, 98% 95%, 100% 100%,
    90% 98%, 80% 100%, 70% 99%, 60% 100%, 50% 98%, 40% 100%, 30% 99%, 20% 100%, 10% 98%, 0% 100%,
    1% 85%, 0% 70%, 1% 55%, 0% 40%, 1% 25%, 0% 10%
  );
}

/* 手绘分隔线：SVG 波浪线 */
.divider-sketch {
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 12 1, 25 4 T 50 4 T 75 4 T 100 4' fill='none' stroke='%231f2b24' stroke-opacity='0.15' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* 手绘图标：圆角线稿 */
[data-icon="sketch"] {
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke: currentColor;
}

/* 纸张纹理增强：body 叠加噪点 */
body.visual-paper-enhanced::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/tex/paper-grain.png');
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ============================================================
   风格 2：Digital Impressionism（数字印象派）
   ============================================================ */

/* 场景族配色变量 */
:root {
  --family-rest: #e8a87c;      /* 暖橙 */
  --family-sport: #5b9bd5;     /* 活力蓝 */
  --family-nature: #7cb342;    /* 草绿 */
  --family-market: #f0c040;    /* 暖黄 */
  --family-culture: #5c6bc0;   /* 靛蓝 */
  --family-social: #ec407a;    /* 玫红 */
  --family-digital: #78909c;   /* 灰蓝 */
  --family-street: #8d6e63;    /* 棕褐 */
  --family-night: #7e57c2;     /* 深紫 */
  --family-cozy: #d7ccc8;      /* 米白 */
  --family-explore: #ff7043;   /* 橙红 */
}

/* 印象派背景：多层 radial-gradient 叠加 */
.bg-impressionist {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(196, 154, 79, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(200, 84, 58, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(47, 79, 71, 0.05) 0%, transparent 50%),
    var(--paper);
}

/* 水雾光斑：彩色模糊块 */
.mist-impressionist {
  position: relative;
  overflow: hidden;
}
.mist-impressionist::before {
  content: '';
  position: absolute;
  inset: -20px;
  background:
    radial-gradient(circle at 30% 40%, rgba(196, 154, 79, 0.12), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(200, 84, 58, 0.08), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(126, 87, 198, 0.06), transparent 40%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.mist-impressionist > * {
  position: relative;
  z-index: 1;
}

/* 完成动画光晕增强：印象派多层渐变 */
.completion-overlay.visual-impressionist .completion-glow {
  filter: blur(8px);
}

/* ============================================================
   风格 3：Morphing Objects（形变物体）
   ============================================================ */

/* 形变 SVG 容器 */
.morph-icon {
  will-change: d;
  overflow: visible;
}
.morph-icon path {
  transition: none; /* 形变由 JS 驱动，不用 CSS transition */
}

/* 底部导航图标形变样式 */
.tab .morph-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 心情图标形变样式 */
.mood-morph-icon {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 完成对勾形变：圆圈→对勾 */
.check-morph {
  width: 48px;
  height: 48px;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  will-change: d;
}

/* ============================================================
   风格 4：Generative Art（生成艺术）
   ============================================================ */

/* 流动场 Canvas 背景 */
.flow-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 粒子 Canvas（完成动画用） */
.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 完成动画粒子 Canvas */
.completion-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 票根生成艺术装饰 */
.ticket-gen-art {
  position: relative;
  overflow: hidden;
}
.ticket-gen-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(196, 154, 79, 0.05) 0%, transparent 50%),
    linear-gradient(315deg, rgba(200, 84, 58, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* ============================================================
   全局：prefers-reduced-motion 降级
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* 关闭粒子动画 */
  .flow-canvas,
  .particle-canvas,
  .completion-particle-canvas {
    animation: none !important;
  }

  /* 形变改为瞬时切换 */
  .morph-icon,
  .check-morph {
    transition: none !important;
    animation: none !important;
  }

  /* 手绘下划线动画停止 */
  .hand-underline {
    animation: none !important;
  }

  /* 去除所有 blur 滤镜 */
  .mist-impressionist::before,
  .completion-overlay.visual-impressionist .completion-glow {
    filter: none !important;
  }
}

/* ============================================================
   十二宫轮盘 + 出生年份滑杆（specs/008 控件，按 v1.2 视觉语言重画）
   ------------------------------------------------------------
   控件是 008 的，皮是 v1.2 的：细墨线 + 米白分层 + 朱砂只给
   「选中」一个状态 + 控件主色用松绿（与首页大按钮同色），不引入
   任何手写体、不规则描边、硬阴影。
   ============================================================ */
.zodiac-wheel {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.wheel-seg {
  fill: var(--paper-2);
  stroke: var(--line);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease);
}
.wheel-seg:hover { fill: var(--paper-3); }
.wheel-seg.is-on {
  fill: rgba(200, 84, 58, 0.14);   /* 朱砂淡底，与 v1.2 票根用色同一支 */
  stroke: var(--vermillion);
  stroke-width: 2;
}
.wheel-seg:focus-visible {
  outline: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.wheel-label {
  font-family: var(--font-display);   /* 宋体标注，不是手写体 */
  font-size: 15px;
  fill: var(--ink-soft);
  pointer-events: none;
  user-select: none;
}
.wheel-label.is-on { fill: var(--vermillion); }

.wheel-hub {
  fill: var(--paper-3);
  stroke: var(--line-soft);
  stroke-width: 1;
}
.wheel-center-main {
  font-family: var(--font-display);
  font-size: 18px;
  fill: var(--ink);
}
.wheel-center-sub {
  font-size: 11px;
  fill: var(--ink-soft);
}

/* 出生年份：只一条滑杆 + 两端年份数字。反馈走 q-hint 那一行小字。
   （2026-10-10 老板批注：原来那个「巨大 1998 + 你今年 26 岁」整栏没人看得懂，已删）*/
/* ============================================================
   出生年份半圆弧（specs/012 W2）
   ------------------------------------------------------------
   取代旧的 .year-range 横滑杆（老板：“这个对于我移动端来说不好调动”）。
   配色走 A 案：卡片用 --paper-2、进度与主刻度用 --pine、指针钉用 --vermillion，
   全部是 v1.2 已有 token，没新增颜色；中心大字用 --font-display（系统宋体系）。
   ============================================================ */
.year-arc-field {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-paper);
}

.year-arc {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  color: var(--ink);
  cursor: grab;
  /* 拖弧时绝不能让浏览器把它当成页面滞动 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.year-arc:active { cursor: grabbing; }

/* SVG 自己就是 slider，焦点环要画得出来（011 FND-08 同一个道理） */
.year-arc:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 4px;
  border-radius: var(--r-card);
}

.arc-age {
  font-family: var(--font-display);
  font-size: 46px;
  fill: var(--ink);
}

.arc-status {
  font-size: 12px;
  fill: var(--ink-soft);
  letter-spacing: .04em;
}

/* ============================================================
   时长三档（specs/010）
   ------------------------------------------------------------
   控件本身用 app.css 的 .seg / .seg-item（v1.2 已有），这里只调两件事：
   三档要等宽不分横滚，以及副标题得比 .k 默认值再小一号才塞得下。
   ============================================================ */
.horizon-field { margin-bottom: var(--sp-2); }
.horizon-row { overflow: visible; }
.horizon-row .horizon-item { min-width: 0; text-align: center; }
.horizon-row .horizon-item .v { font-size: var(--fs-body); }
.horizon-row .horizon-item .k {
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
}

/* ============================================================
   等待态：罗盘为主，雷达定位图浅铺在下当底
   ------------------------------------------------------------
   2026-10-10 老板批注：以前点“生成”会把雷达图整块顶掉，只剩一个罗盘转。
   现在两者重合一屏：罗盘是主体，雷达图淡到 26% 浅浅铺在下面，
   不接交互（pointer-events: none）也不抢读——它只是“在找身边什么地方”的背景。
   ============================================================ */
.waiting-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--sp-5) 0;
}
/* 垫图的浓度：外层 .26 乘上雷达环自身的 .14/.3 ≈ 0.04，等于没画
   （specs/021 P3 实测"看不见"）。图例文字已经 display:none 掉了，
   剩下的是纯图形，抬到 .55 不会和下面的主按钮叠成糊字。 */
.waiting-stage .radar-wrap {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
/* 只能垫图，不能垫字：雷达图下方的说明与图例是给人读的正文，
   淡铺后会和下面的主按钮叠成一片糊字（第一轮真图抓到的）。 */
.waiting-stage .radar-wrap > :not(svg) { display: none; }
.waiting-stage .waiting {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  gap: var(--sp-3);
}
/* 罗盘是主体：比默认尺寸大一档，否则压在图上看不出来谁是主角 */
.waiting-stage .compass {
  width: 132px;
  height: 132px;
}

@media (prefers-reduced-motion: reduce) {
  .wheel-seg { transition: none; }
}