/* NexusOT: self-contained, shared animation for desktop and mobile. */
.nxa {
  --nxa-gold: #ffcc68;
  --nxa-blue: #7be3ff;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2.65;
  contain: strict;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.nxa *, .nxa *::before, .nxa *::after { box-sizing: border-box; }
.nxa__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nxa__scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  perspective: 1100px;
  transform: translateZ(0);
  contain: layout paint;
}
.nxa.is-ready .nxa__scene { visibility: visible; }
.nxa.is-ready .nxa__fallback { visibility: hidden; }
.nxa__aura {
  position: absolute;
  inset: 10% 6%;
  background: radial-gradient(ellipse at center, #25a7f81b, #31b6ff09 45%, transparent 72%);
  opacity: 0.6;
}
.nxa__full, .nxa__compact {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform, opacity;
}
.nxa__full { inset: 6% 3%; }
.nxa__compact {
  left: 25%;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
}
.nxa__art {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 3;
  transform: translateY(-50%);
}
.nxa__compact .nxa__art { aspect-ratio: 2; backface-visibility: hidden; }
.nxa__compact .nxa__art--back { transform: translateY(-50%) rotateY(180deg); }
.nxa__piece {
  position: absolute;
  inset: 0;
  background-image: var(--nxa-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform-origin: center;
}
/* The masks divide the ORIGINAL pixels. No feathers are redrawn or recolored. */
.nxa__wing--left {
  clip-path: polygon(0 7%, 12.4% 7%, 14% 24%, 15.6% 35%, 15.6% 56%, 12.8% 72%, 0 72%);
  transform-origin: 15.2% 48%;
}
.nxa__wing--right {
  clip-path: polygon(100% 7%, 87.6% 7%, 86% 24%, 84.4% 35%, 84.4% 56%, 87.2% 72%, 100% 72%);
  transform-origin: 84.8% 48%;
}
.nxa__body {
  clip-path: polygon(12.8% 0,87.2% 0,87.2% 24%,84.8% 35%,84.8% 56%,87.6% 72%,100% 72%,100% 100%,0 100%,0 72%,12.4% 72%,15.2% 56%,15.2% 35%,12.8% 24%);
}
.nxa__compact .nxa__wing--left {
  clip-path: polygon(0 10%,16.5% 10%,19.4% 29%,21.1% 40%,21.1% 62%,16.5% 76%,0 76%);
  transform-origin: 20.8% 50%;
}
.nxa__compact .nxa__wing--right {
  clip-path: polygon(100% 10%,83.5% 10%,80.6% 29%,78.9% 40%,78.9% 62%,83.5% 76%,100% 76%);
  transform-origin: 79.2% 50%;
}
.nxa__compact .nxa__body {
  clip-path: polygon(17% 0,83% 0,83% 29%,79.3% 40%,79.3% 62%,84% 76%,100% 76%,100% 100%,0 100%,0 76%,16% 76%,20.7% 62%,20.7% 40%,17% 29%);
}
.nxa__sheen {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--nxa-image) center / 100% 100% no-repeat;
  mask: var(--nxa-image) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  background: linear-gradient(112deg,transparent 35%,#fff1c233 43%,#fff5d4cc 49%,#b8ecff55 53%,transparent 63%);
  background-size: 400% 100%;
  background-position: 130% 0;
}
.nxa__star {
  position: absolute;
  width: 2.6%;
  aspect-ratio: 1;
  background: #fff6d5;
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 38%);
  opacity: 0;
  transform: scale(0.1);
}
.nxa__star--one { left: 16.8%; top: 15%; }
.nxa__star--two { right: 15.5%; top: 17%; width: 2%; }
.nxa__star--three { left: 64.5%; top: 72.5%; width: 1.6%; }
.nxa__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 5px var(--color);
  opacity: 0;
  will-change: transform, opacity;
}
.nxa__orbit {
  position: absolute;
  left: 20%;
  top: 28%;
  width: 60%;
  height: 44%;
  border: 1px solid #e8bb5540;
  border-left-color: transparent;
  border-right-color: #7edfff80;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-15deg);
}
.nxa.is-static .nxa__scene { visibility: hidden; }
.nxa.is-static .nxa__fallback { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .nxa .nxa__scene { visibility: hidden !important; }
  .nxa .nxa__fallback { visibility: visible !important; }
}


/* Header geometry stays fixed throughout the complete animation cycle. */
.nx-brand.nx-brand--wings {
  position: relative;
  display: block;
  width: min(430px, 86vw);
  aspect-ratio: 2.65;
  line-height: normal;
  filter: none;
  contain: strict;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.nx-brand--wings > .nxa { width: 100%; height: 100%; }
.nx-brand--wings .nxa__fallback { width: 100%; height: 100%; object-fit: contain; }
.nx-brand--wings:focus-visible { outline: 2px solid #f2c971; outline-offset: 3px; border-radius: 4px; }
