/* ===========================================================================
   REAL APEX BOT — PUBLIC LOGIN — FORTNITE ENERGY LAYER (WO-311)
   Visual-only overlay loaded AFTER login.css. Adds a magenta/purple neon
   layer over the existing blue neon, crystal shards, extra light particles,
   a deeper city skyline, glass-glow keypad and an energy-pulse CTA.
   No layout, copy, flow or auth changes. Every new element is aria-hidden
   ornament inside .arena. Scoped to body.page-login so app/admin pages that
   share skin.css are untouched.
   =========================================================================== */

.page-login {
  --fx-magenta: #ff3dd8;
  --fx-violet:  #9b4dff;
  --fx-ice:     #9ff6ff;
}

/* ---------------------------------------------------------------------------
   SKY — dual-tone energy. The original blue/cyan sky stays; magenta and
   violet are layered on top of it, not swapped in.
   --------------------------------------------------------------------------- */
.page-login .arena__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 78% 8%,  rgba(255, 61, 216, 0.34) 0%, rgba(255, 61, 216, 0) 70%),
    radial-gradient(55% 40% at 18% 34%, rgba(155, 77, 255, 0.30) 0%, rgba(155, 77, 255, 0) 70%),
    radial-gradient(70% 35% at 50% 72%, rgba(255, 61, 216, 0.16) 0%, rgba(255, 61, 216, 0) 70%);
  mix-blend-mode: screen;
  animation: fx-sky-breathe 12s ease-in-out infinite;
}
@keyframes fx-sky-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* Aurora ribbons across the upper sky. */
.page-login .arena__aurora {
  position: absolute;
  left: -20%; right: -20%;
  top: 4vh;
  height: 42vh;
  background:
    linear-gradient(100deg,
      rgba(52, 232, 255, 0)    10%,
      rgba(52, 232, 255, 0.22) 30%,
      rgba(155, 77, 255, 0.28) 48%,
      rgba(255, 61, 216, 0.26) 64%,
      rgba(255, 61, 216, 0)    86%);
  filter: blur(38px);
  transform: skewY(-7deg);
  mix-blend-mode: screen;
  animation: fx-aurora 18s ease-in-out infinite alternate;
}
@keyframes fx-aurora {
  from { transform: skewY(-7deg) translateX(-4%); opacity: 0.7; }
  to   { transform: skewY(-4deg) translateX(4%);  opacity: 1; }
}

/* ---------------------------------------------------------------------------
   FUTURIST CITY — two layered skylines with lit windows and neon rims,
   sitting behind the existing grid floor for depth + atmosphere.
   --------------------------------------------------------------------------- */
