/* =========================================================
   视频 / 平面 / 摄影 / 能力 四个板块开屏的图标、动作和背景（第二版，2026-10-10 定稿）
   · 图标是旧网站四个蓝色线条图标的矢量还原：从旧 PSD 里取出原图，按原图的几何关系重画，
     和原图逐像素比对过，形状一致，放多大都清晰
   · 线条粗细统一：四个图标在屏幕上的笔画一样粗（宽度按各自原图的笔画比例算出来）
   · 打开时线条先「画」出来；标题打完字后（.sp.is-live）开始各自的动作，动作只做一次（视频的放映机一直转）
   ========================================================= */
.sp[data-core="icon"] .sp-slot { width: calc(var(--core-w) * var(--icon-scale, .65)); aspect-ratio: var(--core-ar); }   /* 图标定为 65%（2026-10-10）；笔画跟着一起变细，四个图标仍然一样粗 */
.core { display: block; width: 100%; height: auto; overflow: visible; color: var(--sp-icon, var(--sp-blue)); }

/* 线条画出来（开头先透明，避免圆头线帽在起点露出一个点） */
.core .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: core-draw 1.15s cubic-bezier(.45, 0, .2, 1) .15s both; }
@keyframes core-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

/* ---------- 视频：放映机转起来，胶片走动，镜头亮光，波形画出来 ---------- */
.core--video .reel { transform-box: fill-box; transform-origin: 50% 50%; }
.core--video .spoke { opacity: 0; transition: opacity .8s; }
.core--video .rungs { opacity: 0; transition: opacity .6s .25s; }
.core--video .beam { opacity: 0; }
.core--video .wave { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.sp.is-live .core--video .spoke, .sp.is-live .core--video .rungs { opacity: 1; }
/* 胶片盘：先慢慢加速（120°），再匀速一直转；加速段结尾的速度和匀速段相同，接得上 */
.sp.is-live .core--video .reel { animation: core-spinup 1.6s cubic-bezier(.4, 0, .75, .5) both, core-spin 2.4s linear 1.6s infinite; }
.sp.is-live .core--video .reel--b { animation-delay: .14s, 1.74s; }
@keyframes core-spinup { from { transform: rotate(0); } to { transform: rotate(120deg); } }
@keyframes core-spin { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
/* 胶片孔一格一格往左走（一格 = 原图里胶片孔的间距） */
.sp.is-live .core--video .rungs { animation: core-film 1.1s linear .45s infinite; }
@keyframes core-film { to { transform: translateX(-12.72px); } }
/* 镜头的光：像放映机灯泡一样闪几下亮起，然后轻轻呼吸 */
.sp.is-live .core--video .beam { animation: core-beam 1.2s steps(1) .5s both, core-glow 3.6s ease-in-out 1.7s infinite; }
@keyframes core-beam { 0% { opacity: 0; } 10% { opacity: .8; } 16% { opacity: .1; } 28% { opacity: 1; } 34% { opacity: .35; } 46%, 100% { opacity: 1; } }
@keyframes core-glow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.sp.is-live .core--video .wave { animation: core-draw 1s cubic-bezier(.45, 0, .2, 1) .95s both; }

/* ---------- 摄影：对焦环转动、镜头对焦，按快门「咔嚓」，整屏闪一下白光 ---------- */
.core--photo .focus, .core--photo .iris { transform-box: view-box; transform-origin: 67.45px 59.65px; }
.core--photo .glint, .core--photo .flashwin { opacity: 0; transition: opacity .5s .65s; }
.core--photo .flashwin { transform-box: fill-box; transform-origin: center; }
.core--photo .btnw { transform-box: fill-box; }
.core--photo .iris { transform: scale(0); }
.sp.is-ready .core--photo .glint, .sp.is-ready .core--photo .flashwin { opacity: 1; }
.sp.is-live .core--photo .focus { animation: core-focus 1.3s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes core-focus { 0% { transform: rotate(-80deg) scale(.86); } 65% { transform: rotate(-4deg) scale(1.045); } 100% { transform: none; } }
.sp.is-live .core--photo .btnw { animation: core-press .34s ease 1.3s; }
@keyframes core-press { 50% { transform: translateY(2.2px); } }
.sp.is-live .core--photo .iris { animation: core-shutter .38s cubic-bezier(.5, 0, .3, 1) 1.42s; }
@keyframes core-shutter { 0%, 100% { transform: scale(0); } 45% { transform: scale(1); } }
.sp.is-live .core--photo .flashwin { animation: core-flashwin .5s ease 1.4s; }
@keyframes core-flashwin { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.6, 1.4); } }
.sp-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.sp.is-live .sp-flash { animation: core-flash .65s ease-out 1.44s; }
@keyframes core-flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- 平面：尺子画出来、刻度一格格长出来，铅笔从右上方落到尺子上，再轻轻点一下 ---------- */
.core--design .pencil, .core--design .pencil-m, .core--design .pencil-w, .core--design .pencil-mw { transform-box: view-box; }
.core--design .pencil, .core--design .pencil-m { animation: core-pencil-in 1.3s cubic-bezier(.2, .75, .25, 1) .15s both; }
@keyframes core-pencil-in { from { transform: translate(15px, -15px); } }
.core--design .tick { transform-box: fill-box; animation: core-tick .5s cubic-bezier(.2, .8, .2, 1) calc(.55s + var(--i) * 55ms) both; }
.core--design .tick--t { transform-origin: 50% 0; }
.core--design .tick--b { transform-origin: 50% 100%; }
@keyframes core-tick { from { transform: scaleY(0); } }
.sp.is-live .core--design .pencil-w, .sp.is-live .core--design .pencil-mw { animation: core-write .8s cubic-bezier(.45, 0, .55, 1) .75s; }
@keyframes core-write { 40% { transform: translate(2.6px, -2.6px); } 75% { transform: translate(-.6px, .6px); } }

/* ---------- 能力：锤子抬起敲两下（敲到时有火花），螺丝刀跟着拧两下 ---------- */
.core--skills .hammer, .core--skills .spark { transform-box: view-box; transform-origin: 115.48px 105.19px; }
.core--skills .spark { opacity: 0; }
.core--skills .driver, .core--skills .driver-m { transform-box: view-box; transform-origin: 66.67px 60.51px; }
.core--skills .grip { transform-box: view-box; }
.sp.is-live .core--skills .hammer { animation: core-hammer 1.5s linear .1s both; }
@keyframes core-hammer {
  0%  { transform: rotate(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  22% { transform: rotate(11deg); animation-timing-function: cubic-bezier(.6, 0, 1, .7); }
  33% { transform: rotate(-1.5deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  42% { transform: rotate(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  63% { transform: rotate(10deg); animation-timing-function: cubic-bezier(.6, 0, 1, .7); }
  74% { transform: rotate(-1.5deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  86%, 100% { transform: rotate(0); } }
.sp.is-live .core--skills .spark { animation: core-spark 1.5s linear .1s both; }
@keyframes core-spark { 0%, 32% { opacity: 0; } 34% { opacity: 1; } 44% { opacity: 0; } 73% { opacity: 0; } 75% { opacity: 1; } 86%, 100% { opacity: 0; } }
.sp.is-live .core--skills .driver, .sp.is-live .core--skills .driver-m { animation: core-twist 1.2s cubic-bezier(.45, 0, .35, 1) 1.5s both; }
@keyframes core-twist { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(1.5deg); } 75% { transform: rotate(-4deg); } }
.sp.is-live .core--skills .grip { animation: core-grip 1.2s cubic-bezier(.45, 0, .35, 1) 1.5s both; }
@keyframes core-grip { 0%, 100% { transform: none; } 25% { transform: translate(1.9px, 1.9px); } 50% { transform: translate(-1.3px, -1.3px); } 75% { transform: translate(1.5px, 1.5px); } }

@media (prefers-reduced-motion: reduce) {
  .core .ln, .core--video .wave { stroke-dashoffset: 0; opacity: 1; animation: none !important; }
  .core *, .sp-flash { animation: none !important; transition: none !important; }
  .core--video .spoke, .core--video .rungs, .core--video .beam, .core--photo .glint, .core--photo .flashwin { opacity: 1; }
}

/* =========================================================
   各板块开屏的背景（2026-10-10 定稿：视频 D、平面 B、摄影 A、能力 C）
   全部是 CSS 渐变 / 内嵌小图，不加载任何图片文件；装饰层放在 ::before / ::after（z-index -1）
   没选的版本备份在 _dev/cover-bgs-all.css
   ========================================================= */
.sp[data-core="icon"] .sp-stage { isolation: isolate; }
.sp[data-core="icon"] .sp-stage::before, .sp[data-core="icon"] .sp-stage::after { position: absolute; z-index: -1; pointer-events: none; }
/* 深色版（视频）：字变白、正文浅灰、蓝色提亮一点 */
.sp[data-tone="dark"] { --sp-ink: #f5f5f7; --sp-body: #a1a1a6; --sp-quiet: #8e8e93; --sp-blue: #4a95ff; --sp-icon: #3d8cff; }
.sp[data-tone="dark"] .sp-arrow { color: #8e8e93; }

/* ---------- 视频 ---------- */
/* D 放映厅 + 剪辑时间线（上）：深色底，上方是 Pr 时间线——深色界面里的彩色片段，和旧网站视频页头图一样；播放头慢慢往右走 */
.bg-video-d { background: radial-gradient(42% 24% at 50% 52%, rgba(61, 140, 255, .14), transparent 70%), radial-gradient(120% 75% at 50% 45%, #23262e 0%, #14161a 58%, #0b0c0f 100%); }
.bg-video-d::before { content: ""; left: 0; right: 0; top: 0; height: 46%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='132'%3E%3Crect x='-24' y='0' width='61' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='54' y='0' width='49' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='120' y='0' width='83' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='206' y='0' width='83' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='372' y='0' width='35' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='410' y='0' width='35' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='454' y='0' width='61' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='532' y='0' width='61' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='596' y='0' width='137' height='16' rx='3' fill='%23a78bfa'/%3E%3Crect x='750' y='0' width='35' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='-19' y='22' width='137' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='123' y='22' width='107' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='233' y='22' width='49' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='287' y='22' width='69' height='16' rx='3' fill='%238b7cf6'/%3E%3Crect x='359' y='22' width='27' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='395' y='22' width='27' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='439' y='22' width='137' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='585' y='22' width='69' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='659' y='22' width='69' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='733' y='22' width='69' height='16' rx='3' fill='%236e8ef7'/%3E%3Crect x='-39' y='44' width='69' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='39' y='44' width='35' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='77' y='44' width='27' height='16' rx='3' fill='%23c084fc'/%3E%3Crect x='107' y='44' width='61' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='239' y='44' width='83' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='325' y='44' width='83' height='16' rx='3' fill='%23c084fc'/%3E%3Crect x='411' y='44' width='107' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='535' y='44' width='137' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='675' y='44' width='35' height='16' rx='3' fill='%23c084fc'/%3E%3Crect x='727' y='44' width='27' height='16' rx='3' fill='%23f472b6'/%3E%3Crect x='-8' y='66' width='35' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='36' y='66' width='61' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='100' y='66' width='35' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='140' y='66' width='35' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='184' y='66' width='61' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='262' y='66' width='137' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='408' y='66' width='69' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='480' y='66' width='49' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='538' y='66' width='61' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='616' y='66' width='137' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='-5' y='88' width='107' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='107' y='88' width='83' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='195' y='88' width='83' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='281' y='88' width='83' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='367' y='88' width='83' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='453' y='88' width='35' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='491' y='88' width='137' height='16' rx='3' fill='%2334d399'/%3E%3Crect x='633' y='88' width='137' height='16' rx='3' fill='%232dd4bf'/%3E%3Crect x='-30' y='110' width='83' height='16' rx='3' fill='%23fb923c'/%3E%3Crect x='70' y='110' width='35' height='16' rx='3' fill='%23fbbf24'/%3E%3Crect x='238' y='110' width='137' height='16' rx='3' fill='%23fb923c'/%3E%3Crect x='384' y='110' width='69' height='16' rx='3' fill='%23fb923c'/%3E%3Crect x='520' y='110' width='61' height='16' rx='3' fill='%23fbbf24'/%3E%3Crect x='584' y='110' width='69' height='16' rx='3' fill='%23fbbf24'/%3E%3Crect x='670' y='110' width='61' height='16' rx='3' fill='%23fb923c'/%3E%3Crect x='734' y='110' width='61' height='16' rx='3' fill='%23fb923c'/%3E%3C/svg%3E") -40px calc(var(--header-h) + 8px) / 760px auto repeat-x; opacity: .58;
  -webkit-mask-image: linear-gradient(#000 38%, transparent); mask-image: linear-gradient(#000 38%, transparent); }
.bg-video-d::after { content: ""; left: 0; top: calc(var(--header-h) + 2px); width: 2px; height: 38%; border-radius: 1px;
  background: linear-gradient(#4a95ff, rgba(74, 149, 255, 0)); opacity: .85; animation: bg-playhead 16s linear infinite; }
@keyframes bg-playhead { from { transform: translateX(-4vw); } to { transform: translateX(104vw); } }

/* ---------- 平面 ---------- */
/* B 鲜艳彩虹：和旧网站那张图一样鲜艳（2026-10-10 加深、往下延伸更多），越往下越淡 */
.bg-design-b { background: #fff; }
.bg-design-b::before { content: ""; inset: 0;
  background: linear-gradient(100deg, #ff3b30 0%, #ff9500 17%, #ffcc00 33%, #34c759 50%, #00c7be 66%, #007aff 83%, #af52de 100%);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .64) 30%, rgba(0, 0, 0, .22) 56%, transparent 76%); mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .64) 30%, rgba(0, 0, 0, .22) 56%, transparent 76%); }

/* ---------- 摄影 ---------- */
/* A 银盐灰：黑白照片的冷灰 */
.bg-photo-a { background: linear-gradient(180deg, #dfe0e4 0%, #edeef1 42%, #fff 82%); }

/* ---------- 能力 ---------- */
/* C 蓝图网格：浅蓝底加一层很淡的方格，像工作台 */
.bg-skills-c { background: linear-gradient(180deg, #e8f0ff 0%, #f3f7ff 45%, #fff 82%); }
.bg-skills-c::before { content: ""; inset: 0;
  background-image: linear-gradient(rgba(10, 108, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 108, 255, .09) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center -1px;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 78%); mask-image: linear-gradient(#000 20%, transparent 78%); }

/* 摄影页开屏的背景是后面那面照片墙本身（.sp[data-trans="w"]，js/growth-cover.js），前面盖一层磨砂（.sp-veil）；2026-10-10 定稿 B 景深推近
   a 磨砂玻璃 / b 景深推近（照片墙微微放大）/ d 快门闪光：浅色磨砂；c 暗房显影：深色磨砂 + 白字 */
.sp[data-trans="w"] .sp-stage { background: transparent; }
.sp-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(248, 247, 244, .6); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
.sp[data-veil="b"] .sp-veil { background: rgba(240, 238, 233, .36); -webkit-backdrop-filter: blur(13px) saturate(1.1); backdrop-filter: blur(13px) saturate(1.1); }   /* 2026-10-10 用户选 B，并要求磨砂再透一点 */
.sp[data-veil="c"] .sp-veil { background: rgba(10, 10, 12, .66); -webkit-backdrop-filter: blur(20px) saturate(.9); backdrop-filter: blur(20px) saturate(.9); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {   /* 不支持磨砂的老浏览器：盖得厚一点，字照样看得清 */
  .sp-veil { background: rgba(248, 247, 244, .9); } .sp[data-veil="c"] .sp-veil { background: rgba(10, 10, 12, .9); }
}

/* 深色开屏（视频）往上走时，底边拖的一条由深到透明的渐变（js/growth-cover.js 生成），和白色内容接得更柔和 */
.sp-tail { position: absolute; left: 0; right: 0; top: 100%; height: 26vh; background: linear-gradient(#0b0c0f, rgba(11, 12, 15, 0)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .bg-video-d::after { animation: none; } }

/* =========================================================
   左右滑动切换板块（js/section-swipe.js）
   ========================================================= */
/* 换页不闪白、横滑交给脚本的那几条在 style.css（主页也要用，2026-10-10 搬过去） */
html.is-swiping .site-footer { position: relative; z-index: 1; }
/* 旁边板块的开屏：藏在屏幕外，滑动时跟着进来 */
.sp-peek { position: fixed; inset: 0; z-index: 41; pointer-events: none; visibility: hidden; }
.sp-peek .sp { position: absolute; inset: 0; margin-top: 0; }
.sp-peek .sp-stage { height: 100%; min-height: 0; }
/* 卡片切换（b）时卡片后面的深色底 */
.swipe-backdrop { position: fixed; inset: 0; z-index: 0; background: #1c1c1e; opacity: 0; pointer-events: none; }
/* 旁边板块的开屏、滑过来刚打开的页面：直接显示最终样子（不再画线、不再放大、不再淡入） */
html.swipe-in main, html.swipe-in .site-footer { animation: none; }
:is(html.swipe-in, .sp-peek) .sp-zoom { animation: none !important; }
:is(html.swipe-in, .sp-peek) .core .ln, :is(html.swipe-in, .sp-peek) .core--video .wave { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
:is(html.swipe-in, .sp-peek) .core--design :is(.tick, .pencil, .pencil-m) { animation: none !important; }
.sp-peek .core--video .rungs, .sp-peek .core--video .beam, .sp-peek .core--photo .glint, .sp-peek .core--photo .flashwin { opacity: 1; transition: none; }