/* World-space Health Center ceremony. Light travels from the healer to the
   trainer, then resolves as a restrained ground bloom and status confirmation. */
.health-center-heal {
  position: absolute;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  border-radius: var(--radius);
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
  transition: opacity 220ms ease;
}

.health-center-heal.is-finished {
  opacity: 0;
}

.health-center-heal__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 24% 20% at var(--heal-target-x) var(--heal-target-y),
      rgba(233, 255, 216, 0.4) 0%,
      rgba(103, 238, 164, 0.17) 42%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 15% 12% at var(--heal-source-x) var(--heal-source-y),
      rgba(255, 242, 164, 0.24),
      transparent 74%
    );
  mix-blend-mode: screen;
  opacity: 0;
  animation: health-center-heal-veil 2200ms ease-out both;
}

.health-center-heal__stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.health-center-heal__stream-glow,
.health-center-heal__stream-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.health-center-heal__stream-glow {
  stroke: rgba(87, 255, 175, 0.35);
  stroke-width: 13;
  filter: blur(4px);
  animation: health-center-heal-stream 1500ms cubic-bezier(0.2, 0.72, 0.22, 1) 120ms both;
}

.health-center-heal__stream-core {
  stroke: url("#healthCenterHealGradient");
  stroke-width: 2.5;
  filter: url("#healthCenterHealGlow");
  animation: health-center-heal-stream 1420ms cubic-bezier(0.2, 0.72, 0.22, 1) 190ms both;
}

.health-center-heal__stream-orb {
  fill: #f7ffd2;
  stroke: #8effc3;
  stroke-width: 1.5;
  opacity: 0;
  animation: health-center-heal-orb 1050ms ease-out both;
}

.health-center-heal__stream-orb--one {
  animation-delay: 220ms;
}

.health-center-heal__stream-orb--two {
  animation-delay: 450ms;
}

.health-center-heal__source {
  position: absolute;
  left: var(--heal-source-x);
  top: var(--heal-source-y);
  width: clamp(30px, 6%, 48px);
  aspect-ratio: 1.55;
  border: 1px solid rgba(255, 246, 175, 0.88);
  border-radius: 50%;
  box-shadow:
    0 0 9px rgba(255, 236, 137, 0.85),
    0 0 24px rgba(103, 245, 166, 0.48),
    inset 0 0 13px rgba(242, 255, 207, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.38);
  animation: health-center-heal-source 1050ms cubic-bezier(0.16, 0.8, 0.22, 1) both;
}

.health-center-heal__source::before,
.health-center-heal__source::after,
.health-center-heal__source span {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(183, 255, 207, 0.58);
  border-radius: 50%;
  opacity: 0;
  animation: health-center-heal-source-ring 880ms ease-out 120ms both;
}

.health-center-heal__source::after {
  animation-delay: 270ms;
}

.health-center-heal__source span {
  inset: 34%;
  border: 0;
  background: #fffbd0;
  box-shadow: 0 0 10px #eaffb6;
  animation: health-center-heal-source-core 900ms ease-out both;
}

.health-center-heal__ground {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  width: clamp(58px, 12%, 100px);
  aspect-ratio: 2.15;
  transform: translate(-50%, -50%);
}

.health-center-heal__ground > span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(178, 255, 204, 0.92);
  border-radius: 50%;
  box-shadow:
    0 0 11px rgba(89, 255, 170, 0.62),
    inset 0 0 13px rgba(255, 246, 178, 0.4);
  opacity: 0;
  transform: scale(0.25);
  animation: health-center-heal-ground-ring 980ms cubic-bezier(0.16, 0.76, 0.2, 1) 760ms both;
}

.health-center-heal__ground > span:nth-child(2) {
  animation-delay: 930ms;
}

.health-center-heal__ground b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 65% 8% 65% 8%;
  background: radial-gradient(circle at 35% 30%, #fffbd0, #77f0ad 55%, #279c75);
  box-shadow:
    0 0 9px rgba(235, 255, 190, 0.94),
    0 0 24px rgba(62, 239, 155, 0.78);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.2);
  animation: health-center-heal-bloom 1040ms cubic-bezier(0.16, 0.8, 0.2, 1) 780ms both;
}