.page-login .arena__city {
  position: absolute;
  left: 0; right: 0;
  bottom: 18vh;
  height: 40vh;
  pointer-events: none;
  /* fade the skyline out toward the top so it never competes with copy */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
}
.page-login .arena__city::before,
.page-login .arena__city::after {
  content: "";
  position: absolute;
  left: -5%; right: -5%;
  bottom: 0;
}
/* far skyline: tall violet towers, faint */
.page-login .arena__city::before {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 61, 216, 0.0), rgba(155, 77, 255, 0.22));
  -webkit-mask:
    linear-gradient(#000 0 0) 4%  100% / 5%  62% no-repeat,
    linear-gradient(#000 0 0) 11% 100% / 3%  84% no-repeat,
    linear-gradient(#000 0 0) 17% 100% / 6%  54% no-repeat,
    linear-gradient(#000 0 0) 26% 100% / 4%  96% no-repeat,
    linear-gradient(#000 0 0) 33% 100% / 5%  70% no-repeat,
    linear-gradient(#000 0 0) 44% 100% / 3%  88% no-repeat,
    linear-gradient(#000 0 0) 52% 100% / 6%  60% no-repeat,
    linear-gradient(#000 0 0) 61% 100% / 3% 100% no-repeat,
    linear-gradient(#000 0 0) 68% 100% / 5%  74% no-repeat,
    linear-gradient(#000 0 0) 77% 100% / 4%  92% no-repeat,
    linear-gradient(#000 0 0) 85% 100% / 6%  58% no-repeat,
    linear-gradient(#000 0 0) 94% 100% / 4%  80% no-repeat;
  mask:
    linear-gradient(#000 0 0) 4%  100% / 5%  62% no-repeat,
    linear-gradient(#000 0 0) 11% 100% / 3%  84% no-repeat,
    linear-gradient(#000 0 0) 17% 100% / 6%  54% no-repeat,
    linear-gradient(#000 0 0) 26% 100% / 4%  96% no-repeat,
    linear-gradient(#000 0 0) 33% 100% / 5%  70% no-repeat,
    linear-gradient(#000 0 0) 44% 100% / 3%  88% no-repeat,
    linear-gradient(#000 0 0) 52% 100% / 6%  60% no-repeat,
    linear-gradient(#000 0 0) 61% 100% / 3% 100% no-repeat,
    linear-gradient(#000 0 0) 68% 100% / 5%  74% no-repeat,
    linear-gradient(#000 0 0) 77% 100% / 4%  92% no-repeat,
    linear-gradient(#000 0 0) 85% 100% / 6%  58% no-repeat,
    linear-gradient(#000 0 0) 94% 100% / 4%  80% no-repeat;
  filter: blur(1px);
  opacity: 0.85;
}
/* near skyline: darker blocks with cyan/magenta lit window grid */
.page-login .arena__city::after {
  height: 68%;
  background:
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, 0) 0 9px, rgba(159, 246, 255, 0.20) 9px 10px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 7px, rgba(255, 61, 216, 0.14) 7px 8px),
    linear-gradient(180deg, #2a1470 0%, #140a3a 100%);
  background-blend-mode: screen, screen, normal;
  -webkit-mask:
    linear-gradient(#000 0 0) 0%  100% / 7%  58% no-repeat,
    linear-gradient(#000 0 0) 9%  100% / 5%  82% no-repeat,
    linear-gradient(#000 0 0) 20% 100% / 8%  46% no-repeat,
    linear-gradient(#000 0 0) 30% 100% / 4%  74% no-repeat,
    linear-gradient(#000 0 0) 39% 100% / 7%  52% no-repeat,
    linear-gradient(#000 0 0) 58% 100% / 6%  66% no-repeat,
    linear-gradient(#000 0 0) 66% 100% / 4%  90% no-repeat,
    linear-gradient(#000 0 0) 75% 100% / 8%  50% no-repeat,
    linear-gradient(#000 0 0) 88% 100% / 5%  78% no-repeat,
    linear-gradient(#000 0 0) 99% 100% / 7%  60% no-repeat;
  mask:
    linear-gradient(#000 0 0) 0%  100% / 7%  58% no-repeat,
    linear-gradient(#000 0 0) 9%  100% / 5%  82% no-repeat,
    linear-gradient(#000 0 0) 20% 100% / 8%  46% no-repeat,
    linear-gradient(#000 0 0) 30% 100% / 4%  74% no-repeat,
    linear-gradient(#000 0 0) 39% 100% / 7%  52% no-repeat,
    linear-gradient(#000 0 0) 58% 100% / 6%  66% no-repeat,
    linear-gradient(#000 0 0) 66% 100% / 4%  90% no-repeat,
    linear-gradient(#000 0 0) 75% 100% / 8%  50% no-repeat,
    linear-gradient(#000 0 0) 88% 100% / 5%  78% no-repeat,
    linear-gradient(#000 0 0) 99% 100% / 7%  60% no-repeat;
  opacity: 0.5;
}
/* atmospheric haze where the city meets the floor */
.page-login .arena__haze {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 12vh;
  height: 22vh;
  background:
    radial-gradient(50% 100% at 30% 100%, rgba(52, 232, 255, 0.30), rgba(52, 232, 255, 0) 70%),
    radial-gradient(50% 100% at 72% 100%, rgba(255, 61, 216, 0.30), rgba(255, 61, 216, 0) 70%);
  filter: blur(24px);
  mix-blend-mode: screen;
}

/* Floor grid gets a magenta second pass over the cyan one. */
.page-login .arena__floor {
  background:
    repeating-linear-gradient(90deg, rgba(255, 61, 216, 0.14) 0 2px, rgba(0, 0, 0, 0) 2px 9%) 4.5% 0,
    repeating-linear-gradient(90deg, rgba(52, 232, 255, 0.18) 0 2px, rgba(0, 0, 0, 0) 2px 9%),
    repeating-linear-gradient(0deg,  rgba(52, 232, 255, 0.14) 0 2px, rgba(0, 0, 0, 0) 2px 14%);
  opacity: 0.72;
}

/* Rings: one stays blue, one becomes a dual-tone magenta energy ring. */
.page-login .arena__ring--a {
  border-color: rgba(255, 61, 216, 0.42);
  box-shadow: 0 0 60px rgba(255, 61, 216, 0.22) inset, 0 0 40px rgba(155, 77, 255, 0.25);
}
.page-login .arena__ring--b {
  box-shadow: 0 0 60px rgba(52, 232, 255, 0.22) inset, 0 0 46px rgba(255, 61, 216, 0.18);
}

/* Light beams: alternate white / magenta tints. */
.page-login .arena__beams i:nth-child(even) {
  background: linear-gradient(180deg, rgba(255, 61, 216, 0.22), rgba(255, 61, 216, 0));
}

/* ---------------------------------------------------------------------------
   CRYSTAL SHARDS — floating translucent crystals (hero ornament).
   --------------------------------------------------------------------------- */
.page-login .arena__shards { position: absolute; inset: 0; }
.page-login .arena__shards i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(26px * var(--s));
  height: calc(64px * var(--s));
  clip-path: polygon(50% 0, 100% 34%, 78% 100%, 22% 100%, 0 34%);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(160deg, rgba(159, 246, 255, 0.70) 0%, rgba(155, 77, 255, 0.55) 55%, rgba(255, 61, 216, 0.60) 100%);
  opacity: 0.55;
  filter: drop-shadow(0 0 10px rgba(255, 61, 216, 0.75)) drop-shadow(0 0 18px rgba(52, 232, 255, 0.5));
  transform: rotate(var(--r));
  animation: fx-shard-float calc(9s + var(--s) * 4s) ease-in-out infinite;
  animation-delay: var(--d);
}
.page-login .arena__shards i:nth-child(3n) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(160deg, rgba(255, 140, 240, 0.70) 0%, rgba(155, 77, 255, 0.55) 60%, rgba(52, 232, 255, 0.55) 100%);
}
@keyframes fx-shard-float {
  0%, 100% { transform: translate3d(0, 0, 0)      rotate(var(--r)); }
  50%      { transform: translate3d(6px, -22px, 0) rotate(calc(var(--r) + 14deg)); }
}

/* ---------------------------------------------------------------------------
   LIGHT PARTICLES — the original yellow motes stay; cyan + magenta sparks
   join them.
   --------------------------------------------------------------------------- */
.page-login .arena__sparks { position: absolute; inset: 0; }
.page-login .arena__sparks i {
  position: absolute;
  left: var(--x);
  bottom: -4vh;
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 2px var(--c), 0 0 22px 4px var(--c);
  opacity: 0;
  animation: mote-rise 10s linear infinite;
  animation-delay: var(--d);
}

/* ---------------------------------------------------------------------------
   HERO TYPE — dual-tone glow behind the existing shine gradient.
   --------------------------------------------------------------------------- */
.page-login .pitch__title-hero {
  filter: drop-shadow(0 0 14px rgba(255, 61, 216, 0.55)) drop-shadow(0 0 28px rgba(52, 232, 255, 0.35));
}
.page-login .pitch__title-lead {
  text-shadow: 0 0 18px rgba(155, 77, 255, 0.55), 0 0 2px rgba(255, 255, 255, 0.6);
}
.page-login .brand__text em { text-shadow: 0 0 10px rgba(255, 61, 216, 0.6); }

/* Candle art + rocket pick up a magenta second glow. */
.page-login .candles {
  filter: drop-shadow(0 0 26px rgba(52, 232, 255, 0.35)) drop-shadow(0 0 34px rgba(255, 61, 216, 0.28));
}
.page-login .rocket {
  filter: drop-shadow(0 18px 34px rgba(255, 122, 26, 0.35)) drop-shadow(0 0 26px rgba(255, 61, 216, 0.35));
}

/* ---------------------------------------------------------------------------
   PANELS — outer dual-tone neon halo. clip-path on .apex-panel cuts off
   box-shadow, so the glow is a filter drop-shadow (follows the clipped shape).
   --------------------------------------------------------------------------- */
.page-login .perk.apex-panel--purple { filter: drop-shadow(0 0 10px rgba(255, 61, 216, 0.38)); }
.page-login .perk.apex-panel--blue   { filter: drop-shadow(0 0 10px rgba(52, 232, 255, 0.30)); }
.page-login .quote.apex-panel        { filter: drop-shadow(0 0 12px rgba(155, 77, 255, 0.45)); }

.page-login .login.apex-panel {
  background: linear-gradient(140deg, var(--apex-cyan), var(--apex-blue) 38%, var(--fx-violet) 70%, var(--fx-magenta));
  filter: drop-shadow(0 0 16px rgba(52, 232, 255, 0.45)) drop-shadow(0 0 30px rgba(255, 61, 216, 0.38));
}
.page-login .login.apex-panel::before {
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255, 61, 216, 0.16), rgba(0, 0, 0, 0) 70%),
    linear-gradient(160deg, rgba(52, 232, 255, 0.18), rgba(0, 0, 0, 0) 58%),
    var(--apex-panel);
}

/* Code slots: subtle glass. */
.page-login .code__slot {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 45%),
    rgba(10, 6, 34, 0.62);
  box-shadow: inset 0 0 12px rgba(155, 77, 255, 0.35);
}

/* ---------------------------------------------------------------------------
   KEYPAD — deeper glass, more dimension, inner light.
   --------------------------------------------------------------------------- */
.page-login .keypad .apex-btn--key {
  position: relative;
  border-color: rgba(159, 246, 255, 0.75);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 90% at 50% 120%, rgba(255, 61, 216, 0.40) 0%, rgba(255, 61, 216, 0) 60%),
    linear-gradient(180deg, rgba(47, 125, 255, 0.34), rgba(155, 77, 255, 0.30));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(10, 6, 34, 0.55),
    inset 0 0 18px rgba(52, 232, 255, 0.35);
  text-shadow: 0 0 10px rgba(159, 246, 255, 0.9), 0 0 2px #ffffff;
}
.page-login .keypad .apex-btn--key:hover:not(:disabled) {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 61, 216, 0.6));
}
.page-login .keypad .apex-btn--ghost {
  border-color: rgba(255, 140, 240, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 50%),
    rgba(155, 77, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 14px rgba(255, 61, 216, 0.28);
  text-shadow: 0 0 8px rgba(255, 61, 216, 0.6);
}

/* ---------------------------------------------------------------------------
   ENTER THE ARENA — energy pulse. The button keeps its yellow face; a
   dual-tone aura pulses around it (on the wrapper glow, since the button's
   clip-path would cut a box-shadow halo).
   --------------------------------------------------------------------------- */
.page-login .login__submit {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 46%, rgba(255, 255, 255, 0) 60%) -160% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, #ffe97a, var(--apex-yellow));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.page-login .login__submit:disabled {
  filter: drop-shadow(0 0 8px rgba(255, 61, 216, 0.35)) drop-shadow(0 0 14px rgba(52, 232, 255, 0.25));
}
.page-login .login__submit:not(:disabled) {
  animation:
    cta-pulse 3.4s ease-in-out infinite,
    fx-cta-aura 2.4s ease-in-out infinite,
    fx-cta-sheen 3.6s ease-in-out infinite;
}
@keyframes fx-cta-aura {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 212, 38, 0.55)) drop-shadow(0 0 12px rgba(255, 61, 216, 0.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 212, 38, 0.85)) drop-shadow(0 0 28px rgba(255, 61, 216, 0.75)) drop-shadow(0 0 40px rgba(52, 232, 255, 0.45)); }
}
@keyframes fx-cta-sheen {
  0%, 55% { background-position: -160% 0, 0 0; }
  100%    { background-position:  260% 0, 0 0; }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — static, but keep the richer colour.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-login .arena__sky::after,
  .page-login .arena__aurora,
  .page-login .arena__shards i,
  .page-login .arena__sparks i,
  .page-login .login__submit {
    animation: none !important;
  }
  .page-login .arena__sparks i { opacity: 0.6; bottom: auto; top: 40%; }
}