/* ===========================================================================
 * BUELL NEXUS — drop-in orbital logo animation
 * ---------------------------------------------------------------------------
 * Marks sit around the fringe of a frame, float, spin up clockwise, collapse
 * into a core and burst.
 *
 * Everything is scoped under [data-nexus] so it cannot leak into a host page's
 * styles, and it sets no fonts, no colours and no box model outside its own
 * container. Drop it into anything.
 *
 * The container must be position:relative (or absolute/fixed) and should have
 * a height. The layer fills it.
 * ======================================================================== */

[data-nexus] {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

/* Each orbiting mark. Centred on the nexus origin by its own half-size, so
   marks of different widths all collapse to the same point. */
[data-nexus] .nx {
  position: absolute;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  opacity: 0;
}

/* NO INVERT FILTER. The marks in marks/ carry their own alpha — luminance
   converted to transparency, ink flattened to white, trimmed to the bounding
   box. Inverting a raster logo keeps its plate and gives you a white-on-black
   rectangle, which is the single most common way this effect goes wrong. */
[data-nexus] .nx img { height: auto; display: block; }

/* Marks supplied as text rather than as a file. */
[data-nexus] .nx span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: .08em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

/* The core: a small sun that brightens as the marks arrive. */
[data-nexus] .nx-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 26px;
  height: 26px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0%,
    rgba(255, 236, 190, .95) 38%,
    rgba(255, 190, 90, .45) 62%,
    rgba(255, 170, 60, 0) 74%);
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

/* The burst: an expanding ring plus a full-frame wash, both once. */
[data-nexus] .nx-burst {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .98) 0%,
    rgba(255, 242, 214, .7) 30%,
    rgba(255, 200, 110, .25) 55%,
    rgba(255, 190, 80, 0) 70%);
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

[data-nexus] .nx-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 244, 220, .5) 26%,
    rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  will-change: opacity;
}

/* Optional replay control. Twelve seconds is longer than anyone catches first
   time. Remove it by passing replay:false. */
[data-nexus] .nx-replay {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  pointer-events: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0;
  padding: 6px 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, .61, .24, 1), background .3s;
}
[data-nexus] .nx-replay[data-show="true"] { opacity: .85; }
[data-nexus] .nx-replay:hover { background: rgba(0, 0, 0, .7); opacity: 1; }

/* Reduced motion: the marks rest in their fringe positions. The composition
   still says "these are the houses"; nothing moves. */
@media (prefers-reduced-motion: reduce) {
  [data-nexus] .nx-core,
  [data-nexus] .nx-burst,
  [data-nexus] .nx-wash,
  [data-nexus] .nx-replay { display: none; }
}

/* ===========================================================================
 * v2 — THE TWO LAYERS
 * ---------------------------------------------------------------------------
 * back is masked over the subject, front is not. A mark on the far half of the
 * ring lives in back, so it vanishes as it crosses him and re-emerges the
 * other side. The mask is applied inline by nexus.js from the `subject`
 * option, because it has to know where he stands.
 * ======================================================================== */
[data-nexus] .nx-layer { position: absolute; inset: 0; pointer-events: none; }
[data-nexus] .nx-layer--back  { z-index: 1; }
[data-nexus] .nx-layer--front { z-index: 2; }

/* The blur that carries depth of field is set per frame on the mark itself,
   so the glow has to travel with it rather than sitting in a filter that the
   blur would then overwrite. */
[data-nexus] .nx img {
  filter: none;
  -webkit-filter: none;
  box-shadow: none;
}
[data-nexus] .nx {
  filter: drop-shadow(0 0 7px rgba(255,255,255,.45))
          drop-shadow(0 0 22px rgba(255,214,150,.24));
}