/* ============ JOMBASTIC — motion & effects layer ============
   Everything here is transform/opacity based. Disabled under
   prefers-reduced-motion (see bottom) and when body has .fx-off. */

/* ---------- intro (home, once per session) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
}
.intro-half {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: radial-gradient(120% 90% at 50% 100%, #2a0535 0%, #0c0218 55%, #07010f 100%);
}
.intro-top { top: 0; }
.intro-bottom { bottom: 0; background: radial-gradient(120% 90% at 50% 0%, #2a0535 0%, #0c0218 55%, #07010f 100%); }
.intro-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(237, 0, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 0, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 100%);
  opacity: 0;
  animation: introGrid 1.6s ease-out 0.1s forwards;
}
.intro-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, #ff6bff 20%, #fff 50%, #ff6bff 80%, transparent);
  box-shadow: 0 0 12px #ed00ff, 0 0 40px #ed00ff, 0 0 90px rgba(237, 0, 255, 0.7);
  transform: scaleX(0);
  opacity: 0;
}
.intro-logo {
  position: relative;
  width: min(70vw, 820px);
  filter: drop-shadow(0 0 30px rgba(237, 0, 255, 0.5));
  transform: scale(0.35);
  opacity: 0;
  will-change: transform, opacity, filter;
}
.intro-logo img { width: 100%; height: auto; }
.intro-shine {
  position: absolute;
  inset: -10% -40%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-80%);
  opacity: 0;
  pointer-events: none;
}
.intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 40% at 50% 50%, rgba(255, 210, 255, 0.95), rgba(237, 0, 255, 0.35) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.intro-tag {
  position: absolute;
  top: calc(50% + min(12vw, 150px));
  font-size: clamp(14px, 1.6vw, 24px);
  color: #fff;
  letter-spacing: 0.6em;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 120, 255, 0.7);
}
.intro-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 10px 18px;
  min-height: 44px;
  color: #fff;
  font: 600 14px/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(237, 0, 255, 0.6);
  border-radius: 6px;
  background: rgba(12, 2, 24, 0.6);
  opacity: 0;
  animation: fxFade 0.4s ease 0.6s forwards;
}
.intro-skip:hover { background: rgba(237, 0, 255, 0.2); }

/* timeline */
.intro.play .intro-logo { animation: introLogoIn 1s cubic-bezier(0.2, 1.4, 0.3, 1) 0.15s forwards, introLogoOut 0.7s ease-in 2.05s forwards; }
.intro.play .intro-shine { animation: introShine 0.9s ease-in-out 0.95s forwards; }
.intro.play .intro-flash { animation: introFlash 0.7s ease-out 0.85s forwards; }
.intro.play .intro-tag { animation: introTag 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 1.05s forwards, fxFadeOut 0.3s ease 2.1s forwards; }
.intro.play .intro-line { animation: introLine 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) 1.75s forwards, introLineOut 0.5s ease 2.3s forwards; }
.intro.play .intro-top { animation: introOpenTop 0.85s cubic-bezier(0.7, 0, 0.2, 1) 2.2s forwards; }
.intro.play .intro-bottom { animation: introOpenBottom 0.85s cubic-bezier(0.7, 0, 0.2, 1) 2.2s forwards; }
.intro.play .intro-grid { animation: introGrid 1.6s ease-out 0.1s forwards, fxFadeOut 0.4s ease 2.2s forwards; }
.intro.done { pointer-events: none; }
.intro.skip * { animation-duration: 0.01s !important; animation-delay: 0s !important; }

