/* =========================================================
   css/effects.css — 特效层
   元素爆发 / 冲击波 / 章节光带 / 悬停微光 / 载入过场
   ========================================================= */

/* ---------- 元素爆发（点击时的全屏闪光） ---------- */
.burst {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0);
  animation: burstExpand 1.05s var(--ease-out) forwards;
}
.burst::before,
.burst::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.burst::before {
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity: 0.75;
}
.burst::after {
  border: 2px solid var(--accent-soft);
  animation: burstRing 1.05s var(--ease-out) forwards;
}
@keyframes burstExpand {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6);  opacity: 0; }
}
@keyframes burstRing {
  0%   { transform: scale(0.4); opacity: 0.95; border-width: 5px; }
  100% { transform: scale(2.2); opacity: 0;    border-width: 0.5px; }
}

/* 屏幕整体白闪 */
.flash {
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50% 50%), var(--accent-soft) 0%, transparent 55%);
  opacity: 0;
  animation: flashFade 0.55s var(--ease-out) forwards;
}
@keyframes flashFade {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}

/* ---------- 章节标题的光带扫过 ---------- */
.section__title { position: relative; }
.section__title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  mix-blend-mode: overlay;
}
.section__title.is-sweep::after {
  animation: sweep 1.5s var(--ease-soft) forwards;
}
@keyframes sweep {
  0%   { background-position: 150% 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -50% 0; opacity: 0; }
}

/* ---------- 滚动进度条 ---------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  z-index: 60;
  width: 0%;
  background: linear-gradient(90deg, var(--amy), var(--gold-300) 50%, var(--emy));
  box-shadow: 0 0 14px var(--accent-glow);
  transition: width 0.12s linear;
}
.progress::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--gold-200);
  box-shadow: 0 0 12px var(--gold-300);
}

/* ---------- 元素共鸣：激活时的呼吸圈 ---------- */
.elem-btn.is-active::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: elemRipple 2.4s var(--ease-out) infinite;
}
@keyframes elemRipple {
  0%   { opacity: 0.8; transform: scale(0.82); }
  100% { opacity: 0;   transform: scale(1.28); }
}

/* ---------- 卡片聚光（跟随鼠标） ---------- */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--c) 26%, transparent),
    transparent 68%
  );
  mix-blend-mode: screen;
}
.card:hover::before { opacity: 1; }

/* ---------- 卡片边框流光 ---------- */
.card__frame {
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 240, 205, 0.22) 42%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.card:hover .card__frame {
  opacity: 1;
  animation: frameFlow 3.4s linear infinite;
}
@keyframes frameFlow {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

/* ---------- 角色卡：四角菱形呼吸 ---------- */
.card__frame::before,
.card__frame::after {
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent);
  animation: cornerPulse 3.6s var(--ease-soft) infinite;
}
@keyframes cornerPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- 星级：悬停时依次点亮 ---------- */
.card:hover .card__stars i { animation-duration: 1.4s; }

/* ---------- 元素徽章：外圈旋转光环 ---------- */
.card__elem { position: relative; overflow: visible; }
.card__elem::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 201, 135, 0.34);
  animation: spin 14s linear infinite;
}
.card--amy .card__elem::before { border-color: rgba(165, 217, 74, 0.4); }
.card--emy .card__elem::before { border-color: rgba(90, 169, 230, 0.4); }

/* ---------- 星座标签：轻微呼吸 ---------- */
.constellation__labels .clabel {
  animation: nodePulse 5s var(--ease-soft) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- 文字逐字入场（JS 加 .split-in） ---------- */
.split-in span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotateX(-42deg);
  transform-origin: bottom center;
  animation: charIn 0.95s var(--ease-out) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: none; }
}

/* ---------- 通用悬浮微光 ---------- */
.micro-glow {
  position: fixed;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 66%);
  filter: blur(10px);
  transition: opacity 0.45s var(--ease-out);
}
.micro-glow.is-on { opacity: 0.5; }

/* ---------- 视差元素的基础过渡 ---------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* ---------- 入场时整页的一次性金色扫光 ---------- */
.page-sweep {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 240, 210, 0.28) 50%, transparent 60%);
  transform: translateX(-110%);
  animation: pageSweep 1.5s var(--ease-soft) forwards;
}
@keyframes pageSweep {
  to { transform: translateX(110%); }
}

/* ---------- 加载完成时 hero 标题依次浮现 ---------- */
.hero__title > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
body.is-ready .hero__title > * { opacity: 1; transform: none; }
body.is-ready .hero__sigil      { transition-delay: 0.05s; }
body.is-ready .hero__eyebrow    { transition-delay: 0.18s; }
body.is-ready .hero__names      { transition-delay: 0.3s; }
body.is-ready .hero__en         { transition-delay: 0.44s; }
body.is-ready .hero__tag        { transition-delay: 0.58s; }
body.is-ready .hero__title .ornament { transition-delay: 0.66s; }
/* 立绘只淡入，位移交给视差控制，避免与 transform 打架 */
body.is-ready .hero__char { animation: charFade 1.4s var(--ease-out) backwards; }
body.is-ready .hero__char--amy { animation-delay: 0.34s; }
body.is-ready .hero__char--emy { animation-delay: 0.48s; }
@keyframes charFade {
  from { opacity: 0; filter: blur(9px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ---------- 载入画面退场 ---------- */
.loader.is-done .loader__ring { animation: none; opacity: 0; transition: opacity 0.5s; }