#powerBeam { display: none; }
html[data-power], html[data-power] body { background: #000; }
html[data-power] #receiver { visibility: hidden; }
html[data-power="cold"] #app { visibility: hidden; }

html[data-power="warming"] { --warm-up: 1150ms; }
[data-power="warming"] #app {
  mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
  mask-repeat: no-repeat;
  mask-position: center;
  animation: power-aperture var(--warm-up) linear both;
}
[data-power="warming"] #powerBeam {
  display: block; position: fixed; inset: 0; pointer-events: none;
}
#powerBeam::before, #powerBeam::after {
  content: ""; position: absolute; top: 50%; left: 50%;
}
#powerBeam::before {
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #fff9 20%, white 50%, #fff9 80%, transparent);
  box-shadow: 0 -2px 9px #fff8, 0 3px 16px #fff6;
  animation: power-beam var(--warm-up) ease-out both;
}
#powerBeam::after {
  width: 104px; height: 78px;
  background: radial-gradient(ellipse 49% 6%, white 6%, #fffc 25%, transparent 94%),
    radial-gradient(ellipse 6% 48%, white 6%, #fffb 25%, transparent 91%),
    radial-gradient(ellipse 38% 45%, white 5%, #fff9 22%, #fff1 60%, transparent);
  animation: power-point var(--warm-up) ease-out both;
}
@keyframes power-point {
  0%, 6% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(.10); }
  21% { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  33% { opacity: .85; transform: translate(-50%, -50%) scale(1.6, .32); }
  53%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3, .07); }
}
@keyframes power-beam {
  0%, 20% { opacity: 0; transform: translate(-50%, -50%) scaleX(.01); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(.035, 1.2); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(.98, 1); }
  52% { opacity: .75; transform: translate(-50%, -50%) scale(1, 2); }
  68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1, 4); }
}
@keyframes power-aperture {
  0%, 27% { mask-size: 0% 0%; filter: grayscale(1) brightness(1.8); }
  43% { mask-size: 97% 1.2%; }
  49% { mask-size: 100% 2.2%; filter: grayscale(1) brightness(1.8); }
  60% { mask-size: 100% 55%; }
  73% { mask-size: 100% 142%; filter: grayscale(1) brightness(1.14); }
  86% { mask-size: 100% 145%; filter: grayscale(1) brightness(.96); }
  100% { mask-size: 100% 145%; filter: grayscale(0) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-power] #app, html[data-power] #receiver { animation: none; visibility: visible; }
  html[data-power] #powerBeam { display: none; }
}