/* ============================================================
   魔女结社 · 魔法装饰层
   透明金线装饰图，固定漂浮于背景，不拦截点击、不干扰阅读
   ============================================================ */

/* ---------- 固定装饰层容器 ---------- */
.coven-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;      /* 不拦截任何点击 */
  overflow: hidden;
}

.deco {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .13;
  will-change: transform;
  animation: decoFloat 11s ease-in-out infinite;
}

/* ---------- 各装饰品定位 ---------- */

/* 月亮：右上角 */
.deco-moon {
  top: -3%;
  right: -9%;
  width: 38vw;
  max-width: 190px;
  height: 38vw;
  max-height: 190px;
  background-image: url("../img/moon.png");
  animation-duration: 13s;
  animation-delay: -1s;
}

/* 水晶球：左侧中上 */
.deco-crystal {
  top: 30%;
  left: -13%;
  width: 34vw;
  max-width: 168px;
  height: 34vw;
  max-height: 168px;
  background-image: url("../img/crystal.png");
  opacity: .15;
  animation-duration: 15s;
  animation-delay: -4s;
}

/* 女巫帽：右下角 */
.deco-hat {
  bottom: 3%;
  right: -7%;
  width: 30vw;
  max-width: 150px;
  height: 30vw;
  max-height: 150px;
  background-image: url("../img/hat.png");
  animation-duration: 12s;
  animation-delay: -7s;
}

/* 魔药瓶：左下角 */
.deco-potion {
  bottom: 13%;
  left: -10%;
  width: 26vw;
  max-width: 128px;
  height: 26vw;
  max-height: 128px;
  background-image: url("../img/potion.png");
  opacity: .12;
  animation-duration: 14s;
  animation-delay: -2s;
}

/* 扫帚：顶部偏左，轻微旋转 */
.deco-broom {
  top: 6%;
  left: -8%;
  width: 30vw;
  max-width: 148px;
  height: 30vw;
  max-height: 148px;
  background-image: url("../img/broom.png");
  opacity: .11;
  animation: decoFloat 16s ease-in-out infinite, decoTilt 19s ease-in-out infinite;
  animation-delay: -5s, -3s;
}

/* ---------- 浮动动画 ---------- */
@keyframes decoFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}
@keyframes decoTilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* 扫帚同时用两个动画时，位移动画需单独承载旋转分量 */
.deco-broom {
  animation-name: decoFloat, decoTilt;
  animation-duration: 16s, 19s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: -5s, -3s;
}

/* ---------- hero 区域装饰（各页开始页） ---------- */
.deco-hero {
  position: absolute;
  z-index: 0;
  top: -14px;
  right: -10px;
  width: 92px;
  height: 92px;
  background: url("../img/crystal.png") center / contain no-repeat;
  opacity: .30;
  pointer-events: none;
  animation: decoFloat 9s ease-in-out infinite;
}
.deco-hero-moon {
  position: absolute;
  z-index: 0;
  bottom: -22px;
  left: -16px;
  width: 84px;
  height: 84px;
  background: url("../img/moon.png") center / contain no-repeat;
  opacity: .26;
  pointer-events: none;
  animation: decoFloat 11s ease-in-out infinite -2s;
}

