/* Distinctive electrical entrance treatment: lightweight, silent and motion-safe. */
.hero-energy{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  perspective:900px;
}
.hero-inner{z-index:2}
.energy-grid{
  position:absolute;
  inset:-18% -8% -12% 46%;
  opacity:.13;
  transform:rotateY(-17deg) rotateX(58deg) translateY(18%);
  transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(78,203,255,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,203,255,.42) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 78%,transparent 100%);
  animation:grid-arrive 1.4s cubic-bezier(.2,.8,.2,1) both,grid-drift 12s 1.4s linear infinite;
}
.energy-line{
  position:absolute;
  right:-12vw;
  height:2px;
  width:min(62vw,900px);
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(78,203,255,.15) 16%,#4ecbff 60%,transparent);
  box-shadow:0 0 9px #4ecbff,0 0 24px rgba(78,203,255,.55);
  transform-origin:right center;
  opacity:0;
  animation:line-charge 1.1s cubic-bezier(.2,.75,.2,1) forwards;
}
.energy-line-one{top:29%;transform:rotate(-8deg);animation-delay:.12s}
.energy-line-two{top:51%;width:min(50vw,720px);transform:rotate(5deg);animation-delay:.3s}
.energy-line-three{top:72%;width:min(42vw,620px);transform:rotate(-3deg);animation-delay:.48s}
.energy-pulse{
  position:absolute;
  width:11px;
  height:11px;
  border:2px solid #8bdcff;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(78,203,255,.35),0 0 24px #4ecbff;
  opacity:0;
  animation:pulse-in 1.8s .85s ease-out forwards,pulse-breathe 3.4s 2.65s ease-in-out infinite;
}
.energy-pulse-one{right:21%;top:28%}
.energy-pulse-two{right:36%;top:50%;animation-delay:1.05s,2.85s}
.energy-bolt{
  position:absolute;
  right:8%;
  bottom:10%;
  width:108px;
  aspect-ratio:.72;
  opacity:0;
  filter:drop-shadow(0 0 14px rgba(78,203,255,.7));
  background:linear-gradient(145deg,#8bdcff 0 42%,#4ecbff 43% 100%);
  clip-path:polygon(54% 0,12% 56%,44% 56%,30% 100%,88% 39%,56% 39%);
  animation:bolt-arrive .75s .7s cubic-bezier(.2,.85,.25,1.2) forwards,bolt-float 4.5s 1.45s ease-in-out infinite;
}
@keyframes grid-arrive{from{opacity:0;transform:rotateY(-17deg) rotateX(58deg) translateY(34%) scale(.92)}to{opacity:.13;transform:rotateY(-17deg) rotateX(58deg) translateY(18%) scale(1)}}
@keyframes grid-drift{to{background-position:64px 64px}}
@keyframes line-charge{0%{opacity:0;scale:.12 1}45%{opacity:.95}100%{opacity:.42;scale:1 1}}
@keyframes pulse-in{0%{opacity:0;scale:.25}38%{opacity:1}100%{opacity:.72;scale:1.8}}
@keyframes pulse-breathe{50%{opacity:.35;scale:1.25}}
@keyframes bolt-arrive{from{opacity:0;transform:translate3d(40px,25px,0) rotate(10deg) scale(.7)}to{opacity:.7;transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes bolt-float{50%{transform:translate3d(0,-9px,22px) rotate(-2deg);filter:drop-shadow(0 0 22px rgba(78,203,255,.85))}}
@media(max-width:900px){
  .energy-grid{inset:0 -45% -15% 42%;opacity:.09}
  .energy-line{right:-34vw;width:88vw}
  .energy-line-two{width:76vw}.energy-line-three{width:68vw}
  .energy-bolt{width:76px;right:5%;bottom:8%;opacity:.5}
}
@media(max-width:620px){
  .energy-grid{inset:12% -82% -10% 34%;background-size:52px 52px}
  .energy-line{right:-64vw;width:112vw;opacity:.26}
  .energy-line-one{top:24%}.energy-line-two{top:49%}.energy-line-three{top:74%}
  .energy-pulse{display:none}
  .energy-bolt{width:58px;right:4%;bottom:6%}
}
@media(prefers-reduced-motion:reduce){
  .energy-grid,.energy-line,.energy-pulse,.energy-bolt{animation:none}
  .energy-grid{opacity:.09}
  .energy-line{opacity:.24;scale:1 1}
  .energy-pulse{opacity:.45;scale:1.25}
  .energy-bolt{opacity:.52}
}