/* 4. Floodlights on */
.loader-lights{background:transparent}
.scrim{position:absolute;inset:0;background:#000;z-index:1;opacity:1}
.loader-lights.is-running .scrim{animation:scrimOut .85s var(--ease) 1.85s forwards}
@keyframes scrimOut{to{opacity:0}}
.rig{position:absolute;inset:0;z-index:3;pointer-events:none}
.lamp{position:absolute;width:0;height:0}
.l1{left:20%;top:5%}
.l2{right:20%;top:5%;left:auto}
.l3{left:11%;top:24%}
.l4{right:11%;top:24%;left:auto}
.bulb{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff8d0;opacity:0;box-shadow:0 0 10px 4px rgba(235,234,100,.95),0 0 2px 1px #fff;z-index:2}
.bloom{position:absolute;width:24vmax;height:24vmax;margin:-12vmax 0 0 -12vmax;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.65);
  background:radial-gradient(circle,rgba(255,255,240,.85) 0 1%,rgba(255,248,200,.4) 6%,rgba(235,234,100,.16) 18%,transparent 58%);
  will-change:opacity,transform}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.beam{position:absolute;width:32vmax;height:72vh;left:0;top:0;margin-left:-16vmax;opacity:0;
  transform-origin:50% 0;will-change:opacity,transform;overflow:visible}
.l3 .beam,.l4 .beam{height:62vh;width:26vmax;margin-left:-13vmax}
.l3 .beam{transform:rotate(-16deg)}
.l4 .beam{transform:rotate(16deg)}
.loader-lights.is-running .l1 .bulb{animation:snap .2s var(--ease) .35s forwards}
.loader-lights.is-running .l2 .bulb{animation:snap .2s var(--ease) .85s forwards}
.loader-lights.is-running .l3 .bulb{animation:snap .2s var(--ease) 1.35s forwards}
.loader-lights.is-running .l4 .bulb{animation:snap .2s var(--ease) 1.85s forwards}
.loader-lights.is-running .l1 .bloom{animation:snap .2s var(--ease) .35s forwards, bloomDim .5s var(--ease) 1.95s forwards}
.loader-lights.is-running .l2 .bloom{animation:snap .2s var(--ease) .85s forwards, bloomDim .5s var(--ease) 1.95s forwards}
.loader-lights.is-running .l3 .bloom{animation:snap .2s var(--ease) 1.35s forwards, bloomDim .5s var(--ease) 1.95s forwards}
.loader-lights.is-running .l4 .bloom{animation:snap .2s var(--ease) 1.85s forwards, bloomDim .5s var(--ease) 2.15s forwards}
@keyframes bloomDim{to{opacity:.28;transform:scale(1)}}
@keyframes snap{
  from{opacity:0;transform:scale(.6)}
  30%{opacity:1;transform:scale(1.1)}
  to{opacity:1;transform:scale(1)}
}
.loader-lights.is-running .l1 .beam{animation:snapBeam .28s var(--ease) .35s forwards, beamDim .4s var(--ease) 1.95s forwards}
.loader-lights.is-running .l2 .beam{animation:snapBeam .28s var(--ease) .85s forwards, beamDim .4s var(--ease) 1.95s forwards}
.loader-lights.is-running .l3 .beam{animation:snapBeamL .28s var(--ease) 1.35s forwards, beamDimL .4s var(--ease) 1.95s forwards}
.loader-lights.is-running .l4 .beam{animation:snapBeamR .28s var(--ease) 1.85s forwards, beamDimR .4s var(--ease) 2.15s forwards}
@keyframes snapBeam{
  from{opacity:0;transform:scaleY(.35)}
  40%{opacity:1;transform:scaleY(1.03)}
  to{opacity:.9;transform:scaleY(1)}
}
@keyframes snapBeamL{
  from{opacity:0;transform:rotate(-16deg) scaleY(.35)}
  40%{opacity:1;transform:rotate(-16deg) scaleY(1.03)}
  to{opacity:.9;transform:rotate(-16deg) scaleY(1)}
}
@keyframes snapBeamR{
  from{opacity:0;transform:rotate(16deg) scaleY(.35)}
  40%{opacity:1;transform:rotate(16deg) scaleY(1.03)}
  to{opacity:.9;transform:rotate(16deg) scaleY(1)}
}
.hud-l{position:absolute;left:var(--pad);bottom:10%;z-index:4}
.hud-l [data-pct]{font:800 italic clamp(28px,5vw,56px)/1 var(--display);color:var(--yellow);letter-spacing:.06em}
.hud-l .kicker{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,239,.55);margin:0 0 10px}
.loader-lights.is-done .rig,.loader-lights.is-done .hud-l{opacity:0;transition:opacity .45s var(--ease)}
.loader-lights.is-done{transition:opacity .35s var(--ease) .3s}

@media (orientation:landscape) and (max-height:500px){
  .l1,.l2{top:3%}
  .l3,.l4{top:20%}
  .bloom{width:64vmax;height:64vmax;margin:-32vmax 0 0 -32vmax}
}
@media (prefers-reduced-motion:reduce){
  .loader-lights.is-running .bulb,.loader-lights.is-running .bloom,.loader-lights.is-running .beam{opacity:1;animation:none}
  .loader-lights.is-running .l3 .beam{transform:rotate(-16deg)}
  .loader-lights.is-running .l4 .beam{transform:rotate(16deg)}
  .loader-lights.is-running .scrim{opacity:0;animation:none}
}

@keyframes beamDim{to{opacity:0;transform:scaleY(1)}}
@keyframes beamDimL{to{opacity:0;transform:rotate(-16deg) scaleY(1)}}
@keyframes beamDimR{to{opacity:0;transform:rotate(16deg) scaleY(1)}}