/* ==========================================================================
   css/lamp.css —— 点亮一盏传承灯
   说明：点亮时光晕扩散、灯芯跳动、火星上升；
        计数只存在本机 localStorage（见 js/lamp.js）。
   ========================================================================== */

.lamp-shell {
  display: grid;
  gap: 30px;
  padding: 34px 24px 30px;
}

/* --------------------------------------------------------------- 灯舞台 */
.lamp-stage {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 42%, rgba(255, 253, 246, .9), rgba(232, 220, 197, .5));
}

/* 灯体 */
.lamp {
  position: relative;
  width: 152px;
  height: 224px;
  transform-origin: 50% 88%;
}

/* 外层光晕：点亮后慢慢铺开 */
.lamp-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 214, 114, .45), rgba(255, 170, 60, .18) 42%, rgba(201, 162, 39, 0) 70%);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease-out);
}

.lamp.lit .lamp-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 灯罩内的亮芯 */
.lamp-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 238, 190, .95), rgba(255, 190, 90, .35) 50%, transparent 72%);
  transition: opacity .7s var(--ease);
}

.lamp.lit .lamp-halo { opacity: .95; animation: lamp-halo 3.4s ease-in-out infinite; }

@keyframes lamp-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}

/* 顶盖与底座 */
.lamp-cap,
.lamp-base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, #c9a227, #8d6f18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(31, 28, 26, .2);
}

.lamp-cap { top: 0; width: 66px; height: 14px; }
.lamp-base { bottom: 0; width: 82px; height: 16px; border-radius: 4px 4px 8px 8px; }

/* 提绳 */
.lamp-rope {
  position: absolute;
  left: 50%;
  top: -34px;
  width: 2px;
  height: 34px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(141, 111, 24, .8));
}

/* 灯身：宫灯轮廓，靠 border-radius 拉出鼓腹 */
.lamp-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  bottom: 12px;
  border-radius: 46% 46% 44% 44% / 26% 26% 26% 26%;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(31, 28, 26, .09) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #c9543f 0%, #b23a2b 46%, #8f2a1e 100%);
  border: 2px solid rgba(141, 111, 24, .75);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, .2),
    inset 0 -14px 26px rgba(0, 0, 0, .3),
    0 12px 26px rgba(31, 28, 26, .22);
  transition: box-shadow .8s var(--ease), background .8s var(--ease);
}

.lamp.lit .lamp-body {
  box-shadow:
    inset 0 8px 22px rgba(255, 226, 160, .5),
    inset 0 -14px 26px rgba(0, 0, 0, .22),
    0 12px 30px rgba(201, 162, 39, .35);
}

/* 上下两道描金箍 */
.lamp-band {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 9px;
  background: linear-gradient(180deg, #e3cd82, #b8901f);
  opacity: .9;
}

.lamp-band.b-top { top: 16px; }
.lamp-band.b-bottom { bottom: 16px; }

/* 灯芯 */
.lamp-flame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 50% 62%, #fff8dd, #ffd672 45%, #ff9a2e 74%, #c9401f 100%);
  opacity: .35;
  filter: blur(.4px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.lamp.lit .lamp-flame { opacity: 1; animation: lamp-flicker 2.1s ease-in-out infinite; }

@keyframes lamp-flicker {
  0%, 100% { transform: translate(-50%, -50%) scale(1, 1); filter: blur(.4px) brightness(1); }
  28%      { transform: translate(-51%, -52%) scale(1.06, 1.12); filter: blur(.7px) brightness(1.12); }
  55%      { transform: translate(-49%, -49%) scale(.95, .93); filter: blur(.3px) brightness(.95); }
  76%      { transform: translate(-50%, -51%) scale(1.03, 1.08); filter: blur(.6px) brightness(1.08); }
}

/* 点亮瞬间：整只灯轻轻一颤 */
.lamp.igniting { animation: lamp-ignite .9s var(--spring); }

@keyframes lamp-ignite {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06, .94); }
  55%  { transform: scale(.96, 1.05); }
  78%  { transform: scale(1.02, .99); }
  100% { transform: scale(1); }
}

/* 火星：向上飘散 */
.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff6cf, #ffab3d 55%, rgba(201, 64, 31, 0) 78%);
  box-shadow: 0 0 8px rgba(255, 190, 90, .8);
  animation: lamp-spark 2.4s var(--ease-out) forwards;
}

@keyframes lamp-spark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  60%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -170px) scale(.3); }
}

/* --------------------------------------------------------------- 文案区 */
.lamp-info { display: grid; gap: 14px; justify-items: center; text-align: center; }

.lamp-count {
  font-family: var(--font-kai);
  font-size: clamp(1rem, 3.2vw, 1.24rem);
  letter-spacing: .16em;
  color: var(--ink-2);
}

.lamp-count b {
  display: inline-block;
  min-width: 2.4em;
  margin: 0 .3em;
  padding: 0 .2em;
  font-family: var(--font-num);
  font-size: 1.7em;
  line-height: 1.2;
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.lamp-note {
  max-width: 30em;
  font-family: var(--font-kai);
  font-size: .84rem;
  line-height: 1.95;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

.lamp-quote {
  padding: 12px 18px;
  border-top: var(--line-gold);
  border-bottom: var(--line-gold);
  font-family: var(--font-kai);
  font-size: .9rem;
  letter-spacing: .1em;
  color: var(--red-deep);
}

@media (prefers-reduced-motion: reduce) {
  .lamp.igniting, .lamp.lit .lamp-flame, .lamp.lit .lamp-halo { animation: none; }
  .spark { display: none; }
}