.health-center-heal__petals {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  width: 1px;
  height: 1px;
}

.health-center-heal__petals i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--heal-size);
  height: calc(var(--heal-size) * 1.65);
  border-radius: 80% 8% 80% 8%;
  background: linear-gradient(145deg, #fff8bc, #79f2ac 70%);
  box-shadow: 0 0 7px rgba(113, 255, 180, 0.78);
  opacity: 0;
  transform: rotate(var(--heal-angle)) translateX(8px) scale(0.2);
  animation: health-center-heal-petal 780ms ease-out var(--heal-delay) both;
}

.health-center-heal__status {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  display: grid;
  grid-template-columns: 7px auto;
  align-items: center;
  column-gap: 7px;
  min-width: clamp(138px, 25%, 204px);
  padding: 6px 10px 8px;
  color: #f4ffe9;
  background: linear-gradient(90deg, transparent, rgba(8, 48, 36, 0.72) 17%, rgba(8, 48, 36, 0.72) 83%, transparent);
  text-shadow: 0 1px 8px rgba(112, 255, 178, 0.92);
  opacity: 0;
  transform: translate(-50%, 40px);
  animation: health-center-heal-status 960ms ease-out 1120ms both;
}

.health-center-heal__status span {
  width: 7px;
  height: 7px;
  background: #dfffb3;
  box-shadow: 0 0 8px rgba(126, 255, 178, 0.95);
  transform: rotate(45deg);
}

.health-center-heal__status strong {
  font-size: clamp(0.58rem, 1.45vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
  white-space: nowrap;
}

.health-center-heal__status i {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1px;
  background: linear-gradient(90deg, transparent, #9dffc3 18%, #fff2a8 82%, transparent);
  box-shadow: 0 0 6px rgba(107, 255, 176, 0.75);
  transform: scaleX(0);
  animation: health-center-heal-status-line 620ms ease-out 1210ms both;
}

@keyframes health-center-heal-veil {
  0%, 8% { opacity: 0; }
  35%, 66% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes health-center-heal-stream {
  0% { opacity: 0; stroke-dashoffset: 1; }
  15% { opacity: 1; }
  58% { opacity: 1; stroke-dashoffset: 0; }
  76% { opacity: 0.78; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}

@keyframes health-center-heal-orb {
  0%, 8% { opacity: 0; }
  24%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes health-center-heal-source {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.38); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  62% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.68); }
}

@keyframes health-center-heal-source-ring {
  0% { opacity: 0; transform: scale(0.35); }
  24% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes health-center-heal-source-core {
  0% { opacity: 0; transform: scale(0.2); }
  25%, 68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

@keyframes health-center-heal-ground-ring {
  0% { opacity: 0; transform: scale(0.25); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.75); }
}

@keyframes health-center-heal-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.2); }
  30% { opacity: 1; transform: translate(-50%, -50%) rotate(135deg) scale(1.15); }
  70% { opacity: 0.9; transform: translate(-50%, -54%) rotate(185deg) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -80%) rotate(225deg) scale(0.45); }
}

@keyframes health-center-heal-petal {
  0% {
    opacity: 0;
    transform: rotate(var(--heal-angle)) translateX(8px) scale(0.2);
  }
  20%, 66% { opacity: 0.95; }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--heal-angle) + 32deg)) translateX(var(--heal-distance)) translateY(-16px) scale(0.9);
  }
}

@keyframes health-center-heal-status {
  0% { opacity: 0; transform: translate(-50%, 46px); }
  22%, 74% { opacity: 1; transform: translate(-50%, 40px); }
  100% { opacity: 0; transform: translate(-50%, 34px); }
}

@keyframes health-center-heal-status-line {
  0% { opacity: 0; transform: scaleX(0); }
  35%, 82% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .health-center-heal__stream,
  .health-center-heal__source::before,
  .health-center-heal__source::after,
  .health-center-heal__petals {
    display: none;
  }

  .health-center-heal__source,
  .health-center-heal__ground > span,
  .health-center-heal__ground b {
    animation-duration: 360ms;
    animation-delay: 0ms;
  }

  .health-center-heal__status {
    animation: health-center-heal-status 800ms ease-out both;
  }
}