﻿/* fx-fever visual impact package */

/* cinematic letterbox */
.fever-bars::before,
.fever-bars::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 0;
  background: #14101a;
  z-index: 92;
  pointer-events: none;
  transition: height .14s cubic-bezier(.2,.8,.3,1);
}
.fever-bars::before { top: 0; }
.fever-bars::after { bottom: 0; }
.fever-bars.is-on::before,
.fever-bars.is-on::after { height: 5.5vh; }

/* impact flash */
.fv-impact {
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.fv-impact.is-on { animation: fv-flash .18s steps(3, end); }
@keyframes fv-flash {
  0% { opacity: calc(var(--s, .9) * 1); }
  45% { opacity: .28; }
  100% { opacity: 0; }
}

/* screen jitter / camera punch */
main.fever-jitter { animation: fever-jitter .16s cubic-bezier(.2,.9,.3,1); }
@keyframes fever-jitter {
  0% { transform: translate3d(0,0,0) scale(1); }
  22% { transform: translate3d(-3px,2px,0) scale(1.004) rotate(.12deg); }
  48% { transform: translate3d(3px,-2px,0) scale(1.003) rotate(-.1deg); }
  72% { transform: translate3d(-2px,1px,0) scale(1.002); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* speed lines */
.fv-lines { position: fixed; inset: 0; z-index: 93; pointer-events: none; overflow: hidden; }
.fv-line {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  opacity: 0;
  filter: blur(.4px) drop-shadow(0 0 6px rgba(255,255,255,.6));
  animation: fv-line .28s ease-out forwards;
  transform-origin: 50% 0;
}
@keyframes fv-line {
  0% { opacity: 0; margin-top: -40px; }
  22% { opacity: .95; }
  100% { opacity: 0; margin-top: 120px; }
}

/* falling dust / ash / frost */
.fv-dust-box { position: fixed; inset: 0; z-index: 91; pointer-events: none; overflow: hidden; }
.fv-dust {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: fv-fall 800ms linear forwards;
  box-shadow: 0 0 6px currentColor;
}
@keyframes fv-fall {
  0% { opacity: 0; transform: translateY(-10px) scale(.6); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translateY(46vh) translateX(18px) scale(.8); }
}

/* scorch / frost residue */
.fv-scorch {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.fv-scorch.is-on { opacity: 1; }

/* ===== 空间被劈开：裂口 + 喷火 + 碎石 ===== */
.fv-rift {
  position: fixed;
  left: 50%;
  top: 52%;
  width: 34px;
  height: 82vh;
  transform: translate(-50%, -50%) rotate(var(--a, 38deg));
  z-index: 93;
  pointer-events: none;
  overflow: visible;
}
.fv-rift::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46vw;
  height: 110%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(20,14,12,.55), rgba(20,14,12,0) 68%);
  filter: blur(10px);
  opacity: 0;
  animation: fv-rift-dark .8s ease-out forwards;
}
.fv-rift-core {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 34px var(--c1,#ffb257), 0 0 70px var(--c2,#ff7a2a);
  animation: fv-rift-core .85s cubic-bezier(.2,.9,.3,1) forwards;
}
.fv-rift-edge {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #1a1114 8%, #1a1114 92%, transparent);
  clip-path: polygon(40% 0, 62% 4%, 48% 12%, 68% 20%, 46% 28%, 66% 36%, 44% 44%, 64% 52%, 46% 60%, 68% 68%, 48% 76%, 66% 84%, 46% 92%, 58% 100%, 42% 100%, 34% 92%, 52% 84%, 32% 76%, 54% 68%, 34% 60%, 52% 52%, 30% 44%, 50% 36%, 28% 28%, 48% 20%, 30% 12%, 50% 4%);
  animation: fv-rift-edge .85s ease-out forwards;
}
.fv-rift-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 110%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--c1,#ffb257) 85%, white), color-mix(in srgb, var(--c2,#ff7a2a) 45%, transparent) 40%, transparent 72%);
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: fv-rift-glow .85s ease-out forwards;
}
.fv-rift-flame {
  position: absolute;
  left: 50%;
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  filter: drop-shadow(0 0 10px var(--c2,#ff7a2a));
  opacity: 0;
  animation: fv-rift-flame .95s ease-out forwards;
}
.fv-rift-rock {
  position: absolute;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  opacity: 0;
  animation: fv-rift-rock .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fv-rift-dark { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .75; } }
@keyframes fv-rift-core {
  0% { width: 0; opacity: 0; }
  10% { width: 6px; opacity: 1; }
  42% { width: 34px; opacity: 1; }
  100% { width: 12px; opacity: 0; }
}
@keyframes fv-rift-edge {
  0% { width: 0; opacity: 0; }
  18% { width: 18px; opacity: 1; }
  50% { width: 72px; opacity: .95; }
  100% { width: 28px; opacity: 0; }
}
@keyframes fv-rift-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}
@keyframes fv-rift-flame {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(.3); }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 20px)), calc(-50% + var(--dy, -80px))) rotate(-45deg) scale(.55);
  }
}
@keyframes fv-rift-rock {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.5); }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 80px)), calc(-50% + var(--dy, 90px))) rotate(var(--rot, 180deg)) scale(.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fever-bars, .fv-impact, .fv-lines, .fv-dust-box, .fv-scorch, .fv-rift { display: none !important; }
  main.fever-jitter { animation: none !important; }
}

