/* 做事的方式（L8）：四条做法，每格一个会组装的小装置 + 四个大数字。只选中 #principles 里的元素。
   组装：进屏一次，零件按 --d（毫秒）错开，1.5s cubic-bezier(.165,.84,.44,1)（L7 Raycast 标准）。
   .pr-armed 由脚本加上；没有脚本、?noreveal=1、减少动态时零件保持最终状态。 */
#principles {
  --pr-ease: cubic-bezier(.165, .84, .44, 1);
  --pr-face-1: #1a1d21;
  --pr-face-2: #111316;
  --pr-edge: rgba(255, 255, 255, .07);
  --pr-edge-hi: rgba(255, 255, 255, .16);
  border-top: 1px solid var(--line);
  overflow: clip;
}

#principles .pr-nb { display: inline-block; }
@media (max-width: 420px) { #principles .pr-nb { display: inline; } }

/* 四格：桌面一行四格，平板 2x2，手机一列 */
#principles .pr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
#principles .pr-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  border-radius: 6px; border: 1px solid var(--pr-edge);
  background: linear-gradient(165deg, var(--pr-face-1), var(--pr-face-2) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .7);
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
#principles .pr-card:hover { transform: translateY(-4px); border-color: var(--pr-edge-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 48px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 179, 61, .06); }

/* 装置所在的舞台：底下一团暖光，像把装置托起来 */
#principles .pr-stage {
  position: relative; display: grid; place-items: center; height: clamp(196px, 16vw, 232px);
  border-bottom: 1px solid var(--pr-edge); overflow: hidden; border-radius: 6px 6px 0 0;
}
#principles .pr-stage::before {
  content: ""; position: absolute; left: 50%; top: 58%; width: 120%; aspect-ratio: 2.2; translate: -50% -50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 179, 61, .12), rgba(242, 179, 61, .03) 55%, transparent 80%);
  opacity: .7; transition: opacity .6s var(--ease);
}
#principles .pr-stage::after { /* 点阵底 */
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
  background: radial-gradient(rgba(236, 235, 230, .09) 1px, transparent 1.2px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 55%, #000, transparent);
}
#principles .pr-card:hover .pr-stage::before { opacity: 1; }
#principles .pr-dev {
  width: min(90%, 264px); height: auto; overflow: visible;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
#principles .pr-card:hover .pr-dev { transform: translateY(-5px);
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .6)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)) drop-shadow(0 0 18px rgba(242, 179, 61, .12)); }

#principles .pr-text { padding: clamp(22px, 2vw, 30px) clamp(22px, 2vw, 28px) clamp(26px, 2.4vw, 34px); }
#principles .pr-idx { display: block; font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: transparent; background: linear-gradient(180deg, #8a9097, #3f454c); -webkit-background-clip: text; background-clip: text; transition: color .6s var(--ease); }
#principles .pr-card:hover .pr-idx { color: var(--amber); }
#principles .pr-text .hl-h3 { margin-top: 22px; }
#principles .pr-text p { margin-top: 12px; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }

/* —— 组装（零件的起始状态只在 .pr-armed 且未进屏时生效）—— */
#principles .pr-a, #principles .pr-draw {
  transition-property: opacity, transform, stroke-dashoffset;
  transition-duration: 1.5s; transition-timing-function: var(--pr-ease);
  transition-delay: calc(var(--d, 0) * 1ms + var(--cd, 0ms));
}
#principles svg .pr-a { transform-box: fill-box; transform-origin: 50% 50%; }
#principles .pr-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
#principles.pr-armed .pr-card:not(.is-in) .pr-a { opacity: 0; }
#principles.pr-armed .pr-card:not(.is-in) .pr-draw { stroke-dashoffset: 1; }
#principles.pr-armed .pr-card:not(.is-in) .pr-panel { transform: translateY(18px) scale(.94); }
#principles.pr-armed .pr-card:not(.is-in) .pr-headrow { transform: scaleX(0); }
#principles .pr-headrow, #principles .pr-grow { transform-origin: 0 50%; }
#principles.pr-armed .pr-card:not(.is-in) .pr-bar { transform: translateX(-8px); }
#principles.pr-armed .pr-card:not(.is-in) .pr-pop { transform: scale(.2); }
#principles.pr-armed .pr-card:not(.is-in) .pr-grow { transform: scaleX(0); opacity: 1; }
#principles.pr-armed .pr-card:not(.is-in) .pr-drop { transform: translateY(-46px); }
#principles.pr-armed .pr-card:not(.is-in) .pr-lid { transform: scaleY(.12); opacity: 1; }
#principles.pr-armed .pr-card:not(.is-in) .pr-key { transform: translateY(26px) scale(.9); }
#principles.pr-armed .pr-card:not(.is-in) .pr-langs { transform: translateY(10px); }
#principles .pr-lid { transform-origin: 50% 100%; }
#principles .pr-badge { transform-origin: 50% 50%; }
/* 组装完以后，悬停反馈用短过渡、不带延迟 */
#principles .pr-card.is-live .pr-a, #principles .pr-card.is-live .pr-draw { transition-duration: .6s; transition-delay: 0s; }

