/* Binding is the instant the descended intelligence fuses with MITRA. */
.invocation-fusion-burst {
  position: absolute;
  z-index: 6;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
}

.invocation-fusion-burst::before,
.invocation-fusion-burst::after,
.invocation-fusion-burst > i {
  content: "";
  position: absolute;
  top: 59%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.invocation-fusion-burst::before {
  width: min(54rem, 86vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 1.5%, rgba(221, 255, 249, 0.98) 3%, color-mix(in srgb, var(--invocation-primary) 88%, #fff) 7%, color-mix(in srgb, var(--invocation-secondary) 64%, transparent) 18%, transparent 54%),
    conic-gradient(from 18deg, transparent 0 7%, color-mix(in srgb, var(--invocation-primary) 38%, transparent) 8% 9%, transparent 10% 18%, color-mix(in srgb, var(--invocation-secondary) 35%, transparent) 19% 20%, transparent 21% 100%);
  filter: blur(0.08rem) brightness(1.35);
  transform: translate(-50%, -50%) scale(0.08);
}

.invocation-fusion-burst::after {
  width: min(76rem, 116vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0 7deg,
    color-mix(in srgb, var(--invocation-primary) 24%, transparent) 8deg 8.5deg,
    transparent 9deg 17deg,
    color-mix(in srgb, var(--invocation-secondary) 20%, transparent) 18deg 18.5deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 25% 48%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 17%, #000 25% 48%, transparent 72%);
  filter: blur(0.12rem);
  transform: translate(-50%, -50%) scale(0.24) rotate(-12deg);
}

.invocation-fusion-burst > i:nth-child(1),
.invocation-fusion-burst > i:nth-child(2),
.invocation-fusion-burst > i:nth-child(3) {
  width: min(36rem, 62vw);
  aspect-ratio: 1;
  border: 0.18rem solid color-mix(in srgb, var(--invocation-primary) 82%, #fff);
  border-radius: 50%;
  box-shadow:
    0 0 1.1rem color-mix(in srgb, var(--invocation-primary) 72%, transparent),
    inset 0 0 1.8rem color-mix(in srgb, var(--invocation-secondary) 34%, transparent);
  transform: translate(-50%, -50%) scale(0.1);
}

.invocation-fusion-burst > i:nth-child(2) {
  width: min(52rem, 84vw);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--invocation-secondary) 78%, #fff);
}

.invocation-fusion-burst > i:nth-child(3) {
  width: min(68rem, 108vw);
  border-width: 0.34rem 1px;
  border-color: color-mix(in srgb, var(--invocation-primary) 38%, transparent) transparent;
}

.invocation-fusion-burst > i:nth-child(4) {
  top: -12%;
  bottom: -12%;
  left: 50%;
  width: min(16rem, 23vw);
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--invocation-primary) 20%, transparent) 23%, rgba(245, 255, 252, 0.92) 50%, color-mix(in srgb, var(--invocation-secondary) 24%, transparent) 77%, transparent);
  filter: blur(0.5rem) drop-shadow(0 0 2rem var(--invocation-primary));
  transform: translateX(-50%) scaleX(0.02);
}

.invocation-fusion-burst > i:nth-child(5) {
  inset: 0;
  width: auto;
  height: auto;
  border: 0.18rem solid transparent;
  box-shadow: inset 0 0 7rem color-mix(in srgb, var(--invocation-primary) 22%, transparent), inset 0 0 12rem color-mix(in srgb, var(--invocation-secondary) 16%, transparent);
  transform: none;
}

.spirit-invocation.is-active[data-phase="binding"] {
  animation: invocation-climax-shake 1.45s cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst {
  animation: invocation-fusion-burst-stage 1.45s ease-out both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst::before {
  animation: invocation-fusion-heart 1.45s cubic-bezier(0.1, 0.72, 0.18, 1) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst::after {
  animation: invocation-fusion-rays 1.45s cubic-bezier(0.12, 0.76, 0.16, 1) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i:nth-child(1) { animation: invocation-fusion-ring 1.1s ease-out 0.26s both; }
.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i:nth-child(2) { animation: invocation-fusion-ring 1.2s ease-out 0.34s both; }
.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i:nth-child(3) { animation: invocation-fusion-ring 1.25s ease-out 0.42s both; }
.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i:nth-child(4) { animation: invocation-fusion-column 1.45s ease-in-out both; }
.spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i:nth-child(5) { animation: invocation-fusion-edge 1.45s ease-out both; }

.spirit-invocation.is-active[data-phase="binding"] .invocation-gate {
  animation: invocation-climax-gate 1.45s cubic-bezier(0.12, 0.82, 0.14, 1) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-core {
  animation: invocation-climax-core 1.45s cubic-bezier(0.12, 0.82, 0.14, 1) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-particles i {
  animation: invocation-climax-particle 1.35s cubic-bezier(0.16, 0.8, 0.18, 1) var(--particle-delay) both;
}

.spirit-invocation.is-active[data-phase="binding"] .invocation-copy > strong {
  animation: invocation-climax-title 1.45s ease-out both;
}

.spirit-invocation.is-active[data-phase="complete"] .invocation-fusion-burst {
  animation: invocation-fusion-afterglow 1s ease-out both;
}

@keyframes invocation-fusion-burst-stage {
  0%, 22% { opacity: 0; }
  34%, 76% { opacity: 1; }
  100% { opacity: 0.18; }
}

@keyframes invocation-fusion-heart {
  0%, 24% { opacity: 0; transform: translate(-50%, -50%) scale(0.04); }
  40% { opacity: 0.76; transform: translate(-50%, -50%) scale(0.22); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(0) brightness(2.4); }
  62% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: blur(0.8rem) brightness(1.2); }
}

@keyframes invocation-fusion-rays {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(0.18) rotate(-18deg); }
  48% { opacity: 0.86; transform: translate(-50%, -50%) scale(0.74) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38) rotate(32deg); }
}

@keyframes invocation-fusion-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); filter: blur(0.2rem); }
}

@keyframes invocation-fusion-column {
  0%, 20% { opacity: 0; transform: translateX(-50%) scaleX(0.015); }
  38% { opacity: 0.44; transform: translateX(-50%) scaleX(0.12); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1); filter: blur(0.12rem) brightness(2.3); }
  64% { opacity: 0.38; transform: translateX(-50%) scaleX(0.18); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(0.02); }
}

