/* Halo Rebellion: celestial motion and look on top of the slot kit.
   Loaded after kits/slot/client/slot.css by this game only, so Neon Outlaws
   is unaffected. The layers it styles are created by js/ambience.js. */

/* ---------- backdrop: a slow heavenly drift instead of Neon's sway ---------- */
.bg { animation: halo-drift 60s ease-in-out infinite alternate; }
@keyframes halo-drift {
  0% { transform: scale(1.04) translate(-0.8%, 0.4%); }
  50% { transform: scale(1.08) translate(0.4%, -0.6%); }
  100% { transform: scale(1.05) translate(0.9%, 0.3%); }
}
/* free spins: golden light rather than Neon's pink hue shift */
body.free .bg { filter: sepia(0.35) saturate(1.3) brightness(1.08); }
body.free .bg-tint { background: radial-gradient(ellipse at 50% 40%, rgba(255, 215, 106, 0.12) 15%, rgba(30, 14, 4, 0.55) 100%); }
body.free .frame-art { filter: brightness(1.12) drop-shadow(0 0 26px rgba(255, 215, 106, 0.7)); }

/* god rays from above */
.halo-rays {
  position: fixed; inset: -20% -10% 0; pointer-events: none; mix-blend-mode: screen;
  background:
    conic-gradient(from 180deg at 50% -5%, transparent 0deg 160deg, rgba(255, 233, 168, 0.16) 166deg, transparent 172deg,
      rgba(255, 233, 168, 0.10) 178deg, transparent 184deg, rgba(212, 165, 255, 0.10) 190deg, transparent 196deg, transparent 360deg);
  transform-origin: 50% 0;
  animation: halo-rays 14s ease-in-out infinite alternate;
}
.halo-rays.two { animation-duration: 19s; animation-delay: -7s; opacity: 0.8; filter: hue-rotate(20deg); }
@keyframes halo-rays {
  from { transform: rotate(-7deg); opacity: 0.55; }
  to { transform: rotate(7deg); opacity: 1; }
}
body.free .halo-rays { filter: brightness(1.6); }

/* motes and feathers */
.halo-sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- heroine: aura, sway and wing breath ---------- */
.character { animation: halo-hover 7s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(255, 215, 106, 0.35)); }
@keyframes halo-hover {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-16px) rotate(0.6deg); }
}
.halo-aura {
  position: absolute; left: 30px; top: 170px; width: 420px; height: 820px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 228, 150, 0.35), rgba(183, 124, 255, 0.18) 45%, transparent 70%);
  filter: blur(8px); mix-blend-mode: screen;
  animation: halo-aura 4.5s ease-in-out infinite;
}
.portrait .halo-aura { left: -40px; top: 1040px; width: 300px; height: 600px; }
@keyframes halo-aura { 50% { opacity: 0.55; transform: scale(1.06); } }

/* ---------- logo: floating with a light sweep, no neon flicker ---------- */
.logo { animation: halo-float 6s ease-in-out infinite; }
@keyframes halo-float { 50% { transform: translateY(-8px); } }
.halo-logo-shine {
  position: absolute; left: 50%; top: 8px; width: 520px; margin-left: -260px; aspect-ratio: 1400 / 600; /* over the logo's box */
  pointer-events: none; z-index: 6; mix-blend-mode: screen;
  -webkit-mask: url(../assets/logo.png) center / 100% 100% no-repeat; mask: url(../assets/logo.png) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%;
  animation: halo-float 6s ease-in-out infinite, halo-shine 5s ease-in-out infinite;
}
.portrait .halo-logo-shine { width: 700px; margin-left: -350px; top: 10px; }
@keyframes halo-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* ---------- reels ---------- */
/* a glint passes over the reel window while idle */
.reels::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 200, 0.16) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%;
  animation: halo-glint 7s ease-in-out infinite;
}
@keyframes halo-glint { 0%, 70% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
/* spinning reels leave a golden streak */
.reel.spinning { box-shadow: inset 0 0 40px rgba(255, 215, 106, 0.18); }
.reel.blur { filter: drop-shadow(0 0 10px rgba(255, 215, 106, 0.45)); }
/* idle WILDs breathe with light */
.cell[data-sym="0"]:not(.hit) img { animation: halo-wild 2.6s ease-in-out infinite; }
@keyframes halo-wild { 50% { filter: drop-shadow(0 0 14px rgba(255, 215, 106, 0.85)) brightness(1.12); } }

/* frame gem sparkles (positioned by js/ambience.js) */
.halo-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.halo-sparkle {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255, 233, 168, 0.9) 3px, transparent 9px),
    linear-gradient(90deg, transparent 46%, rgba(255, 245, 220, 0.95) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 245, 220, 0.95) 50%, transparent 54%);
  mix-blend-mode: screen; animation: halo-twinkle 1.4s ease-in-out forwards;
}
@keyframes halo-twinkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(90deg); }
}

/* ---------- spin button: violet and gold with a turning halo ---------- */
.spin {
  background: radial-gradient(circle at 50% 35%, #e9d2ff, var(--accent) 45%, #3d1680 100%);
  box-shadow: 0 0 0 6px #140a26, 0 0 0 9px var(--accent-2), 0 0 34px 10px rgba(255, 215, 106, 0.45),
    inset 0 -10px 20px rgba(0, 0, 0, 0.35), inset 0 6px 14px rgba(255, 255, 255, 0.45);
}
.spin::after {
  content: ''; position: absolute; inset: -22px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 233, 168, 0.9) 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
  animation: halo-orbit 4s linear infinite;
}
.spin.busy::after { animation-duration: 0.7s; }
@keyframes halo-orbit { to { transform: rotate(360deg); } }

/* a wash of light when a win lands (class set by js/ambience.js) */
.halo-flash {
  position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 228, 150, 0.45), transparent 60%);
  animation: halo-flash 0.9s ease-out forwards;
}
@keyframes halo-flash { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .halo-rays, .halo-aura, .halo-logo-shine, .reels::after, .spin::after,
  .cell[data-sym="0"] img, .logo, .character { animation: none; }
}
/* render check repair (tools/gate-b/lib/render.mjs) */
#soundBtn, #soundBtn * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: 0 0 2px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.85) !important; }
#betDown, #betDown * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; text-shadow: 0 0 2px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.85) !important; }