/* FOR THE ALLIANCE — the crest banner on the homepage (js/alliance.js) */
.allegiance { position: relative; text-align: center; padding: 56px 16px 64px; overflow: hidden; isolation: isolate; }
.allegiance::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px 380px at 50% 42%, rgba(110, 52, 200, 0.32), transparent 70%),
              linear-gradient(90deg, transparent, rgba(166, 107, 255, 0.35), transparent) center 100% / 70% 1px no-repeat,
              linear-gradient(90deg, transparent, rgba(166, 107, 255, 0.35), transparent) center 0 / 70% 1px no-repeat; }
.al-crest { position: relative; width: min(340px, 72vw); margin: 0 auto; aspect-ratio: 818 / 892;
  opacity: 0; transform: translateY(30px) scale(.92); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.al-crest img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(166, 107, 255, 0.55)); animation: al-float 7s ease-in-out infinite; }
.al-crest::before { content: ""; position: absolute; inset: 10% 12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(166, 107, 255, 0.55), transparent 65%); filter: blur(24px); animation: al-pulse 4s ease-in-out infinite; }
.al-crest::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  border: 1px dashed rgba(185, 140, 255, 0.25); animation: al-turn 40s linear infinite; }
@keyframes al-float { 50% { transform: translateY(-8px); } }
@keyframes al-pulse { 50% { opacity: .55; transform: scale(1.08); } }
@keyframes al-turn { to { rotate: 360deg; } }

.al-cry { margin: 26px 0 8px; font-family: var(--serif-display); font-weight: 700; letter-spacing: .22em; line-height: 1.15;
  font-size: clamp(1.9rem, 6.2vw, 3.6rem); color: #f3e8ff; text-transform: uppercase; }
.al-cry .al-word { display: inline-block; white-space: nowrap; margin: 0 .22em; }
.al-cry .al-ch { display: inline-block; opacity: 0; transform: translateY(.9em) rotateX(70deg); filter: blur(8px);
  text-shadow: 0 0 18px rgba(166, 107, 255, 0.9), 0 0 42px rgba(110, 52, 200, 0.7);
  background: linear-gradient(180deg, #ffffff 10%, #d8b8ff 55%, #8a4dff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .3, 1.3), filter .6s ease; transition-delay: calc(var(--i) * 55ms + 500ms); }
.al-cry .al-ch { text-shadow: none; filter: blur(8px) drop-shadow(0 0 0 transparent); }
.al-cry::after { content: ""; display: block; width: 0; height: 2px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, #c9a0ff, transparent);
  transition: width 1.2s ease 1.4s; }
.al-sub { margin: 10px auto 0; max-width: 560px; color: var(--bone-dim); font-style: italic; opacity: 0; transform: translateY(10px); transition: opacity .8s ease 1.6s, transform .8s ease 1.6s; }

.allegiance.in .al-crest { opacity: 1; transform: none; }
.allegiance.in .al-ch { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 14px rgba(166, 107, 255, 0.8)); }
.allegiance.in .al-cry::after { width: min(420px, 70%); }
.allegiance.in .al-sub { opacity: 1; transform: none; }
/* a sweep of light runs over the words now and then */
.allegiance.in .al-cry { animation: al-shine 6s ease-in-out 2.4s infinite; }
@keyframes al-shine { 0%, 80%, 100% { filter: brightness(1); } 88% { filter: brightness(1.35); } }

@media (prefers-reduced-motion: reduce) {
  .al-crest, .al-cry .al-ch, .al-sub, .al-cry::after { transition: none; }
  .al-crest img, .al-crest::before, .al-crest::after, .allegiance.in .al-cry { animation: none; }
}