/* MASTER-J portrait electric aura: layered crimson, emerald and deep-blue energy. */
.portrait-electric-field {
  position: absolute;
  inset: -7% -8% -8% -8%;
  z-index: 4;
  display: block;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  opacity: .96;
  mix-blend-mode: screen;
  filter: saturate(1.18);
}
.portrait-electric-field::before {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 7% 49%, rgba(255, 25, 74, .32) 0, rgba(255, 25, 74, .12) 17%, transparent 34%),
    radial-gradient(ellipse at 93% 58%, rgba(0, 102, 255, .30) 0, rgba(0, 102, 255, .11) 18%, transparent 36%),
    radial-gradient(ellipse at 48% 4%, rgba(0, 255, 157, .24) 0, rgba(0, 255, 157, .09) 24%, transparent 42%),
    radial-gradient(ellipse at 50% 96%, rgba(0, 195, 255, .16) 0, transparent 32%);
  filter: blur(22px);
  opacity: .82;
  animation: portrait-aura-pulse 5.8s ease-in-out infinite alternate;
}
.portrait-electric-field::after {
  content: "";
  position: absolute;
  inset: -2% -1%;
  border-radius: 50%;
  background: conic-gradient(from 22deg,
    transparent 0 8%, rgba(0, 255, 160, .70) 10%, transparent 13% 29%,
    rgba(255, 35, 83, .68) 32%, transparent 36% 53%,
    rgba(0, 130, 255, .78) 57%, transparent 61% 78%,
    rgba(0, 255, 177, .65) 82%, transparent 86% 100%);
  -webkit-mask: radial-gradient(ellipse 48% 44% at 50% 50%, transparent 62%, #000 69%, transparent 79%);
  mask: radial-gradient(ellipse 48% 44% at 50% 50%, transparent 62%, #000 69%, transparent 79%);
  filter: blur(2.5px);
  opacity: .46;
  animation: portrait-energy-orbit 18s linear infinite;
}
.portrait-electric-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(0, 255, 155, .28));
}
.portrait-bolt-set { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portrait-bolt-glow {
  stroke-width: 7;
  opacity: .44;
  filter: blur(4.4px);
  stroke-dasharray: 8 12;
  animation: portrait-bolt-flash 4.8s ease-in-out infinite, portrait-bolt-flow 7s linear infinite;
}
.portrait-bolt-core {
  stroke-width: 1.45;
  stroke-dasharray: 5 9;
  opacity: .9;
  filter: drop-shadow(0 0 4px currentColor);
  animation: portrait-bolt-flash 4.8s ease-in-out infinite, portrait-bolt-flow 5.4s linear infinite;
}
.portrait-bolt-branch {
  stroke-width: 1.05;
  stroke-dasharray: 3 7;
  opacity: .66;
  filter: blur(.25px) drop-shadow(0 0 4px currentColor);
  animation: portrait-branch-flash 3.7s steps(1, end) infinite;
}
.portrait-bolt-set-red .portrait-bolt-glow,
.portrait-bolt-set-red .portrait-bolt-core,
.portrait-bolt-set-red .portrait-bolt-branch { stroke: url(#mjBoltRed); }
.portrait-bolt-set-green .portrait-bolt-glow,
.portrait-bolt-set-green .portrait-bolt-core,
.portrait-bolt-set-green .portrait-bolt-branch,
.portrait-bolt-set-green-right .portrait-bolt-glow,
.portrait-bolt-set-green-right .portrait-bolt-core,
.portrait-bolt-set-green-right .portrait-bolt-branch { stroke: url(#mjBoltGreen); }
.portrait-bolt-set-blue .portrait-bolt-glow,
.portrait-bolt-set-blue .portrait-bolt-core,
.portrait-bolt-set-blue .portrait-bolt-branch { stroke: url(#mjBoltBlue); }
.portrait-bolt-set-red { animation-delay: -.7s; }
.portrait-bolt-set-green { animation-delay: -2.1s; }
.portrait-bolt-set-blue { animation-delay: -1.4s; }
.portrait-bolt-set-green-right { animation-delay: -3.2s; }
.portrait-bolt-set-red .portrait-bolt-glow,
.portrait-bolt-set-red .portrait-bolt-core { animation-delay: -.7s; }
.portrait-bolt-set-green .portrait-bolt-glow,
.portrait-bolt-set-green .portrait-bolt-core { animation-delay: -2.1s; }
.portrait-bolt-set-blue .portrait-bolt-glow,
.portrait-bolt-set-blue .portrait-bolt-core { animation-delay: -1.4s; }
.portrait-bolt-set-green-right .portrait-bolt-glow,
.portrait-bolt-set-green-right .portrait-bolt-core { animation-delay: -3.2s; }
.portrait-energy-points circle {
  fill: #eafffa;
  opacity: .76;
  filter: drop-shadow(0 0 4px #00ffad) drop-shadow(0 0 8px #168cff);
  transform-box: fill-box;
  transform-origin: center;
  animation: portrait-energy-point 2.6s ease-in-out infinite;
}
.portrait-energy-points circle:nth-child(2n) { animation-delay: -.9s; fill: #ffb4c4; filter: drop-shadow(0 0 5px #ff315e); }
.portrait-energy-points circle:nth-child(3n) { animation-delay: -1.7s; fill: #9acaff; filter: drop-shadow(0 0 5px #168cff); }
.portrait-energy-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.2);
  background: #eafffa;
  box-shadow: 0 0 7px 3px #00ffad, 0 0 18px 7px rgba(0, 255, 157, .72);
  animation: portrait-spark-pop 3.8s ease-out infinite;
}
.portrait-energy-spark.spark-red { left: 9%; top: 48%; background: #fff0f4; box-shadow: 0 0 7px 3px #ff315e, 0 0 18px 7px rgba(255, 35, 83, .72); animation-delay: -1.2s; }
.portrait-energy-spark.spark-green { left: 28%; top: 10%; animation-delay: -2.7s; }
.portrait-energy-spark.spark-blue { right: 9%; top: 61%; background: #eef8ff; box-shadow: 0 0 7px 3px #168cff, 0 0 18px 7px rgba(0, 110, 255, .72); animation-delay: -3.4s; }
.home-showcase .portrait-aura {
  background:
    radial-gradient(ellipse at 24% 48%, rgba(255, 26, 75, .20), transparent 38%),
    radial-gradient(ellipse at 75% 53%, rgba(0, 115, 255, .18), transparent 39%),
    radial-gradient(ellipse at 48% 42%, rgba(0, 255, 135, .25), rgba(0, 185, 92, .10) 49%, transparent 76%) !important;
  box-shadow: 0 0 42px rgba(0, 255, 136, .12), 0 0 55px rgba(255, 25, 70, .08) !important;
  opacity: .94 !important;
}
.home-showcase .portrait-panel.is-reacting .portrait-electric-field { opacity: 1; filter: saturate(1.42) brightness(1.12); }
.home-showcase .portrait-panel.is-reacting .portrait-bolt-core { stroke-width: 1.9; }
.home-showcase .portrait-panel.is-reacting .portrait-energy-spark { animation-duration: 1.9s; }
@keyframes portrait-aura-pulse { 0% { transform: scale(.94) rotate(-2deg); opacity: .56; } 55% { transform: scale(1.05) rotate(1deg); opacity: .94; } 100% { transform: scale(.98) rotate(3deg); opacity: .72; } }
@keyframes portrait-energy-orbit { to { transform: rotate(360deg); } }
@keyframes portrait-bolt-flash { 0%, 9%, 12%, 23%, 100% { opacity: .08; } 10% { opacity: .94; } 11% { opacity: .26; } 17% { opacity: .68; } 18% { opacity: .10; } }
@keyframes portrait-bolt-flow { to { stroke-dashoffset: -120; } }
@keyframes portrait-branch-flash { 0%, 100% { opacity: .08; } 14% { opacity: .70; } 16% { opacity: .12; } 54% { opacity: .42; } 56% { opacity: .08; } }
@keyframes portrait-energy-point { 0%, 100% { opacity: .22; transform: scale(.55); } 48% { opacity: 1; transform: scale(1.8); } }
@keyframes portrait-spark-pop { 0%, 8%, 100% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; transform: scale(1.45); } 18% { opacity: .25; transform: scale(.6); } 24% { opacity: .85; transform: scale(1.1); } 36% { opacity: 0; transform: scale(.15); } }
@media (max-width: 980px) {
  .portrait-electric-field { inset: -4% -4% -5%; opacity: .76; }
  .portrait-electric-field::before { filter: blur(16px); }
  .portrait-electric-svg { opacity: .76; }
  .portrait-electric-field::after { opacity: .34; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-electric-field::before,
  .portrait-electric-field::after,
  .portrait-electric-field *,
  .portrait-electric-field { animation: none !important; transition: none !important; }
  .portrait-electric-field::before { opacity: .8; }
  .portrait-electric-field::after { opacity: .28; }
}