@keyframes introLogoIn {
  0% { transform: scale(0.35); opacity: 0; filter: blur(24px) drop-shadow(0 0 30px rgba(237, 0, 255, 0.5)); }
  60% { opacity: 1; filter: blur(0) drop-shadow(0 0 30px rgba(237, 0, 255, 0.5)); }
  100% { transform: scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 30px rgba(237, 0, 255, 0.5)); }
}
@keyframes introLogoOut {
  0% { transform: scale(1); opacity: 1; filter: blur(0) drop-shadow(0 0 30px rgba(237, 0, 255, 0.5)); }
  100% { transform: scale(1.6); opacity: 0; filter: blur(14px) drop-shadow(0 0 60px rgba(237, 0, 255, 0.9)); }
}
@keyframes introShine { 0% { transform: translateX(-80%); opacity: 1; } 100% { transform: translateX(80%); opacity: 0; } }
@keyframes introFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes introTag { 0% { opacity: 0; letter-spacing: 0.6em; transform: translateY(14px); } 100% { opacity: 1; letter-spacing: 0.18em; transform: translateY(0); } }
@keyframes introLine { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
@keyframes introLineOut { 0% { opacity: 1; transform: scaleX(1) scaleY(1); } 100% { opacity: 0; transform: scaleX(1) scaleY(6); } }
@keyframes introOpenTop { 0% { transform: translateY(0); } 100% { transform: translateY(-102%); } }
@keyframes introOpenBottom { 0% { transform: translateY(0); } 100% { transform: translateY(102%); } }
@keyframes introGrid { 0% { opacity: 0; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fxFade { to { opacity: 1; } }
@keyframes fxFadeOut { to { opacity: 0; } }

/* ---------- hero entrance + ambience ---------- */
.fx .hero-logo, .fx .hero-tagline, .fx .hero-streak, .fx .hero-desc, .fx .hero-cta, .fx .hero-actions .ac {
  opacity: 0;
}
.fx.hero-in .hero-logo { animation: heroLogo 1.1s cubic-bezier(0.2, 1.1, 0.3, 1) forwards; }
.fx.hero-in .hero-tagline { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.45s forwards; }
.fx.hero-in .hero-streak { animation: streakDraw 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 0.55s forwards; }
.fx.hero-in .hero-desc { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.7s forwards; }
.fx.hero-in .hero-cta { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.85s forwards; }
.fx.hero-in .hero-actions .ac:nth-child(1) { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 1s forwards; }
.fx.hero-in .hero-actions .ac:nth-child(2) { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 1.12s forwards; }
.fx.hero-in .hero-actions .ac:nth-child(3) { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 1.24s forwards; }
@keyframes heroLogo {
  0% { opacity: 0; transform: scale(1.25) translateY(-20px); filter: blur(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes fxUp { 0% { opacity: 0; transform: translateY(32px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes streakDraw { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } }

.fx.hero-in .hero-logo img { animation: logoFloat 6s ease-in-out 1.2s infinite; }
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(255, 80, 255, 0)); }
  50% { transform: translateY(-8px); filter: drop-shadow(0 10px 28px rgba(255, 60, 255, 0.35)); }
}
.fx .hero-streak::after {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(1px);
  opacity: 0.9;
  animation: streakScan 3.4s ease-in-out 1.6s infinite;
}
.fx .hero-streak { position: relative; }
@keyframes streakScan { 0% { left: -20%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 102%; opacity: 0; } }
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-inner { z-index: 1; }

/* ---------- scroll reveal ---------- */
.fx .fx-reveal { opacity: 0; transform: translateY(36px); }
.fx .fx-reveal.fx-in { animation: fxReveal 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; animation-delay: var(--fx-delay, 0s); }
@keyframes fxReveal { 0% { opacity: 0; transform: translateY(36px); } 100% { opacity: 1; transform: translateY(0); } }
.fx .pod.fx-reveal { transform: translateY(70px) scale(0.92); }
.fx .pod.fx-reveal.fx-in { animation-name: podIn; animation-duration: 0.9s; }
@keyframes podIn { 0% { opacity: 0; transform: translateY(70px) scale(0.92); } 70% { transform: translateY(-6px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* neon frames draw themselves on reveal */
.fx .fx-reveal .nf-svg path.nf-outline, .fx .nf.fx-reveal .nf-svg path.nf-outline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx .fx-in .nf-svg path.nf-outline, .fx .nf.fx-in .nf-svg path.nf-outline { animation: nfDraw 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--fx-delay, 0s) + 0.1s); }
@keyframes nfDraw { to { stroke-dashoffset: 0; } }
.fx .fx-reveal .nf-svg path.nf-tri, .fx .fx-reveal .nf-svg circle { opacity: 0; }
.fx .fx-in .nf-svg path.nf-tri, .fx .fx-in .nf-svg circle { animation: fxFade 0.4s ease forwards; animation-delay: calc(var(--fx-delay, 0s) + 0.9s); }

/* ---------- glow pulses & shimmer ---------- */
.fx .sh-brand img { animation: brandPulse 4s ease-in-out infinite; }
@keyframes brandPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 60, 255, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 60, 255, 0.55)); } }

.fx .sec-title .accent, .fx .lb-subhead .accent, .fx .hero-cta .accent, .fx .admin-head .accent, .fx .panel-title .accent {
  background: linear-gradient(90deg, #ed00ff 0%, #ff9dff 35%, #fff 50%, #ff9dff 65%, #ed00ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(237, 0, 255, 0.55));
  animation: shimmer 3.2s linear infinite;
}
.fx .hero-cta .accent { background-image: linear-gradient(90deg, #ff009d 0%, #ff7ac8 35%, #fff 50%, #ff7ac8 65%, #ff009d 100%); filter: drop-shadow(0 0 10px rgba(255, 0, 157, 0.6)); }
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.fx .sh-nav a::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.fx .sh-nav a:not(.active):hover::before { transform: scaleX(1); }
.fx .sh-nav a.active::after { animation: underlineIn 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes underlineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* buttons: shine sweep + press */
.fx .nb, .fx .btn-login, .fx .ac { overflow: hidden; }
.fx .btn-login { position: relative; }
.fx .nb::after, .fx .btn-login::after, .fx .ac::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -40%;
  width: 35%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
  opacity: 0;
}
.fx .nb:hover::after, .fx .btn-login:hover::after, .fx .ac:hover::after { animation: btnShine 0.7s ease forwards; }
@keyframes btnShine { 0% { opacity: 1; transform: skewX(-20deg) translateX(0); } 100% { opacity: 0; transform: skewX(-20deg) translateX(450%); } }
.fx .nb, .fx .ac, .fx .sl-orb, .fx .lb-tab-btn, .fx .code-copy, .fx .slot-add { transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.18s, filter 0.18s, background-color 0.18s; }
.fx .nb:hover:not(:disabled):not([aria-disabled="true"]), .fx .ac:hover { transform: translateY(-2px); }
.fx .nb:active:not(:disabled), .fx .ac:active { transform: translateY(0) scale(0.98); }
.fx .nb-join:not(:disabled) { animation: joinPulse 2.4s ease-in-out infinite; }
@keyframes joinPulse {
  0%, 100% { box-shadow: 0 0 2px #fff, 0 0 8px #ed00ff, 0 0 20px rgba(237, 0, 255, 0.55), inset 0 0 12px rgba(237, 0, 255, 0.35); }
  50% { box-shadow: 0 0 3px #fff, 0 0 16px #ed00ff, 0 0 44px rgba(237, 0, 255, 0.8), inset 0 0 18px rgba(237, 0, 255, 0.5); }
}

/* action cards: icon wiggle + chevron slide */
.fx .ac .ac-chev { transition: transform 0.2s; }
.fx .ac:hover .ac-chev { transform: translateX(6px); }
.fx .ac:hover .ac-icon { animation: iconPop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1); }
@keyframes iconPop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }

/* cards hover lift */
.fx .pc, .fx .vc .vc-frame, .fx .slot, .fx .pod { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1); }
.fx .pc:hover, .fx .slot:hover { transform: translateY(-4px); }
.fx .vc:hover .vc-frame { transform: translateY(-4px) scale(1.01); }
.fx .vc-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(237, 0, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
}
.fx .vc-thumb::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(237, 0, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l9 6-9 6z' fill='%23fff'/%3E%3C/svg%3E") center / 32px no-repeat;
  box-shadow: 0 0 20px #ed00ff;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.3, 1), opacity 0.25s;
  z-index: 1;
}
.fx .vc:hover .vc-thumb::before { transform: scale(1); opacity: 1; }
.fx .vc:hover .vc-thumb::after { opacity: 1; }

/* socials: orbit ring + streak pulse */
.fx .sl-orb { position: relative; }
.fx .sl-orb::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 120, 255, 0.8);
  opacity: 0;
  transform: scale(0.8);
}
.fx .sl:hover .sl-orb::before { animation: ring 0.9s ease-out infinite; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5); } }
.fx .sl:hover .sl-orb { transform: scale(1.08) rotate(-6deg); }
.fx .sl-orb-wrap::before, .fx .sl-orb-wrap::after { animation: streakPulse 2.6s ease-in-out infinite; }
.fx .sl:nth-child(2) .sl-orb-wrap::before, .fx .sl:nth-child(2) .sl-orb-wrap::after { animation-delay: 0.4s; }
.fx .sl:nth-child(3) .sl-orb-wrap::before, .fx .sl:nth-child(3) .sl-orb-wrap::after { animation-delay: 0.8s; }
.fx .sl:nth-child(4) .sl-orb-wrap::before, .fx .sl:nth-child(4) .sl-orb-wrap::after { animation-delay: 1.2s; }
@keyframes streakPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* glow line sweep */
.fx .glow-line { overflow: visible; }
.fx .glow-line::after {
  content: '';
  position: absolute;
  top: -2px; bottom: -2px;
  left: 0;
  width: 12%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: streakScan 4s linear infinite;
}

