@layer components {
  .hero-lockup {
    --art-size: clamp(220px, 34vw, 340px);
    position: relative;
    isolation: isolate;
  }

  .hero-art {
    position: relative;
    container-type: inline-size;
    width: var(--art-size);
    margin: 0 auto 12px;
  }

  .hero-art img { width: 100%; }

  /* Keep the light above BOTH the artwork and the lettering. Blending inside
     the artwork's size container cannot illuminate its sibling wordmark. */
  .headlights {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: var(--art-size);
    height: var(--art-size);
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
    mix-blend-mode: difference;
  }

  .siren, .lamp { display: none; position: absolute; pointer-events: none; }
  .siren {
    width: 6.522%;
    height: 6.522%;
    border-radius: 50%;
    /* A broad wash over the roof, like the original logo's diffuse beacons. */
    background: var(--siren-color);
    filter: blur(1.3cqw);
    box-shadow: 0 0 8.7cqw 7cqw var(--siren-color);
    opacity: .035;
    animation: siren-strobe 1.6s linear infinite;
  }
  .siren-red { --siren-color: #ff2020; left: 48.913%; top: 19.565%; }
  .siren-blue { --siren-color: #2060ff; left: 35.652%; top: 25.652%; animation-delay: -.8s; }

  /* Fast ignition, a second discharge, then a lingering faint afterglow.
     The half-cycle offset keeps the red-red / blue-blue bursts distinct. */
  @keyframes siren-strobe {
    0%, 12%, 34%, 100% { opacity: .035; }
    1%, 4% { opacity: .95; }
    7% { opacity: .22; }
    10%, 27% { opacity: .06; }
    13%, 16% { opacity: .85; }
    20% { opacity: .2; }
  }

  .hero-lockup[data-lighting-paused] .siren { animation-play-state: paused; }

  /* One generous hit target covers both pixel-art beacons without adding
     visible button chrome. It works in light mode too, when glows are hidden. */
  .siren-toggle {
    position: absolute;
    z-index: 3;
    left: 32%;
    top: 16%;
    width: 26%;
    height: 20%;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
  }
  .siren-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .lamp {
    width: 4.35%;
    height: 4.35%;
    background: #fff9d6;
    border-radius: 25%;
    filter: blur(.65cqw);
    box-shadow: 0 0 3cqw 1cqw #fff0a970, 0 0 7cqw 2cqw #fff0a91a;
  }
  .lamp-left { left: 61.52%; top: 60.43%; }
  .lamp-right { left: 78.7%; top: 51.96%; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-home-theme="light"]) .wordmark img { filter: invert(.3); }
    :root:not([data-home-theme="light"]) :is(.headlights, .siren, .lamp) { display: block; }
  }

  :root[data-home-theme="dark"] .wordmark img { filter: invert(.3); }
  :root[data-home-theme="dark"] :is(.headlights, .siren, .lamp) { display: block; }
  :root .hero-lockup[data-effects-off] .siren { display: none; }
  :root[data-home-theme="dark"] .hero-lockup:not([data-effects-off]) { touch-action: pan-y pinch-zoom; }
  .hero-lockup img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }

  @media (max-width: 700px) {
    .hero-lockup { --art-size: min(280px, 72vw); }
  }

}