/* The original home image stays untouched. Coordinates follow its 1672:941
   centered/contain viewport rectangle, not the scaled game UI. */
body.home-cinemagraph-active::before,
body.home-cinemagraph-active::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Visible local light variation, still smooth rather than rapid flashing. */
body.home-cinemagraph-active::before {
  background:
    radial-gradient(ellipse 6% 17% at 26% 6%, rgba(174, 216, 255, .7), transparent 80%),
    radial-gradient(ellipse 4% 12% at 5.4% 48%, rgba(174, 216, 255, .55), transparent 80%),
    radial-gradient(ellipse 5% 10% at 79% 43%, rgba(174, 216, 255, .3), transparent 80%),
    radial-gradient(ellipse 15% 4% at 76% 79%, rgba(160, 207, 246, .16), transparent 85%);
  animation: home-lamp-breathe 6.4s ease-in-out infinite;
}

/* Plume at the upper-right service duct, visible above the command buttons.
   A broad, soft plume drifts away from the duct and dissolves before looping. */
body.home-cinemagraph-active::after {
  background:
    radial-gradient(ellipse 2.2% 2% at 94% 29%, rgba(211, 229, 244, .65), transparent 80%),
    radial-gradient(ellipse 3.5% 3% at 92% 27%, rgba(211, 229, 244, .5), transparent 80%),
    radial-gradient(ellipse 4.5% 3.5% at 89% 25%, rgba(211, 229, 244, .32), transparent 80%);
  animation: home-service-steam 5s ease-out -1.8s infinite;
}

/* A feathered core covers the whole fixture, with softer spill around it.
   Uneven failed-start clusters alternate with stable light and a longer dip. */
#home-failing-lamp { display: none; }
body.home-cinemagraph-active #home-failing-lamp {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 1672 / 941));
  height: min(100vh, calc(100vw * 941 / 1672));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
#home-failing-lamp::before {
  content: "";
  position: absolute;
  /* Source bright pixels: x1521–1570, y168–182 in the 1672×941 image.
     Keep the full tube inside the dense core, not the fading rim. */
  left: 89.234%;
  top: 16.197%;
  width: 6.4%;
  height: 4.8%;
  transform: rotate(-17deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 48% 32% at center, rgba(20, 37, 55, .98) 65%, rgba(20, 37, 55, .9) 78%, transparent 100%),
    radial-gradient(ellipse at center, rgba(20, 37, 55, .22), transparent 72%);
  animation: home-tube-failure 9.7s steps(1, end) -1.1s infinite;
}
#home-failing-lamp::after {
  content: "";
  position: absolute;
  left: 87.3%;
  top: 12.5%;
  width: 10%;
  height: 13%;
  background: radial-gradient(ellipse at 50% 50%, rgba(155, 210, 255, .42), transparent 65%);
  animation: home-tube-glow 9.7s steps(1, end) -1.1s infinite;
}
@keyframes home-tube-failure {
  0%, 11.7%, 16%, 23.8%, 48.6%, 55%, 76%, 82.8%, 100% { opacity: 0; }
  11%, 23%, 48%, 82% { opacity: .72; }
  15%, 54%, 75% { opacity: .94; }
  19% { opacity: .85; }
  21% { opacity: .38; }
  51% { opacity: .5; }
  79% { opacity: .97; }
  81% { opacity: .45; }
}
@keyframes home-tube-glow {
  0%, 11.7%, 16%, 23.8%, 48.6%, 55%, 76%, 82.8%, 100% { opacity: .9; }
  11%, 23%, 48%, 82% { opacity: .2; }
  15%, 19%, 54%, 75%, 79% { opacity: .03; }
  21%, 51%, 81% { opacity: .45; }
}

body[data-route="home"] .app-shell { z-index: 1; }

@keyframes home-lamp-breathe {
  0%, 100% { opacity: .2; }
  38% { opacity: 1; }
  68% { opacity: .35; }
  85% { opacity: .8; }
}
@keyframes home-service-steam {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  14% { opacity: .65; }
  35% { opacity: 1; }
  65% { opacity: .55; }
  92%, 100% { opacity: 0; transform: translate(-56%, -53%); }
}

.page-hidden body.home-cinemagraph-active::before,
.page-hidden body.home-cinemagraph-active::after,
.page-hidden #home-failing-lamp::before,
.page-hidden #home-failing-lamp::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  body.home-cinemagraph-active::before,
  body.home-cinemagraph-active::after { content: none; animation: none; }
  body.home-cinemagraph-active #home-failing-lamp { display: none; }
}