/* Home page convergence motion patch */

:root {
  --home-core-cyan: #5cc8ff;
  --home-core-teal: #58f0a7;
  --home-core-violet: #a78bfa;
  --home-core-blue: #327dff;
  --home-core-pink: #ff7ce5;
}

/* slightly tighten stage look */
.home-fusion-stage {
  overflow: hidden;
  position: relative;
}

/* center circle zone: breathing + orbiting */
.fusion-core-zone {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: fusionCoreZoneBreath 4.2s ease-in-out infinite;
  z-index: 8;
}

.fusion-core-zone::before,
.fusion-core-zone::after {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 999px;
  pointer-events: none;
  border: 1px solid rgba(92,200,255,.22);
  box-shadow:
    0 0 24px rgba(92,200,255,.16),
    0 0 52px rgba(167,139,250,.10);
  opacity: .7;
}

.fusion-core-zone::before {
  animation: fusionRippleOuter 3.4s ease-out infinite;
}

.fusion-core-zone::after {
  inset: -54px;
  border-color: rgba(167,139,250,.18);
  animation: fusionRippleFar 3.4s ease-out infinite 1.1s;
}

/* stronger core animation */
.fusion-core {
  animation:
    fusionCoreGlow 4.2s ease-in-out infinite,
    fusionCoreSpin 18s linear infinite;
  background:
    radial-gradient(circle at center, rgba(5,11,24,.98), rgba(5,11,24,.96) 44%, transparent 47%),
    conic-gradient(
      from 0deg,
      var(--home-core-cyan),
      var(--home-core-teal),
      var(--home-core-blue),
      var(--home-core-violet),
      var(--home-core-pink),
      var(--home-core-cyan)
    ) !important;
  box-shadow:
    0 0 32px rgba(92,200,255,.44),
    0 0 68px rgba(92,200,255,.26),
    0 0 92px rgba(167,139,250,.25),
    inset 0 0 40px rgba(92,200,255,.18),
    inset 0 0 55px rgba(167,139,250,.16) !important;
}

/* if orbit exists, make it visibly circling */
.fusion-orbit {
  animation: fusionOrbitSpin 16s linear infinite !important;
}

/* add extra motion to central label */
.fusion-core-inner {
  animation: fusionInnerFloat 4.2s ease-in-out infinite;
}

/* bring the side groups into a subtle convergence loop */
.fusion-side.left {
  animation: fusionLeftConverge 3.8s ease-in-out infinite;
  transform-origin: center right;
}

.fusion-side.right {
  animation: fusionRightConverge 3.8s ease-in-out infinite;
  transform-origin: center left;
}

/* tags pulse slightly in sequence */
.fusion-side.left .fusion-tag,
.fusion-side.right .fusion-tag {
  animation: fusionTagPulse 3.2s ease-in-out infinite;
}

.fusion-side .fusion-tag:nth-child(1) { animation-delay: .0s; }
.fusion-side .fusion-tag:nth-child(2) { animation-delay: .18s; }
.fusion-side .fusion-tag:nth-child(3) { animation-delay: .36s; }
.fusion-side .fusion-tag:nth-child(4) { animation-delay: .54s; }
.fusion-side .fusion-tag:nth-child(5) { animation-delay: .72s; }

/* converging energy streams through the center */
.fusion-stream {
  top: 50% !important;
  height: 5px !important;
  opacity: .95;
  border-radius: 999px;
  z-index: 6;
}

.fusion-stream.left {
  animation: fusionBeamLeft 2.1s ease-in-out infinite !important;
  background: linear-gradient(90deg, transparent, rgba(92,200,255,.95), rgba(88,240,167,.95)) !important;
  box-shadow:
    0 0 20px rgba(92,200,255,.72),
    0 0 34px rgba(88,240,167,.24) !important;
}

.fusion-stream.right {
  animation: fusionBeamRight 2.1s ease-in-out infinite !important;
  background: linear-gradient(90deg, rgba(167,139,250,.95), rgba(50,125,255,.95), transparent) !important;
  box-shadow:
    0 0 20px rgba(167,139,250,.72),
    0 0 34px rgba(50,125,255,.24) !important;
}