/* ===== 沿剑轨迹的灼烧斩痕（替换掉卡通的发光裂口） ===== */
.fv-scar{position:fixed;inset:0;width:100%;height:100%;z-index:93;pointer-events:none;overflow:visible;
  transition:opacity .55s ease}
.fv-scar.fv-scar-fade{opacity:0}
.fv-scar path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fv-scar .fv-scar-ash{filter:blur(2px)}
.fv-scar .fv-scar-ember{filter:blur(2px)}
.fv-scar .fv-scar-core{filter:drop-shadow(0 0 3px rgba(255,240,200,.9))}

.fv-scar-flame{position:fixed;width:14px;height:22px;border-radius:50% 50% 50% 0;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-45deg);filter:drop-shadow(0 0 8px rgba(255,150,70,.8));
  animation:fv-scar-flame .85s ease-out forwards;z-index:94}
.fv-scar-spark{position:fixed;width:3px;height:3px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 6px currentColor;animation:fv-scar-spark .6s ease-out forwards;z-index:94}
.fv-scar-rock{position:fixed;width:10px;height:8px;pointer-events:none;
  clip-path:polygon(0 0,45% 0,100% 35%,80% 100%,15% 85%);
  box-shadow:0 1px 3px rgba(0,0,0,.35);animation:fv-scar-rock .9s cubic-bezier(.2,.7,.3,1) forwards;z-index:94}
@keyframes fv-scar-flame{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-45deg) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,20px)),calc(-50% + var(--dy,-40px))) rotate(-45deg) scale(.6)}
}
@keyframes fv-scar-spark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,30px)),calc(-50% + var(--dy,20px))) scale(.3)}
}
@keyframes fv-scar-rock{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.6)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,60px)),calc(-50% + var(--dy,90px))) rotate(var(--rot,180deg)) scale(.9)}
}
@media (prefers-reduced-motion: reduce){
  .fv-scar,.fv-scar-flame,.fv-scar-spark,.fv-scar-rock{display:none !important}
}
.fv-scar .fv-scar-branch{fill:none;stroke-linecap:round}

/* element-specific fever particles */
.fv-scar-shard{position:fixed;width:11px;height:18px;pointer-events:none;z-index:94;
  clip-path:polygon(50% 0,100% 42%,100% 58%,50% 100%,0 58%,0 42%);
  filter:drop-shadow(0 0 6px #bfeaff);animation:fv-scar-rock .9s cubic-bezier(.2,.7,.3,1) forwards}
.fv-scar-flake{position:fixed;width:10px;height:10px;pointer-events:none;z-index:94;
  background:
    linear-gradient(0deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),
    linear-gradient(60deg,transparent 44%,#eafaff 44%,#eafaff 56%,transparent 56%),
    linear-gradient(120deg,transparent 44%,#eafaff 44%,#eafaff 56%,transparent 56%);
  filter:drop-shadow(0 0 5px #bfeaff);animation:fv-fall 1.1s linear forwards}
.fv-scar-paper{position:fixed;width:6px;height:13px;pointer-events:none;z-index:94;
  border-radius:1px;box-shadow:0 0 6px rgba(160,210,160,.7);animation:fv-scar-paper .95s ease-out forwards}
.fv-scar-arc{position:fixed;width:2px;height:28px;pointer-events:none;z-index:94;
  filter:drop-shadow(0 0 8px #b79ee8);animation:fv-scar-spark .45s steps(2,end) forwards}
.fv-ice-veil{position:fixed;inset:0;z-index:92;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(ellipse at 50% 45%,rgba(210,245,255,.5),rgba(160,220,245,.18) 45%,rgba(140,200,230,0) 78%)}
.fv-ice-veil.is-on{opacity:1}
.fv-bolt{position:fixed;inset:0;width:100%;height:100%;z-index:95;pointer-events:none}
.fv-wind-streak{position:fixed;left:-30%;width:36%;height:2px;pointer-events:none;z-index:94;
  background:linear-gradient(90deg,rgba(242,251,233,0),#bfe0b8,rgba(242,251,233,0));
  animation:fv-wind .6s ease-out forwards}
@keyframes fv-scar-paper{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.6)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,40px)),calc(-50% + var(--dy,-60px))) rotate(var(--rot,180deg)) scale(.8)}
}
@keyframes fv-wind{0%{opacity:0;transform:translateX(0)}20%{opacity:.8}100%{opacity:0;transform:translateX(150vw)}}