/* ============================================================
   越生活 · 装饰件（中国结 / 荷花）
   ------------------------------------------------------------
   这套类只管「怎么摆」：位置、尺寸、动效。
   颜色一律走 CSS 变量，页面想换色只改变量，不用改这个文件：

       --orn-c1     主色（结体 / 花瓣）
       --orn-c1-d   主色深（描边、阴影）
       --orn-c2     辅色（金线 / 花瓣尖）
       --orn-c2-d   辅色深
       --orn-c3     点缀色（水波、涟漪）

   用法：
       <span class="orn-deco orn-deco-knot"></span>     中国结
       <span class="orn-deco orn-deco-lotus"></span>    荷花
   ============================================================ */

.orn-deco {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  pointer-events: none;   /* 纯装饰，不该挡住点击 */
  user-select: none;
}

/* ---------- 中国结 ---------- */
.orn-deco-knot {
  width: var(--orn-size, 44px);
  height: var(--orn-size, 44px);
  background-image: url("knot-chinese.svg");
}

/* ---------- 荷花 ---------- */
.orn-deco-lotus {
  width: var(--orn-size, 52px);
  height: var(--orn-size, 52px);
  background-image: url("lotus.svg");
}

/* ---------- 变体 ---------- */

/* 线性版：单色剪影，适合当分隔线或小图标，不抢视觉 */
.orn-deco-lin {
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}
.orn-deco-knot.orn-deco-lin {
  -webkit-mask-image: url("knot-chinese.svg");
  mask-image: url("knot-chinese.svg");
}
.orn-deco-lotus.orn-deco-lin {
  -webkit-mask-image: url("lotus.svg");
  mask-image: url("lotus.svg");
}

/* 轻摆：只在首屏用，幅度很小，避免晃眼 */
@keyframes orn-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.orn-deco-sway {
  animation: orn-sway 5.5s ease-in-out infinite;
  transform-origin: 50% 12%;
}

/* 淡入：触发一次即可，不要循环 */
@keyframes orn-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.orn-deco-in { animation: orn-fade-in .7s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .orn-deco-sway, .orn-deco-in { animation: none; }
}