/* === Season 5: the Invasion ===
   The Season 5 banner, lore chapter and featured event card are always styled here. The lobby's
   alien night look (colours, drifting UFO) is only on while js/event-theme.js sets
   <html data-event-theme="invasion">; when the event ends the attribute is never set and it all goes away.
   Decorations are drawn in index.html with data-theme-only="invasion" and are purely visual. */

/* The home banner (links to Events) */
.invasion-banner {
  border-color: #4ade80;
  background: radial-gradient(circle at 86% 24%, #bef26444, transparent 32%), linear-gradient(120deg, #0b0a2a, #312e81 55%, #15803d);
  box-shadow: 0 5px 0 #070618, 0 0 20px #22c55e55;
}
.invasion-banner:hover { border-color: #bbf7d0; }
.invasion-banner .season-banner-icon { filter: drop-shadow(0 0 10px #4ade80); animation: invasion-hover 2.2s ease-in-out infinite alternate; }
.invasion-banner .season-banner-tag { color: #bef264; }
.invasion-banner .season-banner-copy small { color: #dcfce7; }
.invasion-banner .season-banner-go { color: #bef264; }
.invasion-banner-beam { position: absolute; left: 6px; top: 34px; width: 46px; height: 60px; pointer-events: none;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(#bef26488, #bef26400); animation: invasion-beam 1.8s ease-in-out infinite; }
@keyframes invasion-hover { from { translate: 0 -2px; rotate: -5deg; } to { translate: 0 3px; rotate: 5deg; } }
@keyframes invasion-beam { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* Lore chapter */
.lore-chapters .lore-invasion { padding-inline: 14px; border-radius: 16px; border: 1px solid #3f9a5c;
  background: radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 86% 26%, #bef264 0 1.5px, transparent 2.5px), radial-gradient(circle at 90% 10%, #22c55e33, transparent 50%), #0f1630; }
.lore-invasion .lore-number { color: #86efac; }

/* The featured event card is the Invasion now (ui.css still paints the featured card in Starfall colours). */
#screen-events #event-invasion.event-featured { border-color: #86efac; box-shadow: 0 6px 0 #070618, 0 0 22px #22c55e66; }
#screen-events #event-invasion .event-banner {
  background-image: radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 40% 85%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 12%, #bef264 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 60%, #fff 0 1px, transparent 2px), linear-gradient(135deg, #1e1b4b, #312e81 50%, #16a34a) !important;
}
#screen-events #event-invasion .event-badge { background: #bef264; color: #14112e; }

/* Sign-in page news line */
.invasion-gate-news { border-color: #4ade80; background: linear-gradient(120deg, #1e1b4b, #14532d); color: #ecfdf5; }
.invasion-gate-news strong { color: #bef264; }
.invasion-gate-news span { color: #a5f3fc; }

/* ---------- the alien night look, only while the event theme is on ---------- */
:root[data-event-theme="invasion"] {
  --bg-primary: #0b0d24;
  --bg-secondary: #121636;
  --bg-card: #1a1f45;
  --surface: #161b3d;
  --surface-2: #20275a;
  --border: #2f3a7a;
  --brand: #4ade80;
  --brand-ink: #052e16;
  --accent: #bef264;
}
:root[data-event-theme="invasion"] body {
  background: radial-gradient(circle at 78% 6%, #4ade8022, transparent 30%), linear-gradient(180deg, #11123a, #070818 70%);
}
:root[data-event-theme="invasion"] #app { background: linear-gradient(180deg, #10143a, #0b0d24 40%, #090b1c); }
:root[data-event-theme="invasion"] .auth-card { background: #121636; border-color: #2f3a7a; }
:root[data-event-theme="invasion"] .season-label { color: #bef264; letter-spacing: .14em; text-shadow: 0 0 10px #22c55e88; }

/* A UFO drifts across the top of the lobby, sweeping its tractor beam. */
:root[data-event-theme="invasion"] .menu-container { position: relative; isolation: isolate; }
.invasion-sky { position: absolute; inset: -30px 0 auto; height: 260px; overflow: hidden; pointer-events: none; z-index: -1; }
.invasion-gate-sky { position: fixed; inset: 0 0 auto; height: 280px; z-index: -1; }
.invasion-stars { position: absolute; inset: 0; opacity: .8; animation: season-twinkle 3s ease-in-out infinite alternate;
  background: radial-gradient(circle at 8% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 24% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 46% 14%, #bef264 0 1.4px, transparent 2.4px), radial-gradient(circle at 63% 48%, #fff 0 1px, transparent 2px), radial-gradient(circle at 82% 24%, #fff 0 1.2px, transparent 2.2px), radial-gradient(circle at 94% 70%, #a5f3fc 0 1.2px, transparent 2.2px); }
.invasion-ufo { position: absolute; top: 18px; width: 70px; animation: invasion-fly 26s linear infinite; }
.invasion-ufo svg { display: block; width: 70px; height: auto; animation: invasion-hover 1.6s ease-in-out infinite alternate; }
.invasion-ufo-beam { position: absolute; left: 50%; top: 30px; width: 60px; height: 130px; translate: -50% 0; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(#bef26466, #bef26400); animation: invasion-beam 2.2s ease-in-out infinite; }
.invasion-ufo-2 { top: 70px; width: 40px; animation-duration: 34s; animation-delay: -17s; animation-direction: reverse; opacity: .7; }
.invasion-ufo-2 svg { width: 40px; }
.invasion-ufo-2 .invasion-ufo-beam { display: none; }
@keyframes invasion-fly { from { left: -14%; } to { left: 110%; } }
@media (prefers-reduced-motion: reduce) {
  .invasion-sky *, .invasion-banner .season-banner-icon, .invasion-banner-beam { animation: none !important; }
  .invasion-ufo { left: 70%; } .invasion-ufo-2 { left: 14%; }
}