.background-lights-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.background-lights{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg-lights-bg, #222222);
}

.background-lights__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

.background-lights__bg--mobile{
  display:none;
}

.background-lights__bg--desktop{
  display:block;
}

.background-lights__svg{
  position:absolute;
  inset:0;
}

.background-lights__svg svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.background-lights__svg--mobile{
  display:none;
}

@media (max-width: 767.98px){
  .background-lights__svg--mobile{display:block;}
  .background-lights__svg--desktop{display:none;}

  .background-lights__bg--mobile{display:block;}
  .background-lights__bg--desktop{display:none;}
}

/* Overlay should always render (desktop + mobile). Only backgrounds swap. */
@media (max-width: 767.98px){
  .background-lights__svg--overlay.background-lights__svg--desktop{display:block;}
}

.background-lights__svg--overlay{
  z-index:1;
}

.background-lights__svg--overlay .lines{
  opacity:0.05;
}

.background-lights__svg--overlay .line{
  fill:#004061;
}

.background-lights__svg--overlay .lights{
  opacity:0.9;
}

.background-lights__svg--overlay .light{
  fill:#004061;
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
}

/* Debug: force overlay to red when enabled */
.background-lights[data-debug-red="1"] .background-lights__svg--overlay .line,
.background-lights[data-debug-red="1"] .background-lights__svg--overlay .light{
  fill:#ff0000 !important;
  opacity:0.8 !important;
}

@keyframes bgLightsMoveDown{
  from{transform:translateY(var(--bg-lights-travel-neg, -1080px));}
  to{transform:translateY(var(--bg-lights-travel, 1080px));}
}

@keyframes bgLightsMoveUp{
  from{transform:translateY(var(--bg-lights-travel, 1080px));}
  to{transform:translateY(var(--bg-lights-travel-neg, -1080px));}
}

/* Calm, subtle motion (slower than the CodePen) with varied durations */
.background-lights .light4,
.background-lights .light5,
.background-lights .light6,
.background-lights .light7,
.background-lights .light8,
.background-lights .light11,
.background-lights .light12,
.background-lights .light13,
.background-lights .light14,
.background-lights .light15,
.background-lights .light16{
  animation-name:bgLightsMoveDown;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.background-lights .light1,
.background-lights .light2,
.background-lights .light3,
.background-lights .light9,
.background-lights .light10,
.background-lights .light17{
  animation-name:bgLightsMoveUp;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.background-lights .light1{animation-duration:78s;animation-delay:-11s}
.background-lights .light2{animation-duration:66s;animation-delay:-29s}
.background-lights .light3{animation-duration:94s;animation-delay:-47s}
.background-lights .light4{animation-duration:72s;animation-delay:-19s}
.background-lights .light5{animation-duration:112s;animation-delay:-61s}
.background-lights .light6{animation-duration:82s;animation-delay:-37s}
.background-lights .light7{animation-duration:100s;animation-delay:-53s}
.background-lights .light8{animation-duration:119s;animation-delay:-73s}
.background-lights .light9{animation-duration:75s;animation-delay:-23s}
.background-lights .light10{animation-duration:105s;animation-delay:-67s}
.background-lights .light11{animation-duration:87s;animation-delay:-41s}
.background-lights .light12{animation-duration:133s;animation-delay:-79s}
.background-lights .light13{animation-duration:77s;animation-delay:-31s}
.background-lights .light14{animation-duration:124s;animation-delay:-59s}
.background-lights .light15{animation-duration:102s;animation-delay:-71s}
.background-lights .light16{animation-duration:143s;animation-delay:-83s}
.background-lights .light17{animation-duration:88s;animation-delay:-43s}

@media (prefers-reduced-motion: reduce){
  .background-lights__svg--overlay .light{animation:none !important;}
}

/* Allow JS to pause animations when tab is hidden */
html.bg-lights-paused .background-lights__svg--overlay .light{
  animation-play-state:paused !important;
}