/* ============================================================
   JUE 珏 — Rotating jade models (jade-models.css)
   立体旋转玉石：玉璧(bi) / 平安扣(lock) / 玉牌(plaque)。
   用多层 3D 环片(translateZ)叠成实心厚度，自动 rotateY 旋转，
   光影/颗粒/扫光营造"活玉"质感。仅 transform 动画，GPU 合成。
   ============================================================ */

.rj {
  --rj-size: 15rem;
  --rj-thick: 34px;
  --rj-jade: 156, 178, 160;   /* celadon */
  --rj-dark: 22, 32, 24;
  position: relative;
  width: var(--rj-size);
  height: var(--rj-size);
  perspective: 1300px;
  flex: none;
}
.rj--lg { --rj-size: 19rem; --rj-thick: 44px; }
.rj--sm { --rj-size: 10rem; --rj-thick: 22px; }

/* 3D 场景（整体被 JS 旋转） */
.rj-scene {
  position: absolute; top:0;right:0;bottom:0;left:0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- 环片堆叠（形成厚度） ---- */
.rj-stack { position: absolute; top:0;right:0;bottom:0;left:0; transform-style: preserve-3d; }

.rj-layer {
  position: absolute; top:0;right:0;bottom:0;left:0;
  transform-style: preserve-3d;
  border-radius: 50%;
}

/* 内部层：半透明深青，形成玉料纵深（前后面最亮，中间透光） */
.rj-layer { opacity: .82; }
.rj-stack .rj-layer:nth-last-child(4) { opacity: 1; } /* front face layer full */
.rj-stack .rj-layer:first-of-type { opacity: 1; }    /* back face layer full */
@media (prefers-reduced-motion: reduce) { .rj-layer { opacity: 1; } }

/* 玉璧：中心大孔 → 环片 */
.rj--bi .rj-layer {
  background:
    radial-gradient(closest-side,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 26%,
      rgba(24,34,26,.96) 28%,
      rgba(var(--rj-jade), .55) 42%,
      rgba(var(--rj-jade), .18) 60%,
      rgba(8,12,9,.98) 86%,
      rgba(var(--rj-jade), .5) 99%);
}
.rj--bi .rj-hole-wall {
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10,15,11,.98), rgba(20,28,22,.55) 78%, rgba(var(--rj-jade),.28));
  box-shadow: inset 0 0 24px rgba(6,10,7,.9);
}
/* 平安扣：中心小孔 → 整片 + 小孔 */
.rj--lock .rj-layer {
  background:
    radial-gradient(closest-side,
      rgba(var(--rj-jade), .5) 0%,
      rgba(20,30,22,.35) 30%,
      rgba(var(--rj-jade), .28) 55%,
      rgba(8,12,9,.97) 88%,
      rgba(var(--rj-jade), .5) 100%);
}
.rj--lock .rj-hole-wall {
  position: absolute; left: 50%; top: 50%;
  width: 12%; height: 12%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #050805, rgba(12,17,13,.9) 70%, rgba(var(--rj-jade),.4));
  box-shadow: 0 0 8px rgba(0,0,0,.8);
}