/* ---------- copy burst ---------- */
.fx-spark {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff8dff;
  box-shadow: 0 0 8px #ed00ff;
  pointer-events: none;
  z-index: 999;
  animation: spark 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
.fx .code-value.fx-pop { animation: codePop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1); }
@keyframes codePop { 0% { transform: scale(1); } 40% { transform: scale(1.2); text-shadow: 0 0 20px #ff8dff, 0 0 40px #ed00ff; } 100% { transform: scale(1); } }

/* ---------- leaderboards ---------- */
.fx .pod-1 .pod-laurel { animation: laurelGlow 3s ease-in-out infinite; }
@keyframes laurelGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 120, 255, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 120, 255, 0.8)); } }
.fx .pod-1 .pod-rank { animation: goldPulse 2.4s ease-in-out infinite; }
@keyframes goldPulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 196, 0, 0.7)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 196, 0, 1)); } }
.fx .pod-prize-val .coin, .fx .pod-val .coin { animation: coinSpin 4s ease-in-out infinite; }
@keyframes coinSpin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.fx .cd-num { display: inline-block; }
.fx .cd-num.tick { animation: tick 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes tick { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.fx .lb-tab-btn[aria-selected="true"] { animation: tabGlow 2.6s ease-in-out infinite; }
@keyframes tabGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* ---------- giveaways ---------- */
.fx .gc-art { transition: transform 0.15s ease-out; will-change: transform; }
.fx .slot-art.silhouette { animation: slotBreathe 4s ease-in-out infinite; }
@keyframes slotBreathe { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.5; } }
.fx .slot-add { animation: addPulse 2s ease-in-out infinite; }
@keyframes addPulse { 0%, 100% { box-shadow: 0 0 8px rgba(237, 0, 255, 0.6), inset 0 0 8px rgba(237, 0, 255, 0.2); } 50% { box-shadow: 0 0 18px rgba(237, 0, 255, 1), inset 0 0 12px rgba(237, 0, 255, 0.4); } }

/* ---------- page background breathing + cursor light ---------- */
.fx .page-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 30% at 50% 73%, rgba(237, 0, 255, 0.22), transparent 70%);
  animation: breathe 5s ease-in-out infinite;
  z-index: 0;
}
.fx .page-inner > * { position: relative; z-index: 1; }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.cursor-glow {
  position: fixed;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 0, 255, 0.16), rgba(237, 0, 255, 0.05) 40%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  transition: opacity 0.4s;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ---------- page load ---------- */
