/* Animated color behind the approved, unchanged header banner.
   Load AFTER brand-v5.css. Add one decorative span before the header image:
   <span class="brand-aurora-sweep" aria-hidden="true"></span>
   Existing motion-ready / motion-paused controls govern both animations.
   Only two bounded gradient surfaces move; no blur or global will-change. */

.site-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}
.site-header > .brand-text, .site-header > .brand-logo {
  position: relative;
  isolation: isolate;
  background: #000;
}

/* A wide elliptical band: blue and violet travel around the banner rather
   than merely changing the opacity of a stationary background glow. */
.site-header > .brand-text::before, .site-header > .brand-logo::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -43% -13%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 22deg,
    #4424c700 0deg,
    #4424c700 22deg,
    #3d48ef 50deg,
    #61b7ff 79deg,
    #3155f2 100deg,
    #4424c700 133deg,
    #4424c700 176deg,
    #711bde 200deg,
    #c05bff 230deg,
    #8124ee 258deg,
    #4424c700 299deg,
    #4424c700 360deg
  );
  -webkit-mask-image: radial-gradient(ellipse, transparent 28%, #000 38%, #000 54%, transparent 69%);
  mask-image: radial-gradient(ellipse, transparent 28%, #000 38%, #000 54%, transparent 69%);
  opacity: .94;
  transform: rotate(-18deg);
  transform-origin: 50% 50%;
}

/* The narrow bright head and colored tail make the second, opposite-moving
   sweep clearly visible within a few seconds. This is decorative artwork. */
.site-header .brand-aurora-sweep {
  position: absolute;
  z-index: -2;
  display: block;
  inset: -32% -8%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  background: conic-gradient(
    from 148deg,
    transparent 0deg,
    transparent 228deg,
    #483eff00 230deg,
    #5955ff88 260deg,
    #9e7eff 282deg,
    #d7edff 295deg,
    #fff 299deg,
    #75aaff 302deg,
    transparent 307deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(ellipse, transparent 43%, #000 46%, #000 48%, transparent 52%);
  mask-image: radial-gradient(ellipse, transparent 43%, #000 46%, #000 48%, transparent 52%);
  opacity: .95;
  transform: rotate(16deg);
  transform-origin: 50% 50%;
}

/* Keep a dark, stable core under the artwork and mobile supporting text.
   The animated color remains visible around it and in the black margins. */
.site-header > .brand-text::after, .site-header > .brand-logo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -3%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, #000f 0%, #000000d9 29%, #000000a8 47%, #00000040 67%, transparent 81%);
}

/* Screen is presentation only: it lets the gradient show through the PNG's
   opaque black background. The file, proportions, and logo pixels stay fixed. */
.site-header .brand-text img, .site-header .brand-logo img {
  position: relative;
  z-index: 1;
  mix-blend-mode: screen;
}
.site-header .brand-readable-name, .site-header .brand-readable-tagline {
  position: relative;
  z-index: 2;
}
.site-header nav, .site-header .header-cta, .site-header .menu-button {
  position: relative;
  z-index: 2;
}
.site-header nav {
  background: #000;
  box-shadow: 0 0 0 9px #000;
}

.motion-ready .site-header > .brand-text::before,
.motion-ready .site-header > .brand-logo::before {
  animation: psy-banner-ribbon-orbit 9s linear infinite;
}
.motion-ready .site-header .brand-aurora-sweep {
  animation: psy-banner-light-sweep 8s linear infinite;
}
@keyframes psy-banner-ribbon-orbit {
  from { transform: rotate(-18deg); }
  to { transform: rotate(342deg); }
}
@keyframes psy-banner-light-sweep {
  from { transform: rotate(16deg); }
  to { transform: rotate(-344deg); }
}

/* Explicit selectors supplement the site's existing global pause rules. */
.motion-paused .site-header > .brand-text::before,
.motion-paused .site-header > .brand-logo::before,
.motion-paused .site-header .brand-aurora-sweep {
  animation-play-state: paused !important;
}
@media (max-width: 800px) {
  .site-header > .brand-text::before, .site-header > .brand-logo::before { inset: -27% -15%; }
  .site-header .brand-aurora-sweep { inset: -20% -10%; }
  .site-header nav { box-shadow: none; }
  .site-header > .brand-text::after, .site-header > .brand-logo::after {
    background: radial-gradient(ellipse at 50% 45%, #000f 0%, #000000d9 28%, #00000099 46%, #00000025 68%, transparent 82%),
                linear-gradient(0deg, #000000e6 0%, #000000b3 20%, transparent 39%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header > .brand-text::before, .site-header > .brand-logo::before,
  .site-header .brand-aurora-sweep { animation: none !important; }
}

/* Fade the moving color before the controls, without a hard nav rectangle. */
.site-header::after{content:"";position:absolute;z-index:1;pointer-events:none;left:0;right:0;bottom:0;height:82px;background:linear-gradient(transparent,#000b 45%,#000 100%)}
.site-header nav{background:transparent;box-shadow:none}
.site-header .header-cta{background:#000b}
@media(max-width:800px){.site-header::after{height:66px}}

/* Keep the mobile aurora continuous around the two readable text lines. */
.site-header>.brand-text,.site-header>.brand-logo{background:transparent}
.site-header .brand-readable-name,.site-header .brand-readable-tagline{text-shadow:0 1px 5px #000,0 0 10px #000}
@media(max-width:800px){.site-header>.brand-text::after,.site-header>.brand-logo::after{background:radial-gradient(ellipse at 50% 45%,#000 0%,#000000d9 28%,#00000099 46%,#00000025 68%,transparent 82%)}}