/* =====================================================================================================================
   Crew Wars, the effects: every keyframe the section uses, and the full-screen moments (WAR DECLARED, VICTORY, DEFEAT, WAR SETTLED).
   Pure CSS motion, transform/opacity/filter only. Everything stops under prefers-reduced-motion (the moments then simply appear).
   ===================================================================================================================== */

@keyframes cw-blink { 50% { opacity: .25; } }
@keyframes cw-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes cw-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes cw-steelglint { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes cw-fireglow { from { filter: drop-shadow(0 2px 0 #3a1200) drop-shadow(0 0 8px rgba(255, 110, 30, .4)); } to { filter: drop-shadow(0 2px 0 #3a1200) drop-shadow(0 0 22px rgba(255, 130, 34, .85)); } }
@keyframes cw-molten { from { filter: brightness(1) drop-shadow(0 0 4px rgba(255, 120, 30, .35)); } to { filter: brightness(1.14) drop-shadow(0 0 14px rgba(255, 130, 34, .85)); } }
@keyframes cw-urgent { from { opacity: .7; } to { opacity: 1; } }
@keyframes cw-fuse { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes cw-marquee { to { transform: translateX(-50%); } }
@keyframes cw-spark { 0% { opacity: 0; scale: .3; } 6% { opacity: 1; scale: 1.1; } 22% { opacity: .75; scale: 1.7; } 40%, 100% { opacity: 0; scale: 2.3; } }
@keyframes cw-clash { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(5deg) scale(1.1); } }
@keyframes cw-stamp { 0% { transform: scale(2.8) rotate(-12deg); opacity: 0; } 60% { transform: scale(.94) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes cw-drop { 0% { transform: translateY(-120%) scaleY(.4); opacity: 0; } 60% { transform: translateY(4%) scaleY(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cw-rays { to { rotate: 360deg; } }
@keyframes cw-shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-7px, 2px, 0); } 40%, 60% { transform: translate3d(7px, -2px, 0); } }
@keyframes cw-fadein { from { opacity: 0; } }
@keyframes cw-fadeout { to { opacity: 0; } }
@keyframes cw-ashfall { 0% { transform: translateY(-10vh) rotate(0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translateY(112vh) rotate(var(--r)); opacity: 0; } }
@keyframes cw-bob { 50% { transform: translateY(-6px); } }
@keyframes cw-throb { 50% { filter: drop-shadow(0 0 22px rgba(255, 130, 34, .95)); } }
.cw.cw-shake, .cw-shake { animation: cw-shake .6s cubic-bezier(.36, .07, .19, .97) both; }

/* ---------------------------------------------------------------- the moments */
.cw-moment { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden; cursor: pointer; color: #fff; animation: cw-fadein .3s ease-out both;
  background: radial-gradient(circle at 50% 46%, rgba(40, 12, 4, .82), rgba(0, 0, 0, .95) 78%); }
.cw-moment[hidden] { display: none; }
.cw-moment.out { animation: cw-fadeout .3s ease-in both; }
.cw-m-rays { position: absolute; left: 50%; top: 46%; width: 1100px; height: 1100px; margin: -550px; background: repeating-conic-gradient(rgba(255, 150, 50, .18) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 14%, transparent 62%); mask: radial-gradient(circle, #000 0 14%, transparent 62%); animation: cw-rays 40s linear infinite; }
.cw-m-embers { position: absolute; inset: 0; pointer-events: none; }
.cw-m-embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff6df, #ffb347 40%, rgba(255, 90, 10, 0) 72%);
  box-shadow: 0 0 calc(var(--s) * 2) rgba(255, 120, 30, .7); animation: cw-rise var(--t) linear var(--d) infinite; --o: .95; }
.cw-m-ash i { top: -4vh; bottom: auto; background: radial-gradient(circle, #8d8a86, rgba(80, 76, 72, .7) 50%, transparent 72%); box-shadow: none; animation: cw-ashfall var(--t) linear var(--d) infinite; }
.cw-m-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(720px, 94vw); padding: 10px 22px 8px; text-align: center; cursor: default; }
.cw-m-emblem { width: 150px; height: 150px; filter: drop-shadow(0 10px 14px #000) drop-shadow(0 0 26px rgba(255, 130, 34, .7)); animation: cw-stamp .7s cubic-bezier(.2, 1.7, .4, 1) both, cw-throb 2.6s ease-in-out .8s infinite; }
.cw-m-emblem .cwi { width: 100%; height: 100%; }
.cw-m-kicker { font: 900 .82rem/1 var(--label); letter-spacing: .34em; text-transform: uppercase; color: #ffc58a; animation: cw-fadein .6s .35s both; }
.cw-moment h2 { margin: 0; font: 800 clamp(3rem, 10vw, 6.6rem)/.92 var(--display); letter-spacing: .07em; text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, #fff6d0, #ffc15e 38%, #ff6a1f 72%, #b8300a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 0 #3a1200) drop-shadow(0 0 34px rgba(255, 110, 30, .8)); animation: cw-stamp .7s .15s cubic-bezier(.2, 1.7, .4, 1) both; }
.cw-moment p { margin: 0; max-width: 46ch; color: #f3e8da; font-size: 1.08rem; line-height: 1.5; animation: cw-fadein .6s .5s both; }
.cw-moment p b { color: #ffd27a; }
.cw-m-vs { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0; animation: cw-fadein .6s .45s both; }
.cw-m-vs b { max-width: 190px; font: 800 1.25rem/1.05 var(--display); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 2px 0 #000; overflow-wrap: anywhere; }
.cw-m-side { display: flex; flex-direction: column; align-items: center; gap: 6px; transform-origin: 50% 0; animation: cw-drop .8s .3s cubic-bezier(.2, .9, .3, 1.1) both; } .cw-m-side + .cw-m-mid + .cw-m-side { animation-delay: .42s; }
.cw-m-mid .cwi { width: 56px; height: 56px; filter: drop-shadow(0 3px 4px #000); animation: cw-clash .6s ease-in-out infinite alternate; }
.cw-m-delta { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; font: 900 1rem/1 var(--label); letter-spacing: .06em; animation: cw-fadein .6s .6s both; } .cw-m-delta .up { color: var(--cw-win); } .cw-m-delta .down { color: #ff9a9a; }
.cw-m-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; animation: cw-fadein .6s .7s both; }
.cw-m-hint { font: 800 .7rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: #a89684; animation: cw-fadein .6s 1s both; }
/* variants */
.cw-moment.is-victory { background: radial-gradient(circle at 50% 46%, rgba(70, 40, 4, .8), rgba(0, 0, 0, .95) 78%); }
.cw-moment.is-victory h2 { background-image: linear-gradient(180deg, #fffbe0, #ffe27a 38%, #ffb52e 72%, #b8760a); filter: drop-shadow(0 6px 0 #3a2400) drop-shadow(0 0 40px rgba(255, 201, 62, .85)); }
.cw-moment.is-victory .cw-m-rays { background: repeating-conic-gradient(rgba(255, 210, 90, .22) 0 6deg, transparent 6deg 18deg); }
.cw-moment.is-defeat { background: radial-gradient(circle at 50% 46%, rgba(26, 24, 26, .86), rgba(0, 0, 0, .97) 78%); }
.cw-moment.is-defeat h2 { background-image: linear-gradient(180deg, #e6e2de, #9a948e 45%, #4a4642); filter: drop-shadow(0 6px 0 #0a0908) drop-shadow(0 0 24px rgba(160, 150, 140, .4)); }
.cw-moment.is-defeat .cw-m-kicker { color: #b8aea4; } .cw-moment.is-defeat .cw-m-emblem { filter: grayscale(.8) drop-shadow(0 10px 14px #000); animation: cw-stamp .7s cubic-bezier(.2, 1.7, .4, 1) both; }
.cw-moment.is-defeat .cw-m-rays { opacity: .35; filter: grayscale(1); }
.cw-moment.is-settled h2 { font-size: clamp(2.6rem, 8vw, 5.2rem); }

@media (prefers-reduced-motion: reduce) {
  .cw-moment, .cw-moment *, .cw-shake { animation: none !important; }
  .cw-m-embers { display: none; }
}