.fx main { animation: pageIn 0.6s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.fx .pt img { animation: titleIn 0.9s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
@keyframes titleIn { 0% { opacity: 0; transform: scale(1.3); filter: blur(14px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
.fx .pt-sub { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.3s both; }

/* ---------- reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .fx .fx-reveal, .fx .hero-logo, .fx .hero-tagline, .fx .hero-streak, .fx .hero-desc, .fx .hero-cta, .fx .hero-actions .ac { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fx *, .fx *::before, .fx *::after { animation: none !important; transition: none !important; }
  .fx .nf-svg path.nf-outline { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .fx .nf-svg path.nf-tri, .fx .nf-svg circle { opacity: 1 !important; }
  .cursor-glow, .hero-particles { display: none !important; }
}

/* =====================================================================
   Kick Live page motion
   ===================================================================== */
/* horizon breathing + floor sheen */
.fx .kl-page::before { content: ''; position: absolute; left: 0; right: 0; top: calc(560 * var(--u)); height: calc(260 * var(--u)); z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 45%, rgba(255, 0, 200, 0.28), rgba(255, 0, 200, 0) 70%); animation: klHorizon 5s ease-in-out infinite; }
@keyframes klHorizon { 0%, 100% { opacity: 0.5; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.08); } }
.fx .page-inner > .hero-particles, .fx .kl-page > .hero-particles { position: absolute; inset: 0; z-index: 0; display: block; }

/* main panel: frame draws, then the columns cascade in */
.fx .kl-main.fx-reveal .kl-left > *, .fx .kl-main.fx-reveal .kl-right > * { opacity: 0; }
.fx .kl-main.fx-in .kl-left > *, .fx .kl-main.fx-in .kl-right > * { animation: fxUp 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.fx .kl-main.fx-in .kl-left > :nth-child(1) { animation-delay: 0.35s; }
.fx .kl-main.fx-in .kl-left > :nth-child(2) { animation-delay: 0.45s; }
.fx .kl-main.fx-in .kl-left > :nth-child(3) { animation-delay: 0.55s; }
.fx .kl-main.fx-in .kl-left > :nth-child(4) { animation-delay: 0.65s; }
.fx .kl-main.fx-in .kl-left > :nth-child(5) { animation-delay: 0.75s; }
.fx .kl-main.fx-in .kl-left > :nth-child(6) { animation-delay: 0.85s; }
.fx .kl-main.fx-in .kl-right > :nth-child(1) { animation-delay: 0.5s; animation-name: klPreviewIn; animation-duration: 0.9s; }
.fx .kl-main.fx-in .kl-right > :nth-child(2) { animation-delay: 0.85s; }
@keyframes klPreviewIn { 0% { opacity: 0; transform: translateY(24px) scale(0.96); filter: brightness(2) blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

/* headline chrome sweep */
.fx .kl-head span { background-size: 100% 300%; }
.fx .kl-head .w { animation: klChrome 5.5s ease-in-out infinite; }
.fx .kl-head .g { animation: klChrome 5.5s ease-in-out 0.6s infinite; }
@keyframes klChrome { 0%, 100% { background-position: 50% 0%; } 50% { background-position: 50% 60%; } }

/* pill + badges */
.fx .kl-pill { animation: klPillGlow 2.8s ease-in-out infinite; }
@keyframes klPillGlow { 0%, 100% { box-shadow: 0 0 8px rgba(83, 252, 24, 0.45), inset 0 0 8px rgba(83, 252, 24, 0.15); } 50% { box-shadow: 0 0 16px rgba(83, 252, 24, 0.85), inset 0 0 12px rgba(83, 252, 24, 0.3); } }
.fx .kl-badge.pop { animation: klPop 0.5s cubic-bezier(0.2, 1.4, 0.3, 1); }
@keyframes klPop { 0% { transform: scale(0.9); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* tiles */
.fx .kl-tile { transition: box-shadow 0.18s, transform 0.18s; }
.fx .kl-tile:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(237, 0, 255, 0.8), 0 0 28px rgba(237, 0, 255, 0.35), inset 0 0 14px rgba(237, 0, 255, 0.18); }
.fx .kl-cd-value { display: inline-block; }
.fx .kl-cd-value.tick { animation: tick 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
.fx .kl-tile .ico { animation: klIconBreathe 3s ease-in-out infinite; }
@keyframes klIconBreathe { 0%, 100% { filter: drop-shadow(0 0 4px rgba(237, 0, 255, 0.5)); } 50% { filter: drop-shadow(0 0 10px rgba(237, 0, 255, 0.95)); } }

/* giveaway strip: amount glow + sweeping shine */
.fx .kl-giveaway { overflow: hidden; }
.fx .kl-giveaway-amt { animation: klGreenText 2.4s ease-in-out infinite; }
@keyframes klGreenText { 0%, 100% { text-shadow: 0 0 8px rgba(83, 252, 24, 0.45); } 50% { text-shadow: 0 0 16px rgba(83, 252, 24, 0.95), 0 0 30px rgba(83, 252, 24, 0.5); } }
.fx .kl-giveaway::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); transform: skewX(-20deg); animation: klSweep 4.5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes klSweep { 0% { left: -30%; } 40%, 100% { left: 130%; } }

/* preview: slow tunnel drift, corner flicker, wordmark glow */
.fx .kl-tunnel { animation: klTunnel 18s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes klTunnel { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
.fx .kl-corner::before, .fx .kl-corner::after { animation: klCorner 2.2s ease-in-out infinite; }
.fx .kl-corner.tr::before, .fx .kl-corner.tr::after, .fx .kl-corner.bl::before, .fx .kl-corner.bl::after { animation-delay: 1.1s; }
@keyframes klCorner { 0%, 100% { opacity: 0.7; box-shadow: 0 0 4px var(--c); } 50% { opacity: 1; box-shadow: 0 0 12px var(--c), 0 0 22px var(--c); } }
.fx .kl-liveon { animation: klLetter 1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.9s both; }
@keyframes klLetter { 0% { opacity: 0; letter-spacing: 0.8em; } 100% { opacity: 1; letter-spacing: 0.32em; } }
.fx .kl-wordmark { animation: klWord 3s ease-in-out infinite; }
@keyframes klWord { 0%, 100% { filter: drop-shadow(0 0 6px rgba(83, 252, 24, 0.8)) drop-shadow(0 0 14px rgba(83, 252, 24, 0.35)); } 50% { filter: drop-shadow(0 0 10px rgba(83, 252, 24, 1)) drop-shadow(0 0 30px rgba(83, 252, 24, 0.7)); } }
.fx .kl-preview::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 3px, rgba(0, 0, 0, 0.12) 3px 4px); opacity: 0.6; }
.fx .kl-player { animation: fxFade 0.6s ease both; opacity: 0; }

/* buttons + cards */
.fx .kl-btn, .fx .kl-card { overflow: hidden; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1), filter 0.18s; }
.fx .kl-btn::after, .fx .kl-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.fx .kl-btn:hover::after, .fx .kl-card:hover::after { animation: btnShine 0.7s ease forwards; }
.fx .kl-btn:hover, .fx .kl-card:hover { transform: translateY(-2px); }
.fx .kl-btn:active, .fx .kl-card:active { transform: translateY(0) scale(0.98); }
.fx .kl-btn-chev, .fx .kl-card-chev { transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1); }
.fx .kl-btn:hover .kl-btn-chev, .fx .kl-card:hover .kl-card-chev { transform: translateX(5px); }
.fx .kl-card:hover .ico:first-child { animation: iconPop 0.5s ease; }
.fx .kl-btn-green .nf-svg { animation: klGreenFrame 2.6s ease-in-out infinite; }
@keyframes klGreenFrame { 0%, 100% { filter: drop-shadow(0 0 3px rgba(83, 252, 24, 0.9)) drop-shadow(0 0 10px rgba(83, 252, 24, 0.45)); } 50% { filter: drop-shadow(0 0 5px rgba(170, 255, 130, 1)) drop-shadow(0 0 20px rgba(83, 252, 24, 0.8)); } }
.fx .kl-btn-green .ico:first-child { animation: klKickBounce 2.6s ease-in-out infinite; }
@keyframes klKickBounce { 0%, 85%, 100% { transform: none; } 90% { transform: scale(1.18) rotate(-6deg); } 95% { transform: scale(1.05) rotate(3deg); } }
.fx .kl-benefit .ico { transition: transform 0.2s; }
.fx .kl-benefit:hover .ico { transform: scale(1.2); }

/* schedule dialog */
.fx .kl-modal[open] .kl-modal-inner { animation: klModal 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.fx .kl-modal[open]::backdrop { animation: fxFade 0.3s ease both; opacity: 0; }
@keyframes klModal { 0% { opacity: 0; transform: translateY(24px) scale(0.94); } 100% { opacity: 1; transform: none; } }

/* admin tabs */
.fx .admin-tab { transition: color 0.18s, background-color 0.18s, box-shadow 0.18s; }
.fx .admin-panel.fx-reveal { transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .fx .kl-main .kl-left > *, .fx .kl-main .kl-right > *, .fx .kl-player, .fx .kl-liveon { opacity: 1 !important; animation: none !important; }
  .fx .kl-page::before, .fx .kl-preview::after, .fx .kl-giveaway::after { display: none !important; }
}

/* push bell */
.fx .sh-bell.ping .ico { animation: bellRing 0.9s ease; }
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-18deg); } 30% { transform: rotate(16deg); } 45% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
.fx .sh-bell.on .sh-bell-dot { animation: klPulse 2s ease-in-out infinite; }
.fx .sh-bell:hover .ico { animation: bellRing 0.9s ease; }

/* ---------- page transition (sfx.js adds body.page-leave before navigating) ---------- */
body.page-leave { pointer-events: none; }
body.page-leave .sh, body.page-leave main, body.page-leave .sf { animation: pageLeave 0.26s cubic-bezier(0.6, 0, 0.9, 0.4) forwards; }
body.page-leave::after { content: ''; position: fixed; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(180deg, rgba(237, 0, 255, 0) 0%, rgba(237, 0, 255, 0.22) 50%, rgba(237, 0, 255, 0) 100%), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 4px); animation: pageLeaveScan 0.26s linear forwards; }
@keyframes pageLeave { to { opacity: 0; transform: scale(0.985) translateY(-6px); filter: blur(3px) saturate(1.6); } }
@keyframes pageLeaveScan { from { opacity: 0; transform: translateY(-100%); } 40% { opacity: 1; } to { opacity: 0.6; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { body.page-leave .sh, body.page-leave main, body.page-leave .sf, body.page-leave::after { animation: none; } }