/* —— 01 表格：一道暖光一行行扫下去（待机）—— */
#principles .pr-scan { opacity: 0; transform-box: fill-box; }
#principles .pr-card.is-live .pr-scan { animation: pr-scan 6s ease-in-out infinite; }
#principles .pr-grid-lines path { transition-property: stroke-dashoffset, stroke; }
#principles .pr-card:hover .pr-grid-lines { stroke: rgba(236, 235, 230, .42); }
#principles .pr-card.is-live:hover .pr-bar { transform: translateX(3px); }
@keyframes pr-scan {
  0%, 8% { opacity: 0; transform: translateY(0); }
  14% { opacity: .07; }
  30% { opacity: .07; transform: translateY(0); }
  42%, 58% { opacity: .07; transform: translateY(34px); }
  70%, 84% { opacity: .07; transform: translateY(68px); }
  92%, 100% { opacity: 0; transform: translateY(68px); }
}

/* —— 02 阶段：每段结束的标记轮流发一次光（待机）—— */
#principles .pr-card.is-live .pr-badge { animation: pr-ping 3s ease-in-out infinite; }
#principles .pr-card.is-live .pr-badge:nth-child(2) { animation-delay: 1s; }
#principles .pr-card.is-live .pr-badge:nth-child(3) { animation-delay: 2s; }
#principles .pr-card.is-live:hover .pr-badge { animation-play-state: paused; transform: scale(1.12); }
#principles .pr-card:hover .pr-seg { filter: brightness(1.12); }
@keyframes pr-ping { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.14); } 36% { transform: scale(1); } }

/* —— 03 当地：键帽 —— */
#principles .pr-local { display: grid; justify-items: center; gap: 22px; width: auto; filter: none; }
#principles .pr-key { position: relative; width: 196px; height: 104px; border-radius: 18px; padding-bottom: 8px;
  background: linear-gradient(180deg, #121417, #0b0c0e); box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05); }
#principles .pr-key-face { position: relative; height: 100%; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, #30363d, #1b1f23 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
#principles .pr-key-face::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 90% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%), radial-gradient(60% 70% at 50% 110%, rgba(242, 179, 61, .16), transparent 70%); }
#principles .pr-card:hover .pr-key-face { transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(242, 179, 61, .28), 0 0 26px rgba(242, 179, 61, .18); }
#principles .pr-words { position: relative; display: block; width: 100%; height: 44px; }
#principles .pr-words > span { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap;
  font-size: 34px; line-height: 1; font-weight: 400; letter-spacing: -0.01em;
  color: transparent; background: linear-gradient(180deg, #fbfaf6 30%, #aeb3b9); -webkit-background-clip: text; background-clip: text;
  opacity: 0; transform: translateY(70%); transition: opacity .7s var(--pr-ease), transform .7s var(--pr-ease); }
#principles .pr-words > span.is-on { opacity: 1; transform: none; }
#principles .pr-words > span.is-out { opacity: 0; transform: translateY(-70%); }
#principles .pr-words > span[lang="en"], #principles .pr-words > span[lang="fr"] { font-size: 30px; letter-spacing: -0.02em; }
#principles .pr-langs { display: flex; gap: 8px; }
#principles .pr-langs i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .5s var(--ease), width .5s var(--ease); }
#principles .pr-langs i.is-on { width: 22px; border-radius: 4px; background: linear-gradient(90deg, #ffd789, #e3971f); }

/* —— 04 文件夹：盖好以后轻轻浮动（待机），悬停时盖子掀开一点 —— */
#principles .pr-bob { transform-box: fill-box; transform-origin: 50% 50%; }
#principles .pr-card.is-live .pr-bob { animation: pr-bob 3s ease-in-out infinite alternate; }
#principles .pr-card.is-live:hover .pr-lid { transform: scaleY(.8); }
#principles .pr-card.is-live:hover .pr-doc { transform: translateY(-7px); }
#principles .pr-card.is-live:hover .pr-doc:nth-child(2) { transform: translateY(-11px); }
@keyframes pr-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }

#principles.pr-paused .pr-scan, #principles.pr-paused .pr-badge, #principles.pr-paused .pr-bob { animation-play-state: paused; }

/* 四个大数字：一排四个，顶上一根细线，不再套卡片，和上面四格分开 */
#principles .pr-stats { list-style: none; margin: clamp(80px, 8vw, 120px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
#principles .pr-stat { position: relative; padding-top: 28px; border-top: 1px solid var(--line-strong); }
#principles .pr-stat::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 1px; background: var(--amber); }
#principles .pr-num { display: block; font-size: clamp(64px, 7vw, 104px); line-height: .9; font-weight: 400; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  color: transparent; background: linear-gradient(180deg, #f6f5f0 20%, #a9aeb4 110%); -webkit-background-clip: text; background-clip: text; }
#principles .pr-label { display: block; margin-top: 20px; font-size: 18px; line-height: 1.4; color: var(--ink-2); }

@media (max-width: 1100px) {
  #principles .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #principles .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #principles .pr-stage { height: 176px; }
  #principles .pr-dev { width: min(64%, 224px); }
  #principles .pr-idx { font-size: 34px; }
  #principles .pr-text .hl-h3 { margin-top: 16px; }
  #principles .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin-top: 64px; }
  #principles .pr-stat { padding-top: 20px; }
  #principles .pr-num { font-size: 64px; }
  #principles .pr-label { margin-top: 14px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #principles .pr-a, #principles .pr-draw, #principles .pr-words > span { transition: none !important; }
  #principles .pr-scan, #principles .pr-badge, #principles .pr-bob { animation: none !important; }
  #principles .pr-card, #principles .pr-dev, #principles .pr-key-face { transition: none; }
  #principles .pr-card:hover, #principles .pr-card:hover .pr-dev { transform: none; }
}