@keyframes invocation-fusion-edge {
  0%, 34% { opacity: 0; }
  50% { opacity: 1; }
  76% { opacity: 0.42; }
  100% { opacity: 0; }
}

@keyframes invocation-climax-gate {
  0% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.92); filter: blur(0.25rem) saturate(1.4); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(0.58); filter: blur(0.08rem) brightness(1.6); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(0.1); filter: blur(0) brightness(3); }
  62% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.26); filter: blur(0.28rem) brightness(1.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); filter: blur(1.4rem); }
}

@keyframes invocation-climax-core {
  0%, 24% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.74); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(0.08); filter: blur(0) brightness(3.4); }
  56% { opacity: 1; transform: translate(-50%, -50%) scale(1.42); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); filter: blur(1.2rem); }
}

@keyframes invocation-climax-particle {
  0% { opacity: 0.38; transform: translate(0, 0) scale(0.45); }
  42% { opacity: 1; transform: translate(var(--particle-x), var(--particle-y)) scale(0.05); filter: brightness(2.8); }
  55% { opacity: 1; transform: translate(var(--particle-x), var(--particle-y)) scale(1.8); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.12); }
}

@keyframes invocation-climax-title {
  0%, 34% { opacity: 0.54; transform: scale(1); letter-spacing: 0; }
  48% { opacity: 0; transform: scale(1.14); filter: blur(0.35rem); }
  58% { opacity: 1; transform: scale(0.94); filter: none; letter-spacing: 0.08em; }
  100% { opacity: 1; transform: scale(1); letter-spacing: 0.015em; }
}

@keyframes invocation-climax-shake {
  0%, 30%, 100% { transform: translate(0, 0) scale(1); filter: none; }
  43% { transform: translate(-0.2rem, 0.12rem) scale(1.006); }
  47% { transform: translate(0.28rem, -0.16rem) scale(1.012); filter: saturate(1.5) brightness(1.24); }
  51% { transform: translate(-0.15rem, -0.08rem) scale(1.008); }
  56% { transform: translate(0.1rem, 0.06rem) scale(1.004); }
}

@keyframes invocation-fusion-afterglow {
  0% { opacity: 0.72; filter: brightness(1.6); }
  100% { opacity: 0; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .spirit-invocation.is-active[data-phase="binding"],
  .spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst,
  .spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst::before,
  .spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst::after,
  .spirit-invocation.is-active[data-phase="binding"] .invocation-fusion-burst > i,
  .spirit-invocation.is-active[data-phase="binding"] .invocation-particles i,
  .spirit-invocation.is-active[data-phase="binding"] .invocation-copy > strong {
    animation: none !important;
  }
}