/* 前端面：抛光玉面（最亮、有高光与描边） */
.rj-face {
  position: absolute; top:0;right:0;bottom:0;left:0; border-radius: 50%;
  pointer-events: none;
}
.rj-face--front {
  background:
    radial-gradient(58% 58% at 32% 24%, rgba(226,240,230,.9), rgba(var(--rj-jade),.5) 42%, rgba(var(--rj-dark),.9) 82%),
    radial-gradient(70% 70% at 70% 74%, rgba(201,168,108,.26), transparent 60%),
    linear-gradient(160deg, #2a3d2e, #141d16 55%, #1b150d);
  border: 1px solid rgba(226,240,230,.22);
  box-shadow:
    inset 0 0 70px rgba(6,10,7,.85),
    inset 0 0 20px rgba(226,240,230,.16),
    0 34px 80px -28px rgba(0,0,0,.9),
    0 0 110px rgba(201,168,108,.18);
}
.rj-face--back {
  background:
    radial-gradient(58% 58% at 68% 30%, rgba(var(--rj-jade),.28), rgba(var(--rj-dark),.95) 70%),
    linear-gradient(200deg, #1c2a1f, #0e140f 60%, #14100a);
  border: 1px solid rgba(var(--rj-jade),.14);
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
}
/* 孔洞遮罩（bi 大孔 / lock 小孔），叠加在抛光面上，做出真正的穿孔 */
.rj-face-hole {
  position: absolute; top:0;right:0;bottom:0;left:0; border-radius: 50%;
  pointer-events: none;
}
.rj--bi .rj-face-hole { background: radial-gradient(closest-side, rgba(6,10,7,.99) 26%, rgba(6,10,7,.82) 27.4%, transparent 29%); }
.rj--lock .rj-face-hole { background: radial-gradient(closest-side, rgba(6,10,7,.99) 6%, rgba(6,10,7,.82) 6.7%, transparent 8.2%); }

/* 玉牌：圆角矩形透镜（浅厚度） */
.rj--plaque .rj-layer {
  border-radius: 18% / 22%;
  background:
    radial-gradient(120% 90% at 30% 22%, rgba(226,240,230,.85), rgba(var(--rj-jade),.4) 48%, rgba(var(--rj-dark),.92) 85%),
    radial-gradient(90% 90% at 72% 78%, rgba(201,168,108,.22), transparent 60%),
    linear-gradient(160deg, #2a3d2e, #141d16 55%, #1b150d);
}
.rj--plaque .rj-face { border-radius: 18% / 22%; }

/* ---- 动态扫光（conic 旋转，映在玉面） ---- */
.rj-sheen {
  position: absolute; top:-14%;right:-14%;bottom:-14%;left:-14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,255,255,.07) 40deg,
    transparent 90deg,
    rgba(226,240,230,.12) 150deg,
    transparent 200deg,
    rgba(201,168,108,.14) 250deg,
    transparent 300deg);
  animation: rj-spin 9s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
.rj--plaque .rj-sheen { border-radius: 18% / 22%; }
@keyframes rj-spin { to { transform: rotate(360deg); } }

/* ---- 玉内棉絮/颗粒（organic texture） ---- */
.rj-grain {
  position: absolute; top:-6%;right:-6%;bottom:-6%;left:-6%;
  border-radius: 50%;
  background-image:
    radial-gradient(3px 3px at 22% 28%, rgba(255,255,255,.16), transparent),
    radial-gradient(2px 2px at 58% 42%, rgba(255,255,255,.12), transparent),
    radial-gradient(2.5px 2.5px at 76% 22%, rgba(255,255,255,.1), transparent),
    radial-gradient(2px 2px at 42% 74%, rgba(255,255,255,.14), transparent),
    radial-gradient(3px 3px at 84% 62%, rgba(255,255,255,.09), transparent),
    radial-gradient(1.6px 1.6px at 30% 88%, rgba(255,255,255,.11), transparent);
  background-size: 190px 190px;
  mix-blend-mode: screen;
  opacity: .75;
  pointer-events: none;
}
.rj--plaque .rj-grain { border-radius: 18% / 22%; }

/* ---- 星点微闪 ---- */
.rj-spark { position: absolute; border-radius: 50%; background: #fff; mix-blend-mode: screen; pointer-events: none; animation: rj-twinkle 4s ease-in-out infinite; }
.rj-spark.s1 { width: 3px; height: 3px; left: 30%; top: 26%; box-shadow: 0 0 8px #fff; }
.rj-spark.s2 { width: 2px; height: 2px; left: 68%; top: 60%; box-shadow: 0 0 6px #e8d6ab; animation-delay: 1.4s; }
.rj-spark.s3 { width: 2.5px; height: 2.5px; left: 55%; top: 36%; box-shadow: 0 0 7px #b7d0bf; animation-delay: 2.6s; }
@keyframes rj-twinkle { 0%,100% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: .6; } }

/* ---- 地面投影（随旋转缩放，JS 驱动） ---- */
.rj-shadow {
  position: absolute; left: 50%; bottom: -7%;
  width: 78%; height: 11%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.65), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---- 底座铭刻（可选） ---- */
.rj-caption {
  margin-top: 1rem; text-align: center;
  font-family: var(--zh); font-size: var(--fs-micro); letter-spacing: .4em;
  color: var(--gold-dim);
}

/* ---- 放置容器 ---- */
.rj-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 700px) {
  .rj { --rj-size: 11rem; --rj-thick: 26px; }
  .rj--lg { --rj-size: 13rem; --rj-thick: 32px; }
}

/* ---- reduced motion：静态展示（不旋转，保持可见） ---- */
@media (prefers-reduced-motion: reduce) {
  .rj-sheen, .rj-spark { animation: none; }
}