/* extra flowing particles toward center */
.fusion-particles span {
  animation: fusionParticleFlow 4.8s ease-in-out infinite !important;
}

.fusion-particles span:nth-child(1) { animation-delay: .0s; }
.fusion-particles span:nth-child(2) { animation-delay: .5s; }
.fusion-particles span:nth-child(3) { animation-delay: 1.0s; }
.fusion-particles span:nth-child(4) { animation-delay: 1.5s; }
.fusion-particles span:nth-child(5) { animation-delay: 2.0s; }
.fusion-particles span:nth-child(6) { animation-delay: 2.5s; }

/* central mix chamber if present */
.fusion-mix-box,
.fusion-core-inner .fusion-mix-box {
  animation: fusionMixBoxPulse 3.2s ease-in-out infinite;
}

/* motion keyframes */

@keyframes fusionCoreZoneBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes fusionCoreGlow {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(92,200,255,.34));
  }
  33% {
    filter: drop-shadow(0 0 18px rgba(88,240,167,.34));
  }
  66% {
    filter: drop-shadow(0 0 22px rgba(167,139,250,.36));
  }
}

@keyframes fusionCoreSpin {
  from { background-position: 0 0; }
  to   { background-position: 0 0; }
}

@keyframes fusionOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fusionInnerFloat {
  0%, 100% { transform: scale(.985); }
  50%      { transform: scale(1.02); }
}

@keyframes fusionRippleOuter {
  0%   { transform: scale(.86); opacity: .0; }
  20%  { opacity: .52; }
  100% { transform: scale(1.16); opacity: .0; }
}

@keyframes fusionRippleFar {
  0%   { transform: scale(.82); opacity: .0; }
  22%  { opacity: .40; }
  100% { transform: scale(1.28); opacity: .0; }
}

@keyframes fusionLeftConverge {
  0%, 100% { transform: translateX(0px); opacity: 1; }
  50%      { transform: translateX(24px); opacity: 1; }
}

@keyframes fusionRightConverge {
  0%, 100% { transform: translateX(0px); opacity: 1; }
  50%      { transform: translateX(-24px); opacity: 1; }
}

@keyframes fusionTagPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(92,200,255,0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 12px rgba(92,200,255,.12);
  }
}

@keyframes fusionBeamLeft {
  0%, 100% {
    transform: translateX(-6px) scaleX(.94);
    opacity: .62;
  }
  50% {
    transform: translateX(10px) scaleX(1.08);
    opacity: 1;
  }
}

@keyframes fusionBeamRight {
  0%, 100% {
    transform: translateX(6px) scaleX(.94);
    opacity: .62;
  }
  50% {
    transform: translateX(-10px) scaleX(1.08);
    opacity: 1;
  }
}

@keyframes fusionParticleFlow {
  0%, 100% {
    transform: translate(0, 0) scale(.85);
    opacity: .40;
  }
  50% {
    transform: translate(-6px, -4px) scale(1.2);
    opacity: 1;
  }
}

@keyframes fusionMixBoxPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 22px rgba(92,200,255,.12),
      inset 0 0 24px rgba(167,139,250,.06);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 30px rgba(92,200,255,.18),
      0 0 44px rgba(167,139,250,.14),
      inset 0 0 28px rgba(167,139,250,.10);
  }
}

/* mobile containment */
@media (max-width: 1040px) {
  .fusion-side.left { animation: fusionLeftConvergeTablet 3.8s ease-in-out infinite; }
  .fusion-side.right { animation: fusionRightConvergeTablet 3.8s ease-in-out infinite; }

  @keyframes fusionLeftConvergeTablet {
    0%, 100% { transform: translateX(0px); }
    50%      { transform: translateX(12px); }
  }

  @keyframes fusionRightConvergeTablet {
    0%, 100% { transform: translateX(0px); }
    50%      { transform: translateX(-12px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fusion-core-zone,
  .fusion-core,
  .fusion-orbit,
  .fusion-core-inner,
  .fusion-side.left,
  .fusion-side.right,
  .fusion-side .fusion-tag,
  .fusion-stream.left,
  .fusion-stream.right,
  .fusion-particles span,
  .fusion-mix-box {
    animation: none !important;
  }
}