/* ---------- 分区标题小图标 ---------- */
.section-title .deco-mark {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  vertical-align: -3px;
  opacity: .75;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.deco-mark-moon    { background-image: url("../img/moon.png"); }
.deco-mark-rune    { background-image: url("../img/rune.png"); }
.deco-mark-tarot   { background-image: url("../img/tarot.png"); }
.deco-mark-hat     { background-image: url("../img/hat.png"); }

/* ---------- 页脚装饰 ---------- */
.deco-footer {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  background: url("../img/rune.png") center / contain no-repeat;
  opacity: .22;
  animation: decoSpin 34s linear infinite;
}
@keyframes decoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- 卡片角标水印 ---------- */
.card-deco {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .10;
  pointer-events: none;
}
.card-deco-candle { background-image: url("../img/candle.png"); }
.card-deco-tarot  { background-image: url("../img/tarot.png"); }
.card-deco-hat    { background-image: url("../img/hat.png"); }

/* ---------- 减少动效：关闭全部装饰动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .deco, .deco-hero, .deco-hero-moon, .deco-footer {
    animation: none !important;
  }
}

/* ---------- 小屏收敛：装饰更小更淡，避免挤压观感 ---------- */
@media (max-width: 360px) {
  .deco { opacity: .10 !important; }
  .deco-hero { width: 74px; height: 74px; }
  .deco-hero-moon { width: 66px; height: 66px; }
}

/* ---------- 层级：hero 内容始终在装饰之上 ---------- */
.hero > *:not(.deco-hero):not(.deco-hero-moon),
.q-hero > *:not(.deco-hero):not(.deco-hero-moon),
.e-hero > *:not(.deco-hero):not(.deco-hero-moon) {
  position: relative;
  z-index: 1;
}

/* ---------- 工具类页面 hero（f-result-head）装饰 ---------- */
.f-result-head { position: relative; overflow: hidden; }
.f-result-head .deco-hero { top: -18px; right: -14px; width: 78px; height: 78px; opacity: .22; }
.f-result-head > * { position: relative; z-index: 1; }

/* ============================================================
   结果区装饰（纯 CSS 伪元素，无需改动 JS）
   ============================================================ */

/* 星座 hero：右上角月亮 */
.hs-hero { position: relative; overflow: hidden; }
.hs-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -16px;
  right: -12px;
  width: 90px;
  height: 90px;
  background: url("../img/moon.png") center / contain no-repeat;
  opacity: .32;
  pointer-events: none;
  animation: decoFloat 10s ease-in-out infinite;
}
.hs-hero > * { position: relative; z-index: 1; }

/* 塔罗总结：右下符文，缓慢旋转 */
.tr-summary { position: relative; overflow: hidden; }
.tr-summary::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -22px;
  bottom: -24px;
  width: 104px;
  height: 104px;
  background: url("../img/rune.png") center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
  animation: decoSpin 40s linear infinite;
}
.tr-summary > * { position: relative; z-index: 1; }

/* 量表结果摘要：左上水晶球 */
.q-summary { position: relative; overflow: hidden; }
.q-summary::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -18px;
  left: -14px;
  width: 82px;
  height: 82px;
  background: url("../img/crystal.png") center / contain no-repeat;
  opacity: .20;
  pointer-events: none;
  animation: decoFloat 12s ease-in-out infinite -3s;
}
.q-summary > * { position: relative; z-index: 1; }

/* 九型结果摘要：右侧女巫帽 */
.e-summary { position: relative; overflow: hidden; }
.e-summary::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -18px;
  bottom: -20px;
  width: 88px;
  height: 88px;
  background: url("../img/hat.png") center / contain no-repeat;
  opacity: .18;
  pointer-events: none;
  animation: decoFloat 14s ease-in-out infinite -6s;
}
.e-summary > * { position: relative; z-index: 1; }

/* 姻缘结果环区：左上水晶球 */
.yy-ring-wrap { position: relative; }
.f-result-head { position: relative; overflow: hidden; }
.f-result-head::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -20px;
  right: -16px;
  width: 86px;
  height: 86px;
  background: url("../img/tarot.png") center / contain no-repeat;
  opacity: .18;
  pointer-events: none;
  animation: decoFloat 13s ease-in-out infinite -4s;
}
.f-result-head > * { position: relative; z-index: 1; }

/* 通用卡片：右上角蜡烛水印（仅标记了 .card-deco 的容器） */
.card { position: relative; }

/* 减少动效时关闭结果区装饰动画 */
@media (prefers-reduced-motion: reduce) {
  .hs-hero::after, .tr-summary::after, .q-summary::after,
  .e-summary::after, .f-result-head::after { animation: none !important; }
}